/* ===================================================================
   landing.css — صفحة المنتج التعريفية (الدومين الرئيسي)

   ★ اللوحة أربعة ألوان لا أكثر. ★

       --gold   لون الهوية — العناوين المميّزة والأزرار والتمييز
       --ink    الحبر — كل نصّ، وكل حدّ، وكل ظلّ، بشفافيات مختلفة
       --bg     خلفية الصفحة
       --card   سطح البطاقات

   والرمادي المكتوم والحدود ليست ألوانًا خامسة وسادسة: هي الحبر نفسه
   بشفافية. وهذا هو ما يجعل الوضع الليلي أربعة أسطر لا لوحة ثانية —
   وهو أيضًا ما يمنع التشتّت البصري الذي يقع حين تتكاثر الألوان.

   ولا تُستعمل هنا رموز التطبيق (assets/theme.css): الصفحة تسكن
   الدومين الرئيسي وحدها، مستقلة عن أي صالة، فتُنشر بنسخها الثلاث
   ولا تحتاج شيئًا من المشروع. ولو رُبطت بـ ../assets/theme.css لَما
   وُجد الملف أصلًا في الدومين الرئيسي — فالاستقلال هنا شرط نشر لا ذوق.

   ★ لكن القيم الأربع مرآة لـ assets/theme.css، وتخلّفُها عنه هو
   الانحراف الوحيد الممكن في اللوحة كلها. ★ فيحرسه فحصٌ آليّ يقارن
   الملفين ويوقف النشر عند أول اختلاف:

       node .claude/check-landing-palette.js

   وهو ضمن فحوص ما قبل النشر في deploy.sh. أي تعديل على theme.css
   يمسّ هذه الأربعة يجب أن يُنقل إلى هنا يدويًّا — والفحص هو ما يضمن
   ألّا يُنسى.

       --gold ← --c-brand-gold      --bg   ← --c-background
       --ink  ← --c-on-surface      --card ← --c-surface-lowest
   =================================================================== */

:root {
  --gold: 201 162 39;
  --ink:  28 28 24;
  --bg:   253 249 242;
  --card: 255 255 255;

  --g:      rgb(var(--gold));
  --g-06:   rgb(var(--gold) / .06);
  --g-12:   rgb(var(--gold) / .12);
  --g-28:   rgb(var(--gold) / .28);
  --t:      rgb(var(--ink));
  --t-70:   rgb(var(--ink) / .70);
  --t-55:   rgb(var(--ink) / .55);
  --line:   rgb(var(--ink) / .11);
  --shadow: 0 2px 6px rgb(var(--ink) / .04), 0 18px 50px rgb(var(--ink) / .07);
  --shadow-lg: 0 40px 90px rgb(var(--ink) / .16);

  --r: 22px;
  --r-sm: 14px;
  --max: 1140px;
}

[data-theme="dark"] {
  --gold: 213 177 108;
  --ink:  228 212 216;
  --bg:   9 4 7;
  --card: 20 8 13;
  --line: rgb(var(--ink) / .14);
  --shadow: 0 2px 6px rgb(0 0 0 / .3), 0 18px 50px rgb(0 0 0 / .35);
  --shadow-lg: 0 40px 90px rgb(0 0 0 / .5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Cairo', system-ui, sans-serif;
  background: rgb(var(--bg));
  color: var(--t);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.32; margin: 0; font-weight: 800; }
p { margin: 0; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 22px; }
.gold { color: var(--g); }
.muted { color: var(--t-70); }

/* ===================================================================
   الترويسة
   =================================================================== */

header.top {
  position: sticky; top: 0; z-index: 80;
  background: rgb(var(--bg) / .85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
header.top.stuck { border-bottom-color: var(--line); box-shadow: 0 8px 30px rgb(var(--ink) / .05); }

.top-in { display: flex; align-items: center; gap: 20px; height: 74px; }

/* ★ خانة الشعار ★ — ضع صورتك داخل .logo-slot وستحلّ محلّ النصّ */
.logo-slot { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.16rem; color: var(--g); }
/* الشعار لقطةٌ رأسية (الرمز فوق الاسم)، فارتفاع 40px يجعله 25px عرضًا
   — أضأل من أن يُقرأ في ترويسة. والشريط 74px، فـ52 تسع بهامش. */
.logo-slot img { height: 52px; width: auto; }

/* نسختا الشعار — واحدة لكل أرضية، والظاهرة منهما تتبع السمة.
   والملفّان ٣٢ ك.ب لكلٍّ، فتحميلهما معًا مقبول — والبديل (تبديل src
   من JavaScript) يعني ومضة شعارٍ خاطئ عند كل فتحة في الوضع الليلي. */
.logo-slot .l-dark { display: none; }
[data-theme="dark"] .logo-slot .l-light { display: none; }
[data-theme="dark"] .logo-slot .l-dark  { display: block; }

nav.links { display: flex; gap: 28px; margin-inline-start: auto; }
nav.links a { font-size: .95rem; font-weight: 600; color: var(--t-70); transition: color .18s; }
nav.links a:hover { color: var(--g); }

#burger { display: none; background: none; border: 0; cursor: pointer; color: var(--t); padding: 8px; margin-inline-start: auto; }
#burger svg { width: 26px; height: 26px; }

/* ===================================================================
   الأزرار
   =================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px; border-radius: 999px;
  font-family: inherit; font-weight: 700; font-size: 1rem;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .22s ease, background .2s, color .2s, border-color .2s;
}
.btn-primary { background: var(--g); color: rgb(43 42 38); box-shadow: 0 10px 26px rgb(var(--gold) / .3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgb(var(--gold) / .38); }
.btn-outline { border-color: var(--line); color: var(--t); }
.btn-outline:hover { border-color: var(--g); color: var(--g); }
.btn-sm { padding: 10px 20px; font-size: .92rem; }

/* ===================================================================
   البطل
   =================================================================== */

.hero { position: relative; padding: 74px 0 90px; overflow: hidden; }

/* هالة ذهبية خفيفة خلف البطل — من لون الهوية نفسه، بلا لون جديد */
.hero::before {
  content: ""; position: absolute; inset-inline-end: -12%; top: -28%;
  width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, rgb(var(--gold) / .14), transparent 62%);
  pointer-events: none;
}

.hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 58px; align-items: center; position: relative; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 700; color: var(--g);
  background: var(--g-12); padding: 8px 16px; border-radius: 999px; margin-bottom: 20px;
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); animation: blip 1.8s infinite; }
@keyframes blip { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 20px; }
.hero .lede { font-size: 1.1rem; color: var(--t-70); max-width: 50ch; margin-bottom: 32px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; }
.hero-under { margin-top: 20px; font-size: .87rem; color: var(--t-55); }

/* ===================================================================
   إطارات الأجهزة — ★ خانات الصور ★

   الإطار مرسوم بالـCSS والشاشة فارغة عن قصد. ضع صورتك هكذا:

       <div class="screen"><img src="صورتك.png" alt=""></div>

   والمقاسات المريحة: الماك 1600×1000، الجوال 720×1480.
   =================================================================== */

.device-stage { position: relative; }

.mac {
  border-radius: 16px; padding: 12px 12px 0;
  background: linear-gradient(180deg, rgb(var(--ink) / .12), rgb(var(--ink) / .05));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.mac .bar { display: flex; gap: 6px; padding-bottom: 10px; }
.mac .bar span { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--ink) / .22); }
.mac .screen { aspect-ratio: 16 / 10; border-radius: 8px 8px 0 0; }
.mac .foot { height: 13px; margin: 0 -12px; border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgb(var(--ink) / .16), rgb(var(--ink) / .08)); }
/* القاعدة شقيقة الإطار لا داخله — أسهل في القلب والترتيب */
.stand { width: 24%; height: 9px; margin: 0 auto; border-radius: 0 0 9px 9px;
  background: rgb(var(--ink) / .12); }

.phone {
  width: 214px; border-radius: 34px; padding: 10px;
  background: linear-gradient(180deg, rgb(var(--ink) / .14), rgb(var(--ink) / .06));
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  position: relative;
}
.phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 6px; border-radius: 99px; background: rgb(var(--ink) / .3); z-index: 2;
}
.phone .screen { aspect-ratio: 9 / 19; border-radius: 26px; }

/* الجوال معلَّق على زاوية الماك في البطل */
/* الجوال يتدلّى خارج حافّة الماك لا فوق شاشته — وإلا حجب اللقطة
   التي وُضع الإطار من أجلها. */
.device-stage { padding-inline-start: 54px; }
.device-stage .phone { position: absolute; inset-inline-start: -6px; bottom: -40px; z-index: 3; width: 196px; }

/* الشاشة الفارغة: إطار أنيق لا مستطيل ميت ولا صورة مكسورة */
.screen {
  background: rgb(var(--bg));
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.screen > .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; color: var(--g); text-align: center; padding: 12px;
  background: repeating-linear-gradient(45deg, var(--g-06) 0 14px, transparent 14px 28px);
  border: 1.5px dashed var(--g-28);
}
.screen img { width: 100%; height: 100%; object-fit: cover; }

/* ===================================================================
   شريط الأرقام
   =================================================================== */

.strip { border-block: 1px solid var(--line); background: rgb(var(--ink) / .02); }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 34px 0; text-align: center; }
.strip b { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--g); line-height: 1.25; }
.strip span { font-size: .87rem; color: var(--t-70); }

/* ===================================================================
   الأقسام
   =================================================================== */

section.band { padding: 86px 0; }
section.band.tint { background: rgb(var(--ink) / .025); }

.head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.head .kicker { font-size: .82rem; font-weight: 800; letter-spacing: .06em; color: var(--g); display: block; margin-bottom: 12px; }
.head h2 { font-size: clamp(1.7rem, 3.7vw, 2.35rem); margin-bottom: 14px; }
.head p { color: var(--t-70); }
.rule { height: 1px; max-width: 200px; margin: 18px auto 0;
  background: linear-gradient(to left, transparent, var(--g), transparent); }

/* ===================================================================
   الصفوف المتبادلة — نصّ وصورة

   ★ يمين ثم يسار ثم يمين. ★ الصفّ الفردي يقلب ترتيب العمودين، فيتناوب
   موضع الصورة بلا صنف إضافي على كل صفّ.
   =================================================================== */

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; padding: 46px 0; }
.rows > .row:nth-child(even) .row-media { order: -1; }

.row-num {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--g-12); color: var(--g); font-weight: 800; margin-bottom: 16px;
}
.row h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 14px; }
.row > div > p { color: var(--t-70); margin-bottom: 18px; }

.ticks { list-style: none; margin: 0 0 22px; padding: 0; }
.ticks li { position: relative; padding-inline-start: 30px; margin-bottom: 9px; color: var(--t-70); }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .72em;
  width: 15px; height: 8px; border-inline-start: 2.2px solid var(--g); border-bottom: 2.2px solid var(--g);
  transform: rotate(-45deg);
}
.ticks li b { color: var(--t); font-weight: 700; }

.row-media { position: relative; }

/* ===================================================================
   قبل / بعد
   =================================================================== */

.switcher { display: flex; justify-content: center; gap: 6px; margin-bottom: 34px; }
.switcher button {
  padding: 11px 26px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-weight: 700; font-size: .95rem; border: 1px solid var(--line);
  background: transparent; color: var(--t-70); transition: all .18s;
}
.switcher button.on { background: var(--g); border-color: var(--g); color: rgb(43 42 38); }

.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cmp {
  background: rgb(var(--card)); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px;
}
.cmp h4 { font-size: 1rem; margin-bottom: 8px; }
.cmp p { color: var(--t-70); font-size: .94rem; }
.cmp.is-before { opacity: .72; }
.cmp.is-before h4::before { content: "✕"; color: var(--t-55); margin-inline-end: 8px; font-weight: 800; }
.cmp.is-after h4::before { content: "✓"; color: var(--g); margin-inline-end: 8px; font-weight: 800; }

/* ===================================================================
   البطاقات
   =================================================================== */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }
.card {
  background: rgb(var(--card)); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 26px; transition: transform .22s ease, box-shadow .28s ease, border-color .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--g-28); }
.card .ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--g-12); color: var(--g); margin-bottom: 16px;
}
.card .ic svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.card p { color: var(--t-70); font-size: .95rem; }

/* ===================================================================
   لوحة القاعات الثلاث
   =================================================================== */

.halls-box {
  background: rgb(var(--card)); border: 1px solid var(--g-28); border-radius: 28px;
  padding: 44px 38px; text-align: center; box-shadow: var(--shadow);
  max-width: 880px; margin-inline: auto;
}
.halls-box h2 { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin-bottom: 14px; }
.halls-box p { color: var(--t-70); max-width: 56ch; margin-inline: auto; }
.halls-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 30px 0 26px; }
.hall-chip {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 26px; min-width: 150px;
}
.hall-chip b { display: block; color: var(--g); font-size: 1.6rem; }
.hall-chip span { font-size: .85rem; color: var(--t-70); }

/* العلامة البيضاء — الصندوق نفسه، والقائمة تبقى محاذاةً لبدايتها داخل وسطه */
.wl-box .kicker { font-size: .82rem; font-weight: 800; letter-spacing: .06em; color: var(--g); display: block; margin-bottom: 12px; }
.wl-box .ticks { display: inline-block; text-align: start; margin: 26px auto 4px; }

/* ===================================================================
   الخطوات
   =================================================================== */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; counter-reset: st; }
.step { position: relative; padding-top: 16px; }
.step::before {
  counter-increment: st; content: counter(st);
  font-size: 3.2rem; font-weight: 800; color: var(--g-28); line-height: 1; display: block; margin-bottom: 6px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { color: var(--t-70); font-size: .95rem; }

/* ===================================================================
   الأسئلة
   =================================================================== */

.faq { max-width: 780px; margin-inline: auto; }
.faq details {
  background: rgb(var(--card)); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 2px 20px; margin-bottom: 11px;
}
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: left; color: var(--g); font-size: 1.35rem; font-weight: 800; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--t-70); padding-bottom: 18px; }

/* ===================================================================
   النداء الأخير والتذييل
   =================================================================== */

.final { text-align: center; }
.final h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; }
.final p { color: var(--t-70); max-width: 54ch; margin: 0 auto 30px; }
.final .hero-cta { justify-content: center; }

footer.foot { border-top: 1px solid var(--line); padding: 44px 0 34px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--t-70); font-size: .92rem; }
.foot-links a:hover { color: var(--g); }
.foot-copy { width: 100%; text-align: center; color: var(--t-55); font-size: .85rem; margin-top: 26px; }

/* ===================================================================
   زرّ السمة
   =================================================================== */

#themeBtn {
  position: fixed; inset-inline-start: 18px; inset-block-end: 18px; z-index: 90;
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer; line-height: 0;
  display: grid; place-items: center;
  background: rgb(var(--card)); color: var(--g); border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: transform .14s;
}
#themeBtn:active { transform: scale(.92); }

/* ===================================================================
   الحركة
   =================================================================== */

.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease var(--d, 0ms), transform .8s cubic-bezier(.22,1,.36,1) var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .pill i { animation: none; }
}

/* ===================================================================
   الجوال
   =================================================================== */

@media (max-width: 980px) {
  .hero { padding: 44px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .row { grid-template-columns: 1fr; gap: 34px; padding: 30px 0; }
  .rows > .row:nth-child(even) .row-media { order: 0; }
  section.band { padding: 60px 0; }
  .strip-in { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .device-stage .phone { position: static; margin: -28px auto 0; }
  .halls-box { padding: 32px 22px; }

  /* زرّان بعرض الشاشة أنظف من زرّ ونصف زرّ في سطر ثانٍ */
  .hero-cta .btn { flex: 1 1 100%; }

  #burger { display: block; }
  nav.links {
    display: none; position: absolute; inset-inline: 14px; top: 70px;
    flex-direction: column; gap: 2px; padding: 12px;
    background: rgb(var(--card)); border: 1px solid var(--line);
    border-radius: var(--r-sm); box-shadow: var(--shadow);
  }
  nav.links.open { display: flex; }
  nav.links a { padding: 11px 8px; }
  .top-cta { display: none; }
}