/* ============ FLASH-OF-ARABIC FIX (2026-05-15) ============
   Source HTML still contains Arabic strings (data-i18n + visible AR text).
   With AR temporarily disabled, every page would briefly show that AR
   markup before i18n.js swapped it for EN. This hides <body> until i18n
   sets html.fb-i18n-ready (or until the 1.5s safety timeout in i18n.js).
   Critical: keep the rule SHORT and BEFORE any content layout rules so
   the browser parses it before painting. */
html:not(.fb-i18n-ready) body { visibility: hidden !important; }
/* ⛔⛔⛔ ٢٠٢٦-١٠-٠٣ — **فيديو الواجهةِ مستثنًى من هذا الإخفاءِ عمداً.**
   الإخفاءُ موضوعٌ لمنعِ ومضةِ نصٍّ غيرِ مترجَم. والفيديو **خلفيّةٌ صامتةٌ
   بلا كلمةٍ واحدةٍ تُترجَم** — فلا سببَ لإخفائِه معها إطلاقاً.
   وثمنُ إخفائِه فادح: سفاري الآيفونِ يرفضُ تشغيلَ مقطعٍ عنصرُه مخفيٌّ
   بخاصّيّةِ الظهور، وسببُ الرفضِ عندَه «غيرُ مرئيّ». فكانت كلُّ محاولةٍ
   تقعُ في تلك النافذةِ محكومةً بالفشل، ولا يعملُ المقطعُ حتّى يلمسَ الزائرُ.
   ⚠️ والاستثناءُ لا يمسُّ حارسَ الومضةِ بشيء: النصوصُ تبقى مخفيّةً كما كانت. */
html:not(.fb-i18n-ready) body .hero-video,
html:not(.fb-i18n-ready) body .hero-video-veil { visibility: visible !important; }

/* ============ Disable zoom on touch devices ============ */
html {
  /* 2026-06-06: كانت pan-x pan-y — السماح الصريح بالسحب الأفقي هو ما كان
     يترجم أي فيض ولو نقطة واحدة (هيدر/كرات) إلى انزلاق الصفحة يميناً
     ويساراً على iOS. pan-y وحدها: تمرير عمودي فقط على مستوى الصفحة،
     والقوائم القابلة للتمرير الأفقي داخلياً لا تتأثر (لها تمريرها الخاص)،
     وقفل التكبير يبقى كما هو (pinch ممنوع في الحالتين). */
  touch-action: pan-y;
  -ms-touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* {
  -webkit-touch-callout: none;
}
input, textarea, select {
  font-size: 16px !important; /* prevents iOS auto-zoom on focus */
}

:root {
  --bg-primary: #0A0E1A;
  --bg-secondary: #0F1320;
  --bg-tertiary: #151A2E;
  --bg-card: #131829;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.12);
  --text-primary: #FFFFFF;
  --text-secondary: #A0A8C0;
  --text-muted: #5C6480;
  --accent-gold: #FFB800;
  --accent-gold-dim: #FFB80022;
  --accent-green: #00FF87;
  --accent-green-dim: #00FF8722;
  --accent-red: #FF3B5C;
  --accent-red-dim: #FF3B5C22;
  --accent-blue: #4D7FFF;
  --grid-line: rgba(255, 184, 0, 0.04);
  --font-display: 'Space Grotesk', 'Tajawal', sans-serif;
  --font-body: 'Inter', 'Tajawal', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-arabic: 'Tajawal', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

html[lang="ar"] body {
  font-family: var(--font-arabic);
}

/* عناصر النماذج (خاصة <button>) لا ترث خطّ الـbody تلقائياً في المتصفحات،
   فتظهر بخط النظام بدل Tajawal في الوضع العربي. نفرض الوراثة للتوحيد. */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

/* 2026-06-04 (تفعيل العربية): في الوضع العربي نفرض Tajawal على كل المتغيّرات —
   العناوين كانت تستخدم Space Grotesk (لا يدعم العربية) فتسقط لخط النظام بدل
   Tajawal، فيظهر العربي بخطّين مختلفين. هذا يوحّد الخط العربي في كل العناصر. */
html[lang="ar"] {
  --font-display: 'Tajawal', sans-serif;
  --font-body: 'Tajawal', sans-serif;
  /* 2026-06-04: الشارات النصّية (ربح مؤمّن/تعادل/طلب الإغلاق) تستخدم var(--font-mono)
     وJetBrains Mono لا يدعم العربية فتسقط لخط النظام. إضافة Tajawal fallback يوحّدها
     مع بقية العربي، والأرقام اللاتينية تبقى بـ mono كما هي. */
  --font-mono: 'JetBrains Mono', 'Tajawal', monospace;
}
/* قوائم المدونة العربية: النقاط على اليمين (RTL) بدل اليسار */
[data-blog-lang="ar"] ul,
[data-blog-lang="ar"] ol {
  padding-right: 1.6em;
  padding-left: 0;
  list-style-position: outside;
}
[data-blog-lang="ar"] li { text-align: right; }

/* Grid background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Glow orbs */
/* 2026-06-06 (تشخيص متصفح حقيقي): الكرات كانت position:fixed وتمتد عمداً
   خارج حافة الشاشة (الذهبية 200 نقطة يميناً والخضراء 100 يساراً)، وعناصر
   fixed لا يقصّها overflow-x الخاص بالجسم — فكان iOS يعتبر الصفحة أعرض
   من الشاشة ويسمح بسحبها يميناً/يساراً منذ البداية. الحل: حاوية fb-orbs
   ثابتة بحجم الشاشة بالضبط تقصّ ما يتجاوزها، والكرات absolute داخلها
   بنفس إحداثياتها — الشكل مطابق ١٠٠٪ لأن الجزء المقصوص لم يكن مرئياً. */
.fb-orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.fb-orbs .orb { position: absolute; }

.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

.orb-gold {
  width: 500px;
  height: 500px;
  background: var(--accent-gold);
  top: -200px;
  right: -200px;
  animation: float 20s ease-in-out infinite;
}

.orb-green {
  width: 400px;
  height: 400px;
  background: var(--accent-green);
  bottom: 10%;
  left: -100px;
  animation: float 25s ease-in-out infinite reverse;
  opacity: 0.2;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* =================== NAV =================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 14, 26, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  /* 2026-06-06: أُزيل «overflow: clip visible» — سفاري iOS يقصّ المحورين
     معه فتختفي القوائم المنسدلة (اللغة/قائمة الجوال) خلف الهيدر.
     الحماية من السحب الأفقي تأتي من حاوية fb-orbs + اتساع الصف، لا من هنا. */
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  text-decoration: none;
}

.logo-mark {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Wordmark stays visible on every breakpoint — we shrink the other
   navbar bits below so "ForexBro" never gets clipped. */
.logo-text {
  white-space: nowrap;
  /* 2026-06-06: خط تجوّل يحجز مساحة هابطة كبيرة فيسكن اللاتيني أعلى
     صندوق سطره وتطلع "ForexBro" مرتفعة عن مركز الأيقونة بصرياً —
     line-height:1 يشدّ الصندوق على الحروف، والإزاحة بوحدة em تعيد
     التوسيط البصري وتتدرّج تلقائياً مع أي حجم خط. */
  line-height: 1;
  display: inline-block;
  transform: translateY(0.14em);
}

/* ── Mobile navbar: keep wordmark + icon at readable sizes ────────
   On screens ≤ 640px we shrink the lang pill + CTAs (NOT the logo)
   so "ForexBro" stays legibly sized. */
@media (max-width: 640px) {
  .nav-inner { gap: 8px !important; padding-inline: 12px; }
  /* ⚠️ ٢٠٢٦-١٠-٠٢ (أمر المالك: «الشعارُ صغيرٌ وشكلُه سيّئ») — كُبِّرَ الاثنان. */
  .logo { gap: 11px; font-size: 29px; }
  .logo-mark { width: 50px; height: 50px; }
  .lang-toggle { padding: 3px 6px; gap: 4px; font-size: 11px; }
  .lang-toggle span { padding: 4px 9px; font-size: 11.5px; }
  /* Compress Login + Start Now without making them tiny. */
  .nav-inner .btn,
  .nav-inner .btn-primary,
  .nav-inner .btn-ghost {
    padding: 8px 14px !important;
    font-size: 13.5px !important;
  }
}
@media (max-width: 480px) {
  .logo { font-size: 27px; gap: 10px; }
  .logo-mark { width: 46px; height: 46px; }
  .lang-toggle span[data-lang="ar"] .lang-soon,
  .lang-toggle .lang-soon { display: none; }
  /* 2026-06-06 (نمط eToro): «تسجيل الدخول» عاد للشريط كرابط نصّي نحيف —
     الزر الذهبي انتقل لأسفل اللوحة المنسلقة فاتّسع الصف بلا إخفاء.
     (قاعدة الإخفاء القديمة أُزيلت؛ تنسيق الرابط في mobile-fixes.css) */
  .nav-inner .btn-primary { padding: 8px 12px !important; font-size: 13px !important; }
  /* زر اللغة المنسدل أنحف قليلاً ليتسع الصف وزر القائمة كاملاً حتى
     في حالة تسجيل الدخول (زر «لوحة التحكم» الأطول). */
  .nav-right .lang-dd-trigger { padding: 6px 8px !important; font-size: 11.5px !important; gap: 4px !important; }
  .nav-right .lang-dd-trigger .lang-dd-globe { display: none !important; }
}

.nav-links {
  display: flex;
  align-items: center;
  /* 2026-06-06: كانت 32 — المحتوى الكامل بالخط المحمّل كان يشغل 1225 من
     1232 نقطة متاحة (هامش ٧ نقاط فقط!) فأي فرق تقريب أو نسخة كاش يقلبه
     للتصادم فجأة على نفس الشاشة. 26 ترفع الهامش إلى ٥٥+ نقطة بفرق غير
     محسوس بصرياً على الشاشات الواسعة. */
  gap: 26px;
}

/* ⚠️ 2026-08-28 (طلب المالك): أكبرُ قليلاً وأبيضُ وأمتنُ — بلا زيادةِ ارتفاع
   الشريط. لذلك لا تُمسّ الحشوةُ ولا ارتفاعُ السطر، الزيادةُ في الخطّ ووزنه فقط. */
.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  transition: color 0.2s;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-toggle {
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 3px;
  font-size: 12px;
  font-weight: 600;
}

.lang-toggle span {
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  color: var(--text-muted);
  transition: all 0.2s;
}

.lang-toggle span.active {
  background: var(--accent-gold);
  color: var(--bg-primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #FF8A00 100%);
  color: var(--bg-primary);
  box-shadow: 0 0 0 1px rgba(255, 184, 0, 0.4), 0 10px 30px -10px rgba(255, 184, 0, 0.5);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 184, 0, 0.6), 0 15px 35px -10px rgba(255, 184, 0, 0.7);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.btn-ghost:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-gold);
}

.btn-lg {
  padding: 16px 28px;
  font-size: 15px;
}

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px;
}

/* =================== HERO =================== */
.hero {
  padding: 160px 0 80px;
  position: relative;
  overflow: hidden;
  /* ⚠️ ٢٠٢٦-١٠-٠٢ — `isolation` يحبسُ طبقاتِ الفيديوِ السالبةَ داخلَ الهيرو،
     فلا تنزلقُ خلفَ خلفيّةِ الصفحةِ فتختفي. منهجُ موقعِ خوارزمَ نفسُه. */
  isolation: isolate;
}

/* ══════════════════════════════════════════════════════════════════════════
   خلفيّةُ فيديو الهيرو — ٢٠٢٦-١٠-٠٢ (أمر المالك)
   ⚠️ تُركَّب **خلفَ** المحتوى لا فوقَه: `z-index: 0` للفيديو و`1` للحاوية،
      فيبقى العنوانُ وزرّا المتجرِ وبطاقةُ الإشارةِ فوقَه ويُضغَطان عادةً.
   ⛔ وطبقةُ تعتيمٍ فوقَ الفيديو **لازمةٌ لا زينة**: بلا هذا يختلطُ النصُّ
      الأبيضُ بالمواضعِ الفاتحةِ من الفيديو فيضيعُ على بعضِ الإطارات.
      والتدرّجُ أثقلُ في الأعلى حيث يقعُ العنوانُ وأخفُّ في الأسفل.
   ⚠️ والعنصرُ `object-fit: cover` يملأُ المساحةَ ويقصُّ الفائضَ — فلا يتشوّه
      المقطعُ مهما اختلفت نسبةُ الشاشة. ══════════════════════════════════════ */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ⚠️⚠️⚠️ ٢٠٢٦-١٠-٠٢ (أمر المالك: «متمدّد والجودة سيّئة وغير متوسّط») —
     **ثلاثتُها من عندي، وأُصلحت بمنهجِ موقعِ خوارزمِ المُجرَّب.**
     ⛔ الإزاحةُ المخصّصةُ حُذفت: `cover` يتوسّطُ وحدَه، وكلُّ إزاحةٍ تدفعُ المشهدَ
        عن مركزِه فيبدو «نازلاً». خوارزمُ لا يستعملُ إزاحةً إطلاقاً.
     ⚠️ والتمدّدُ ليس عطبَ تركيبٍ بل حقيقةُ شاشةٍ عاليةِ الكثافة: عرضُها الفعليُّ
        ضعفُ ما يظهر، فأيُّ مقطعٍ يُمدَّد. وفيديو خوارزمَ ألفٌ ومئتان وثمانون —
        أصغرُ من هذا — ويبدو نظيفاً، **لأنّ التعتيمَ الثقيلَ يُخفي التمدّد**.
     ✅ فالعلاجُ طبقتان: نسخةٌ أعلى للشاشاتِ الكثيفة، وتعتيمٌ بمستوى خوارزم.
     ⛔ ولا يُخفَّف هذا التعتيمُ بحجّةِ «إظهارِ الفيديو أكثر»: الواجهةُ عنوانٌ
        أوّلاً وخلفيّةٌ ثانياً، ومتى نافسَ الفيديو العنوانَ سقطَ الاثنان —
        وهو نصُّ الدرسِ المكتوبِ في موقعِ خوارزمَ بعدَ قياسِ سطوعِ إطاراتِه. */
  z-index: -3;
  pointer-events: none;
}
.hero-video-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* ⚠️⚠️ ٢٠٢٦-١٠-٠٢ — **القيمُ مقيسةٌ على هذا المقطعِ بعينِه لا منقولة.**
     قُرئ سطوعُ ستّين إطاراً بتحويلِها رماديّةً وحسابِ متوسّطِ بكسلاتِها:
     المتوسّطُ تسعةٌ وثلاثون من مئتين وخمسة وخمسين، والذروةُ تسعةٌ وسبعون،
     وسبعةَ عشرَ بالمئةِ من الإطاراتِ فوقَ الستّين — وهي لقطاتُ الوجوهِ
     والعينِ واليدين، وفيها يضيعُ العنوانُ الأبيضُ بلا تعتيم.
     ✅ وهذا المقطعُ **أغمقُ من سابقِه**: متوسّطُه تسعةٌ وثلاثون لا خمسةٌ وخمسون.
        فخُفّف التعتيمُ عنه — خمسةٌ وثمانون أعلى وخمسةٌ وخمسون وسطاً — فيبقى
        النصُّ حادّاً ويُرى المشهدُ أوضحَ ممّا كان.
     ⛔ ولا يُخفَّف أكثرَ طلباً لوضوحٍ أعلى: سبعةَ عشرَ بالمئةِ من المدّةِ ساطعة،
        فالعنوانُ يضيعُ في سُبعِ الوقتِ ويظهرُ في باقيه — عطبٌ يظهرُ ويختفي
        فيصعبُ على الزائرِ وصفُه وعليك تصديقُه. */
  background: linear-gradient(180deg,
    rgba(4,7,12,.90) 0%,
    rgba(4,7,12,.65) 42%,
    rgba(4,7,12,.85) 100%);
}

/* ⚠️⚠️ ٢٠٢٦-١٠-٠٢ (أمر المالك: «قصٌّ مباشرٌ بلا دمج») — **ذوبانُ الحافّةِ السفلى.**
   ⛔ `overflow: hidden` على الهيرو يقطعُ الفيديوَ بخطٍّ حادٍّ عند حدِّه، فيُرى
      انتقالاً مفاجئاً إلى القسمِ الذي تحتَه. وطبقةُ التعتيمِ وحدَها لا تكفي:
      تُعتِّمُ ولا تذيب.
   ✅ شريطٌ مستقلٌّ في آخرِ مئةٍ وستّين نقطةً يتدرّج من الشفافِ إلى لونِ الخلفيّةِ
      **تماماً** — فتختفي الحافّةُ ويتّصل المشهدُ بما بعدَه بلا خطّ. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,14,26,0) 0%,
    rgba(10,14,26,.55) 45%,
    rgba(10,14,26,.92) 80%,
    var(--bg-primary) 100%);
}
.hero > .container { position: relative; z-index: 1; }

/* ⚠️⚠️ ٢٠٢٦-١٠-٠٢ — **لا يُحجَبُ المشهدُ، تُوقَفُ الحركةُ وحدَها.**
   من يطلبُ تقليلَ الحركةِ في نظامِه لا يُحرَمُ الخلفيّةَ: يُحذَفُ الفيديو من
   السكربتِ فيبقى **غلافُه الساكنُ** ظاهراً — صورةٌ من المقطعِ نفسِه بلا حركة.
   ⛔ والإخفاءُ الكاملُ هنا كان يترك الهيرو أسودَ فارغاً، وهو عقوبةٌ لا تسهيل.
   ⚠️ وآيفونُ يُفعّل هذا الإعدادَ تلقائيّاً مع «تقليل الحركة» في إمكانيّة الوصول —
      وكثيرٌ من الناسِ يفعّلونها ولا يعلمون، فيُحرَمون بلا سبب. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none !important; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* 2026-06-06 (إعادة تصميم بطلب المالك): الشارة كانت كبسولة بخلفية وحدود —
   صارت سطراً تحريرياً فاخراً: نص بتدرّج ذهبي يتنفس، يحفّه خطّان شعريان
   يتلاشيان من الطرفين — بلا كبسولة، بلا حدود، بلا انحناءات. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 24px;
  color: transparent;
  background-image: linear-gradient(100deg, #FFE9A8, #FFB800 45%, #FF9D2E);
  -webkit-background-clip: text;
  background-clip: text;
  animation: heroBadgeBreathe 3.4s ease-in-out infinite;
}

.hero-badge::before,
.hero-badge::after {
  content: "";
  width: 44px;
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 184, 0, 0.8), transparent);
}

@keyframes heroBadgeBreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge { animation: none; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -2px;
  font-weight: 700;
  margin-bottom: 24px;
}

html[lang="ar"] .hero h1 {
  letter-spacing: 0;
  line-height: 1.2;
}

.hero h1 .accent {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #FF8A00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  /* 2026-06-06: قصّ التدرج على الحروف لا يرسم خارج صندوق العنصر —
     متصفح آيفون يقصّ نقاط «ش» العلوية مهما كان ارتفاع السطر. التوسعة
     بحشوة علوية/سفلية مع هامش سالب مكافئ تكبّر منطقة الرسم دون تحريك
     التخطيط مللي واحداً — علاج جذري لا يعتمد على مقاييس الخط. */
  padding-top: 0.22em;
  margin-top: -0.22em;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.hero p {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   HERO STATS — interactive cards (2026-05-18 redesign)
   Glass-morphism panels with gold/green accent, icon badge,
   hover glow that matches the brand. Identity preserved:
   gold for primary value, green dot pattern reuses brand colors.
   ═══════════════════════════════════════════════════════════════ */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}

.hero-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px 16px;
  background:
    linear-gradient(160deg, rgba(255,184,0,0.06) 0%, rgba(0,255,135,0.025) 60%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s, box-shadow 0.25s, background 0.25s;
  overflow: hidden;
}
.hero-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,184,0,0.10), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}
.hero-stat::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,184,0,0.35), rgba(0,255,135,0.15) 50%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.hero-stat:hover {
  transform: translateY(-3px);
  border-color: rgba(255,184,0,0.35);
  box-shadow:
    0 14px 32px rgba(255,184,0,0.12),
    0 6px 14px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-stat:hover::after { opacity: 1; }
.hero-stat:hover .hero-stat-icon {
  background: rgba(255,184,0,0.18);
  border-color: rgba(255,184,0,0.55);
  color: #FFB800;
  box-shadow: 0 0 18px rgba(255,184,0,0.28);
}

.hero-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,184,0,0.10);
  border: 1px solid rgba(255,184,0,0.30);
  color: var(--accent-gold);
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
  flex-shrink: 0;
  z-index: 1;
}
/* Unified brand-gold accent on every hero stat (was a rainbow of
   gold / green / purple — read as inconsistent). All three now share
   one accent so the row reads as a single brand block. */

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: -1px;
  line-height: 1.05;
  z-index: 1;
  position: relative;
}
/* numbers all share the brand gold — no per-stat color override */

.hero-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.2px;
  z-index: 1;
  position: relative;
}

/* Hero visual (signal card) */
.hero-visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signal-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 28px;
  position: relative;
  box-shadow: 0 25px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 184, 0, 0.1);
  animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
}

.signal-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--accent-gold) 0%, transparent 50%);
  border-radius: var(--radius-xl);
  opacity: 0.3;
  z-index: -1;
}

.signal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.signal-pair {
  display: flex;
  align-items: center;
  gap: 12px;
}

.signal-pair-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bg-primary);
  font-size: 14px;
  font-family: var(--font-mono);
}

.signal-pair-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.signal-pair-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.signal-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.signal-badge.buy {
  background: var(--accent-green-dim);
  color: var(--accent-green);
  border: 1px solid rgba(0, 255, 135, 0.3);
}

.signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.signal-label {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.signal-dot.entry { background: var(--accent-blue); }
.signal-dot.tp { background: var(--accent-green); }
.signal-dot.sl { background: var(--accent-red); }

.signal-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.signal-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

.signal-live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-green);
  font-weight: 600;
}

.signal-live-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-green);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 10px var(--accent-green);
}

/* Floating mini candles */
.floating-candles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mini-candle {
  position: absolute;
  width: 6px;
  border-radius: 1px;
  opacity: 0.6;
}

/* =================== TICKER =================== */
/* ⚠️ 2026-08-27 — أُزيل تنسيقُ شريط الأسعار الحيّة مع وسمه ومحرّكه. */

/* =================== SECTIONS =================== */
section {
  padding: 100px 0;
  position: relative;
}

.section-eyebrow {
  display: inline-block;
  font-size: 16px;
  color: var(--accent-gold);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 9px 18px;
  line-height: 1.7;
  background: var(--accent-gold-dim);
  border-radius: 6px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 800px;
}

html[lang="ar"] .section-title {
  letter-spacing: 0;
  line-height: 1.3;
}

.section-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 64px;
}

.section-header {
  text-align: center;
  margin: 0 auto;
}

.section-header .section-title,
.section-header .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* =================== FEATURES =================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-medium);
  background: var(--bg-tertiary);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-gold-dim);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--accent-gold);
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

/* =================== PRICING =================== */
.pricing-toggle {
  display: inline-flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 8px;
  margin: 0 auto 16px;
  font-weight: 700;
  font-size: 17px;
  gap: 4px;
}
/* Both pills must occupy equal width so AR (شهري/سنوي) doesn't render
   one button noticeably bigger than the other. */
.pricing-toggle > span {
  flex: 1 1 0;
  text-align: center;
  min-width: 180px;
}

.pricing-toggle-wrap {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: -32px;
  margin-bottom: 12px;
}

/* IMPORTANT: target only DIRECT children of .pricing-toggle. The previous
   descendant selector also matched the inner <span data-i18n="pricing_yearly">
   and the save-badge — giving them their own 10px×24px padding and an
   inline-flex container, which pushed the visible "Yearly" label out of
   its outer pill so the active gold button appeared empty. */
.pricing-toggle > span {
  padding: 16px 36px;
  cursor: pointer;
  border-radius: 12px;
  color: var(--text-primary);
  transition: all 0.2s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.pricing-toggle > span.active {
  background: var(--accent-gold);
  color: var(--bg-primary);
}

/* Inactive toggle pill: visible foreground + subtle hover.
   Must use ">" — otherwise hover bubbles down to the inner
   <span data-i18n="pricing_yearly"> and paints it gold-on-gold
   (invisible) when Yearly is active and the cursor is over it. */
.pricing-toggle > span:not(.active):hover {
  color: var(--accent-gold);
}

/* Save-25% badge — DISPLAY LOGIC:
   The badge floats above the Yearly pill (absolute-positioned) as a small
   sticker, NOT inline next to the Yearly label. This is the standard SaaS
   pricing UX: a small green tag promoting the yearly discount.
   2026-05-17 (final, owner-feedback-driven) — the previous attempts
   (inline + just shrink padding) were the wrong fix. The right fix is the
   POSITIONING LOGIC: lift the badge out of the flex flow entirely. */
.pricing-toggle > span[data-period="yearly"] {
  /* establish positioning context for the absolute badge */
  position: relative;
}

.pricing-toggle .save-badge,
.save-badge {
  position: absolute !important;
  top: -14px !important;
  right: -12px !important;
  left: auto !important;
  background: var(--accent-green) !important;
  color: var(--bg-primary) !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  /* prevent any flex sizing inheritance from the toggle pills */
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  /* small drop-shadow so it visually lifts off the dark toggle */
  box-shadow: 0 4px 10px rgba(0, 255, 135, 0.32);
  pointer-events: none; /* purely decorative — clicks pass through to Yearly */
  z-index: 2;
}

/* RTL: badge sticks to the LEFT corner instead of right */
[dir="rtl"] .pricing-toggle .save-badge,
[dir="rtl"] .save-badge {
  right: auto !important;
  left: -8px !important;
}

/* Save-badge stays visible at all times — owner explicitly wants it as a
   permanent reminder, even when Yearly is the active choice. */


/* =============================================================
   PRICING SECTION — full rebuild 2026-05-26
   Compact cards + comparison table (desktop) / accordion (mobile).
   Replaces the legacy 5-column dense grid + per-card feature list.
   ============================================================= */

/* Trust bar — payment methods + safety cues right above the grid. */
.pricing-trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin: 18px auto 30px;
  padding: 14px 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  max-width: 920px;
}
.pricing-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}
.pricing-trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent-green, #22c55e);
  flex-shrink: 0;
}
.pricing-trust-methods {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ptm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.ptm-visa  { color: #1a1f71; background: #fff; border-color: #fff; }
.ptm-mc    { color: #fff; background: linear-gradient(90deg,#eb001b 50%,#f79e1b 50%); border: none; }
.ptm-ap    { color: #fff; background: #000; border-color: #000; }
.ptm-gp    { color: #fff; background: #4285f4; border-color: #4285f4; }
.ptm-usdt  { color: #fff; background: #26a17b; border-color: #26a17b; }

@media (max-width: 600px) {
  .pricing-trustbar { gap: 10px 16px; padding: 12px 14px; }
  .pricing-trust-item { font-size: 12px; }
}

/* ── Compact cards grid ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* ── Elite bundle savings + per-card yearly savings callout ──────── */
.plan-old-price {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-inline-end: 8px;
  vertical-align: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.plan-old-currency {
  font-size: 13px;
  margin-inline-end: 1px;
}
.plan-yearly-save {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #FFB800;
  text-align: center;
  letter-spacing: 0.2px;
  opacity: 0.85;
}
@media (max-width: 1180px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* "More details" pill on each plan card */
.plan-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 14px;
  padding: 7px 14px;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.18s ease;
  font-family: inherit;
}
.plan-info-btn:hover {
  border-color: rgba(255, 184, 0, 0.45);
  border-style: solid;
  color: var(--accent-gold);
  background: rgba(255, 184, 0, 0.04);
}
.plan-info-btn svg { flex-shrink: 0; opacity: 0.9; }

/* Plan-details modal */
.plan-details-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent-gold);
  background: rgba(255, 184, 0, 0.10);
  border-radius: 999px;
}
.plan-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}
.plan-details-section {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
}
.plan-details-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 8px;
}
.plan-details-section-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.plan-details-section-body strong {
  color: var(--text-primary);
  font-weight: 700;
}
@media (max-width: 540px) {
  .plan-details-grid { grid-template-columns: 1fr; }
}

/* =================== PLAN CARDS — interactive, visually-segmented =================== */
.plan-card {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.025) 0%, transparent 35%),
    var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  /* padding-top reserves the badge slot on Elite. ALL cards share the
     same padding-top so non-featured cards line up perfectly with
     Elite (their badge area is empty whitespace but the rest matches
     pixel-for-pixel). */
  padding: 48px 16px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.28s ease,
              box-shadow 0.28s ease,
              background 0.28s ease;
  isolation: isolate;
  cursor: default;
  /* min-height gives every COLLAPSED card the same visual baseline so
     they look uniform side-by-side. No `height: 100%` though, so when
     a customer clicks "Show more" on one card it grows ABOVE this
     baseline without dragging the siblings up with it. */
  min-height: 620px;
  min-width: 0;
}
.plan-card::before {
  /* Soft top accent stripe — adds visual segmentation between header and body
     and distinguishes featured card without needing a label. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
  transition: background 0.28s ease;
}
.plan-card::after {
  /* Hover-only halo behind the card. */
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: radial-gradient(60% 50% at 50% 0%, rgba(255,184,0,0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  pointer-events: none;
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 184, 0, 0.45);
  box-shadow:
    0 18px 50px -16px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 184, 0, 0.15);
}
.plan-card:hover::before {
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}
.plan-card:hover::after { opacity: 1; }

.plan-card.featured {
  border-color: var(--accent-gold);
  background:
    linear-gradient(160deg, rgba(255,184,0,0.10) 0%, rgba(255,138,0,0.02) 45%, transparent 80%),
    var(--bg-card);
  box-shadow: 0 0 50px -10px rgba(255, 184, 0, 0.18);
}
.plan-card.featured::before {
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

/* (شارةُ البطاقة القديمة plan-badge أُزيلت — التصميمُ الحاليُّ pa-ribbon) */

/* All cards now use padding: 48px 16px 18px (declared above on .plan-card)
   so the Elite badge sits inside its dedicated 48px top zone WITHOUT
   pushing the title down. Non-featured cards have the same 48px top
   zone (empty), which keeps every title / price / Subscribe at the same Y. */

/* ── Section 1: Header (name + tagline) ── */
.plan-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}
.plan-tagline {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border-subtle);
}

/* ── Section 2: Price block ── */
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
}
.plan-price-num {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #C9CDD9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-card.featured .plan-price-num,
.plan-card:hover .plan-price-num {
  background: linear-gradient(135deg, #FFD057 0%, #FF8A00 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.plan-price-currency {
  font-size: 20px;
  color: var(--text-secondary);
  font-weight: 700;
}
.plan-price-period {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border-subtle);
}

/* ── Section 3: Features list ── */
.plan-features {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  flex-grow: 1;
}
.plan-features li {
  padding: 9px 8px;
  margin: 0 -8px;
  font-size: 13.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
}
.plan-features li:hover {
  background: rgba(255, 184, 0, 0.06);
  color: var(--text-primary);
}
.plan-check {
  width: 18px;
  height: 18px;
  background: rgba(0, 199, 107, 0.15);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-green);
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Section 4: Info link ── */
.plan-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  margin: 0 0 14px;
  transition: color 0.18s ease;
}
.plan-info-btn:hover {
  color: var(--accent-gold);
}
.plan-info-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Section 5: CTA ── */
.plan-cta {
  width: 100%;
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 20px;
  letter-spacing: 0.2px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}
.plan-card:hover .plan-cta.btn-ghost {
  background: var(--accent-gold);
  color: var(--bg-primary);
  border-color: var(--accent-gold);
}
.plan-cta:active {
  transform: scale(0.97);
}
.plan-card.featured .plan-cta {
  box-shadow: 0 8px 24px -8px rgba(255, 138, 0, 0.5);
}

/* ─────────────────────────────────────────────────────────────────
   New pricing layout (2026-05-24): "Billed monthly/yearly" label +
   big CTA "Subscribe Now" near the top + "ESSENTIAL FEATURES" list
   + Elite countdown banner.
   ───────────────────────────────────────────────────────────────── */

.plan-billing-period {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin: 2px 0 10px;
  letter-spacing: 0.2px;
}

.plan-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Compact padding so 5 cards in a row don't waste height. */
  padding: 11px 14px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(59, 130, 246, 0.45);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.2s ease;
  margin: 4px 0 6px;
}
.plan-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -6px rgba(59, 130, 246, 0.6);
  background: linear-gradient(135deg, #4c93ff 0%, #2e6df0 100%);
}
.plan-cta-btn:active { transform: scale(0.97); }

.plan-cta-btn.featured {
  background: linear-gradient(135deg, #FFB800 0%, #F59E0B 100%);
  color: #0A0E1A;
  box-shadow: 0 8px 24px -6px rgba(255, 184, 0, 0.55);
}
.plan-cta-btn.featured:hover {
  background: linear-gradient(135deg, #FFC83A 0%, #FBA82A 100%);
  box-shadow: 0 14px 30px -6px rgba(255, 184, 0, 0.7);
}

.plan-cta-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 0.1px;
}

.plan-features-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-muted);
  font-weight: 700;
  margin: 8px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

/* ── Force every tagline to occupy EXACTLY 2 lines (height = 2.8em).
   This is what makes the price row, Subscribe button, features header
   and "Show more" all sit at the same Y on every card. Short taglines
   leave whitespace below; long taglines truncate after 2 lines. */
.plan-card .plan-tagline {
  height: 2.8em;          /* fixed (not min-height — that fails with -webkit-box) */
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Plan name: lock to a single-line height so different name lengths
   ("Forex" vs "Global Indices" vs "Options Signals") don't push the
   tagline (and everything below) down by 1 line. Truncate with ellipsis
   if a name ever wraps. */
.plan-card .plan-name {
  height: 1.25em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Features list grows to absorb any vertical slack so the "Show more"
   button sits at the SAME Y on every card. */
.plan-card .plan-features { flex: 1 1 auto; min-height: 0; }

/* "Show more" pinned to the bottom of the card. With uniform card
   heights (stretch) + features absorbing slack, this puts the toggle
   button at the same Y-position on every card. */
.plan-card .plan-toggle-features { margin-top: auto; }

/* Lock the collapsed card to a single canonical height regardless of how
   many lines individual feature descriptions wrap to. Without this, a
   card whose feature text wraps to more lines (e.g. Options' long
   platform list) grew taller than its siblings and broke the row. The
   features list itself clips internally; "Show more" reveals the rest. */
.plan-card:not(.expanded) { height: 620px; }
.plan-card:not(.expanded) .plan-features { overflow: hidden; }
.plan-card.expanded { height: auto; }

/* Always-visible features header + first 3 features. The rest of the
   features list + plan-note + info-btn live inside .plan-extras which
   stays collapsed until the customer clicks "Show more". */
.plan-feature-hidden { display: none !important; }
.plan-card.expanded .plan-feature-hidden { display: flex !important; }

.plan-extras { display: none; }
.plan-card.expanded .plan-extras {
  display: block;
  animation: plan-fwrap-in 0.22s ease-out;
}

@keyframes plan-fwrap-in {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* "Show more / Show less" toggle button — compact, integrated look. */
.plan-toggle-features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin: 6px 0 2px;
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.plan-toggle-features:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(255, 184, 0, 0.04);
}
.plan-toggle-icon { transition: transform 0.22s ease; flex-shrink: 0; opacity: 0.8; }
.plan-card.expanded .plan-toggle-icon { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════════
   EoBroker plan card — ExpertOption-inspired identity skin
   Scoped strictly to `.plan-card.is-eobroker`. Other cards untouched.
   Palette: midnight navy + electric sky blue, lots of restraint. The
   blue accent appears ONLY on: badge, price, checkmarks, CTA, hover
   glow. Everything else stays in white/light-gray to match EO's
   "Wall Street confidence" mood.
   ═══════════════════════════════════════════════════════════════════ */
.plan-card.is-eobroker {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(59, 155, 255, 0.16) 0%, transparent 55%),
    radial-gradient(90% 50% at 0% 100%, rgba(78, 168, 255, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #122842 0%, #0A1828 100%);
  border-color: rgba(59, 155, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 32px -8px rgba(59, 155, 255, 0.10);
}
.plan-card.is-eobroker::before {
  background: linear-gradient(90deg, transparent, #3B9BFF, transparent);
  opacity: 0.7;
}
.plan-card.is-eobroker:hover {
  border-color: rgba(59, 155, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 56px rgba(0, 0, 0, 0.34),
    0 0 56px -8px rgba(59, 155, 255, 0.32);
}
.plan-card.is-eobroker:hover::before { opacity: 1; }

/* The EoBroker top-badge sits in the SAME slot as Elite's "الأكثر طلباً"
   (uses the shared .plan-badge positioning) — but recolored to the
   navy/sky-blue palette so it stops looking gold. */
/* (eo-badge أُزيل مع plan-badge — باقةُ EoBroker مهجورة) */

/* Plan name "EoBroker" — gradient white → light blue, slightly heavier
   and tighter than the rest of the family. */
.plan-card.is-eobroker .plan-name {
  background: linear-gradient(180deg, #FFFFFF 0%, #B4D6FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.6px;
}
.plan-card.is-eobroker .plan-tagline {
  color: rgba(180, 214, 255, 0.62);
}

/* Price: the $99 itself flips to EO sky-blue. The strike-through `$`
   prefix stays subdued so the number is what draws the eye. */
.plan-card.is-eobroker .plan-price-currency { color: rgba(180, 214, 255, 0.55); }
.plan-card.is-eobroker .plan-price-num {
  background: linear-gradient(135deg, #74BCFF 0%, #3B9BFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.plan-card.is-eobroker .plan-billing-period { color: rgba(180, 214, 255, 0.55); }
.plan-card.is-eobroker .plan-yearly-save { color: #74BCFF; }

/* CTA — solid sky-blue pill, no gradient. EO uses a single flat blue
   on every "Confirm/Deposit" button, so we do the same. */
.plan-card.is-eobroker .plan-cta-btn {
  background: #3B9BFF;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 8px 22px rgba(59, 155, 255, 0.28);
}
.plan-card.is-eobroker .plan-cta-btn:hover {
  background: #4EA8FF;
  box-shadow: 0 12px 32px rgba(59, 155, 255, 0.42);
  transform: translateY(-1px);
}
.plan-card.is-eobroker .plan-cta-sub { color: rgba(180, 214, 255, 0.55); }

/* Feature checkmarks — sky-blue circle instead of gold/green ✓. */
.plan-card.is-eobroker .plan-features-header {
  color: rgba(180, 214, 255, 0.55);
  letter-spacing: 1.6px;
}
.plan-card.is-eobroker .plan-features li {
  color: #E6F0FF;
}
.plan-card.is-eobroker .plan-check {
  color: #3B9BFF;
  text-shadow: 0 0 12px rgba(59, 155, 255, 0.45);
}

/* Show-more toggle / info-btn lifted to sky-blue accent on hover. */
.plan-card.is-eobroker .plan-toggle-features:hover {
  border-color: #3B9BFF;
  color: #74BCFF;
  background: rgba(59, 155, 255, 0.08);
}
.plan-card.is-eobroker .plan-info-btn {
  color: rgba(180, 214, 255, 0.65);
}
.plan-card.is-eobroker .plan-info-btn:hover {
  color: #74BCFF;
  border-color: rgba(59, 155, 255, 0.42);
}

/* Elite limited-time countdown banner — sized to fit a narrow card
   (≥190px wide) without digit overflow. Numbers shrink + gap tightens. */
.plan-countdown {
  margin: 10px 0 12px;
  padding: 10px 8px 8px;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(249, 115, 22, 0.55);
  min-width: 0;
}
.plan-countdown-title {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.25;
}
.plan-countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.plan-countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.plan-countdown-num {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', 'Space Grotesk', 'Tajawal', system-ui, sans-serif;
  line-height: 1;
  letter-spacing: -0.3px;
}
.plan-countdown-label {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.92;
  font-weight: 600;
  white-space: nowrap;
}

/* On larger screens (single-card width ≥ 240px), allow bigger digits. */
@media (min-width: 1280px) {
  .plan-countdown-num   { font-size: 20px; }
  .plan-countdown-label { font-size: 9px; }
}

@media (max-width: 480px) {
  /* Mobile: single column → cards are full width → big readable digits. */
  .plan-countdown-num   { font-size: 24px; }
  .plan-countdown-label { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   TELEGRAM SIGNAL FEED SECTION + STATS SECTION (2026-05-24 v2)
   Replaces the phone/laptop mockups with a product-accurate Telegram
   chat preview (this IS the product) and a big-number stats grid.
   ════════════════════════════════════════════════════════════════ */

.tg-section {
  padding: 100px 0;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(255,184,0,0.06), transparent 60%),
    radial-gradient(60% 50% at 20% 80%, rgba(59,130,246,0.05), transparent 60%),
    var(--bg-primary);
  position: relative;
  overflow: hidden;
}

.tg-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.tg-eyebrow {
  display: inline-block;
  padding: 9px 18px;
  background: rgba(255,184,0,0.10);
  color: #FFB800;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.5px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.tg-title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.tg-desc {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 30px;
  max-width: 540px;
}

.tg-feats { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.tg-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tg-feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.tg-feat-body h3 {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.tg-feat-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.tg-cta {
  display: inline-flex;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 700;
}

/* ── Telegram chat mockup ──────────────────────────────────────── */
.tg-chat-wrap { position: relative; }
.tg-glow {
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(40% 60% at 70% 30%, rgba(59,130,246,0.18), transparent 70%),
    radial-gradient(50% 50% at 30% 80%, rgba(0,255,135,0.12), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.tg-chat {
  background: linear-gradient(180deg, #17212B 0%, #0E1620 100%);
  border-radius: 18px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transform-origin: center;
}
.tg-chat-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #17212B;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tg-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB800, #F59E0B);
  color: #0A0E1A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.tg-chat-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tg-chat-status {
  font-size: 11.5px;
  color: #6c7a8c;
  margin-top: 2px;
}
.tg-chat-body {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,0.04), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,184,0,0.03), transparent 50%),
    #0E1620;
  min-height: 380px;
}
.tg-msg {
  align-self: flex-start;
  max-width: 92%;
  background: #182533;
  border-radius: 12px 12px 12px 4px;
  padding: 11px 14px;
  color: #C9D1DC;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4);
  animation: tg-msg-in 0.5s ease-out backwards;
}
.tg-msg-new {
  background: linear-gradient(135deg, #1f2f44 0%, #182533 100%);
  border: 1px solid rgba(0,255,135,0.18);
  animation-delay: 0s;
}
.tg-msg:nth-child(2) { animation-delay: 0.4s; }
.tg-msg:nth-child(3) { animation-delay: 0.8s; }

@keyframes tg-msg-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.tg-msg-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 5px;
}
.tg-msg-tag-buy  { color: #00FF87; background: rgba(0,255,135,0.10); }
.tg-msg-tag-sell { color: #EF4444; background: rgba(239,68,68,0.10); }
.tg-msg-tag-hit  { color: #FFB800; background: rgba(255,184,0,0.10); }

.tg-msg-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12.5px;
}
.tg-msg-row span { color: #8a98aa; }
.tg-msg-row b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.tg-msg-body { font-size: 13px; color: #C9D1DC; margin-bottom: 4px; }
.tg-msg-time {
  font-size: 10.5px;
  color: #6c7a8c;
  text-align: end;
  margin-top: 6px;
}

.tg-chat-typing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: #182533;
  border-top: 1px solid rgba(255,255,255,0.03);
  font-size: 12px;
  color: #6c7a8c;
}
.tg-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFB800;
  display: inline-block;
  animation: tg-typing 1.2s infinite both;
}
.tg-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.tg-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
.tg-chat-typing em { font-style: normal; margin-inline-start: 6px; }

@keyframes tg-typing {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1); }
}

/* ── Stats section ─────────────────────────────────────────────── */
.stats-section {
  padding: 96px 0;
  background: linear-gradient(180deg, #0a0e1a 0%, #0f1424 100%);
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 50% at 50% 0%, rgba(255,184,0,0.06), transparent 60%);
  pointer-events: none;
}
.stats-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 1;
}
.stats-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(0,255,135,0.10);
  color: #00FF87;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.6px;
  margin-bottom: 16px;
}
.stats-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.stats-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  position: relative;
  z-index: 1;
}
.stat-card {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.03) 0%, transparent 50%),
    var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 28px 22px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,184,0,0.4);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,184,0,0.15);
}
.stat-num {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.2px;
  background: linear-gradient(135deg, #FFB800 0%, #FF8A00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.stat-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: auto;
}
.stat-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #00FF87, #FFB800);
  border-radius: 4px;
}
.stat-spark { height: 36px; margin-top: auto; }
.stat-spark svg { width: 100%; height: 100%; display: block; }
.stat-rr {
  display: flex;
  gap: 6px;
  margin-top: auto;
  font-size: 11px;
  font-weight: 700;
}
.stat-rr-risk {
  flex: 1;
  padding: 6px 10px;
  background: rgba(239,68,68,0.12);
  color: #EF4444;
  border-radius: 6px;
  text-align: center;
}
.stat-rr-reward {
  flex: 1.5;
  padding: 6px 10px;
  background: rgba(0,255,135,0.12);
  color: #00FF87;
  border-radius: 6px;
  text-align: center;
}
.stat-dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: auto;
}
.stat-dots span {
  height: 8px;
  border-radius: 2px;
  background: rgba(255,184,0,0.65);
}
.stat-dots span:nth-child(n+9) { opacity: 0.25; }

/* Responsive */
@media (max-width: 968px) {
  .tg-grid { grid-template-columns: 1fr; gap: 48px; }
  .tg-chat { transform: none; }
  .tg-text { text-align: center; }
  .tg-feats { align-items: center; }
  .tg-feat { max-width: 480px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tg-section, .stats-section { padding: 64px 0; }
  .stat-card { padding: 22px 18px; min-height: 180px; }
  .stat-num { font-size: 36px; }
}

/* ════════════════════════════════════════════════════════════════
   VISUAL MARKETING SECTIONS (2026-05-24)
   - #why-forexbro: phone mockup centered + 4 floating cards + 4 features
   - #ai-power: laptop mockup + dashboard preview + floating stock cards
   ════════════════════════════════════════════════════════════════ */

.vis-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.vis-section-dark {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, #0a0f1f 100%);
}

@keyframes vis-float-a {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(-1deg); }
}
@keyframes vis-float-b {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes vis-float-c {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(0deg); }
}
@keyframes vis-float-d {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

/* ── PHONE SECTION ──────────────────────────────────────────────── */
.vis-mobile-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.vis-feat-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.vis-feat-left  { text-align: end; }
.vis-feat-right { text-align: start; }

.vis-feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.vis-feat-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.vis-feat-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* Phone mockup */
.vis-phone-wrap {
  position: relative;
  width: 260px;
  height: 540px;
}
.vis-phone {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #1e2230 0%, #0c0f18 100%);
  border-radius: 38px;
  padding: 12px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: rotateY(-6deg) rotateX(2deg);
  transform-style: preserve-3d;
}
.vis-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #000;
  border-radius: 16px;
  z-index: 2;
}
.vis-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #06080F;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vis-phone-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 38px 16px 10px;
  color: #FFB800;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vis-phone-chart {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.vis-phone-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vis-phone-tabs {
  display: flex;
  justify-content: space-around;
  padding: 8px 4px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 9.5px;
  color: var(--text-muted);
}
.vis-phone-tabs .active { color: #FFB800; font-weight: 700; }

/* Floating signal cards */
.vis-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.04);
  font-size: 12.5px;
  font-weight: 700;
  color: #1a1f33;
  z-index: 3;
  white-space: nowrap;
}
.vis-card-pair { letter-spacing: 0.3px; }
.vis-card-spark { width: 36px; height: 14px; }

.vis-card-1 { top: 10%;  inset-inline-start: -50px; animation: vis-float-a 5s ease-in-out infinite; }
.vis-card-2 { top: 28%;  inset-inline-end: -42px;  animation: vis-float-b 6s ease-in-out infinite 0.4s; }
.vis-card-3 { top: 58%;  inset-inline-start: -60px; animation: vis-float-c 5.6s ease-in-out infinite 0.8s; }
.vis-card-4 { top: 75%;  inset-inline-end: -54px;  animation: vis-float-d 6.4s ease-in-out infinite 1.2s; }

/* ── LAPTOP SECTION ────────────────────────────────────────────── */
.vis-ai-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.vis-laptop-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.vis-laptop {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 32px 50px rgba(0,0,0,0.55));
}
.vis-laptop-lid {
  background: linear-gradient(160deg, #2a2e3d 0%, #15171f 100%);
  border-radius: 14px 14px 4px 4px;
  padding: 16px 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.05);
}
.vis-laptop-screen {
  background: #06080F;
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.vis-laptop-base {
  position: relative;
  margin-top: 4px;
  height: 14px;
  background: linear-gradient(180deg, #3a3f50 0%, #1e212c 100%);
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.vis-laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 6px;
  background: #15171f;
  border-radius: 0 0 8px 8px;
}

/* Mini dashboard inside laptop */
.vis-dash {
  display: flex;
  height: 100%;
  width: 100%;
}
.vis-dash-side {
  width: 36px;
  padding: 12px 6px;
  background: #0b0e18;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-inline-end: 1px solid rgba(255,255,255,0.04);
}
.vis-dash-sb-item {
  height: 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
}
.vis-dash-sb-item.active { background: rgba(255,184,0,0.6); }
.vis-dash-main {
  flex: 1;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vis-dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #fff;
}
.vis-dash-pair { color: #FFB800; font-weight: 800; }
.vis-dash-price { color: #C9CEE0; font-weight: 600; }
.vis-dash-price em { font-style: normal; font-weight: 800; margin-inline-start: 6px; }
.vis-dash-chart { flex: 1; min-height: 0; }
.vis-dash-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 20%;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.vis-dash-bars span {
  flex: 1;
  background: linear-gradient(180deg, #FFB800, #F59E0B);
  border-radius: 1px 1px 0 0;
  opacity: 0.85;
}

/* Floating stock cards around laptop */
.vis-stock-card {
  position: absolute;
  background: linear-gradient(160deg, #1a1f33 0%, #0f1424 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 130px;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,0.6);
  color: #fff;
  font-size: 11.5px;
  z-index: 3;
}
.vis-stock-name { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.vis-stock-price { font-size: 14px; font-weight: 800; color: #fff; }
.vis-stock-change { font-size: 10.5px; font-weight: 700; margin-top: 4px; }
.vis-stock-change.up   { color: #00FF87; }
.vis-stock-change.down { color: #EF4444; }
.vis-stock-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,184,0,0.15);
  color: #FFB800;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  margin-bottom: 6px;
}
.vis-stock-line { font-size: 10.5px; color: #C9CEE0; line-height: 1.65; }
.vis-stock-spark { width: 60px; height: 20px; display: block; margin-top: 4px; }

.vis-stock-1 { top: -10px;  inset-inline-start: -30px; animation: vis-float-a 6s ease-in-out infinite; }
.vis-stock-2 { top: 10%;    inset-inline-end: -20px;   animation: vis-float-b 6.6s ease-in-out infinite 0.5s; }
.vis-stock-3 { bottom: 18%; inset-inline-start: -60px; animation: vis-float-c 5.8s ease-in-out infinite 1s; }
.vis-stock-4 { bottom: -10px; inset-inline-end: -10px; animation: vis-float-d 6.2s ease-in-out infinite 1.4s; }

/* Right text column */
.vis-ai-title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.vis-ai-desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 22px;
}
.vis-ai-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vis-ai-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.vis-ai-list svg { flex-shrink: 0; }
.vis-ai-cta {
  display: inline-flex;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 968px) {
  .vis-mobile-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .vis-feat-col {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }
  .vis-feat-left, .vis-feat-right { text-align: center; }
  .vis-feat { flex: 1 1 240px; max-width: 280px; }
  .vis-phone-wrap { margin: 0 auto; order: -1; }
  .vis-ai-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .vis-ai-list { align-items: center; }
  .vis-laptop-wrap { max-width: 480px; }
}
@media (max-width: 600px) {
  .vis-section { padding: 64px 0; }
  .vis-phone-wrap { width: 220px; height: 460px; }
  .vis-card { font-size: 11.5px; padding: 7px 11px; }
  .vis-laptop-wrap { max-width: 360px; }
  .vis-stock-card { min-width: 110px; padding: 8px 11px; }
  .vis-stock-card { display: none; }
  .vis-stock-1, .vis-stock-3 { display: block; }
  .vis-ai-title { font-size: 26px; }
}

/* =================== PERFORMANCE =================== */
.perf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.perf-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.perf-stat::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-green));
}

.perf-stat-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1px;
}

.perf-stat-label {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 8px;
}

.perf-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.perf-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.perf-chart-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.perf-chart {
  height: 320px;
  position: relative;
}

/* =================== TOOLS =================== */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: all 0.3s;
  cursor: pointer;
}

.tool-card:hover {
  border-color: var(--accent-gold);
  background: var(--bg-tertiary);
}

.tool-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--accent-gold-dim), transparent);
  border: 1px solid rgba(255, 184, 0, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  flex-shrink: 0;
}

.tool-content h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.tool-content p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.tool-link {
  color: var(--accent-gold);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

/* =================== FAQ =================== */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.3s;
}

.faq-item.open {
  border-color: var(--accent-gold);
}

.faq-question {
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
}

.faq-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  transition: transform 0.3s;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--text-secondary);
  padding: 0 24px;
}

.faq-item.open .faq-answer {
  padding: 0 24px 20px;
  max-height: 300px;
}

/* =================== AFFILIATE =================== */
.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.aff-card {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.aff-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent-gold-dim) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.aff-card:hover::before {
  opacity: 1;
}

.aff-card > * {
  position: relative;
  z-index: 1;
}

.aff-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.aff-value {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #FF8A00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.25;
  padding-block: 2px;
  letter-spacing: -3px;
  margin-bottom: 16px;
}

.aff-card p {
  color: var(--text-secondary);
  font-size: 14px;
}

.affiliate-cta {
  text-align: center;
}

/* =================== CTA =================== */
.cta-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}

.cta-wrap {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 184, 0, 0.05) 100%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 80px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-wrap::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--accent-gold-dim) 60deg, transparent 120deg);
  animation: rotate 20s linear infinite;
  opacity: 0.5;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cta-wrap > * {
  position: relative;
  z-index: 1;
}

.cta-wrap h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
}

.cta-wrap p {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.cta-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

/* =================== FOOTER =================== */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .logo {
  margin-bottom: 16px;
}

.footer-about {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}

.footer h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.footer ul {
  list-style: none;
}

.footer li {
  padding: 6px 0;
}

.footer a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.footer a:hover {
  color: var(--accent-gold);
}

.footer-disclaimer {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ⚠️ ٢٠٢٦-٠٩-١٣ — أُزيل قسمُ «الثقة والدفع» الميّتُ كاملاً: شريطُ الثقة
   trust-strip، وصفُّ وسائل الدفع pm/trust-pay، وكتلةُ footer-trust وشاراتُ
   الدفع footer-pay-badge. لا وسمٌ في أيّ صفحةٍ ولا سكربتٍ يستعملها (الدفعُ
   انتقل للتطبيق). محفوظةٌ نسخةٌ احتياطيّةٌ قبل الحذف. */

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* =================== EXIT INTENT =================== */
.exit-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.exit-popup.show {
  display: flex;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.exit-popup-inner {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px rgba(255, 184, 0, 0.3);
}

.exit-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 24px;
}

html[lang="ar"] .exit-close {
  right: auto;
  left: 16px;
}

.exit-popup h2 {
  font-family: var(--font-display);
  font-size: 32px;
  margin-bottom: 12px;
}

.exit-popup p {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.exit-countdown {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--accent-gold);
  margin-bottom: 24px;
  font-weight: 700;
}

/* =================== RESPONSIVE =================== */
@media (max-width: 968px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-visual {
    height: 420px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .perf-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* 2026-06-06: قواعد إخفاء روابط الهيدر وزر القائمة انتقلت لوسيط 1279
     المستقل أدناه — العناوين العربية التسعة تحتاج ~1430 نقطة، فالنطاق
     969–1279 كان يتصادم (سبب «أحياناً يفتح خربان»: تكبير المتصفح أو
     تحجيم ويندوز أو نافذة أضيق يغيّر العرض الفعلي). */

  section {
    padding: 70px 0;
  }

    /* ⛔⛔ ٢٠٢٦-١٠-٠٣ — **حُذف من هنا ادّعاءُ «نسخةٍ مصغَّرةٍ يختارُها السكربت».**
       لا تلك النسخةُ موجودةٌ ولا ذلك الكودُ موجود: المقطعُ **ملفٌّ واحدٌ** يُطلَبُ
       كاملاً من كلِّ جهاز. وكان التعليقُ يوهمُ بتحسينٍ لم يُنفَّذ.
       ⏳ وتصغيرُ نسخةٍ للجوّالِ بندٌ قائمٌ لم يُنفَّذ، لا بندٌ منجَز.
       ⛔ ويبقى المقطعُ ممنوعاً على من فعّلَ توفيرَ البياناتِ أو طلبَ تقليلَ
          الحركة: احترامُ إعدادِ الزائرِ فوقَ الذوقِ البصريّ. */
  /* ⛔ لا إزاحةَ على الجوّالِ أيضاً: المركزُ الطبيعيُّ هو الصحيح. */
  .hero-video { opacity: 1; }
  .hero::after { height: 110px; }

  .hero {
    padding: 120px 0 60px;
  }
}

/* ── 2026-06-06: خطة الهيدر لكل نطاق عرض ──────────────────────────
   تحت 1280: قائمة eToro المنسلقة (المعتمدة على الجوال) — النطاق
   969–1279 كان يجعل العناوين تتصادم مع الشعار وزر اللغة. */
@media (max-width: 1279.98px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .nav-links.mobile-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid var(--border-subtle);
  }
}

/* 1280–1449: نفس صف الكمبيوتر الكامل بتكثيف محسوب يمنع التصادم.
   فوق 1450: الشكل الأصلي المرغوب كما هو بلا أي تغيير. */
@media (min-width: 1280px) and (max-width: 1449.98px) {
  .nav-inner { gap: 12px; }
  .nav-links { gap: 14px; }
  /* ⚠️ كانت 13px فتغلب التكبيرَ الأساسيّ على شاشات ١٢٨٠–١٤٥٠. */
  .nav-link { font-size: 14.5px; }
  .nav-right { gap: 10px; }
  .nav-right .btn-ghost { padding: 10px 14px; font-size: 13px; }
  .nav-right .btn-primary { padding: 10px 16px; font-size: 13px; }
  .nav-right .lang-dd-trigger { padding: 6px 9px !important; font-size: 11.5px !important; }
}

@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .perf-stats {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hero-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .cta-wrap {
    padding: 48px 24px;
  }

  .nav-right .btn-ghost {
    display: none;
  }
}

/* =================== HOW IT WORKS =================== */
.how-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}

.how-step {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  position: relative;
  transition: all 0.3s;
}

.how-step:hover {
  transform: translateY(-4px);
  border-color: var(--accent-gold);
  background: var(--bg-tertiary);
}

.how-step-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  font-family: var(--font-display);
}

.how-step-icon {
  width: 64px;
  height: 64px;
  background: var(--accent-gold-dim);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 20px;
  color: var(--accent-gold);
}

.how-step h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.how-step p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .how-steps { grid-template-columns: 1fr; }
}

/* =================== TESTIMONIALS =================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-gold);
}

.testimonial-stars {
  color: var(--accent-gold);
  font-size: 18px;
  letter-spacing: 2px;
}

.testimonial-text {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.7;
  flex: 1;
  margin: 0;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold), #d8a000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--bg-primary);
  font-family: var(--font-display);
  flex-shrink: 0;
}

.testimonial-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}

.testimonial-role {
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* =================== LANGUAGE-SPECIFIC SHOW/HIDE =================== */
/* Default: show Arabic-only content, hide English-only content. */
html[lang="en"] .lang-only-ar { display: none !important; }
html[lang="ar"] .lang-only-en { display: none !important; }
/* When EN, switch the testimonial grid to flex/grid layout (override inline display:none) */
html[lang="en"] .testimonials-grid.lang-only-en { display: grid !important; }

/* Testimonials → شريط سحب أفقي على الجوال (2026-06-13): يسحب يمين/يسار بدل ما يطوّل الصفحة */
@media (max-width: 600px) {
  .testimonials-grid,
  html[lang="en"] .testimonials-grid.lang-only-en {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }
  .testimonials-grid > .testimonial-card {
    flex: 0 0 87%;
    scroll-snap-align: center;
    min-width: 0;
  }
}

/* =================== MOBILE FINE-TUNING (NEW SECTIONS) =================== */
@media (max-width: 768px) {
  /* Pricing toggle: scale down a touch on mobile but still readable */
  .pricing-toggle { font-size: 15px; padding: 6px; }
  .pricing-toggle > span { padding: 12px 20px; min-width: 130px; }
  .save-badge { font-size: 10px !important; padding: 3px 8px !important; }

  /* How-it-works steps stack to 1 column with reduced padding */
  .how-step { padding: 28px 18px; }
  .how-step h3 { font-size: 16px; }
  .how-step p { font-size: 12.5px; }
  .how-step-icon { width: 56px; height: 56px; }

  /* Testimonials become single column */
  .testimonial-card { padding: 22px; }
  .testimonial-text { font-size: 14px; }

  /* Section headers tighten */
  .section-header { margin-bottom: 36px !important; }
}

@media (max-width: 480px) {
  /* Plan cards: keep readable on phones */
  .plan-card { padding: 24px 18px; }
  /* On phone the cards stack vertically, so the desktop height lock
     would just create awkward dead space. Let them size to content. */
  .plan-card:not(.expanded) { height: auto; }
  .plan-card:not(.expanded) .plan-features { overflow: visible; }
  .plan-name { font-size: 22px; }
  .plan-price-num { font-size: 44px; }
  .plan-features li { font-size: 13.5px; line-height: 1.5; }

  /* Hero/section padding reduce */
  #how-it-works, #bot-features, #testimonials { padding: 60px 0 !important; }
  .section-title { font-size: 26px !important; line-height: 1.3; }
  .section-subtitle { font-size: 14px !important; }
}

/* ===== Back-to-top floating button (home page) =================== */
#fbBackToTop {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;   /* RTL → bottom-right, LTR → bottom-left */
  z-index: 9998;              /* under modals (10000+), over content   */
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 0, 0.45);
  background: linear-gradient(135deg, #FFB800 0%, #FF8A00 100%);
  color: #0A0E1A;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(255, 184, 0, 0.35), 0 2px 8px rgba(0,0,0,0.30);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease, background 200ms ease;
  pointer-events: none;       /* clickable only when .show is applied */
}
#fbBackToTop.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#fbBackToTop:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(255, 184, 0, 0.45), 0 2px 10px rgba(0,0,0,0.35);
}
#fbBackToTop:active { transform: translateY(-1px); }
#fbBackToTop svg { width: 22px; height: 22px; }
#fbBackToTop[hidden] { display: none !important; }

/* Reduced-motion safety: skip the slide-in animation. */
@media (prefers-reduced-motion: reduce) {
  #fbBackToTop { transition: opacity 160ms ease; transform: none !important; }
}

/* =============================================================
   NEW PRICING CARDS (2026-05-26 rebuild) — overrides legacy rules.
   ============================================================= */
.pricing-grid .plan-card[data-plan-card] {
  height: auto;
  min-height: 0;
  padding: 24px 20px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, #14192C 0%, #0F1424 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: default;
  isolation: isolate;
  position: relative;
  overflow: visible;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.pricing-grid .plan-card[data-plan-card]::before,
.pricing-grid .plan-card[data-plan-card]::after {
  display: none !important;
  content: none;
}
.pricing-grid .plan-card[data-plan-card]:hover {
  transform: translateY(-3px);
  border-color: rgba(255,184,0,0.35);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,184,0,0.10);
}
.pricing-grid .plan-card[data-plan-card].featured {
  background:
    linear-gradient(180deg, rgba(255,184,0,0.10) 0%, rgba(255,184,0,0.02) 35%, #0F1424 100%);
  border-color: rgba(255,184,0,0.55);
  box-shadow: 0 18px 44px -12px rgba(255,184,0,0.22), 0 0 0 1px rgba(255,184,0,0.12);
}
.pricing-grid .plan-card[data-plan-card].featured:hover {
  border-color: rgba(255,184,0,0.85);
  box-shadow: 0 22px 50px -10px rgba(255,184,0,0.32);
}
.plan-card-badge {
  position: absolute;
  top: -12px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FFB800, #FF8A00);
  color: #0A0E1A;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(255,138,0,0.55);
  letter-spacing: 0.4px;
}
html[dir="rtl"] .plan-card-badge { transform: translateX(50%); }
.plan-card-head { display: flex; flex-direction: column; gap: 4px; }
.plan-card-name {
  font-family: var(--font-display, "Space Grotesk", "Tajawal", sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.plan-card-tagline {
  font-size: 12.5px;
  color: var(--text-muted, #8A92A6);
  line-height: 1.5;
  min-height: 2.8em;
}
.plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px dashed rgba(255,255,255,0.08);
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.plan-card-price-currency {
  font-size: 18px;
  color: var(--text-secondary, #B8BFD0);
  font-weight: 700;
}
.plan-card-price-num {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--text-primary, #fff);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.pricing-grid .plan-card[data-plan-card].featured .plan-card-price-num {
  background: linear-gradient(135deg, #FFD057, #FF8A00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.plan-card-price-period {
  font-size: 12.5px;
  color: var(--text-muted, #8A92A6);
  font-weight: 600;
  margin-inline-start: 4px;
}
.plan-card-price-was {
  font-size: 14px;
  color: rgba(255,255,255,0.40);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-inline-end: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.plan-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFB800 0%, #FF8A00 100%);
  color: #0A0E1A;
  border: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.1px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(255,184,0,0.45);
  transition: transform 0.16s ease, box-shadow 0.18s ease;
}
.plan-card-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -8px rgba(255,184,0,0.65);
}
.plan-card-cta:active { transform: translateY(0) scale(0.98); }
.plan-card-cta.featured { box-shadow: 0 10px 26px -6px rgba(255,184,0,0.6); }
.plan-card-summary {
  font-size: 12.5px;
  color: var(--text-secondary, #B8BFD0);
  line-height: 1.65;
  text-align: center;
  min-height: 2.5em;
}
.plan-card-compare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted, #8A92A6);
  padding: 9px 12px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  margin-top: auto;
  transition: all 0.16s ease;
}
.plan-card-compare:hover {
  border-color: rgba(255,184,0,0.45);
  color: var(--accent-gold, #FFB800);
  background: rgba(255,184,0,0.04);
}
@media (max-width: 1180px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; }
  .pricing-grid .plan-card[data-plan-card] { padding: 20px 18px 18px; }
  .plan-card-price-num { font-size: 36px; }
}

/* COMPARISON TABLE / ACCORDION */
.pricing-compare {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pricing-compare-head { text-align: center; margin-bottom: 28px; }
.pricing-compare-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  margin: 0 0 6px;
  letter-spacing: -0.4px;
}
.pricing-compare-sub {
  font-size: 14px;
  color: var(--text-muted, #8A92A6);
  margin: 0;
}
.pricing-compare-tablewrap {
  background: linear-gradient(180deg, #14192C 0%, #0F1424 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}
.pricing-compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.pricing-compare-table thead th {
  padding: 18px 14px 16px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: var(--text-secondary, #B8BFD0);
  font-weight: 700;
  vertical-align: bottom;
  position: relative;
}
.pricing-compare-table thead .pct-th-feature {
  text-align: start;
  color: var(--text-muted, #8A92A6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pricing-compare-table thead .pct-plan-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  margin-bottom: 2px;
}
.pricing-compare-table thead .pct-plan-price {
  display: block;
  font-size: 13px;
  color: var(--accent-gold, #FFB800);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pricing-compare-table thead .pct-th-featured {
  background: linear-gradient(180deg, rgba(255,184,0,0.10) 0%, rgba(255,184,0,0.02) 100%);
  border-inline: 1px solid rgba(255,184,0,0.20);
}
.pricing-compare-table thead .pct-plan-badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  background: linear-gradient(135deg, #FFB800, #FF8A00);
  color: #0A0E1A;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.pricing-compare-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-primary, #fff);
  font-size: 13px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.pricing-compare-table tbody td:first-child {
  text-align: start;
  color: var(--text-secondary, #B8BFD0);
  font-weight: 600;
}
.pricing-compare-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.012); }
.pricing-compare-table tbody tr:hover td { background: rgba(255,184,0,0.03); }
.pricing-compare-table tbody .pct-td-featured {
  background: rgba(255,184,0,0.05) !important;
  border-inline: 1px solid rgba(255,184,0,0.18);
}
.pricing-compare-table .pc-yes::before {
  content: "\2713";
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(34,197,94,0.18);
  color: #22c55e;
  font-weight: 800;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
}
.pricing-compare-table .pc-no::before {
  content: "\2212";
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.25);
  font-weight: 800;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}
.pricing-compare-table tfoot td {
  padding: 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.pct-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgba(255,184,0,0.10);
  color: var(--accent-gold, #FFB800);
  border: 1px solid rgba(255,184,0,0.30);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.16s ease;
}
.pct-cta:hover {
  background: var(--accent-gold, #FFB800);
  color: #0A0E1A;
}
.pct-cta.featured {
  background: linear-gradient(135deg, #FFB800, #FF8A00);
  color: #0A0E1A;
  border-color: transparent;
  box-shadow: 0 6px 14px -4px rgba(255,184,0,0.45);
}

.pricing-compare-mobile { display: none; }
@media (max-width: 820px) {
  .pricing-compare-tablewrap { display: none; }
  .pricing-compare-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
.pcm {
  background: linear-gradient(180deg, #14192C 0%, #0F1424 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.pcm[open] { border-color: rgba(255,184,0,0.35); }
.pcm.pcm-featured { border-color: rgba(255,184,0,0.45); }
.pcm > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  font-family: inherit;
}
.pcm > summary::-webkit-details-marker { display: none; }
.pcm > summary::after {
  content: "+";
  font-size: 22px;
  color: var(--accent-gold, #FFB800);
  font-weight: 800;
  line-height: 1;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.pcm[open] > summary::after { content: "\2212"; }
.pcm-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pcm-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #FFB800, #FF8A00);
  color: #0A0E1A;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
}
.pcm-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-gold, #FFB800);
  font-variant-numeric: tabular-nums;
}
.pcm-was {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  text-decoration: line-through;
  margin-inline-end: 4px;
  font-weight: 700;
}
.pcm-period {
  font-size: 11px;
  color: var(--text-muted, #8A92A6);
  font-weight: 600;
  margin-inline-start: 2px;
}
.pcm-feats {
  list-style: none;
  padding: 0 16px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pcm-feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--text-secondary, #B8BFD0);
  line-height: 1.5;
}
.pcm-tick {
  width: 18px; height: 18px;
  background: rgba(34,197,94,0.18);
  color: #22c55e;
  border-radius: 50%;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.pcm-x {
  width: 18px; height: 18px;
  background: rgba(239,68,68,0.18);
  color: #ef4444;
  border-radius: 50%;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.pcm-feats li.pcm-excl { color: var(--text-muted, #8A92A6); }
.pcm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 16px 16px;
  padding: 11px 18px;
  border-radius: 9px;
  background: rgba(255,184,0,0.12);
  color: var(--accent-gold, #FFB800);
  border: 1px solid rgba(255,184,0,0.35);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.18s ease;
}
.pcm-cta:hover, .pcm-cta:active {
  background: var(--accent-gold, #FFB800);
  color: #0A0E1A;
}
.pcm-cta.featured {
  background: linear-gradient(135deg, #FFB800, #FF8A00);
  color: #0A0E1A;
  border: none;
  box-shadow: 0 8px 18px -4px rgba(255,184,0,0.55);
}

/* =============================================================
   PRICING — VERTICAL STACK (2026-05-26 rebuild #2)
   Each plan is one wide row. Icon + price on the side, content on
   the other. Stacks to single column on mobile.
   ============================================================= */
.pricing-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.plan-row {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: stretch;
  padding: 32px 32px;
  border-radius: 18px;
  background: linear-gradient(180deg, #14192C 0%, #0F1424 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  overflow: visible;
}
.plan-row:hover {
  transform: translateY(-2px);
  border-color: rgba(255,184,0,0.32);
  box-shadow: 0 18px 38px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,184,0,0.08);
}
.plan-row.featured {
  /* Stack the gold-tint gradient OVER a solid card base so the body page
     grid never bleeds through the middle of the card. The previous
     single-layer gradient went transparent at 50% which let the page
     background show through (visible on Elite specifically). */
  background:
    linear-gradient(160deg, rgba(255,184,0,0.14) 0%, rgba(255,184,0,0.04) 55%, rgba(255,184,0,0) 100%),
    linear-gradient(180deg, #14192C 0%, #0F1424 100%);
  border-color: rgba(255,184,0,0.55);
  box-shadow: 0 22px 50px -16px rgba(255,184,0,0.20), 0 0 0 1px rgba(255,184,0,0.12);
}
.plan-row.featured:hover {
  border-color: rgba(255,184,0,0.85);
  box-shadow: 0 28px 60px -16px rgba(255,184,0,0.32);
}

.plan-row-badge {
  position: absolute;
  top: -13px;
  inset-inline-start: 32px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #FFB800, #FF8A00);
  color: #0A0E1A;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(255,138,0,0.55);
  z-index: 2;
}

/* ── Side: icon + price ── */
.plan-row-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding-inline-start: 22px;
  padding-inline-end: 28px;
  border-inline-end: 1px solid rgba(255,255,255,0.06);
}
/* Coloured vertical accent bar replaces the heavy icon-in-box.
   The plan colour comes from --plan-accent (set per plan-row below). */
.plan-row-side::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 14%;
  bottom: 14%;
  width: 4px;
  border-radius: 4px;
  background: var(--plan-accent, var(--accent-gold));
  box-shadow: 0 0 14px -2px var(--plan-accent, var(--accent-gold));
}
/* Icon now hidden — kept in HTML in case we want to restore it later
   without re-editing every plan row. */
.plan-row-icon { display: none !important; }

.plan-row[data-plan-row="forex"]   { --plan-accent: #60a5fa; }
.plan-row[data-plan-row="gold"]    { --plan-accent: #FFB800; }
.plan-row[data-plan-row="indices"] { --plan-accent: #34d399; }
.plan-row[data-plan-row="options"] { --plan-accent: #4EA8FF; }
.plan-row[data-plan-row="elite"]   { --plan-accent: #FFD057; }

/* ── 2026-06-11: تصميم راقٍ لبطاقة باقة الأوبشن — أجواء تداول احترافي أزرق عميق:
   عمق متدرّج + توهّج ركني + حدّ علوي لامع + سعر متوهّج + زر زجاجي. تصميم خاص بالموقع. ── */
.plan-row[data-plan-row="options"]{
  position: relative;
  overflow: hidden;
  opacity: 1;                         /* إلغاء تعتيم is-soon لتبقى البطاقة فاخرة وحادّة */
  background:
    radial-gradient(130% 90% at 92% -8%, rgba(78,168,255,0.26) 0%, rgba(43,125,233,0) 55%),
    radial-gradient(120% 80% at 6% 112%, rgba(43,125,233,0.16) 0%, rgba(43,125,233,0) 50%),
    linear-gradient(158deg, #0E2A57 0%, #0B1E40 48%, #081428 100%);
  border: 1px solid rgba(78,168,255,0.38);
  box-shadow:
    0 26px 60px -22px rgba(43,125,233,0.50),
    0 0 0 1px rgba(78,168,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
/* حدّ علوي لامع متدرّج */
.plan-row[data-plan-row="options"]::before{
  content:""; position:absolute; top:0; inset-inline:0; height:2px; pointer-events:none;
  background: linear-gradient(90deg, transparent 8%, #4EA8FF 38%, #9AD0FF 50%, #4EA8FF 62%, transparent 92%);
  opacity:.9;
}
/* توهّج ركني ناعم */
.plan-row[data-plan-row="options"]::after{
  content:""; position:absolute; top:-30%; inset-inline-end:-10%;
  width:48%; height:90%; pointer-events:none;
  background: radial-gradient(circle at center, rgba(78,168,255,0.22), rgba(78,168,255,0) 68%);
}
.plan-row[data-plan-row="options"]:hover{
  transform: translateY(-2px);
  border-color: rgba(78,168,255,0.85);
  box-shadow:
    0 34px 70px -18px rgba(43,125,233,0.58),
    0 0 0 1px rgba(78,168,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
/* الشارة "قريباً" بهوية زرقاء فاخرة */
.plan-row[data-plan-row="options"] .plan-soon-badge{
  color:#06182f;
  background: linear-gradient(135deg,#4EA8FF 0%, #2B7DE9 100%);
  border:1px solid rgba(154,208,255,0.55);
  box-shadow: 0 6px 16px -5px rgba(43,125,233,0.7);
}
/* الشريط الجانبي الفاصل + المؤشّر الأزرق المتوهّج */
.plan-row[data-plan-row="options"] .plan-row-side{ border-inline-end-color: rgba(78,168,255,0.18); }
.plan-row[data-plan-row="options"] .plan-row-side::before{
  box-shadow: 0 0 18px -1px #4EA8FF, 0 0 6px 0 rgba(78,168,255,0.85);
}
/* السعر بتدرّج أزرق متوهّج */
.plan-row[data-plan-row="options"] .plan-row-num{
  background: linear-gradient(135deg,#EAF4FF 0%, #7CC4FF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 2px 10px rgba(78,168,255,0.35));
}
/* علامات الميزات زرقاء */
.plan-row[data-plan-row="options"] .plan-row-tick{
  background: rgba(78,168,255,0.18); color:#7CC4FF;
}
/* شارة التوفير زرقاء بدل الأخضر */
.plan-row[data-plan-row="options"] .plan-row-save{
  background: rgba(78,168,255,0.14); color:#7CC4FF; border-color: rgba(78,168,255,0.32);
}
/* زر "قريباً" بمظهر زجاجي أزرق فاخر */
.plan-row[data-plan-row="options"] .plan-row-cta-soon{
  color:#CFE6FF;
  background: linear-gradient(135deg, rgba(78,168,255,0.18), rgba(43,125,233,0.08));
  border:1px solid rgba(78,168,255,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px -10px rgba(43,125,233,0.6);
}

.plan-row-pricewrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.plan-row-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
}
.plan-row-currency {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-secondary, #B8BFD0);
}
.plan-row-num {
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-primary, #fff);
  font-variant-numeric: tabular-nums;
}
.plan-row.featured .plan-row-num {
  background: linear-gradient(135deg, #FFD057 0%, #FF8A00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.plan-row-was {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-inline-end: 6px;
  align-self: flex-end;
  margin-bottom: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.plan-row-period {
  font-size: 12.5px;
  color: var(--text-muted, #8A92A6);
  font-weight: 600;
}
.plan-row-save {
  margin-top: 10px;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,255,135,0.12);
  color: var(--accent-green, #00FF87);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(0,255,135,0.28);
}

/* ── Body: name + tagline + features + CTA ── */
.plan-row-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.plan-row-name {
  font-family: var(--font-display, "Space Grotesk", "Tajawal", sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.plan-row-tagline {
  font-size: 14px;
  color: var(--text-muted, #8A92A6);
  line-height: 1.5;
  margin-top: -4px;
}

.plan-row-feats {
  list-style: none;
  padding: 0;
  margin: 6px 0 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
}
.plan-row-feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-secondary, #B8BFD0);
  line-height: 1.5;
}
.plan-row-tick {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34,197,94,0.16);
  color: #22c55e;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.plan-row-x {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(239,68,68,0.16);
  color: #ef4444;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.plan-row-excl { color: var(--text-muted, #8A92A6); }

.plan-row-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.plan-row-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 32px;
  background: linear-gradient(135deg, #FFB800 0%, #FF8A00 100%);
  color: #0A0E1A;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.1px;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(255,184,0,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.plan-row-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(255,184,0,0.65);
}
.plan-row-cta:active { transform: translateY(0) scale(0.98); }
.plan-row-cta.featured {
  padding: 14px 36px;
  font-size: 15.5px;
  box-shadow: 0 10px 26px -6px rgba(255,184,0,0.6);
}
.plan-row-cancel {
  font-size: 12px;
  color: var(--text-muted, #8A92A6);
  font-weight: 500;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .plan-row {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 22px 24px;
  }
  .plan-row-side {
    flex-direction: row;
    justify-content: flex-start;
    border-inline-end: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-inline-end: 0;
    padding-bottom: 18px;
    gap: 22px;
  }
  .plan-row-icon { width: 70px; height: 70px; border-radius: 18px; }
  .plan-row-icon svg { width: 42px; height: 42px; }
  .plan-row-pricewrap { align-items: flex-start; flex: 1; }
  .plan-row-num { font-size: 46px; }
  .plan-row-feats { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 480px) {
  .plan-row { padding: 22px 18px 22px; }
  .plan-row-side { flex-direction: column; align-items: center; text-align: center; }
  .plan-row-pricewrap { align-items: center; }
  .plan-row-name { font-size: 21px; }
  .plan-row-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .plan-row-cta, .plan-row-cta.featured { width: 100%; padding: 13px 20px; }
  .plan-row-cancel { text-align: center; }
}

/* ─── Elite offer (flat inline FOMO — no surrounding box) ─────────
   3-day rolling countdown + 7-dot seat indicator + thin animated
   wire underneath. Replaces the previous outlined pill bar so the
   element doesn't feel like a separate card glued on top.            */
.elite-offer {
  grid-column: 1 / -1;
  margin: -2px 0 14px;
  padding: 4px 8px 8px;
  text-align: center;
  position: relative;
}
.elite-offer .eob-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.2px;
}
.elite-offer .eob-flame {
  display: inline-flex;
  color: #FF8A00;
  filter: drop-shadow(0 0 6px rgba(255, 138, 0, 0.55));
  animation: eob-flame 1.6s ease-in-out infinite;
}
@keyframes eob-flame {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  50%      { transform: scale(1.12) rotate(2deg); opacity: 0.85; }
}
.elite-offer .eob-txt { color: rgba(255, 255, 255, 0.78); }
.elite-offer .eob-time {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  color: #FFD057;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.4px;
  text-shadow: 0 0 14px rgba(255, 184, 0, 0.30);
}
.elite-offer .eob-time b {
  font-weight: 800;
  font-style: normal;
  min-width: 1.6em;
  display: inline-block;
  text-align: center;
}
.elite-offer .eob-time i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 208, 87, 0.45);
  margin-inline-end: 4px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.elite-offer .eob-time i:last-of-type { margin-inline-end: 0; }
.elite-offer .eob-glyph {
  color: rgba(255, 184, 0, 0.30);
  font-size: 18px;
  font-weight: 700;
  margin: 0 2px;
}
.elite-offer .eob-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin-inline-end: 2px;
}
.elite-offer .eob-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD057, #FF8A00);
  box-shadow: 0 0 8px -1px rgba(255, 184, 0, 0.55);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.elite-offer .eob-dot.eob-dot-off {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transform: scale(0.78);
}
.elite-offer .eob-seats-num {
  color: #FF6B6B;
  font-weight: 900;
  font-style: normal;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.45);
  margin-inline-end: 4px;
}
/* Thin animated wire under the line — visualises elapsed time as a
   shrinking gold→red bar; ZERO border or pill around the strip. */
.elite-offer .eob-wire {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -2px;
  height: 2px;
  background: rgba(255, 184, 0, 0.10);
  border-radius: 2px;
  overflow: hidden;
}
.elite-offer .eob-wire-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FFB800, #FF6B6B);
  box-shadow: 0 0 14px -2px rgba(255, 107, 107, 0.6);
  transition: width 1s linear;
}
@media (max-width: 640px) {
  .elite-offer { padding: 6px 6px 10px; }
  .elite-offer .eob-line { font-size: 12px; gap: 6px 10px; }
  .elite-offer .eob-time { font-size: 14px; }
  .elite-offer .eob-glyph { display: none; }
  .elite-offer .eob-wire { left: 8%; right: 8%; }
}

/* ════════════════════════════════════════════════════════════════════
   باقات «قريباً» (Coming soon / locked).
   حالياً: أوبشن (options). الكرت يظهر للعلم لكنه مقفل وغير قابل
   للشراء — القفل الجذري في whop-create-session + nowpayments-create-invoice.
   ════════════════════════════════════════════════════════════════════ */
.plan-row.is-soon,
.chk-plan.is-soon {
  position: relative;
  opacity: 0.82;
  cursor: not-allowed;
}
.plan-soon-badge,
.chk-soon-badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #DCE6FF;
  background: linear-gradient(135deg, #3B4A8A 0%, #2A3566 100%);
  border: 1px solid rgba(150, 180, 255, 0.35);
  box-shadow: 0 4px 14px -4px rgba(40, 60, 130, 0.7);
  white-space: nowrap;
}
.plan-soon-badge::before,
.chk-soon-badge::before {
  /* ⛔ 2026-09-26 — كان إيموجي قفل. الإيموجي ممنوعٌ في الواجهات — أيقوناتٌ فقط. */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: -1px;
  line-height: 1;
}
.chk-soon-badge { top: 8px; inset-inline-end: 10px; padding: 3px 8px; font-size: 10px; }
.plan-row-cta-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 32px;
  border-radius: 11px;
  font-weight: 700;
  color: #AAB4CC;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}
.plan-row-cta-soon:hover { transform: none; box-shadow: none; }
.chk-plan.is-soon:hover { transform: none; }
.chk-plan.is-soon .chk-plan-mark { opacity: 0.4; }

/* ══════════════════════════════════════════════════════════════════════════
   أزرارُ المتجرين — 2026-08-24
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ الموقعُ بعد نزول التطبيق صفحةُ هبوطٍ لا متجرَ اشتراكات: لا تسجيلَ ولا
      باقاتٍ ولا دفع. فالدعوةُ الوحيدةُ هي التحميل، وهذي أزرارُها.
   ⚠️ تصميمُها يتبع عُرفَ المتجرين (خلفيّةٌ داكنةٌ وحدٌّ رفيعٌ ونصّان: سطرٌ
      صغيرٌ فوق واسمُ المتجر تحته) كي يعرفها الزائرُ من شكلها قبل قراءتها.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️⚠️ 2026-08-24 — **كُبِّرت.** كان الزرّان بمقاس زرٍّ ثانويّ بينما هما
      الفعلُ الوحيدُ الباقي في الصفحة كلِّها: لا تسجيلَ ولا اشتراكَ ولا لوحة.
      زرٌّ صغيرٌ يقول للزائر «هذا ليس المقصود» — والمقصودُ هو هو.
   ⚠️ والمقاسُ من `clamp` لا رقمٍ ثابت: يكبر على الشاشة الواسعة ولا يفيض على
      الجوّال. والحدُّ الأدنى ٥٦ بكسلاً — مساحةُ لمسٍ مريحةٌ لا مجرّدُ حجم. */
.store-btns { display:flex; gap:18px; flex-wrap:wrap; }
.store-btn {
  display:inline-flex; align-items:center; gap:16px;
  padding:clamp(17px, 1.6vw, 21px) clamp(30px, 2.8vw, 38px);
  min-height:72px; border-radius:18px;
  background:#000; border:1px solid rgba(255,255,255,.22);
  color:#fff; text-decoration:none; line-height:1.15;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.store-btn:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.45); box-shadow:0 14px 34px rgba(0,0,0,.42); }
.store-btn svg { flex:none; width:clamp(34px, 2.8vw, 40px) !important; height:clamp(34px, 2.8vw, 40px) !important; }
.store-btn-txt { display:flex; flex-direction:column; align-items:flex-start; }
[dir="rtl"] .store-btn-txt { align-items:flex-start; }
.store-btn-sm { font-size:clamp(13px, 1.05vw, 15px); opacity:.8; letter-spacing:.2px; }
.store-btn-lg { font-size:clamp(23px, 1.85vw, 27px); font-weight:800; letter-spacing:.2px; line-height:1.1; }
/* على الخلفيّات الفاتحة */
.store-btn.on-light { background:#0A0E1A; border-color:rgba(0,0,0,.12); }
/* ⚠️ على الجوّال يمتدّ كلُّ زرٍّ بعرض الشاشة: هدفُ لمسٍ لا يُخطأ. */
@media (max-width:560px){
  .store-btns { gap:14px; }
  /* ⚠️ ٢٠٢٦-١٠-٠٢ (أمر المالك: «أكبرُ من فوقَ وتحت، وكبّرِ النصَّ بداخله») —
     الارتفاعُ من ستٍّ وسبعين إلى ستٍّ وتسعين، والحشوُ الرأسيُّ من ثمانيةَ عشرَ
     إلى ستٍّ وعشرين، واسمُ المتجرِ من ثلاثةٍ وعشرينَ إلى تسعةٍ وعشرين. */
  .store-btn { flex:1 1 100%; justify-content:center; min-height:96px; padding:26px 24px; }
  .store-btn-lg { font-size:29px; }
  .store-btn-sm { font-size:15px; opacity:.85; }
  .store-btn svg { width:44px !important; height:44px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   إخفاءُ الأسعار — صفحةُ هبوطٍ لا متجر — 2026-08-24
   ──────────────────────────────────────────────────────────────────────────
   ⚠️⚠️ **الإخفاءُ بالأنماط لا بحذف العناصر، عمداً.** الأسعارُ تُملأ من القاعدة
      بجافاسكربت (`data-price`)، وحذفُ العناصر يجعل ذلك الكودَ يبحث عن عناصرَ
      غيرِ موجودةٍ فيرمي — فينكسر ما بعده في نفس الملفّ.
   ⚠️ والسببُ الحقيقيّ: بعد نزول التطبيق **لا بيعَ على الموقع إطلاقاً**. وعرضُ
      سعرٍ في صفحةٍ لا تبيع وعدٌ لا يُوفى، وأخطرُ منه أنّه **دفعٌ خارج المتجر**
      يلتقطه مراجعُ آبل (بند ٣٫١٫١) إن وصل إليه من التطبيق.
   ⚠️ ويبقى القسمُ نفسُه ليشرح **ما في كلّ باقة** — وهو ما يحتاجه الزائر.
   ══════════════════════════════════════════════════════════════════════════ */
.plan-row-pricewrap,
.pricing-toggle-wrap,
.plan-row-was,
.plan-row-save { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   لوحةُ مواصفات الباقة — بديلُ السعر — 2026-08-24
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ الترتيبُ البصريُّ مقصود: **القيمةُ أوّلاً وأكبر** (٦–١٠)، ثمّ اسمُ الحقل
      صغيراً، ثمّ الشرحُ أخفت. عينُ الزائر تلتقط الرقمَ كما كانت تلتقط السعر،
      فيبقى للعمود ثِقلُه البصريُّ بلا تسعير.
   ⚠️ ولا يُستعمل هنا `<table>`: هي ثلاثةُ أسطرٍ في عمودٍ ضيّق، والجدولُ يفرض
      عرضاً لا يحتمله العمودُ على الجوّال.
   ══════════════════════════════════════════════════════════════════════════ */
.plan-spec {
  width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 16px; padding: 16px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
}
.plan-spec-row { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.plan-spec-val {
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 800; color: #fff;
  line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.plan-spec-key { font-size: 11.5px; font-weight: 700; color: var(--accent, #00FF87); letter-spacing: .3px; }
.plan-spec-note { font-size: 11px; color: #8a98aa; line-height: 1.45; }
.plan-spec-dur {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 2px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; font-weight: 600; color: #C9D1DC;
}
.plan-spec-dur svg { flex: none; opacity: .7; }
/* البطاقةُ المميّزة: اللوحةُ أوضحُ قليلاً لتتّسق مع إطارها */
.plan-row.featured .plan-spec { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.14); }
/* على الفاتح */
[data-theme="light"] .plan-spec { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .plan-spec-val { color: #0A0E1A; }
[data-theme="light"] .plan-spec-note { color: #5b6675; }
[data-theme="light"] .plan-spec-dur { color: #3d4756; border-top-color: rgba(0,0,0,.08); }
@media (max-width: 780px) {
  /* ⚠️ على الجوّال ينقلب العمودُ صفّاً: ثلاثةُ أسطرٍ فوق بعضها تدفع نصَّ
     الباقة بعيداً تحت الشاشة. */
  .plan-spec { flex-direction: row; flex-wrap: wrap; justify-content: space-around; gap: 14px 10px; }
  .plan-spec-row { flex: 1 1 28%; }
  .plan-spec-dur { flex: 1 1 100%; border-top: 1px solid rgba(255,255,255,.08); }
}
/* زرُّ الباقة صار «التفاصيل» لا «اشترك» */
.plan-row-cta { cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════════
   دعوةُ التحميل الوسطى — 2026-08-24
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ **مختلفةٌ عن دعوة الختام عمداً في ثلاثة أشياء**: الشكلُ (شريطٌ أفقيٌّ
      نحيلٌ لا قسمٌ ممتلئ)، والمنطقُ (تُخاطب من قرأ نصفَ الصفحة فتذكّره بالخطوة
      لا تُقنعه)، والنصُّ (نبرةٌ عمليّةٌ قصيرةٌ لا وعدٌ تسويقيّ).
      ودعوتان متطابقتان في صفحةٍ واحدة تُقرآن تكراراً فتُهمَلان معاً.
   ══════════════════════════════════════════════════════════════════════════ */
.midcta {
  margin: 0 auto; max-width: 1000px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  padding: 26px 32px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,184,0,.10), rgba(0,255,135,.06));
  border: 1px solid rgba(255,184,0,.22);
}
.midcta-txt { flex: 1 1 320px; min-width: 260px; }
.midcta-txt h3 { font-size: 21px; line-height: 1.45; margin: 0 0 6px; }
.midcta-txt p  { font-size: 14.5px; line-height: 1.7; opacity: .78; margin: 0; }
.midcta .store-btns { flex: 0 0 auto; }
@media (max-width: 760px) {
  .midcta { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px; }
  .midcta .store-btns { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   دعوةُ نهايةِ الخطوات — 2026-08-25
   ⚠️ **مختلفةٌ عن الدعوتين الأخريين عمداً**: لا أزرارَ متجرٍ هنا بل سطرٌ واحدٌ
      وزرٌّ يمرّر إلى قسم التحميل. السببُ منطقيٌّ لا جماليّ: الزائرُ في منتصف
      قراءةِ خطواتٍ مرتّبة، ووضعُ متجرَين أمامه يقطع القراءةَ ويكرّر ما سيراه
      بعد قليل. الزرُّ هنا **يواصل** الرحلةَ ولا يقفز بها.
   ══════════════════════════════════════════════════════════════════════════ */
.how-cta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 18px;
  margin-top: 44px; padding: 22px 26px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.14);
}
.how-cta-txt { font-size: 16px; font-weight: 600; color: #C9D1DC; }
.how-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 14px 26px;
  border-radius: 14px; text-decoration: none;
  font-size: 16px; font-weight: 800; color: #0A0E1A;
  background: var(--accent, #00FF87);
  transition: transform .18s ease, box-shadow .18s ease;
}
.how-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,255,135,.24); }
.how-cta-btn svg { width: 18px; height: 18px; flex: none; }
[data-theme="light"] .how-cta { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12); }
[data-theme="light"] .how-cta-txt { color: #3d4756; }
@media (max-width: 560px) {
  .how-cta { flex-direction: column; gap: 14px; text-align: center; padding: 20px 16px; }
  .how-cta-btn { width: 100%; justify-content: center; min-height: 58px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   كرتُ الباقة — بنيةُ التطبيق بهويّة الموقع — 2026-08-25
   ──────────────────────────────────────────────────────────────────────────
   ⚠️⚠️ **البنيةُ من التطبيق، والألوانُ من الموقع.** الكرتُ في التطبيق إطارُه
      تدرّجٌ برتقاليٌّ ورديٌّ أزرق وجسمُه `#111318` — وهي هويّةُ التطبيق، وحين
      نُقلت كما هي شذَّت عن الموقع كلِّه: خلفيّةٌ غريبةٌ عن `--bg-card`، وأزرارٌ
      بتدرّجٍ لا يوجد في أيّ زرٍّ آخرَ في الصفحة، ولونٌ داكنٌ ثابتٌ لا يتبع سمةَ
      الموقع. فالمحفوظُ هو **الترتيبُ والمنطق** (شريطُ رأسٍ باسم الباقة، أيقونةٌ
      دائريّة، وصفٌ، مزايا بعلاماتِ صحٍّ دائريّة، زرُّ تفعيلٍ في القاع)، أمّا
      الألوانُ فمن متغيّرات الموقع: `--bg-card` و`--border-subtle` و`--accent-*`
      ولونُ كلّ باقةٍ من `--plan-accent` المعرَّف أصلاً في هذا الملفّ.
   ══════════════════════════════════════════════════════════════════════════ */
.pricing-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }

/* ⚠️⚠️ **لونٌ واحدٌ للكروت الستّة.** أعطيتُ كلّ باقةٍ لوناً مختلفاً فصار
   القسمُ ستَّ هويّاتٍ لا هويّةً واحدة، وهو عكسُ المطلوب. الباقاتُ تختلف
   بمحتواها لا بألوانها، واللونُ لونُ الموقع: `--accent-green`. */
/* ⚠️ لونُ الهويّة **ذهبيّ** `--accent-gold` — لونُ الشعار وأزرارِ الموقع
   كلِّها. الأخضرُ لونُ إشاراتِ الشراء لا هويّةُ العلامة. */
.plan-app { --acc: var(--accent-gold); height: 100%; }
.pa-border {
  height: 100%; display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.plan-app:hover .pa-border {
  transform: translateY(-4px);
  border-color: var(--border-medium);                                  /* احتياطيّ */
  border-color: color-mix(in srgb, var(--acc) 42%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.plan-app.is-featured .pa-border { border-color: var(--border-medium); border-color: color-mix(in srgb, var(--acc) 34%, transparent); }

/* شريطُ الرأس: بلون الباقة على خلفيّةٍ خفيفةٍ من نفس اللون — لا شريطٌ أبيض */
.pa-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  background: rgba(255,255,255,.05);                                   /* احتياطيّ */
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.10);                      /* احتياطيّ */
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 20%, transparent);
  color: var(--acc);
}
.pa-ribbon { display: inline-flex; width: 15px; height: 15px; flex: none; }
.pa-ribbon svg { width: 100%; height: 100%; }
.pa-name { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .2px; line-height: 1.25; color: var(--text-primary); }

.pa-body {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: 20px; color: var(--text-primary);
}
.pa-top { display: flex; align-items: center; }
.pa-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: rgba(255,255,255,.07);                                   /* احتياطيّ */
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  color: var(--acc);
}
.pa-icon svg { width: 20px; height: 20px; }
.pa-desc { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; min-height: 46px; }

.pa-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pa-feat { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-primary); }
.pa-check {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 8px;
  background: rgba(255,255,255,.09);                                   /* احتياطيّ */
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  color: var(--acc);
}
.pa-check svg { width: 12px; height: 12px; }

/* الزرُّ: نفسُ لغةِ أزرار الموقع — لونٌ مصمت، لا تدرّجُ التطبيق */
.pa-cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 15px 18px; border-radius: 14px;
  text-decoration: none; font-size: 15.5px; font-weight: 800;
  color: var(--bg-primary); background: var(--acc);
  border: 1px solid rgba(0,0,0,.25);                                   /* احتياطيّ */
  border: 1px solid color-mix(in srgb, var(--acc) 70%, #000);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.pa-cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 30px rgba(0,0,0,.30); box-shadow: 0 14px 30px color-mix(in srgb, var(--acc) 26%, transparent); }
.pa-cta svg { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .pa-cta svg { transform: scaleX(-1); }

[data-theme="light"] .pa-border { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .pa-name, [data-theme="light"] .pa-feat { color: #0A0E1A; }
[data-theme="light"] .pa-desc { color: #5b6675; }

@media (max-width: 640px) {
  .pricing-stack { grid-template-columns: 1fr; gap: 18px; }
  .pa-body { padding: 18px 16px; }
  .pa-desc { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   لقطةُ التطبيق — 2026-08-25
   ⚠️ **مائلةٌ وبارزةٌ كسابقتها**: المحاكاةُ المحذوفةُ كانت
      `perspective(1200px) rotateY(-3deg) rotateX(2deg)` مع ظلٍّ عميق، فأخذت
      اللقطةُ نفسَ الميلان ونفسَ الظلّ — التغييرُ في المحتوى لا في الإحساس.
   ⚠️ وتعتدل عند المرور بالفأرة، وتُلغى الحركةُ لمن يطلب تقليلَها.
   ══════════════════════════════════════════════════════════════════════════ */
.app-shot-wrap { display: flex; align-items: center; justify-content: center; position: relative; }

/* ══════════════════════════════════════════════════════════════════════════
   إطارُ الجهاز حول لقطة التطبيق — 2026-08-25
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ اللقطةُ عاريةً تبدو صورةً ملصقةً في الصفحة. وهي **شاشةُ جوّالٍ كاملة**،
      فأصدقُ إطارٍ لها هيكلُ جوّال: حافّةٌ سوداءُ بسماكةٍ متساوية، وشقُّ سمّاعةٍ
      أعلاها، وزرّان على الجانب، وخطُّ ضوءٍ خفيفٌ على الحافّة يوحي بالزجاج.
   ⚠️ والميلانُ انتقل من الصورة إلى **الإطار كلِّه** — الجهازُ يميل لا الصورةُ
      داخله، وإلّا بدت الصورةُ منزلقةً عن هيكلها.
   ⚠️ والحافّةُ تصغر على الجوّال: إطارٌ سميكٌ على شاشةٍ صغيرةٍ يبتلع المحتوى.
   ══════════════════════════════════════════════════════════════════════════ */
.app-shot {
  display: block; position: relative;
  width: 100%; max-width: 320px;
  padding: 11px;
  border-radius: 42px;
  background: linear-gradient(150deg, #2A2F3C 0%, #12151E 42%, #1E222E 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 34px 70px -22px rgba(0,0,0,.75);
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
[dir="rtl"] .app-shot { transform: perspective(1200px) rotateY(3deg) rotateX(2deg); }
.app-shot:hover,
[dir="rtl"] .app-shot:hover {
  transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 0 1px rgba(0,0,0,.55), 0 44px 90px -26px rgba(0,0,0,.8);
}
/* ⚠️ 2026-08-25 — حُذف شقُّ السمّاعة: اللقطةُ **صورةُ شاشةٍ كاملة** أصلاً،
   فأيُّ شقٍّ نرسمه فوقها يقع على محتواها ويحجب جزءاً منه (كان يغطّي اسمَ
   الزوج أعلى الشاشة). الإطارُ وحدَه يكفي لقراءتها جهازاً. */
/* زرّا الجانب */
.app-shot::after {
  content: ""; position: absolute; z-index: 1;
  inset-inline-end: -2px; top: 22%;
  width: 2px; height: 92px; border-radius: 2px;
  background: linear-gradient(180deg, #3A404E, #22262F 34%, transparent 36%, transparent 46%, #3A404E 48%, #22262F 100%);
}
.app-shot-img {
  display: block; width: 100%; height: auto;
  border-radius: 32px;
  background: #0A0E1A;
}
@media (prefers-reduced-motion: reduce) {
  .app-shot, [dir="rtl"] .app-shot { transform: none; transition: none; }
}
@media (max-width: 560px) {
  .app-shot { max-width: 280px; padding: 9px; border-radius: 36px; }
  .app-shot-img { border-radius: 28px; }
}
[data-theme="light"] .app-shot {
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 0 1px rgba(0,0,0,.28), 0 28px 56px -20px rgba(0,0,0,.32);
}

/* سطرُ ما تحت زرّي المتجر في المقدّمة — 2026-08-25 */
.hero-store-note {
  margin: 16px 0 0; max-width: 560px;
  font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.7;
  color: var(--text-secondary);
}
[data-theme="light"] .hero-store-note { color: #5b6675; }
@media (max-width: 560px) { .hero-store-note { text-align: center; margin-inline: auto; } }

/* ⚠️ 2026-08-25 — **علامةُ الترقيم لا تنزل سطراً وحدَها.**
   عنوانٌ عربيٌّ ينتهي بمسافةٍ ثمّ «!» يجعل المتصفّحَ يعامل العلامةَ كلمةً
   مستقلّةً فينقلها سطراً كاملاً وحدَها. `text-wrap: balance` يوزّع الأسطر
   بعدلٍ، و`text-wrap: pretty` يمنع الكلمةَ اليتيمة، ويُترك احتياطيٌّ للمتصفّح
   الذي لا يدعمهما. */
.tg-title, .section-title, .hero-title, .ps-name, .pa-name {
  text-wrap: pretty;
  text-wrap: balance;
}

/* ══════════════════════════════════════════════════════════════════════════
   دعوةُ ما تحت الباقات — 2026-08-25
   ⚠️ **الفعلُ واحدٌ في نهاية القسم لا داخل كلّ كرت.** ستّةُ أزرارٍ متطابقةٍ
      داخل الكروت كانت تكراراً بلا معنى، والقرارُ في الحقيقة قرارٌ واحد.
   ══════════════════════════════════════════════════════════════════════════ */
.plans-cta {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-top: 100px; padding: 34px 26px;
  border-radius: 22px; text-align: center;
  background: rgba(255,255,255,.035);
  border: 1px dashed rgba(255,255,255,.14);
}
.plans-cta-txt {
  margin: 0; max-width: 620px;
  font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; line-height: 1.7;
  color: var(--text-primary);
}
.plans-cta .store-btns { justify-content: center; }
[data-theme="light"] .plans-cta { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.14); }
[data-theme="light"] .plans-cta-txt { color: #0A0E1A; }
@media (max-width: 560px) { .plans-cta { padding: 26px 16px; } }

/* ══════════════════════════════════════════════════════════════════════════
   أقسامُ المساحة والمحلّل والرادار — 2026-08-25 (إعادةُ تصميمٍ كاملة)
   ──────────────────────────────────────────────────────────────────────────
   ⚠️⚠️ **لكلّ قسمٍ ترتيبٌ مختلف** عمداً: المساحةُ تغذيةٌ بجانب شبكةِ مزايا ٢×٢،
      والمحلّلُ مسرحٌ عريضٌ (شارتٌ ضخمٌ + نتيجةٌ) والمزايا صفٌّ من أربع تحته،
      والرادارُ خطواتٌ مرقّمةٌ بجانب رادارٍ ضخم. من يمرّر يرى ثلاثةَ أقسامٍ لا
      قسماً واحداً مكرّراً ثلاثاً.
   ══════════════════════════════════════════════════════════════════════════ */
.sc-head { text-align: center; margin-bottom: 52px; }
.sc-body { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 56px; align-items: center; }
.sc-body-rd { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }

/* بطاقةُ ميزةٍ مشتركةٌ بين الأقسام الثلاثة */
.sc-feat, .sc-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  transition: border-color .2s ease, transform .2s ease;
}
.sc-feat:hover, .sc-step:hover { border-color: rgba(255,184,0,.34); transform: translateY(-3px); }
.sc-feat-ico, .sc-step-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255,184,0,.12); color: var(--accent-gold);
}
.sc-feat-ico svg, .sc-step-ico svg { width: 21px; height: 21px; }
.sc-feat-txt, .sc-step-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-feat-txt b, .sc-step-txt b { font-size: 16px; font-weight: 800; color: var(--text-primary); line-height: 1.4; }
.sc-feat-txt span, .sc-step-txt span { font-size: 14.5px; line-height: 1.75; color: var(--text-secondary); }
.sc-feats { display: grid; gap: 16px; }
.sc-feats-2x2 { grid-template-columns: 1fr 1fr; }
.sc-feats-4 { grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
.sc-steps { grid-template-columns: 1fr; align-content: center; }
.sc-step { position: relative; padding-inline-start: 58px; }
.sc-step-n {
  position: absolute; inset-inline-start: 18px; top: 18px;
  width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #0A0E1A; background: var(--accent-gold);
}
.sc-step .sc-step-ico { display: none; }

/* ── ١) المساحة ── */
.sp-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.sp-stats span {
  flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 13px 8px; border-radius: 14px; font-size: 12.5px; color: var(--text-muted);
  background: rgba(255,255,255,.03); border: 1px solid var(--border-subtle);
}
.sp-stats b { font-size: 19px; font-weight: 800; color: var(--accent-gold); }
.sp-feed { display: flex; flex-direction: column; gap: 16px; }
.sp-post { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 13px; box-shadow: 0 20px 44px -24px rgba(0,0,0,.6); }
.sp-post-head { display: flex; align-items: center; gap: 12px; }
.sp-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #0A0E1A; background: linear-gradient(135deg, var(--accent-gold), #FFD57A); }
.sp-avatar-2 { background: linear-gradient(135deg, #4D7FFF, #9BB6FF); }
.sp-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-name { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--text-primary); font-size: 15px; }
.sp-verify { width: 16px; height: 16px; color: var(--accent-gold); flex: none; }
.sp-time { font-size: 12.5px; color: var(--text-muted); }
.sp-text { margin: 0; font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.sp-attached { position: relative; border-radius: 16px; padding: 16px; background: rgba(255,184,0,.05); border: 1px solid rgba(255,184,0,.22); }
.sp-att-tag { position: absolute; top: -11px; inset-inline-start: 16px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #0A0E1A; background: var(--accent-gold); }
.sp-att-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sp-att-pair { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; color: var(--text-primary); }
.sp-att-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #0A0E1A; background: var(--accent-gold); }
.sp-att-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.sp-att-rows span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.sp-att-rows b { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.sp-att-rows b.is-up { color: var(--accent-green); } .sp-att-rows b.is-down { color: var(--accent-red); }
.sp-actions { display: flex; gap: 22px; padding-top: 4px; }
.sp-act { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-muted); }
.sp-act svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sp-poll-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; position: relative; padding: 11px 13px; border-radius: 11px; overflow: hidden; }
.sp-poll-bar { position: absolute; inset: 0; inline-size: var(--w); background: rgba(255,184,0,.14); border-inline-end: 2px solid rgba(255,184,0,.5); }
.sp-poll-lbl { position: relative; font-size: 14px; color: var(--text-primary); }
.sp-poll-pct { position: relative; font-size: 13.5px; font-weight: 800; color: var(--accent-gold); }
.sp-poll-meta { font-size: 12.5px; color: var(--text-muted); }

[data-theme="light"] .sp-post, [data-theme="light"] .ai-result, [data-theme="light"] .rd-row, [data-theme="light"] .sc-feat, [data-theme="light"] .sc-step { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .sp-text, [data-theme="light"] .ai-summary, [data-theme="light"] .rd-why, [data-theme="light"] .sc-feat-txt span, [data-theme="light"] .sc-step-txt span { color: #3d4756; }
[data-theme="light"] .sc-feat-txt b, [data-theme="light"] .sc-step-txt b { color: #0A0E1A; }

/* ══════════════════════════════════════════════════════════════════════════
   الجوّال — 2026-08-25
   ⚠️⚠️ الشكوى: من قسم «كل ما تحتاجه في مكان واحد» إلى آخر الصفحة، النصوصُ
      صغيرةٌ والعناصرُ غيرُ مرتّبةٍ على الجوّال. السببُ أنّ الأقسامَ بُنيت
      لشاشةٍ عريضةٍ ثمّ ضُغطت. هنا تُعاد الأحجامُ والمسافاتُ لمقاسِ اليد.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .sc-body, .sc-body-rd, .ai-stage { grid-template-columns: 1fr; gap: 34px; }
  .sc-feats-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .sc-sec { padding: 72px 0 !important; }
  .sc-head { margin-bottom: 34px; }
  .sc-feats-2x2, .sc-feats-4 { grid-template-columns: 1fr; }
  .sc-feats { gap: 13px; }
  .sc-feat, .sc-step { padding: 16px; gap: 13px; }
  .sc-feat-txt b, .sc-step-txt b { font-size: 16.5px; }
  .sc-feat-txt span, .sc-step-txt span { font-size: 15px; line-height: 1.8; }
  .sp-stats span { padding: 11px 6px; font-size: 12px; }
  .sp-stats b { font-size: 17px; }
  .sp-post { padding: 17px; }
  .sp-text { font-size: 15px; }
  .ai-chart { min-height: 260px; padding-top: 42px; }
  .ai-svg { height: 214px; }
  .ai-tag { top: calc(42px + (var(--t) * .73) - 11px); font-size: 11px; padding: 3px 8px; }
  .ai-result { padding: 18px; }
  .ai-meter { grid-template-columns: 74px 1fr 28px; font-size: 13px; }
  .rd-scope { width: min(100%, 260px); }
  .rd-count b { font-size: 28px; }
  .rd-row { padding: 13px 14px; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   مساحةُ فوركس برو — تركيبةٌ بعمقٍ لا شبكةُ صناديق — 2026-08-26
   ──────────────────────────────────────────────────────────────────────────
   ⚠️⚠️ المطلوبُ صراحةً: لا صناديقَ متكرّرةً ولا وميضَ زخرفةٍ ولا نمطاً معروفاً.
      فالتركيبةُ هنا **غيرُ متماثلة**: نصٌّ بخطٍّ ضخمٍ وأرقامٍ مكشوفةٍ بلا إطار،
      مقابلَ مسرحٍ ثلاثيِّ الأبعاد فيه ثلاثةُ منشوراتٍ بأعماقٍ مختلفة — الأماميُّ
      حادٌّ والخلفيّان مائلان مموّهان — تطفو بتوقيتاتٍ غير متزامنة.
   ⚠️ العمقُ حقيقيٌّ لا ظلٌّ مرسوم: `perspective` على المسرح و`translateZ` على
      كلّ كرت، فيتحرّك الوعيُ بالمسافة مع أدنى حركة.
   ⚠️ والحركةُ تتوقّف كلّها لمن يطلب تقليلَها في نظامه.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️⚠️ 2026-08-27 — الأقسامُ الثلاثةُ كانت لوناً مسطّحاً واحداً، فتبدو البطاقاتُ
   **طافيةً على فراغ**. الخلفيّةُ الآن ثلاثُ طبقات: أرضيّةٌ متدرّجة، ونسيجُ شبكةٍ
   يتلاشى عند الحواف، ووهجٌ ذهبيٌّ واسعٌ يختلف موضعُه بين قسمٍ وآخر كي لا تتكرّر
   الثلاثةُ بنفس الصورة. ولوحةٌ تحت البطاقات تحملها بدل الفراغ.
   ⚠️ الوهجُ والنسيجُ `pointer-events: none` وإلّا ابتلعا نقراتِ المحتوى. */
.spx {
  position: relative; isolation: isolate;
  padding: 130px 0; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
}
.spx::before, .spx::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
/* نسيجُ الشبكة */
.spx::before {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 25%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 45%, #000 25%, transparent 78%);
}
/* الوهجُ الذهبيّ — موضعٌ مختلفٌ لكلّ قسم */
.spx::after { background: radial-gradient(58% 62% at 82% 28%, rgba(255,184,0,.13), transparent 68%); }
.spx-b::after { background: radial-gradient(56% 60% at 16% 34%, rgba(255,184,0,.12), transparent 66%); }
.spx-c::after { background: radial-gradient(60% 58% at 78% 70%, rgba(255,184,0,.11), transparent 68%); }
/* خطّا شعرةٍ يفصلان القسمَ عمّا قبله وبعده */
.spx-a, .spx-c { border-block: 1px solid rgba(255,255,255,.05); }

/* لوحةُ العرض: مستطيلٌ مائلٌ خلف البطاقات كي لا تطفوَ على العدم */
.spx-plate {
  position: absolute; inset: 4% -6% 6% -2%; z-index: 0; border-radius: 42px;
  background: linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 45%, transparent 78%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 90px -50px rgba(0,0,0,.9);
  transform: rotate(-2.2deg);
}
.spx-b .spx-plate { transform: rotate(2deg); inset: 5% -2% 5% -6%; }
.spx-c .spx-plate { transform: rotate(-1.6deg); }
.spx-wrap {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 64px; align-items: center;
}

/* ── عمودُ النصّ ── */
.spx-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px;
  color: var(--accent-gold); text-transform: uppercase; margin-bottom: 18px;
}
.spx-title {
  margin: 0 0 22px; font-family: var(--font-display, inherit);
  font-size: min(clamp(38px, 5.2vw, 68px), 12.5cqw);
  font-weight: 800; line-height: 1.12;
  letter-spacing: -.5px; color: var(--text-primary);
  white-space: nowrap;
}
.spx-copy { container-type: inline-size; }
.spx-lead { margin: 0 0 34px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.85; color: var(--text-secondary); max-width: 46ch; }
.spx-lead b { color: var(--accent-gold); font-weight: 700; }

/* أرقامٌ مكشوفةٌ بلا صناديق — الفاصلُ خطٌّ شعريٌّ لا إطار */
.spx-nums { display: flex; align-items: flex-end; gap: 34px; margin-bottom: 38px; flex-wrap: wrap; }
.spx-nums span { display: flex; flex-direction: column; gap: 4px; position: relative; }
.spx-nums span + span { padding-inline-start: 34px; }
.spx-nums span + span::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--border-medium);
}
.spx-nums b { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.spx-nums b em { font-style: normal; color: var(--accent-gold); }
.spx-nums i { font-style: normal; font-size: 13px; color: var(--text-muted); }

/* مزايا كسطورٍ بخطٍّ فاصل — لا بطاقات */
.spx-list { list-style: none; margin: 0; padding: 0; }
.spx-list li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 0; border-top: 1px solid var(--border-subtle);
}
.spx-list li:last-child { border-bottom: 1px solid var(--border-subtle); }
.spx-list span { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.spx-list em { font-style: normal; font-size: 14.5px; line-height: 1.7; color: var(--text-muted); }

/* ── المسرحُ ثلاثيُّ الأبعاد ── */
.spx-stage {
  position: relative; min-height: 560px;
  perspective: 1400px; perspective-origin: 50% 45%;
}
.spx-glow {
  position: absolute; inset: 6% -12% 12% -6%; border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgba(255,184,0,.16), transparent 62%);
  filter: blur(12px);
}
.spx-card {
  position: absolute; width: 340px; padding: 18px;
  border-radius: 20px; background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transform-style: preserve-3d;
  will-change: transform;
}
.spx-card header { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.spx-av {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #0A0E1A;
  background: linear-gradient(135deg, var(--accent-gold), #FFD57A);
}
.spx-av-b { background: linear-gradient(135deg, #4D7FFF, #9BB6FF); }
.spx-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spx-meta b { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.spx-meta b svg { width: 15px; height: 15px; color: var(--accent-gold); flex: none; }
.spx-meta i { font-style: normal; font-size: 12px; color: var(--text-muted); }
.spx-card p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text-secondary); }

/* الكرتُ الأماميّ */
.spx-front {
  inset-inline-end: 4%; top: 84px; z-index: 3; width: 372px;
  transform: translateZ(70px) rotateY(-7deg) rotateX(3deg);
  box-shadow: 0 44px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,184,0,.12);
  animation: spxFloatA 7s ease-in-out infinite;
}
[dir="rtl"] .spx-front { transform: translateZ(70px) rotateY(7deg) rotateX(3deg); }
/* الخلفيّان: أصغرُ وأخفتُ ومموّهان — العمقُ يُقرأ بلا شرح */
.spx-back-1 {
  inset-inline-start: 2%; top: 0; z-index: 1; width: 300px; opacity: .5;
  transform: translateZ(-120px) rotateY(11deg) rotateX(4deg) scale(.94);
  filter: blur(1.6px);
  animation: spxFloatB 9s ease-in-out infinite;
}
.spx-back-2 {
  inset-inline-start: 0; bottom: 8px; z-index: 2; width: 322px; opacity: .72;
  transform: translateZ(-46px) rotateY(9deg) rotateX(-3deg) scale(.97);
  filter: blur(.6px);
  animation: spxFloatC 8s ease-in-out infinite;
}
[dir="rtl"] .spx-back-1 { transform: translateZ(-120px) rotateY(-11deg) rotateX(4deg) scale(.94); }
[dir="rtl"] .spx-back-2 { transform: translateZ(-46px) rotateY(-9deg) rotateX(-3deg) scale(.97); }
@keyframes spxFloatA { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes spxFloatB { 0%,100% { translate: 0 0; } 50% { translate: 0 12px; } }
@keyframes spxFloatC { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* شريطُ الاستفتاء داخل الكرت الخلفيّ */
.spx-poll { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 11px; border-radius: 9px; overflow: hidden; }
.spx-poll i { position: absolute; inset: 0; inline-size: var(--w); background: rgba(255,184,0,.14); border-inline-end: 2px solid rgba(255,184,0,.45); }
.spx-poll b { position: relative; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.spx-poll u { position: relative; text-decoration: none; font-size: 12.5px; font-weight: 800; color: var(--accent-gold); }

/* التوصيةُ المرفقة */
.spx-sig { position: relative; margin-top: 14px; padding: 15px; border-radius: 15px; background: rgba(255,184,0,.055); border: 1px solid rgba(255,184,0,.22); }
.spx-sig-tag { position: absolute; top: -10px; inset-inline-start: 15px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #0A0E1A; background: var(--accent-gold); }
.spx-sig-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.spx-sig-pair { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; color: var(--text-primary); }
.spx-sig-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #0A0E1A; background: var(--accent-gold); }
.spx-sig-badge { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--accent-green); background: rgba(0,255,135,.12); }
.spx-sig-rows { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13.5px; }
.spx-sig-rows span { color: var(--text-muted); }
.spx-sig-rows b { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.spx-sig-rows b.up { color: var(--accent-green); }
.spx-sig-rows b.dn { color: var(--accent-red); }
.spx-front footer { display: flex; gap: 18px; margin-top: 13px; font-size: 12.5px; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .spx-front, .spx-back-1, .spx-back-2 { animation: none; }
}
@media (max-width: 1080px) {
  .spx-wrap { grid-template-columns: 1fr; gap: 48px; }
  .spx-stage { min-height: 520px; }
  .spx-front { inset-inline-end: auto; inset-inline-start: 50%; translate: -50% 0; }
  [dir="rtl"] .spx-front { inset-inline-start: auto; inset-inline-end: 50%; translate: 50% 0; }
}
@media (max-width: 760px) {
  .spx { padding: 76px 0; }
  .spx-title { font-size: clamp(30px, 8.6vw, 40px); white-space: normal; }
  .spx-lead { font-size: 16px; }
  .spx-nums { gap: 20px; }
  .spx-nums span + span { padding-inline-start: 20px; }
  .spx-nums b { font-size: 28px; }
  /* ⚠️ أُزيلت مقاساتُ البطاقات هنا: التركيبُ صار يُصغَّر بالتحجيم لا بقصّ العرض. */
}
[data-theme="light"] .spx-card { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .spx-card p { color: #3d4756; }

/* ══════════════════════════════════════════════════════════════════════════
   محلّلُ الرسم البياني — بنفس لغة قسم المساحة — 2026-08-27
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ القسمُ يرث `.spx` كاملاً (العمودُ والمسرحُ والأعماقُ والطفو)، وهذي
      إضافاتُه الخاصّةُ وحدَها: بطاقةُ التحليل الكاملة، وبطاقةُ الصورة الخام،
      وبطاقةُ «لا صفقة». اللغةُ البصريّةُ واحدةٌ والمحتوى مختلف.
   ⚠️ والمسرحُ معكوسٌ عن قسم المساحة (البطاقاتُ من الجهة الأخرى) كي لا يبدو
      القسمان نسخةً واحدةً حين يمرّ الزائرُ بينهما.
   ══════════════════════════════════════════════════════════════════════════ */
.apx-wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.apx-wrap .spx-copy { order: 2; }
.apx-wrap .spx-stage { order: 1; }
.apx .spx-front { inset-inline-end: auto; inset-inline-start: 4%; }
.apx .spx-back-1 { inset-inline-start: auto; inset-inline-end: 2%; }
.apx .spx-back-2 { inset-inline-start: auto; inset-inline-end: 0; }
[dir="rtl"] .apx .spx-front { transform: translateZ(70px) rotateY(-7deg) rotateX(3deg); }
.apx .spx-front { transform: translateZ(70px) rotateY(7deg) rotateX(3deg); }
[dir="rtl"] .apx .spx-back-1 { transform: translateZ(-120px) rotateY(11deg) rotateX(4deg) scale(.94); }
.apx .spx-back-1 { transform: translateZ(-120px) rotateY(-11deg) rotateX(4deg) scale(.94); }
[dir="rtl"] .apx .spx-back-2 { transform: translateZ(-46px) rotateY(9deg) rotateX(-3deg) scale(.97); }
.apx .spx-back-2 { transform: translateZ(-46px) rotateY(-9deg) rotateX(-3deg) scale(.97); }

/* رأسُ البطاقة الأماميّة */
.apx-ic {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #0A0E1A;
  background: linear-gradient(135deg, var(--accent-gold), #FFD57A);
}
.apx-v { margin-inline-start: auto; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.apx-v-buy { color: var(--accent-green); background: rgba(0,255,135,.13); }
.apx-v-flat { color: var(--text-secondary); background: rgba(160,168,192,.14); }

/* شاراتُ ما قرأه المحلّل */
.apx-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
.apx-tags span {
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--accent-gold); background: rgba(255,184,0,.11); border: 1px solid rgba(255,184,0,.2);
}
.apx-rows { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13.5px; }
.apx-rows span { color: var(--text-muted); }
.apx-rows b { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.apx-rows b.up { color: var(--accent-green); } .apx-rows b.dn { color: var(--accent-red); }

.apx-bars { display: grid; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-subtle); }
.apx-bars span { display: grid; grid-template-columns: 72px 1fr 24px; align-items: center; gap: 10px; }
.apx-bars i { font-style: normal; font-size: 12px; color: var(--text-muted); }
.apx-bars u { text-decoration: none; display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.apx-bars u::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--accent-gold), #FFD57A); }
.apx-bars b { text-align: end; font-size: 12.5px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.apx-sum { margin-top: 13px; font-size: 13px; line-height: 1.75; color: var(--text-secondary); }
.apx-sum b { color: var(--accent-gold); }

/* بطاقةُ الصورة الخام */
.apx-raw { padding: 13px; }
.apx-file { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.apx-mini { display: block; width: 100%; height: 118px; margin-top: 10px; opacity: .45; }

/* بطاقةُ «لا صفقة» */
.apx-flatcard header { justify-content: space-between; }
.apx-pair { font-size: 14.5px; font-weight: 800; color: var(--text-primary); }
.apx-note { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-muted); }

@media (max-width: 1080px) {
  .apx-wrap .spx-copy { order: 1; }
  .apx-wrap .spx-stage { order: 2; }
  .apx .spx-front { inset-inline-start: 50%; translate: -50% 0; }
  [dir="rtl"] .apx .spx-front { inset-inline-start: auto; inset-inline-end: 50%; translate: 50% 0; }
}
@media (max-width: 760px) {
  .apx-mini { height: 92px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   «كيف يعمل» — خطواتٌ تفاعليّة — 2026-08-27
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ الشريطُ خطٌّ واحدٌ تمشي عليه النقاطُ، ويمتلئ حتى الخطوة الفعّالة —
      فيعرف الزائرُ موضعَه من الرحلة بنظرةٍ واحدةٍ بلا أن يعدّ.
   ⚠️ وبلا صناديقَ حول الخطوات: النقطةُ والنصُّ فقط، والخطُّ يربطهما.
   ══════════════════════════════════════════════════════════════════════════ */
.hw { --hw-i: 1; margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--border-subtle); }
.hw-title { margin: 0 0 40px; text-align: center; font-family: var(--font-display, inherit); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.6px; color: var(--text-primary); }

.hw-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 42px; }
.hw-rail::before, .hw-rail::after {
  content: ""; position: absolute; top: 19px; height: 2px; border-radius: 2px;
  inset-inline: 12.5%;
}
.hw-rail::before { background: var(--border-subtle); }
.hw-rail::after {
  background: var(--accent-gold);
  inline-size: calc((var(--hw-i) - 1) / 3 * 75%);
  inset-inline-end: auto;
  transition: inline-size .4s cubic-bezier(.3,.8,.3,1);
}
.hw-step {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: center;
}
.hw-n {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: var(--text-muted);
  background: var(--bg-primary); box-shadow: 0 0 0 2px var(--border-subtle) inset;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.hw-step b { font-size: 14.5px; font-weight: 700; color: var(--text-muted); transition: color .25s ease; }
.hw-step:hover .hw-n { box-shadow: 0 0 0 2px var(--border-medium) inset; }
.hw-step.is-on .hw-n { color: #0A0E1A; background: var(--accent-gold); box-shadow: 0 0 0 6px rgba(255,184,0,.14); }
.hw-step.is-on b { color: var(--text-primary); }
.hw-step:focus-visible .hw-n { outline: 2px solid var(--accent-gold); outline-offset: 4px; }

.hw-panel { display: none; }
.hw-panel.is-on { display: block; animation: hwIn .34s ease both; }
@keyframes hwIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.hw-txt { margin: 0 auto 30px; max-width: 62ch; text-align: center; font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.8; color: var(--text-secondary); }

.hw-vis { position: relative; }
.hw-chart { display: block; width: 100%; height: clamp(180px, 22vw, 260px); }
.hw-dim { opacity: .42; }
.hw-chip {
  position: absolute; inset-inline-start: 0; bottom: -6px;
  font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace);
}
.hw-up {
  position: absolute; inset-inline-start: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--accent-gold); background: rgba(10,14,26,.86); border: 1px solid rgba(255,184,0,.3);
}
.hw-up i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-gold); }
.hw-zone { fill: rgba(255,184,0,.09); }
.hw-lv { stroke-width: 2; stroke-dasharray: 10 9; }
.hw-res { stroke: #FF3B5C; opacity: .9; } .hw-sup { stroke: #00E27A; opacity: .9; }
.hw-trend { fill: none; stroke: var(--accent-gold); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.hw-tag { position: absolute; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.hw-tag-res { top: 14%; inset-inline-start: 2%; color: #FF3B5C; background: rgba(255,59,92,.13); }
.hw-tag-sup { top: 72%; inset-inline-start: 2%; color: #00E27A; background: rgba(0,226,122,.12); }

.hw-vis-out { display: flex; align-items: center; justify-content: center; gap: clamp(26px, 5vw, 70px); flex-wrap: wrap; padding: 26px 0; }
.hw-verdict { font-family: var(--font-display, inherit); font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; letter-spacing: -1.2px; color: var(--accent-green); line-height: 1; }
.hw-lv3 { display: flex; gap: clamp(22px, 3.6vw, 48px); margin: 0; flex-wrap: wrap; justify-content: center; }
.hw-lv3 div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hw-lv3 dt { font-size: 13px; color: var(--text-muted); }
.hw-lv3 dd { margin: 0; font-size: clamp(19px, 2.2vw, 28px); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hw-lv3 dd.up { color: var(--accent-green); } .hw-lv3 dd.dn { color: var(--accent-red); }

@media (prefers-reduced-motion: reduce) { .hw-panel.is-on { animation: none; } .hw-rail::after { transition: none; } }
@media (max-width: 760px) {
  .hw { margin-top: 62px; padding-top: 40px; }
  .hw-rail { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 32px; }
  .hw-step b { font-size: 12px; }
  .hw-n { width: 34px; height: 34px; font-size: 13.5px; }
  .hw-rail::before, .hw-rail::after { top: 16px; }
  .hw-txt { font-size: 15px; margin-bottom: 24px; }
  .hw-chart { height: 168px; }
  .hw-tag { font-size: 10.5px; padding: 3px 9px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   رادارُ الصفقات — بنفس لغة المساحة والمحلّل — 2026-08-27
   ⚠️ يرث `.spx` كاملاً؛ وهذي إضافاتُه: بطاقةُ أقوى فرصة، وبطاقةُ جولةِ المسح،
      وبطاقةُ فرصةٍ متوسّطةٍ لم تُختَر. والدرجةُ هي البطلُ البصريُّ في الأماميّة.
   ══════════════════════════════════════════════════════════════════════════ */
.rdx-ic {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #0A0E1A;
  background: linear-gradient(135deg, var(--accent-gold), #FFD57A);
}
.rdx-b { margin-inline-start: auto; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.rdx-b-buy { color: var(--accent-green); background: rgba(0,255,135,.13); }
.rdx-b-sell { color: var(--accent-red); background: rgba(255,59,92,.13); }
.rdx-b-flat { color: var(--text-secondary); background: rgba(160,168,192,.14); }

/* شارةُ «أقوى فرصة» */
.rdx-tag {
  position: absolute; top: -11px; inset-inline-start: 18px;
  padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  color: #0A0E1A; background: var(--accent-gold);
}
.rdx-top { padding-top: 22px; }

/* الدرجةُ الكبيرة */
.rdx-big { display: flex; align-items: baseline; gap: 9px; margin: 16px 0 8px; }
.rdx-big b { font-family: var(--font-display, inherit); font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -2px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rdx-big span { font-size: 13px; color: var(--text-muted); }
.rdx-score { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.rdx-score i { display: block; height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.rdx-score i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--accent-gold), #FFD57A); }
.rdx-score b { font-size: 13px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rdx-score-lg { grid-template-columns: 1fr; margin-bottom: 16px; }
.rdx-score-lg i { height: 9px; }

.rdx-rows { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13.5px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.rdx-rows span { color: var(--text-muted); }
.rdx-rows b { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rdx-rows b.up { color: var(--accent-green); } .rdx-rows b.dn { color: var(--accent-red); }
.rdx-why { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-subtle); font-size: 12.5px; line-height: 1.75; color: var(--text-secondary); }
.rdx-why b { color: var(--accent-gold); }

/* بطاقةُ جولةِ المسح */
.rdx-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--accent-gold); }
.rdx-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold); }
.rdx-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rdx-list li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
.rdx-p { font-size: 13.5px; font-weight: 800; color: var(--text-primary); }
.rdx-list .rdx-b { padding: 3px 9px; font-size: 10.5px; }
.rdx-s { display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 8px; }
.rdx-s i { display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.rdx-s i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); border-radius: 999px; background: rgba(255,184,0,.6); }
.rdx-s b { text-align: end; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* بطاقةُ الفرصة المتوسّطة */
.rdx-mid header { justify-content: space-between; }
.rdx-mid .rdx-score { margin: 12px 0 10px; }
.rdx-note { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-muted); }

@media (max-width: 760px) { .rdx-big b { font-size: 44px; } }

/* ══════════════════════════════════════════════════════════════════════════
   الشريطُ العلويُّ والهيرو — على المرجع — 2026-08-27
   ══════════════════════════════════════════════════════════════════════════ */

        /* يُلغى السهمُ القديم */

/* ═══════════════════════════════════════════════════════════════
   ⚠️⚠️⚠️ 2026-08-27 — الأقسامُ الثلاثة (مساحة/محلّل/رادار) على **الجوال فقط**.
   كلُّ ما هنا داخل استعلامات عرضٍ ضيّقة — شاشةُ الحاسوب لا تُمسّ.

   التركيبُ ثلاثيُّ الأبعاد يحتاج ٦٣٠ × ٥٦٠ بكسلاً: بطاقاتٌ مطلقةُ الموضع
   بإزاحاتٍ ودورانٍ وعمق. ⛔ **لا تُفكَّك إلى عمودٍ مرصوف** — جُرّب فقتل التصميم.
   الصوابُ: يبقى المسرحُ بمقاسه الأصليِّ ويُحجَّم كلُّه (`scale`).

   ⚠️⚠️ ولا تكتب المعاملَ حسابيّاً: `scale(calc((100vw + 36px)/630))`. قسمةُ طولٍ
   على عددٍ تُنتج **طولاً** و`scale` تطلب عدداً مجرّداً — فتسقط القاعدةُ صامتةً.
   المعاملُ عددٌ صريحٌ لكلّ مدى، محسوبٌ ليملأ **أضيقَ عرضٍ في المدى** ناقصَ ٢٤.

   ⚠️⚠️⚠️ ولا بدّ من إبطال قواعدِ ١٠٨٠ التي تنقل البطاقةَ الأماميّةَ إلى وسط
   المسرح (`inset-inline-start: 50%`). وُضعت لتخطيطٍ قديمٍ غيرِ مُحجَّم، ومع
   التحجيم تُزيح العنقودَ عن مركزه: في المحلّل كان يبقى **١٠٥ بكسلاً فارغاً
   يساراً و١٣ يميناً** — وهو «المحذوف يميناً والفراغ يساراً». تُستردّ هنا
   مواضعُ الحاسوب نفسُها فيعود العنقودُ متوازناً.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .spx { padding: 78px 0; }
  .spx-wrap { display: block !important; }
  .spx-copy { margin-bottom: 26px; }

  /* استردادُ مواضع الحاسوب: لا تمركزَ للبطاقة الأماميّة ولا قصَّ لعروض البطاقات */
  .spx-stage .spx-card { width: auto; max-width: none; padding: 18px; }
  .spx-front      { inset-inline-end: 4%; inset-inline-start: auto; translate: none; top: 84px; width: 372px; }
  [dir="rtl"] .spx-front { inset-inline-start: auto; inset-inline-end: 4%; translate: none; }
  .apx .spx-front { inset-inline-start: 4%; inset-inline-end: auto; translate: none; }
  [dir="rtl"] .apx .spx-front { inset-inline-start: 4%; inset-inline-end: auto; translate: none; }

  .spx-stage {
    --k: 1;
    width: 630px; height: 560px; min-height: 0;
    perspective: 1400px;
    transform: scale(var(--k));
    transform-origin: top center;
    margin-inline-start: calc((100% - 630px) / 2);
    margin-bottom: calc(560px * (var(--k) - 1));
  }

  .spx-title { font-size: clamp(30px, 8.4vw, 40px); }
  .spx-nums  { gap: 20px; }
  .spx-nums span + span { padding-inline-start: 20px; }
}
/* المعاملُ يملأ أضيقَ عرضٍ في كلّ مدى: (أضيق − ٢٤) ÷ ٦٣٠ */
@media (max-width: 700px) { .spx-stage { --k: .91; } }
@media (max-width: 600px) { .spx-stage { --k: .78; } }
@media (max-width: 520px) { .spx-stage { --k: .69; } }
@media (max-width: 460px) { .spx-stage { --k: .64; } }
@media (max-width: 430px) { .spx-stage { --k: .58; } }
@media (max-width: 390px) { .spx-stage { --k: .53; } }
@media (max-width: 360px) { .spx-stage { --k: .47; } }

/* ═══════════════════════════════════════════════════════════════════════════
   كاروسيل الباقات — **الجوال فقط** — 2026-08-27
   ───────────────────────────────────────────────────────────────────────────
   الآليّةُ وحدَها مأخوذةٌ من المرجع، لا تصميمُ الكروت: بطاقةٌ في المنتصف
   بحجمها الكامل، وجارتاها أصغرُ وأخفتُ تُطلّان من الجانبين، والتقاطٌ عند كلٍّ.

   ⚠️ عرضُ البطاقة والحشوةُ الجانبيّةُ **نسبتان من عرض الحاوية نفسِها**
   (٨٢٪ + ٩٪ × ٢ = ١٠٠٪). الحشوةُ ضروريّةٌ وإلّا تعذّر توسيطُ الأولى والأخيرة.

   ⚠️ لا يُلمس شيءٌ خارج استعلام العرض — شبكةُ الحاسوب كما هي.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .pricing-stack.is-carousel {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    max-width: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-inline: 9%;
    padding-block: 12px 6px;
    scrollbar-width: none;
  }
  .pricing-stack.is-carousel::-webkit-scrollbar { display: none; }

  .pricing-stack.is-carousel > .plan-app {
    flex: 0 0 82%;
    max-width: 82%;
    height: auto;
    align-self: stretch;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: scale(.88);
    opacity: .45;
    filter: saturate(.7);
    transition: transform .38s cubic-bezier(.22,.61,.36,1),
                opacity   .32s ease,
                filter    .32s ease;
  }
  .pricing-stack.is-carousel > .plan-app.is-current {
    transform: scale(1);
    opacity: 1;
    filter: none;
  }

  /* نقاطُ الدلالة */
  .plans-dots {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; margin-top: 18px;
  }
  .plans-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.18); cursor: pointer;
    transition: width .3s ease, background .3s ease;
  }
  .plans-dot.is-on { width: 26px; background: var(--accent-gold); }
}
/* على الحاسوب تُخفى النقاطُ نهائيّاً حتى لو بقيت في الصفحة. */
@media (min-width: 861px) { .plans-dots { display: none !important; } }

/* ⚠️ 2026-08-28 — علامةُ القسم الحاليِّ في الشريط العلويّ: ذهبيٌّ وخطٌّ تحته.
   تُستعمل في الرئيسيّة (تتنقّل بالتمرير) وفي الصفحات الأخرى (ثابتةٌ في الوسم). */
.nav .nav-link.is-current { color: var(--accent-gold) !important; }
@media (min-width: 769px) {
  .nav .nav-link.is-current { position: relative; }
  .nav .nav-link.is-current::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -8px; height: 2px;
    border-radius: 2px; background: var(--accent-gold);
  }
}

/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٥ (تدقيق الثلاثين — وكيل الموقع، النتيجة ١٤) —
   **رابطُ «تخطّ إلى المحتوى» كان ميّتاً في ستّ صفحات.**
   كان يعتمد على معالجَي تركيزٍ مكتوبَين **داخل الوسم**، وسياسةُ المحتوى تمنع
   كلَّ سكربتٍ داخليّ — والمعالجُ داخل الوسم منها. فلا يظهر الرابطُ أبداً عند
   التنقّل بلوحة المفاتيح، ومن لا يستعمل الفأرة يمرّ على شريط التنقّل كلِّه
   في كلّ صفحة. وهي نفسُ عائلة العطل التي أطفأت وضعَ الهبوط من قبل.
   ✅ العلاجُ بالتنسيق وحدَه: يظهر عند التركيز بلا أيّ سكربت. */
.fb-skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  z-index: 9999; background: #FFB800; color: #0A0E1A;
  padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.fb-skip-link:focus, .fb-skip-link:focus-visible {
  position: fixed; inset-inline-start: 16px; top: 16px;
  width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   وضوحُ محتوى الهيرو فوقَ الفيديو — ٢٠٢٦-١٠-٠٢ (شكوى المالك)
   ──────────────────────────────────────────────────────────────────────────
   ⛔⛔ **محاولتي الأولى كانت خطأً صريحاً فحُذفت**: وضعتُ طبقةً معتمةً بيضاويّةً
   تحتَ عمودِ النصّ. وهي ليست عزلاً — هي **بقعةٌ تُرى**، تخربُ شكلَ الفيديو
   وتقطعُ الصفحة. والمالكُ رفضَها بحقّ.
   ✅ والوضوحُ الصحيحُ يُصنعُ **في النصِّ نفسِه** لا بخلفيّةٍ تحتَه:
      ظلٌّ ناعمٌ يحيطُ بالحروفِ فيفصلُها عن أيِّ إطارٍ يمرُّ خلفَها — ولا يُرى
      كمستطيلٍ ولا كبقعة. ولونٌ أفتحُ لِما كان باهتاً أصلاً.
   ⛔ ولا تُضافُ أرضيّةٌ معتمةٌ لبطاقاتِ الأرقام: تظهرُ مربّعاتٍ سوداءَ على
      المشهد. الناقصُ فيها حدٌّ يُرى وظلٌّ خارجيٌّ يرفعُها — والظلُّ الخارجيُّ
      لا يُرى شكلاً.
   ══════════════════════════════════════════════════════════════════════════ */

/* ١ ── ظلٌّ ناعمٌ واسعٌ يحيطُ بالحروف. القيمُ منخفضةٌ عن قصد: تُحسُّ ولا تُرى. */
.hero .hero-content h1,
.hero .hero-content > p,
.hero .hero-store-note {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 0, 0, 0.38);
}
/* ⛔ والنصُّ ذو التدرّجِ المقصوصِ على الحروفِ **لا يقبلُ ظلَّ نصّ**: لونُه
   شفّافٌ فيظهرُ الظلُّ عبرَه لطخةً رماديّة. فيُرشَّحُ بظلِّ إفلاتٍ يتبعُ حدَّ
   الحروفِ المرسومةِ وحدَها. */
.hero .hero-content h1 .accent,
.hero .hero-badge {
  text-shadow: none;
  filter: drop-shadow(0 1px 7px rgba(0, 0, 0, 0.48));
}

/* ٢ ── لافتةُ الرقمِ كانت `--text-muted` — قستُ تباينَها فوقَ أسطعِ إطار:
   ٢٫١٣ والعتبةُ ٤٫٥. أي غيرُ مقروءةٍ رقميّاً. والعلاجُ تفتيحُ اللونِ وحدَه. */
.hero .hero-stat-label {
  color: #B4BCD2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.hero .hero-stat-num { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42); }

/* ٣ ── بطاقاتُ الأرقام: حدٌّ يُرى وظلٌّ خارجيٌّ يرفعُها عن المشهدِ — بلا
   أرضيّةٍ معتمةٍ تُرى مربّعاً. والتدرّجُ الأصليُّ باقٍ كما هو. */
.hero .hero-stats { border-top-color: rgba(255, 255, 255, 0.11); }

/* ⛔⛔⛔ **محصورةٌ فوقَ ستِّ مئةٍ وأربعين — وهذا كان عطبي على الجوّال.**
   تحتَ هذا العرضِ لا تبقى البطاقةُ بطاقةً: تصيرُ **سطراً أفقيّاً** بحدٍّ سفليٍّ
   وحدَه. فحدٌّ أوضحُ وظلٌّ حولَه يرسمانِ مستطيلاً وظلّاً حولَ سطرٍ — فوضى. */
@media (min-width: 641px) {
  .hero .hero-stat {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.55);
  }
}

/* ⚠️⚠️ وعطبٌ **أقدمُ من تعديلي** كان ساكناً وظهرَ مع الفيديو: تحتَ ستِّ مئةٍ
   وأربعين يُعادُ تشكيلُ البطاقةِ سطراً أفقيّاً — لكن **لا تُلغى خلفيّتُها ولا
   إطارُها ولا زوايا انحناءِها ولا طبقتاها الزائفتان**. فيبقى كلُّ سطرٍ محبوساً
   في مستطيلٍ بزوايا وحدٍّ سفليٍّ زائدٍ تحتَه. على خلفيّةٍ ساكنةٍ كان الأمرُ
   خفيّاً، وفوقَ مشهدٍ متحرّكٍ صار ظاهراً. ✅ والتشكيلُ المقصودُ سطرٌ نظيف. */
@media (max-width: 640px) {
  .hero .hero-stat {
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .hero .hero-stat::before,
  .hero .hero-stat::after { display: none; }
  /* وآخرُ سطرٍ بلا حدٍّ — فلا يبدو الجدولُ مقطوعاً من أسفله. */
  .hero .hero-stat:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   البطاقةُ الزجاجيّةُ في الهيرو — ٢٠٢٦-١٠-٠٢ (شكوى المالك: «نازلةٌ تحتُ وصغيرة»)
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ والشكوى صحيحةٌ بعلّتين مستقلّتين:
   ١. **«نازلة»**: الشبكةُ تُوسّطُ عموديها رأسيّاً، والعمودُ النصّيُّ أطولُ من
      عمودِ البطاقةِ بنحوِ مئةٍ وثلاثين نقطة — فتهبطُ البطاقةُ نصفَ الفرقِ عن
      مستوى العنوان، ثمّ تهبطُ ثانيةً لأنّ حاويتَها نفسَها تُوسّطُها داخلَ
      ارتفاعٍ ثابتٍ أكبرَ منها. فالهبوطُ مركّبٌ من إزاحتين لا واحدة.
   ٢. **«صغيرة»**: عرضُها الأقصى أربعُ مئةٍ وأربعون نقطةً بينما عمودُها أوسعُ —
      فتبدو عائمةً في فراغٍ حولَها، ومعها الآنَ عنوانٌ أكبرُ وزرّا متجرٍ أكبر.
   ✅ العلاج: محاذاةُ أعلى العمودين، وارتفاعٌ يتبعُ المحتوى، وعرضٌ أقربُ لعمودِها.
   ⛔ ولا تُلمَسُ حركةُ الطفوِ ولا الشموعُ خلفَها: الشكوى عن الموضعِ والحجمِ وحدَهما.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 969px) {
  .hero .hero-grid { align-items: start; }
  .hero .hero-visual {
    height: auto;
    min-height: 520px;
    align-items: flex-start;
    /* إزاحةٌ صغيرةٌ تُحاذي أعلى البطاقةِ مع أوّلِ سطرٍ من العنوانِ لا مع الشارة. */
    padding-top: 56px;
  }
  .hero .signal-card { max-width: 520px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   خلفيّةٌ واحدةٌ متّصلةٌ للموقعِ كلِّه — ٢٠٢٦-١٠-٠٢ (أمر المالك)
   ──────────────────────────────────────────────────────────────────────────
   ⛔⛔⛔ **محاولتانِ سابقتانِ فشلتا، وسببُ فشلِهما واحدٌ: عالجتُ الطبقةَ الخطأ.**
   ظننتُ الذي يراه المالكُ خلفيّاتِ الأقسامِ وطبقاتِها، فحيّدتُها وأطفأتُها —
   وما تغيّرَ شيءٌ لأنّ **الذي يُرى ثلاثُ طبقاتٍ مثبّتةٍ بالشاشةِ على مستوى
   الجسمِ كلِّه**، تُرسَمُ فوقَ كلِّ قسمٍ بلا استثناء:

   ١. طبقةٌ زائفةٌ على الجسمِ ترسمُ **شبكةً خطّيّةً كلَّ ستّينَ نقطةً** على
      مساحةِ الشاشةِ كلِّها. وهي «الشبكُ» الذي يشكو منه.
   ٢. **كرةٌ ذهبيّةٌ** قطرُها خمسُ مئةِ نقطةٍ بشفافيّةِ أربعينَ بالمئةِ وضبابِ
      مئةِ نقطةٍ، تطفو حركةً دائمةً في أعلى اليمين.
   ٣. **كرةٌ خضراءُ** قطرُها أربعُ مئةِ نقطةٍ، تطفو في أسفل اليسار.
   وهذه الثلاثُ هي «الألوانُ المختلفةُ من قسمٍ لقسم»: الكرتانِ ثابتتانِ بالشاشةِ
   فيمرُّ المحتوى تحتَهما، فيبدو كلُّ قسمٍ بلونٍ مختلفٍ بحسبِ موضعِه منهما.

   ⚠️ وخطأٌ ثانٍ: التدرّجُ الذي كتبتُه كان فارقُه **ثمانيَ وحداتٍ من مئتين
      وخمسٍ وخمسين** على سطحٍ شبهِ أسود — تحتَ حدِّ إدراكِ العينِ أصلاً. فحتّى
      لو عملَ لَما رآه أحد. الفارقُ الآنَ عشرونَ وحدةً: يُرى ناعماً ولا يُصدم.

   ⚠️ وفخٌّ هيكليٌّ يجبُ أن يُعرَف: **هذه الورقةُ أوّلُ أربعٍ لا آخرُها.** بعدَها
      ورقةُ إصلاحاتِ الجوّالِ وفيها توكيداتٌ قاطعةٌ كثيرة. فكلُّ قاعدةٍ هنا بلا
      توكيدٍ تبقى في أضعفِ موضعٍ في السلسلة — ولهذا تحملُ كلُّ قاعدةٍ أدناه توكيداً.
   ══════════════════════════════════════════════════════════════════════════ */

/* ١ ── السطحُ الواحد: تدرّجٌ مثبّتٌ بالشاشةِ لا بالصفحة، فلا حدَّ بينَ قسمٍ وآخر. */
body {
  background:
    linear-gradient(180deg,
      #080B14 0%,
      #0C1120 36%,
      #101828 64%,
      #080B14 100%) fixed !important;
}

/* ٢ ── إطفاءُ الطبقاتِ الثلاثِ المثبّتةِ — وهذه وحدَها هي التي يراها المالك. */
body::before { display: none !important; }
.fb-orbs,
.orb,
.orb-gold,
.orb-green { display: none !important; }

/* ٣ ── تحييدُ خلفيّاتِ الأقسامِ وحاوياتِها الداخليّة.
   ⚠️ قسمُ نداءِ الإجراءِ خلفيّتُه على **حاويتِه الداخليّةِ** لا عليه — فتحييدُ
      القسمِ وحدَه لا يفعلُ شيئاً، وهو ما فاتني في المرّةِ الأولى. */
.tg-section,
.spx,
.cta-section,
.cta-wrap,
.footer { background: transparent !important; }

/* ٤ ── إطفاءُ الشبكاتِ والتوهّجاتِ داخلَ الأقسام: طبقاتٍ زائفةً وعناصرَ أبناء. */
.spx::before,
.spx::after,
.spx-a::after,
.spx-b::after,
.spx-c::after,
.tg-glow,
.spx-glow { display: none !important; }

/* ⛔ وحُذف خطُّ الفوترِ الذي أضفتُه: الهدفُ محوُ الحدودِ لا زيادتُها. */

/* ⛔ وحُذفت ثلاثُ قواعدَ ميّتةٍ كتبتُها في المرّةِ السابقة: قسمُ الإحصاءاتِ
   وقسمُ العرضِ المعتمِ لا وجودَ لهما في أيِّ صفحةٍ من صفحاتِ الموقع.
   ⚠️ وخلفيّاتُ البطاقاتِ لا تُلمَس: الأداءُ والأسئلةُ والباقاتُ وبطاقاتُ العرضِ
      تحتاجُ سطحاً يرتفعُ عن الخلفيّةِ وإلّا ذابت فيها. */


/* ══════════════════════════════════════════════════════════════════════════
   تتمّةُ التوحيد: محوُ الحدودِ والألواحِ المتبقّية — ٢٠٢٦-١٠-٠٢
   ⚠️ السطحُ الواحدُ لا يكتملُ بتحييدِ الألوانِ وحدَها: **الخطُّ الفاصلُ يُرى
      حتّى حين يكونُ اللونانِ متطابقَين**. فكلُّ خطٍّ أفقيٍّ بينَ قسمَين يصنعُ
      شريحةً وإن كان ما فوقَه وما تحتَه لوناً واحداً.
   ══════════════════════════════════════════════════════════════════════════ */

/* ١ ── خطّا الحدِّ العلويُّ والسفليُّ على قسمَي العرضِ الأوّلِ والثالث. */
.spx-a,
.spx-c { border-block: 0 !important; }

/* ٢ ── لوحُ الإخلاءِ في الفوترِ: لونُه أفتحُ من الصفحةِ بإحدى عشرةَ درجةً في
   الأحمرِ وعشرين في الأزرق — وهو **أظهرُ فارقِ لونٍ بقيَ في الموقعِ كلِّه**.
   يبقى إطارُه الشعريُّ ليُقرأَ أنّه إخلاءٌ، وتذهبُ أرضيّتُه. */
.footer-disclaimer { background: transparent !important; }

/* ٣ ── لوحُ العرضِ المائلُ خلفَ بطاقاتِ الأقسامِ الثلاثة: مستطيلٌ أبيضُ شفّافٌ
   مائلٌ بدرجتين وخُمس، يرسمُ شكلاً واضحاً داخلَ كلِّ قسم.
   ⚠️ وهو **خلفَ البطاقاتِ لا خلفيّةَ قسمٍ** — فإطفاؤه يجعلُها تطفو على العدم.
      لذلك يُخفَّفُ ولا يُحذَف: تبقى حافّتُه تسندُ البطاقاتِ ويذهبُ لوحُه. */
.spx-plate {
  background: linear-gradient(150deg, rgba(255,255,255,.022), rgba(255,255,255,.006) 45%, transparent 78%) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   إتقانُ السطحِ الواحد: ثلاثةُ أعطالٍ باقية — ٢٠٢٦-١٠-٠٢
   ══════════════════════════════════════════════════════════════════════════ */

/* ١ ── ⚠️⚠️⚠️ **تثبيتُ الخلفيّةِ بخاصّيّةِ الإلصاقِ معطوبٌ تاريخيّاً في سفاري
   الآيفون**: يُعامَلُ معاملةَ المتمرّرِ أو يُحدِثُ تهتّكاً في إعادةِ الرسم،
   ومع إخفاءِ الفيضِ الأفقيِّ على الجسمِ قد يختلفُ مرجعُ التثبيتِ بين المتصفّحات.
   ✅ فالسطحُ يُرسَمُ **طبقةً مثبّتةً حقيقيّةً** خلفَ كلِّ شيء — وهذا مسلكٌ
      واحدٌ في كلِّ المتصفّحاتِ بلا استثناء. واللونُ الأساسُ على الجذرِ كي لا
      يظهرَ أبيضُ لحظةً قبلَ رسمِ الطبقة. */
html { background: #080B14; }
body { background: transparent !important; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background: linear-gradient(180deg,
    #080B14 0%,
    #0C1120 36%,
    #101828 64%,
    #080B14 100%);
}

/* ٢ ── ⚠️⚠️ **شريطُ ذوبانِ الهيرو كان يصنعُ حدّاً بدلَ أن يمحوَه.** ينتهي بلونٍ
   صريحٍ مسطّح، بينما سطحُ الصفحةِ تحتَه **مثبّتٌ بالشاشةِ فيتغيّرُ لونُه مع
   التمرير**. فمتى وقعَ أسفلُ الهيرو في وسطِ الشاشةِ كان السطحُ هناك أفتحَ،
   فيظهرُ شريطٌ أغمقُ ارتفاعُه مئةٌ وستّون نقطةً عندَ حدِّ الهيرو بالضبط.
   ✅ والذوبانُ الصحيحُ ينتهي في **شفافيّةٍ كاملةٍ** لا في لون: يُعتّمُ أسفلَ
      الفيديو ويسلّمُ للسطحِ أيّاً كان لونُه لحظتَها.
   ⛔ والهيرو مستثنًى بأمرِ المالك: هذا على **حدِّه** لا عليه. */
.hero::after {
  background: linear-gradient(180deg,
    rgba(8,11,20,0) 0%,
    rgba(8,11,20,.45) 48%,
    rgba(8,11,20,.80) 82%,
    rgba(8,11,20,0) 100%) !important;
}

/* ٣ ── حصانةٌ مستقبليّة: أيُّ قسمٍ يُضافُ لاحقاً يرثُ السطحَ الواحدَ تلقائيّاً،
   فلا تتكرّرُ علّةُ «قسمٌ خلفيّتُه مكتوبةٌ في وسمِه».
   ⛔ والهيرو مستثنًى صراحةً — توثيقاً لأمرِ المالكِ في الكودِ نفسِه. */
main > section:not(.hero),
body > section:not(.hero) { background: transparent !important; }


/* ══════════════════════════════════════════════════════════════════════════
   تكبيرُ الشريطِ العلويِّ على الحاسوب — ٢٠٢٦-١٠-٠٢ (أمر المالك)
   ⚠️ محصورٌ فوقَ ألفٍ ومئتين وثمانين: دونَ ذلك يبدأُ الشريطُ المنسلقُ للجوّال
      وله مقاساتُه، ولا يُلمَسُ هنا.
   ⚠️ والهامشُ محسوب: تعليقٌ موثَّقٌ في الملفِّ يقولُ إنّ المحتوى الكاملَ كان
      يشغلُ ألفاً ومئتين وخمساً وعشرين من ألفٍ ومئتين واثنتين وثلاثين نقطةً
      متاحة — سبعُ نقاطٍ فقط — فصُغِّرت الفجوةُ لرفعِ الهامشِ فوقَ خمسٍ وخمسين.
      فالتكبيرُ هنا يأخذُ من ذلك الهامشِ المحجوزِ ولا يتجاوزُه: الخطُّ يرتفعُ
      نقطةً ونصفاً والفجوةُ تنزلُ نقطتين — فيبقى الهامشُ موجباً.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  /* ارتفاعُ الشريطِ من اثنتين وثلاثين نقطةَ حشوٍ إلى أربعٍ وأربعين. */
  .nav .nav-inner { padding: 22px 28px; }
  /* الشعارُ والاسمُ بجانبِه. */
  .nav .logo { font-size: 24px; gap: 13px; }
  .nav .logo-mark { width: 48px; height: 48px; }
  /* روابطُ القائمة. */
  .nav .nav-link { font-size: 17px; }
  .nav .nav-links { gap: 24px; }
  /* زرُّ اللغةِ وأزرارُ الشريطِ كي لا تبدوَ قزمةً بجانبِ ما كبر. */
  .nav .lang-toggle span { font-size: 13.5px; padding: 6px 12px; }
  .nav .nav-right { gap: 18px; }
  .nav .nav-right .btn,
  .nav .nav-right .btn-primary,
  .nav .nav-right .btn-ghost { font-size: 15.5px; padding: 11px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   زرُّ التشغيلِ على فيديو الهيرو — ٢٠٢٦-١٠-٠٣ (قياسٌ على محرّكِ سفاري نفسِه)
   ──────────────────────────────────────────────────────────────────────────
   ⛔⛔⛔ **حُذفت من هنا ثمانيُ قواعدَ كتبتُها، وكلُّها كانت بلا أثرٍ إطلاقاً.**
   قيست بالبكسلِ على محرّكِ ويبكِت: أربعُ نسخٍ — بلا إخفاءٍ، وبإخفاءِ الجزءِ
   المعترفِ به، وبقواعدي الخمسِ كاملةً، وبالأربعةِ المجهولةِ وحدَها — خرجت
   **متطابقةً إلى البكسلِ الواحد**: ثمانٍ وسبعون وتسعُ مئةِ بكسلٍ في الأربع.
   والسببان:
     • أربعةٌ من أجزائي الخمسةِ تخصُّ محرّكَ كروم لا سفاري أصلاً.
     • والخامسُ يعرفُه سفاري **اسماً** ولا يطابقُ شيئاً: أدواتُ سفاري الحديثةُ
       أُعيد بناؤها في شجرةٍ ظلّيّةٍ مغلقةٍ بلا أسماءِ الأجزاءِ القديمة.
   ⛔ **فلا يوجدُ تنسيقٌ يُخفي أدواتِ سفاري الحديثةَ — لا بخصوصيّةٍ ولا بتوكيد.**

   ✅ **والعلّةُ الحقيقيّةُ في الوسمِ لا في التنسيق.** في مصدرِ ويبكِت دالّةٌ
      تفرضُ الأدواتِ قسراً حين يجتمعُ شرطان: أن يحملَ الفيديو **سمةَ التشغيلِ
      التلقائيّ**، وأن يكونَ الجهازُ في **وضعِ توفيرِ البطاريّةِ** أو ساخناً.
      فالمثلّثُ ليس عطباً: آبلُ تضعُه عمداً «كي يملكَ الزائرُ وسيلةً لتشغيلِ
      المقطعِ بيدِه» — نصُّ تعليقِها في مصدرِها.
   ✅ فحُذفت السمةُ من الوسمين، فانهارَ الشرطُ الأوّلُ ولا تُخلَقُ الأدواتُ
      إطلاقاً. وحلقةُ المحاولاتِ في السكربتِ تكفي وحدَها — قيست عاملةً بلا السمة.

   ⚠️ وفي وضعِ توفيرِ البطاريّةِ **لن يعملَ المقطعُ حتّى بعدَ هذا**: آبلُ تمنعُ
      تشغيلَ الفيديو بلا لمسةٍ منعاً باتّاً. لكنّ الفرقَ جوهريّ: بدلَ مثلّثٍ
      رماديٍّ وسطَ الواجهة، يرى الزائرُ **غلافاً ساكناً نظيفاً** من المقطعِ نفسِه.

   ⛔ وكلاودفلير بريءٌ ممّا اتّهمتُه به في هذا الموضعِ سابقاً: حُمّلتِ الصفحةُ
      الحيّةُ في محرّكِ ويبكِت بهويّةِ آيفون ثلاثَ مرّات، فالمقطعُ يصلُ كاملاً
      وجاهزيّتُه قصوى وزمنُه يتقدّم. والمنعُ الذي رأيتُه بأدواتي تحدّي بوتاتٍ
      لا يمسُّ متصفّحاً حقيقيّاً.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-video { pointer-events: none; }


/* ══════════════════════════════════════════════════════════════════════════
   إخفاءُ الشريطِ العلويِّ عندَ النزول — ٢٠٢٦-١٠-٠٣ (أمر المالك)
   ⚠️ الانزلاقُ بالتحويلِ لا بالموضع: التحويلُ يُرسَمُ على بطاقةِ الرسمِ وحدَها
      بلا إعادةِ حسابِ تخطيطٍ — فلا يتقطّعُ التمريرُ على الأجهزةِ المتوسّطة.
   ⛔ ومن طلبَ تقليلَ الحركةِ يُخفى بلا انزلاق: الإخفاءُ مطلوبٌ والحركةُ المزعجة.
   ══════════════════════════════════════════════════════════════════════════ */
.nav {
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.nav.nav-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}