/* صفحة الهبوط على جذر aqaarly.com — تعيش داخل index.html (قشرة التطبيق نفسها).
 *
 * لماذا هنا لا صفحة مستقلة: الجذر «/» هو قشرة التطبيق وservice worker يخزّنها
 * ويجلبها من «/» عند كل تنصيب — أي ملف مستقل مكان الجذر كان يسمّم كاش القشرة
 * لكل المكاتب المشتركة (sw.js سطر ~234). فالصفحة تُبنى داخل القشرة، وسكربت
 * البوابة في <head> يخفيها عمّن يحمل جلسة أو يفتح مساراً داخلياً أو نطاق كتالوج.
 *
 * قواعد ملزمة هنا:
 *  - كل محدِّد يبدأ بـ#aq-landing — لا تسريب إلى التطبيق ولا العكس (aqarly.css
 *    يُحمَّل في نفس الصفحة، فالعزل بالبناء لا بالحظ).
 *  - خصائص منطقية فقط (inline-start/end) — اللوح الإنكليزي dir=ltr والبقية rtl.
 *  - الهوية: أزرق عقارلي الملكي #0f32c2 نفسه (site.css / theme-color).
 */

#aq-landing {
  --lb: #0f32c2;
  --lb-dark: #0a2496;
  --lb-deep: #071a5e;
  --lb-soft: #eef1fd;
  --ink: #101b3e;
  --ink-2: #4c5677;
  --line: #e2e6f2;
  --bg: #ffffff;
  --soft: #f7f8fc;
  --radius: 18px;
  display: block;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
}
/* التطبيق فعّال — الصفحة تختفي قبل أول رسم (القاعدة هنا وفي <style> داخل
   index.html معاً: هناك كي لا تعتمد الإخفاءة على وصول هذا الملف). */
.aq-app #aq-landing { display: none !important; }

#aq-landing *, #aq-landing *::before, #aq-landing *::after { box-sizing: border-box; }
#aq-landing img { max-width: 100%; display: block; }
#aq-landing a { color: var(--lb); text-decoration: none; }
#aq-landing a:hover, #aq-landing a:focus-visible { text-decoration: underline; }
#aq-landing a:focus-visible { outline: 2px solid var(--lb); outline-offset: 2px; border-radius: 4px; }
#aq-landing h1, #aq-landing h2, #aq-landing h3, #aq-landing p, #aq-landing ul, #aq-landing figure { margin: 0; }
#aq-landing ul { padding: 0; list-style: none; }

#aq-landing .wrap { max-width: 1080px; margin-inline: auto; padding-inline: 20px; }

/* ---------- الرأس ---------- */
#aq-landing .l-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
#aq-landing .l-header .wrap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block: 12px;
}
#aq-landing .l-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.2rem; color: var(--ink);
}
#aq-landing .l-brand img { width: 32px; height: 32px; }
#aq-landing .l-nav {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-inline-start: auto; font-size: 0.95rem; font-weight: 500;
}
#aq-landing .l-nav a { color: var(--ink-2); }
#aq-landing .l-nav a:hover { color: var(--lb); text-decoration: none; }
#aq-landing .l-nav .l-login {
  background: var(--lb); color: #fff; font-weight: 700;
  padding: 8px 20px; border-radius: 12px;
}
#aq-landing .l-nav .l-login:hover { background: var(--lb-dark); }
@media (max-width: 640px) {
  #aq-landing .l-nav a:not(.l-login) { display: none; }
  /* رأس الهاتف: أزرار لغة أصغر كي لا يأكل الرأس ثلث الشاشة الأولى */
  #aq-landing .l-header .wrap { gap: 8px; padding-block: 10px; }
  #aq-landing .l-langs { gap: 4px; }
  #aq-landing .l-langs button { padding: 4px 10px; font-size: 0.75rem; }
  #aq-landing .l-nav .l-login { padding: 6px 14px; font-size: 0.88rem; }
}

/* مبدّل اللغة — يظهر فقط مع الجافاسكربت (landing.js يرفع hidden) */
#aq-landing .l-langs { display: flex; gap: 6px; flex-wrap: wrap; }
#aq-landing .l-langs button {
  border: 1px solid var(--line); background: var(--soft); color: var(--ink);
  border-radius: 999px; padding: 5px 14px; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
}
#aq-landing .l-langs button[aria-pressed='true'] {
  background: var(--lb); border-color: var(--lb); color: #fff;
}
#aq-landing .l-langs button:focus-visible { outline: 2px solid var(--lb); outline-offset: 2px; }
#aq-landing [hidden] { display: none !important; }

/* بلا جافاسكربت تُعرض الألواح الأربعة متتالية (هذا ما يقرؤه فاحص سترايب) —
   فاصل واضح بينها كي لا تبدو صفحة واحدة مكسورة. */
#aq-landing .lang-pane + .lang-pane { border-block-start: 6px solid var(--lb-soft); }

/* ---------- البطل ---------- */
#aq-landing .l-hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(700px 380px at 10% 110%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(155deg, var(--lb) 0%, var(--lb-dark) 55%, var(--lb-deep) 100%);
  color: #fff;
  overflow: hidden;
}
#aq-landing .l-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 28px; align-items: center; padding-block: 56px 64px;
}
#aq-landing .l-hero h1 {
  font-size: clamp(1.85rem, 4.6vw, 3rem);
  line-height: 1.45; font-weight: 700; letter-spacing: -0.5px;
}
#aq-landing .l-hero .l-lead {
  margin-block-start: 14px; font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.86); max-width: 34em;
}
#aq-landing .l-hero .l-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 26px; }
#aq-landing .l-btn {
  display: inline-block; padding: 12px 28px; border-radius: 14px;
  font-weight: 700; font-size: 1.02rem; line-height: 1.6;
}
#aq-landing .l-btn.pri { background: #fff; color: var(--lb); }
#aq-landing .l-btn.pri:hover { background: var(--lb-soft); text-decoration: none; }
#aq-landing .l-btn.ghost {
  color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55);
}
#aq-landing .l-btn.ghost:hover { border-color: #fff; text-decoration: none; }
#aq-landing .l-hero .l-note { margin-block-start: 14px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); }

/* مراوح الهواتف في البطل */
#aq-landing .l-hero-phones { display: flex; justify-content: center; gap: 0; min-width: 0; }
#aq-landing .l-hero-phones .l-phone { width: min(250px, 58vw); flex: none; }
#aq-landing .l-hero-phones .l-phone:nth-child(2) {
  margin-inline-start: -70px; margin-block-start: 56px;
  transform: rotate(-4deg);
}
@media (max-width: 860px) {
  #aq-landing .l-hero .wrap { grid-template-columns: 1fr; padding-block: 44px 40px; }
  #aq-landing .l-hero-phones { margin-block-start: 8px; }
  #aq-landing .l-hero-phones .l-phone { width: min(220px, 56vw); }
}

/* ---------- إطار الهاتف ---------- */
#aq-landing .l-phone {
  background: #0d1220;
  border-radius: 34px;
  padding: 10px;
  box-shadow:
    0 24px 60px -18px rgba(7, 16, 60, 0.55),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
#aq-landing .l-phone::before {
  content: '';
  display: block; width: 86px; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  margin: 2px auto 7px;
}
#aq-landing .l-phone img {
  border-radius: 24px; width: 100%; height: auto;
  background: #f2f4f9;
}

/* إطار المتصفح للشاشات العريضة */
#aq-landing .l-browser {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(7, 16, 60, 0.35);
}
#aq-landing .l-browser .bar {
  display: flex; gap: 6px; padding: 11px 14px;
  background: var(--soft); border-block-end: 1px solid var(--line);
}
#aq-landing .l-browser .bar i {
  width: 10px; height: 10px; border-radius: 50%; background: #d7dcef; display: block;
}
#aq-landing .l-browser img { width: 100%; height: auto; }

/* ---------- شريط الثقة ---------- */
#aq-landing .l-trust { border-block-end: 1px solid var(--line); background: var(--bg); }
#aq-landing .l-trust .wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 18px; padding-block: 18px; text-align: center;
}
#aq-landing .l-trust b { display: block; font-size: 0.98rem; }
#aq-landing .l-trust span { color: var(--ink-2); font-size: 0.85rem; }

/* ---------- أقسام المميزات ---------- */
#aq-landing .l-feat { padding-block: 54px; }
#aq-landing .l-feat:nth-of-type(even) { background: var(--soft); }
#aq-landing .l-feat .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
#aq-landing .l-feat.flip .l-copy { order: 1; }
#aq-landing .l-feat.flip .l-shot { order: 2; }
#aq-landing .l-chip {
  display: inline-block; background: var(--lb-soft); color: var(--lb);
  font-weight: 700; font-size: 0.82rem; border-radius: 999px;
  padding: 4px 14px; margin-block-end: 12px;
}
/* وسم «قيد التفعيل» — ميزةٌ مبنيّة ينقصها إذنٌ خارجي (اعتماد ميتا للنشر
   والتعليقات، ومزوّد الصوت للذكاء الاصطناعي). وجودُه شرطُ صدقٍ لا تجميل:
   بيعُ ميزة لا تصل المكتب اليوم يخالف مراجعة سترايب ويخيّب أول مشترك. */
#aq-landing .l-soon {
  display: inline-block; font-style: normal;
  background: #fdf1dc; color: #8a5a06; border: 1px solid #f2d9a8;
  font-weight: 700; font-size: 0.78rem; border-radius: 999px;
  padding: 2px 11px; margin-inline-start: 8px; vertical-align: middle;
}
#aq-landing .l-plan .l-checks .l-soon { font-size: 0.72rem; padding: 1px 9px; }
#aq-landing .l-note-soon {
  margin-block-start: 14px; font-size: 0.9rem; color: var(--ink-2);
  background: var(--soft); border: 1px solid var(--line);
  border-inline-start: 3px solid #e0a53a; border-radius: 12px; padding: 11px 15px;
}

#aq-landing .l-feat h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.5; }
#aq-landing .l-feat .l-copy > p { margin-block-start: 10px; color: var(--ink-2); }
#aq-landing .l-checks { margin-block-start: 16px; display: grid; gap: 9px; }
#aq-landing .l-checks li { display: flex; gap: 10px; align-items: baseline; }
#aq-landing .l-checks li::before {
  content: '✓'; flex: none; width: 21px; height: 21px; border-radius: 7px;
  background: var(--lb-soft); color: var(--lb); font-weight: 700; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(3px);
}
#aq-landing .l-shot { display: flex; justify-content: center; gap: 0; min-width: 0; }
#aq-landing .l-shot .l-phone { width: min(250px, 62vw); flex: none; }
#aq-landing .l-shot.duo .l-phone:nth-child(2) {
  margin-inline-start: -56px; margin-block-start: 44px; transform: rotate(-3.5deg);
}
#aq-landing .l-feat .l-wide { grid-column: 1 / -1; }
@media (max-width: 860px) {
  #aq-landing .l-feat { padding-block: 40px; }
  #aq-landing .l-feat .wrap { grid-template-columns: 1fr; gap: 26px; }
  /* على عمود واحد النص أولاً دائماً */
  #aq-landing .l-feat.flip .l-copy { order: 0; }
  #aq-landing .l-feat.flip .l-shot { order: 1; }
  #aq-landing .l-shot .l-phone { width: min(225px, 60vw); }
}

/* ---------- الأسعار ---------- */
#aq-landing .l-pricing { padding-block: 60px 46px; background: var(--bg); }
#aq-landing .l-pricing .l-head { text-align: center; max-width: 640px; margin-inline: auto; }
#aq-landing .l-pricing h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
#aq-landing .l-pricing .l-head p { margin-block-start: 8px; color: var(--ink-2); }
#aq-landing .l-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px; margin-block-start: 34px; align-items: stretch;
}
#aq-landing .l-plan {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; background: var(--bg);
  display: flex; flex-direction: column; gap: 0;
}
#aq-landing .l-plan.hot {
  border-color: var(--lb);
  box-shadow: 0 22px 50px -24px rgba(15, 50, 194, 0.45);
  position: relative;
}
#aq-landing .l-plan.hot .l-tag {
  position: absolute; inset-block-start: -13px; inset-inline-start: 22px;
  background: var(--lb); color: #fff; font-size: 0.78rem; font-weight: 700;
  border-radius: 999px; padding: 3px 14px;
}
#aq-landing .l-plan h3 { font-size: 1.15rem; }
#aq-landing .l-plan .l-who { color: var(--ink-2); font-size: 0.88rem; margin-block-start: 2px; }
#aq-landing .l-price { margin-block: 14px 2px; display: flex; align-items: baseline; gap: 7px; }
#aq-landing .l-price b { font-size: 2.1rem; font-weight: 700; letter-spacing: -1px; }
#aq-landing .l-price span { color: var(--ink-2); font-size: 0.9rem; }
#aq-landing .l-plan .l-year { color: var(--ink-2); font-size: 0.84rem; margin-block-end: 14px; }
#aq-landing .l-plan .l-checks { margin-block-start: 4px; font-size: 0.93rem; gap: 7px; }
#aq-landing .l-plan .l-all {
  font-size: 0.86rem; color: var(--ink-2); border-block-start: 1px dashed var(--line);
  margin-block-start: 14px; padding-block-start: 10px;
}
#aq-landing .l-plan .l-btn {
  margin-block-start: 18px; text-align: center;
  background: var(--lb-soft); color: var(--lb);
}
#aq-landing .l-plan .l-btn:hover { text-decoration: none; background: #e2e8fb; }
#aq-landing .l-plan.hot .l-btn { background: var(--lb); color: #fff; }
#aq-landing .l-plan.hot .l-btn:hover { background: var(--lb-dark); }
#aq-landing .l-billing {
  margin-block-start: 22px; background: var(--soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px;
  font-size: 0.92rem; color: var(--ink-2);
}
#aq-landing .l-billing b { color: var(--ink); }

/* ---------- خطوات البدء ---------- */
#aq-landing .l-steps { background: var(--soft); padding-block: 52px; }
#aq-landing .l-steps h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 1.9rem); }
#aq-landing .l-steps ol {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
}
#aq-landing .l-steps li {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
#aq-landing .l-steps i {
  font-style: normal; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--lb); color: #fff; font-weight: 700; font-size: 1.05rem;
  margin-block-end: 12px;
}
#aq-landing .l-steps b { display: block; margin-block-end: 4px; }
#aq-landing .l-steps span { color: var(--ink-2); font-size: 0.92rem; }

/* ---------- الأسئلة الشائعة ---------- */
#aq-landing .l-faq { padding-block: 52px; }
#aq-landing .l-faq h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 1.9rem); }
#aq-landing .l-faq .wrap { max-width: 760px; }
#aq-landing .l-faq details {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; margin-block-start: 12px; background: var(--bg);
}
#aq-landing .l-faq details:first-of-type { margin-block-start: 26px; }
#aq-landing .l-faq summary {
  cursor: pointer; font-weight: 700; list-style: none; position: relative;
  padding-inline-end: 28px;
}
#aq-landing .l-faq summary::-webkit-details-marker { display: none; }
#aq-landing .l-faq summary::after {
  content: '+'; position: absolute; inset-inline-end: 2px; inset-block-start: 0;
  color: var(--lb); font-weight: 700; font-size: 1.2rem;
}
#aq-landing .l-faq details[open] summary::after { content: '−'; }
#aq-landing .l-faq details p { margin-block-start: 8px; color: var(--ink-2); font-size: 0.95rem; }

/* ---------- النداء الأخير ---------- */
#aq-landing .l-final {
  background: linear-gradient(155deg, var(--lb) 0%, var(--lb-deep) 100%);
  color: #fff; text-align: center; padding-block: 56px;
}
#aq-landing .l-final h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
#aq-landing .l-final p { margin-block-start: 8px; color: rgba(255, 255, 255, 0.85); }
#aq-landing .l-final .l-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-block-start: 24px; }

/* ---------- التذييل ---------- */
#aq-landing .l-footer { background: var(--soft); border-block-start: 1px solid var(--line); }
#aq-landing .l-footer .wrap { padding-block: 28px; font-size: 0.92rem; color: var(--ink-2); }
#aq-landing .l-footer nav { display: flex; gap: 14px; flex-wrap: wrap; margin-block-end: 12px; }
#aq-landing .l-footer a { color: var(--ink-2); }
#aq-landing .l-footer a:hover { color: var(--lb); }
#aq-landing .l-footer .l-fine { font-size: 0.85rem; margin-block-start: 6px; }

/* ---------- حركة ظهور خفيفة (landing.js يضيف .in — بلا جافاسكربت كل شيء ظاهر) ---------- */
@media (prefers-reduced-motion: no-preference) {
  #aq-landing.js-anim .l-feat .wrap,
  #aq-landing.js-anim .l-plan,
  #aq-landing.js-anim .l-steps li {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  /* ⚠️ نفس محدِّدات الإخفاء + ‏.in — محدِّد أعمّ (`.js-anim .in`) يخسر أمام
     `.l-feat .wrap` بالأولوية فتبقى الأقسام شفافة للأبد (وقع فعلاً). */
  #aq-landing.js-anim .l-feat .wrap.in,
  #aq-landing.js-anim .l-plan.in,
  #aq-landing.js-anim .l-steps li.in { opacity: 1; transform: none; }
}

/* البريد داخل نص RTL */
#aq-landing .l-email { direction: ltr; unicode-bidi: isolate; font-weight: 700; }
