/* ════════════════════════════════════════════════════════════════════════
   PRO STAR TCN — PUBLIC LANDING · DARK "CITY" SKIN
   ────────────────────────────────────────────────────────────────────────
   يُحمَّل بعد landing.css في index.html وحدها. الصفحة كلها مبنيّة على رموز
   ألوان (var(--bg-main) …) فيكفي إعادة تعريفها هنا ليقلب المظهر بأكمله
   إلى الداكن — ثم تُعالَج يدويًّا المواضع القليلة التي فيها لون أبيض ثابت.
   الهوية تبقى برتقالية، لكن بدرجة أنصع تصلح فوق الأسود.

   ⚠️ الأسماء والبنية كما هي — لا شيء في lang.js ولا CMS ولا الـJS يتغيّر.
   ⚠️ حذفُ وسم <link> الخاصّ بهذا الملف من index.html يُعيد المظهر الفاتح.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── ١) الرموز: نسخة داكنة تخصّ هذه الصفحة وحدها ─────────────────────── */
/* المحدِّدات الثلاثة مجتمعةً (0,2,0) لتتغلّب على :root و[data-theme] في
   tokens.css أيًّا كان الوضع الذي يضبطه theme.js. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --bg-main:        #05070B;
  --bg-secondary:   #080B12;
  --bg-card:        rgba(255,255,255,.045);
  --bg-hover:       rgba(255,255,255,.085);
  --bg-input:       rgba(255,255,255,.05);
  --bg-elevated:    rgba(255,255,255,.07);
  --bg-darker:      #020407;
  --bg-overlay:     rgba(0,0,0,.72);

  --primary:        #FF9124;
  --primary-hover:  #FFA548;
  --primary-deep:   #C96A0C;
  --primary-soft:   rgba(255,145,36,.14);
  --primary-glow:   rgba(255,145,36,.34);
  --primary-bg:     rgba(255,145,36,.07);
  --primary-fg:     #FFB061;

  --text-main:       #F4F7FB;
  --text-secondary:  #C4CCDA;
  --text-muted:      #8D98AB;
  --text-disabled:   #667082;
  --text-link:       #FF9124;

  --border-soft:    rgba(255,255,255,.065);
  --border-main:    rgba(255,255,255,.13);
  --border-strong:  rgba(255,255,255,.24);

  --success:     #34D399;
  --success-bg:  rgba(52,211,153,.13);
  --success-fg:  #6EE7B7;
  --danger:      #F87171;
  --danger-bg:   rgba(248,113,113,.13);
  --danger-fg:   #FCA5A5;
  --warning:     #FBBF24;
  --warning-bg:  rgba(251,191,36,.13);
  --warning-fg:  #FCD34D;

  --lp-shadow:    0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.42);
  --lp-shadow-lg: 0 24px 60px rgba(0,0,0,.55);

  /* خاصّة بهذه الجلد: ألوان سماء المدينة */
  --city-sky-top:  #04060A;
  --city-sky-mid:  #071019;
  --city-horizon:  #14202C;
}

html { color-scheme: dark; background: var(--bg-main); }
body { background: var(--bg-main); color: var(--text-main); }
.lp-page { background: var(--bg-main); }

::selection { background: rgba(255,145,36,.32); color: #fff; }

/* شريط تمرير رفيع يليق بالخلفية الداكنة */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
*::-webkit-scrollbar-track { background: transparent; }

/* ─── ٢) الهيدر: زجاج داكن بدل الأبيض الشفّاف ─────────────────────────── */
.lp-page .lp-header {
  background: rgba(5,7,11,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}
.lp-page .lp-header.scrolled {
  background: rgba(5,7,11,.88) !important;
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.lp-brand .mark {
  box-shadow: 0 8px 22px var(--primary-glow);
}
.lp-header-right > button[onclick] {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text-secondary) !important;
  backdrop-filter: blur(8px);
}
.lp-header-right > button[onclick]:hover {
  background: rgba(255,145,36,.12) !important;
  border-color: rgba(255,145,36,.45) !important;
}
.lp-cta { box-shadow: 0 8px 24px var(--primary-glow); }
.lp-mobile-toggle {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12);
}
/* القائمة المنسدلة تطفو فوق المحتوى — فتحتاج خلفية معتمة لا شفّافة */
.lp-mobile-nav {
  background: rgba(8,11,18,.96);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.lp-mobile-nav a { border-bottom-color: rgba(255,255,255,.06); }

/* ─── ٣) الهيرو: خلفية دبي الليلية ────────────────────────────────────── */
/* ⚠️ لا display:flex هنا — الهيرو في وضع fullpage شاشةٌ ثابتة الارتفاع
   وأبناؤه (المدينة، الشريط الجاري) مُطلَقو الموضع، فتحويله إلى flex يصفّهم
   في سطر واحد ويسحق عمود الهاتف. الفراغ العلوي وحده يكفي للتوسيط. */
.lp-hero {
  background: transparent;
  min-height: min(100vh, 900px);
  padding-top: clamp(116px, 16vh, 172px);
  padding-bottom: clamp(56px, 8vh, 96px);
}
.lp-hero::before { display: none; }      /* نُقط الخلفية القديمة */
.lp-hero::after  { display: none; }      /* الشفق القديم — بدَله المدينة */

/* الحاوية التي يبني فيها landing-city.js المدينة */
.lp-city {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; user-select: none;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(255,145,36,.10) 0%, transparent 58%),
    linear-gradient(180deg, var(--city-sky-top) 0%, var(--city-sky-mid) 46%, var(--city-horizon) 100%);
}
.lp-city svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* طبقات تتحرّك بمقادير مختلفة مع الماوس ⇒ إحساس العمق */
.lp-city .lyr { will-change: transform; transition: transform .45s cubic-bezier(.2,.8,.2,1); }

/* ضباب دافئ فوق قاعدة الأبراج (تلوّث ضوء المدينة) */
.lp-city-haze {
  position: absolute; inset: auto 0 0 0; height: 62%;
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(255,145,36,.22) 0%, transparent 62%),
    radial-gradient(40% 80% at 16% 100%, rgba(88,140,255,.12) 0%, transparent 66%),
    radial-gradient(45% 85% at 86% 100%, rgba(255,110,60,.13) 0%, transparent 64%);
  filter: blur(14px);
  animation: lp-haze 16s ease-in-out infinite alternate;
}

/* سحابة رقيقة تعبر ببطء */
.lp-city-cloud {
  position: absolute; top: 12%; inset-inline-start: -40%;
  width: 60%; height: 26%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(150,180,220,.10) 0%, transparent 70%);
  filter: blur(24px);
  animation: lp-cloud 78s linear infinite;
}
.lp-city-cloud.b { top: 30%; width: 45%; height: 18%; opacity: .7; animation-duration: 112s; animation-delay: -40s; }

/* تعتيم الحواف حتى لا تشتّت الصورة عن النصّ */
.lp-city-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 62% at 50% 42%, transparent 0%, rgba(3,5,9,.55) 78%, rgba(3,5,9,.9) 100%),
    linear-gradient(180deg, rgba(3,5,9,.72) 0%, transparent 26%, transparent 62%, rgba(3,5,9,.85) 100%);
}
/* في RTL يقع النصّ يمينًا — نُظلم جهته قليلًا لرفع التباين */
.lp-city-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(3,5,9,.62) 0%, rgba(3,5,9,.18) 46%, transparent 74%);
}
[dir="ltr"] .lp-city-scrim {
  background: linear-gradient(to right, rgba(3,5,9,.62) 0%, rgba(3,5,9,.18) 46%, transparent 74%);
}

/* حبيبات فيلم خفيفة تمنع تحزّم التدرّجات (banding) */
.lp-city-grain {
  position: absolute; inset: -50%;
  opacity: .045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: lp-grain 1.1s steps(3) infinite;
}

/* ─── ٤) نصّ الهيرو فوق المدينة ───────────────────────────────────────── */
.lp-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
.lp-pill .text { color: #E7ECF4; }
.lp-pill .dot { box-shadow: 0 0 12px var(--primary); }

.lp-h1 {
  font-size: clamp(34px, 5.4vw, 64px);
  max-width: 20ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
/* الكلمات المميّزة — يلفّها decorateHeroTitle() في index.html */
.lp-h1 .ac {
  background: linear-gradient(100deg, var(--primary) 0%, #FFD08A 45%, var(--primary) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lp-sheen 7s linear infinite;
}
.lp-sub { color: #B7C0D0; text-shadow: 0 1px 18px rgba(0,0,0,.5); }
.lp-hero-trust { color: #9AA5B7; }
.lp-hero-trust .av span { border-color: rgba(255,255,255,.14); background: rgba(255,145,36,.18); }

/* الزرّ الثانوي زجاجي مثل النموذج */
.lp-btn-secondary {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: #EDF1F7;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lp-btn-secondary:hover {
  background: rgba(255,145,36,.12);
  border-color: rgba(255,145,36,.55);
  color: #FFC58A;
}
/* الزرّ الأساسي يتنفّس ضوءًا */
.lp-cta-big, .lp-cta-xl {
  box-shadow: 0 12px 34px var(--primary-glow), 0 0 0 1px rgba(255,255,255,.06) inset;
  animation: lp-breathe 4.5s ease-in-out infinite;
}
.lp-cta-big:hover, .lp-cta-xl:hover { animation-play-state: paused; }

/* الهاتف: هالة برتقالية وحدّ ألمع فوق السواد */
.lp-phone {
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 50px 110px rgba(0,0,0,.7), 0 0 90px rgba(255,145,36,.16);
}
.lp-mock-badge {
  background: rgba(16,20,28,.82);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #EDF1F7;
}

/* ─── ٥) الشريط الجاري ────────────────────────────────────────────────── */
.lp-ticker {
  background: rgba(255,255,255,.035);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.lp-ticker-item { color: #A8B2C3; }

/* ─── ٦) البطاقات: زجاج بحدٍّ شعري + توهّج عند المرور ─────────────────── */
.lp-stat, .lp-step, .lp-faq-item, .lp-test-card, .lp-blog-card,
.lp-vs-card, .lp-feature-card, .lp-contact-card, .lp-job-card, .lp-tier-row {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.075);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lp-stat:hover, .lp-step:hover, .lp-blog-card:hover,
.lp-feature-card:hover, .lp-job-card:hover, .lp-tier-row:hover, .lp-faq-item:hover {
  border-color: rgba(255,145,36,.38);
  box-shadow: 0 20px 46px rgba(0,0,0,.5), 0 0 32px rgba(255,145,36,.10);
}
.lp-stat .num, .lp-step h3, .lp-job-title, .lp-faq-q, .lp-blog-title,
.lp-feature-card h3, .lp-contact-card h3, .lp-h2, .lp-content h1,
.lp-content h2, .lp-content h3 { color: var(--text-main); }
.lp-stat .icon { filter: drop-shadow(0 0 14px var(--primary-glow)); }
.lp-step .n { box-shadow: 0 10px 26px var(--primary-glow); }
.lp-eyebrow { border: 1px solid rgba(255,145,36,.24); }

/* ─── ٧) قسم المقارنة (وحده أفتح قليلًا ليفصل الإيقاع) ───────────────── */
.lp-compare {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255,145,36,.09) 0%, transparent 62%),
    linear-gradient(180deg, #080B12 0%, #06080D 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lp-compare::before {
  background-image: radial-gradient(rgba(255,145,36,.16) 1px, transparent 1px);
  opacity: .35;
}
.lp-vs-card.pro {
  border-color: rgba(255,145,36,.55);
  box-shadow: 0 26px 70px rgba(255,145,36,.16), 0 0 0 1px rgba(255,145,36,.12) inset;
}
.lp-vs-card.solo { opacity: .82; }
.lp-vs-head { border-bottom-color: rgba(255,255,255,.08); }
.lp-vs-or {
  background: rgba(10,13,20,.92); border: 1px solid rgba(255,255,255,.14);
  color: #E7ECF4; backdrop-filter: blur(10px);
}
.lp-vs-cta { box-shadow: 0 12px 32px var(--primary-glow); }

/* ─── ٨) شريط الدعوة الختامي ─────────────────────────────────────────── */
.lp-cta-section .inner {
  background: linear-gradient(135deg, #FF9124 0%, #E0700F 52%, #B65708 100%);
  box-shadow: 0 34px 90px rgba(255,145,36,.22);
}
.lp-cta-section .lp-cta-xl {
  background: #07090E; color: #FFB061;
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
  animation: none;
}
.lp-cta-section .lp-cta-xl:hover { background: #0C1017; opacity: 1; }

/* ─── ٩) التذييل ─────────────────────────────────────────────────────── */
.lp-footer {
  background: linear-gradient(180deg, #06080D 0%, #04060A 100%);
  border-top: 1px solid rgba(255,255,255,.07);
}
.lp-footer-socials a {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10);
}
.lp-footer-socials a:hover { background: rgba(255,145,36,.16); border-color: var(--primary); }
.lp-footer-bottom { border-top-color: rgba(255,255,255,.07); }

/* ─── ١٠) الحركة ─────────────────────────────────────────────────────── */
@keyframes lp-sheen   { from { background-position: 0% 50%; } to { background-position: -220% 50%; } }
@keyframes lp-breathe { 0%,100% { box-shadow: 0 12px 34px var(--primary-glow), 0 0 0 1px rgba(255,255,255,.06) inset; }
                        50%     { box-shadow: 0 16px 46px rgba(255,145,36,.5), 0 0 0 1px rgba(255,255,255,.10) inset; } }
@keyframes lp-haze    { from { opacity: .75; transform: translate3d(0,0,0) scale(1); }
                        to   { opacity: 1;   transform: translate3d(-2%,-1.5%,0) scale(1.06); } }
@keyframes lp-cloud   { from { transform: translateX(0); } to { transform: translateX(260%); } }
@keyframes lp-grain   { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); }
                        50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-2%); }
                        100% { transform: translate(0,0); } }
@keyframes lp-twinkle { 0%,100% { opacity: .18; } 50% { opacity: 1; } }
@keyframes lp-window  { 0%,100% { opacity: .25; } 45% { opacity: .95; } }
@keyframes lp-beacon  { 0%,88%,100% { opacity: .15; } 92% { opacity: 1; } }
@keyframes lp-plane   { from { transform: translateX(-8%); opacity: 0; }
                        8%,92% { opacity: 1; }
                        to { transform: translateX(112%); opacity: 0; } }
@keyframes lp-sweep   { 0% { transform: translateX(-30%) rotate(8deg); opacity: 0; }
                        18%,42% { opacity: .5; }
                        100% { transform: translateX(130%) rotate(8deg); opacity: 0; } }

.lp-city .star   { animation: lp-twinkle 4s ease-in-out infinite; }
.lp-city .win    { animation: lp-window 6s ease-in-out infinite; }
.lp-city .beacon { animation: lp-beacon 3.4s linear infinite; }
.lp-city-plane   { position: absolute; top: 18%; inset-inline: 0; height: 3px; }
.lp-city-plane i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.7);
  animation: lp-plane 46s linear infinite;
}
/* شعاع ضوء يمسح الأبراج كل حين */
.lp-city-sweep {
  position: absolute; top: -20%; inset-inline-start: 0; width: 22%; height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,190,120,.12), transparent);
  filter: blur(18px);
  animation: lp-sweep 26s ease-in-out infinite;
}

/* ─── ١١) صفحات المحتوى العامّة إن حُمِّل الملف عليها لاحقًا ────────────── */
.lp-content a { color: var(--primary-fg); }
.login-page .login-form { backdrop-filter: blur(12px); }

/* ─── ١٢) احترام تفضيل تقليل الحركة ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-city-haze, .lp-city-cloud, .lp-city-grain, .lp-city-sweep,
  .lp-city .star, .lp-city .win, .lp-city .beacon, .lp-city-plane i,
  .lp-h1 .ac, .lp-cta-big, .lp-cta-xl { animation: none !important; }
  .lp-city .lyr { transition: none !important; transform: none !important; }
}

/* ─── ١٣) الشاشات الصغيرة ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .lp-hero { min-height: auto; padding-top: clamp(96px, 14vh, 132px); }
  .lp-city-scrim { background: linear-gradient(180deg, rgba(3,5,9,.55) 0%, rgba(3,5,9,.25) 45%, rgba(3,5,9,.8) 100%); }
  .lp-h1 { text-shadow: 0 2px 22px rgba(0,0,0,.75); }
}