/* صفحة الزوّار — «الصحيفة»
 *
 * الخطأ الذي وقعت فيه النسخة السابقة، مقيسًا: عنوانٌ ٧٤px فوق نصٍّ ١٤٫٥px،
 * في عمودٍ عرضه ٧٢٠ على شاشة ١٤٤٠. النسبة ٥:١ تصرخ، والنصّ لا يُقرأ، ونصفُ
 * الشاشة فارغ. والشعار في الرأس لم يكن موجودًا أصلًا.
 *
 * السلّم هنا واحد ومُعلَن: ١٢ · ١٤ · ١٦ · ٢٢ · ٣٤ — ثم قفزةٌ واحدة إلى السعر.
 * لا شيء بين ٣٤ والسعر، فيبقى السعر هو اللحظة الجريئة الوحيدة.
 *
 * والصفحة **ثابتة**: اللوح مثبّت على الشاشة والتمرير يبدّل المشاهد داخله.
 * وكل ما يُخفي معلَّقٌ على الصنف `js` الذي لا يُضاف إلا بعد نجاح التهيئة —
 * فأيّ تعثّر يترك الصفحة وثيقةً كاملة القراءة، لا شاشةً بيضاء.
 */

:root {
  --canvas: #F7F6F3;
  --paper:  #FDFCFA;
  --ink:    #141412;
  --ink-2:  #33322E;
  --muted:  #6B6963;
  --line:   #DCD8CF;
  --line-2: #C9C4B8;
  --em:     #0A5F4B;
  --em-soft:#E2EFEA;
  --danger: #B02A17;

  --col: 1080px;
  --t-xs: 12.5px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 22px;
  --t-xl: clamp(27px, 3.3vw, 36px);
  --t-hero: clamp(54px, 8.4vw, 92px);   /* السعر وحده */
  --out: cubic-bezier(.2,0,0,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:#12110F; --paper:#1B1A17; --ink:#F2F0EA; --ink-2:#D6D2C9;
    --muted:#A5A199; --line:#2E2C27; --line-2:#3E3B34;
    --em:#2FB894; --em-soft:#0F2D25; --danger:#F08070;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--t-md)/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI",
        system-ui, "Noto Sans Arabic", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ══ الرأس ══ */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 6;
  display: flex; align-items: center; gap: 14px;
  padding: 13px clamp(16px, 4vw, 44px);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.bar.on { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.seal { width: 30px; height: 11.5px; fill: var(--em); display: block; }
.word { font: 600 19px/1 inherit; letter-spacing: -.4px; direction: ltr; }
.word b { color: var(--em); font-weight: 600; }
.bar-note { margin: 0; font-size: var(--t-xs); color: var(--muted); }
.bar-note::before { content: "·"; margin: 0 10px; color: var(--line-2); }
.bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.chip {
  font-size: var(--t-xs); color: var(--muted); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
@media (max-width: 760px) { .bar-note, .chip { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 var(--t-sm)/1 inherit; text-decoration: none; cursor: pointer;
  padding: 11px 20px; border-radius: 999px; border: 0;
  background: var(--em); color: #fff;
  transition: transform .12s var(--out), filter .2s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: scale(.985); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn[disabled] { opacity: .55; cursor: default; }

/* ══ المسرح ══ */
.track { height: 100vh; }
.js .track { height: var(--track, 800vh); }

.stage { padding: 92px 0 72px; }
.js .stage {
  position: fixed; inset: 0; z-index: 2;
  display: grid; place-items: center; overflow: hidden;
}
.scene { width: 100%; max-width: var(--col); margin-inline: auto; }
.scene + .scene { margin-top: 84px; }
.js .scene {
  position: absolute; inset: 92px 0 72px;
  display: grid; align-content: center; max-width: none; margin: 0;
}
.scene > .wrap, .js .scene > .wrap {
  width: 100%; max-width: var(--col); margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 44px);
}

/* الحالة المحايدة هي الظهور؛ الإخفاء لا يقع إلا بعد نجاح التهيئة */
.js .scene[data-state="off"] { opacity: 0; visibility: hidden; pointer-events: none; }
.js .scene[data-state="in"], .js .scene[data-state="out"] { transition: opacity .45s var(--out); }
.js .scene[data-state="out"] { opacity: 0; visibility: hidden; pointer-events: none; }

/* ══ الطباعة ══ */
.kicker { margin: 0 0 14px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .7px; color: var(--em); }
h1, h2 { margin: 0 0 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.24; font-size: var(--t-xl); }
.lede { margin: 0; font-size: var(--t-md); line-height: 1.8; color: var(--ink-2); max-width: 60ch; }
.note { margin: 14px 0 0; font-size: var(--t-sm); color: var(--muted); max-width: 58ch; }
.mono { font-variant-numeric: tabular-nums; }

.split { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(26px, 4.6vw, 64px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 26px; } }

/* ══ صفوف بخيوط شعرية — لا بطاقات تطفو ══ */
.rows { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rows li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}
.rows li b { font-weight: 600; min-width: 66px; }
.rows li span { color: var(--muted); }
.rows li i { margin-inline-start: auto; font-style: normal; color: var(--em); font-weight: 600; white-space: nowrap; }

.panel { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); padding: 20px; }
.panel-head {
  display: flex; align-items: center; gap: 9px; font-size: var(--t-xs); color: var(--muted);
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--em); }
.big { font-size: clamp(36px, 4.6vw, 50px); font-weight: 600; letter-spacing: -.02em; line-height: 1; margin: 2px 0 4px; }
.big + .cap { font-size: var(--t-xs); color: var(--muted); }

/* اللوح الداكن — **ثابت الاتجاه في النمطين**.
   كان `background: var(--ink)` ونصّه أبيض مثبّت. وفي النمط الداكن ينقلب
   `--ink` إلى فاتح بينما يبقى النصّ أبيض: أبيضُ على فاتح = لا يُقرأ.
   القاعدة: كل لوحٍ معكوس يحمل لونيه صراحةً لا عبر رموزٍ تتكيّف. */
.slab {
  --slab-bg: #141412;
  --slab-fg: #FDFCFA;
  --slab-em: #53D2AE;
  background: var(--slab-bg); color: var(--slab-fg);
  border-radius: 14px; padding: clamp(22px, 3vw, 34px);
}
@media (prefers-color-scheme: dark) { .slab { --slab-bg: #080706; } }
.slab .kicker { color: var(--slab-em); }
.slab h2, .slab .big, .slab b { color: var(--slab-fg); }
.slab .lede, .slab .note, .slab .cap { color: color-mix(in srgb, var(--slab-fg) 76%, transparent); }
.slab .rows, .slab .rows li { border-color: color-mix(in srgb, var(--slab-fg) 16%, transparent); }
.slab .rows li b { color: var(--slab-fg); }
.slab .rows li span { color: color-mix(in srgb, var(--slab-fg) 62%, transparent); }
.slab .rows li i { color: var(--slab-em); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: var(--t-xs); color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}

.index { columns: 3; column-gap: 40px; margin: 18px 0 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .index { columns: 2; column-gap: 24px; } }
@media (max-width: 560px) { .index { columns: 1; } }
.index li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.index li b { display: block; font-weight: 600; }
.index li span { color: var(--muted); font-size: var(--t-xs); }

.price { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 8px; }
.price .n { font-size: var(--t-hero); font-weight: 600; letter-spacing: -.03em; line-height: .95; }
.price .u { font-size: var(--t-lg); color: var(--muted); }

/* ══ النموذج ══ */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 0; }
@media (max-width: 720px) { .form { grid-template-columns: 1fr; } }
.wide { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field > span { font-size: var(--t-xs); color: var(--muted); }
.field input, .field textarea, .field select {
  font: 400 var(--t-md)/1.5 inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color .16s, box-shadow .16s;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--em); box-shadow: 0 0 0 3px var(--em-soft);
}
.field.bad input, .field.bad textarea { border-color: var(--danger); }
.err { font-size: var(--t-xs); color: var(--danger); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ok-box {
  border: 1px solid var(--em); background: var(--em-soft);
  border-radius: 12px; padding: 18px; margin-top: 16px; font-size: var(--t-sm);
}

/* ══ الشريط الجانبي ══ */
.rail {
  position: fixed; inset-inline-start: clamp(10px, 2vw, 24px); top: 50%;
  transform: translateY(-50%); z-index: 5; display: grid; gap: 11px;
}
.rail button {
  width: 22px; height: 3px; padding: 0; border: 0; cursor: pointer; display: block;
  background: var(--line-2); border-radius: 2px;
  transition: width .28s var(--out), background .28s;
}
.rail button[aria-current="true"] { width: 36px; background: var(--em); }
@media (max-width: 760px) { .rail { display: none; } }
body:not(.js) .rail { display: none; }

.tl { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 7; }
.tl i { display: block; height: 100%; width: 0; background: var(--em); transition: width .1s linear; }

.hint { margin: 26px 0 0; font-size: var(--t-xs); color: var(--muted); display: flex; align-items: center; gap: 9px; }
.hint::before { content: ""; width: 1px; height: 20px; background: var(--line-2); animation: drop 2.4s var(--out) infinite; }
@keyframes drop { 0%,100% { transform: translateY(-4px); opacity: .4 } 50% { transform: translateY(4px); opacity: 1 } }
body:not(.js) .hint { display: none; }

/* ══ الحركة ══
 *
 * قاعدةٌ مدفوعة الثمن: **لا شفافية في حركة الدخول إطلاقًا.**
 * كانت `animation: rise .56s both` تحمل opacity من ٠ إلى ١. وحين يخنق
 * المتصفّح الحركات — تبويبٌ في الخلفية، أو جهازٌ يوفّر الطاقة — لا تبدأ
 * الحركة، فيثبّتها fill-mode:both عند إطارها الأول: شفافية صفر. النتيجة
 * مشهدٌ أبيض تمامًا بينما كل عناصره موجودة في الشجرة وقابلة للنقر.
 * رصدتُه بنفسي: elementFromPoint يعيد الفقرة والشاشة خالية.
 *
 * لذلك تُحرَّك الإزاحة وحدها. أسوأ ما يقع إن تجمّدت الحركة أن يظهر النصّ
 * مزاحًا عشر بكسلات — مقروءًا كاملًا. والتلاشي بين المشاهد transition لا
 * animation، والانتقالات تصل دائمًا إلى قيمتها النهائية. */
.js .scene[data-state="in"] .an {
  animation: rise .56s var(--out) backwards;
  animation-delay: calc(var(--i, 0) * 52ms + 50ms);
}
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }

/* حزام أمان ثانٍ: بعد أن يستقرّ المشهد تُلغى الحركة أصلًا */
.js .scene.settled .an { animation: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js .scene[data-state="in"] .an { animation: none; }
  .js .scene[data-state="in"], .js .scene[data-state="out"] { transition-duration: .01s; }
  .hint::before { animation: none; }
  .rail button { transition: none; }
}

.foot { position: relative; z-index: 3; text-align: center; padding: 24px 16px; font-size: var(--t-xs); color: var(--muted); }
.js .foot { position: fixed; inset: auto 0 0 0; pointer-events: none; }
.js .foot a { pointer-events: auto; }
.foot a { color: var(--muted); }

.skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 20;
        background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { inset-inline-start: 0; }



/* سطر التجربة المجانية — أوّل ما يبحث عنه من لم يجرّب بعد */
.trial-line {
  margin: 20px 0 0; font-size: var(--t-sm); color: var(--muted);
  padding-inline-start: 13px; border-inline-start: 3px solid var(--em);
  line-height: 1.8;
}
.trial-line b { color: var(--ink); font-weight: 600; }
.trial-line a { color: var(--em); font-weight: 600; text-decoration: none; margin-inline-start: 6px; }
.trial-line a:hover { text-decoration: underline; }
.trial-badge {
  margin: 0 0 8px; font-size: var(--t-xs); font-weight: 600; color: var(--em);
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--em-soft);
}