/* ============================================================
   ياسر فرحات — الموقع الرسمي
   Charcoal + Lime · Premium Glass · 3D
   قواعد ثابتة: من غير color-mix · من غير CSS Nesting · vh قبل svh
   ============================================================ */

/* ───────── 1. التوكنز ───────── */
:root {
  --bg:            #0A0A0B;
  --bg-soft:       #0F0F11;
  --surface:       #141416;
  --surface-2:     #1B1B1F;
  --glass:         rgba(255,255,255,.045);
  --glass-strong:  rgba(255,255,255,.07);
  --glass-brd:     rgba(255,255,255,.09);
  --glass-brd-hi:  rgba(255,255,255,.16);

  --accent:        #C4F82A;
  --accent-txt:    #C4F82A;
  --accent-ink:    #0A0A0B;
  --accent-soft:   rgba(196,248,42,.12);
  --accent-glow:   rgba(196,248,42,.35);
  --accent-2:      #7BE0A4;
  --lime:          #C4F82A;
  --warn:          #FF6B5A;

  --text:          #F5F5F4;
  --text-2:        #A1A1AA;
  --text-3:        #6B6B73;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 12px 40px rgba(0,0,0,.45);
  --shadow-lg: 0 32px 80px rgba(0,0,0,.55);
  --shadow-accent: 0 12px 48px rgba(196,248,42,.18);

  --fs-display: clamp(1.7rem, 3.4vw, 3.05rem);
  --fs-h1:      clamp(1.95rem, 4.3vw, 3.95rem);
  --fs-h2:      clamp(1.52rem, 3.4vw, 2.9rem);
  --fs-h3:      clamp(1.1rem, 1.7vw, 1.42rem);
  --fs-lead:    clamp(.98rem, 1.3vw, 1.17rem);
  --fs-body:    clamp(.93rem, 1.04vw, 1.02rem);
  --fs-sm:      clamp(.82rem, .92vw, .9rem);
  --fs-xs:      .77rem;

  --pad-x: clamp(1.1rem, 4vw, 4rem);
  --maxw: 1240px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-h: 58px;

  /* درجات جاهزة — بديل color-mix اللي مش شغال على iOS 16.1 وأقل */
  --tint-08: rgba(196,248,42,.08);
  --tint-12: rgba(196,248,42,.12);
  --tint-16: rgba(196,248,42,.16);
  --tint-20: rgba(196,248,42,.20);
  --tint-26: rgba(196,248,42,.26);
  --tint-34: rgba(196,248,42,.34);
  --tint-45: rgba(196,248,42,.45);
  --tint-55: rgba(196,248,42,.55);
}

/* اللايت: ورق دافي — و🔴 **الليموني يفضل ليموني**.
   أول نسخة كانت بتعكس المعادلة (الأزرار سودا والليموني بيتحوّل لزيتوني)،
   والنتيجة إن الهوية بتضيع والصفحة بتبقى ميتة. محمد رفضها.
   دلوقتي: الورق فاتح، الكلام فحمي، والليموني هو نفسه في الاتنين. */
:root[data-theme="light"] {
  --bg:            #F2F1EB;
  --bg-soft:       #E9E7DE;
  --surface:       #FFFFFF;
  --surface-2:     #EDEBE2;
  --glass:         rgba(255,255,255,.86);
  --glass-strong:  rgba(255,255,255,.96);
  --glass-brd:     rgba(26,26,18,.16);
  --glass-brd-hi:  rgba(26,26,18,.3);

  --accent:        #C4F82A;   /* نفس ليموني الدارك */
  --accent-ink:    #14140F;   /* الكلام اللي فوق الليموني */
  --accent-txt:    #3F5D09;   /* الليموني مايتقريش كنص على ورق فاتح — نسخة غامقة */
  --accent-soft:   rgba(196,248,42,.28);
  --accent-glow:   rgba(196,248,42,.42);
  --accent-2:      #1E7A52;
  --lime:          #C4F82A;
  --warn:          #C0392B;

  --text:          #14140F;
  --text-2:        #45443C;
  --text-3:        #63614F;

  --shadow-sm: 0 2px 10px rgba(26,26,18,.08);
  --shadow-md: 0 14px 34px rgba(26,26,18,.15);
  --shadow-lg: 0 26px 64px rgba(26,26,18,.2);
  --shadow-accent: 0 14px 34px rgba(150,190,40,.4);

  /* الخلفيات الليمونية الخفيفة بليموني حقيقي عشان تبان على الورق،
     والخطوط والحدود بالأخضر الغامق عشان الليموني الشفاف مابيبانش كخط. */
  --tint-08: rgba(196,248,42,.14);
  --tint-12: rgba(196,248,42,.3);
  --tint-16: rgba(196,248,42,.38);
  --tint-20: rgba(120,160,20,.34);
  --tint-26: rgba(120,160,20,.44);
  --tint-34: rgba(105,145,15,.5);
  --tint-45: rgba(95,135,12,.6);
  --tint-55: rgba(85,125,10,.7);
}

/* ───────── 2. الأساس ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 3px; border-radius: 6px; }

::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }

/* السكشن = شاشة واحدة على الديسكتوب */
.section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 2rem) 2.4rem;
}

/* ملحوظة: مفيش will-change ثابت في الملف ده عن قصد — تثبيته بيخلي المتصفح
   يحجز طبقة رسم لكل عنصر على طول، وده بيعمل ومضة بيضا مكان الصور على iOS.
   GSAP بيظبط ده لوحده وقت الحركة بس. */
.word { display: inline-block; }
/* الكلمة المهمة في العنوان جوّه كبسولة ليمونية.
   الحشو الرأسي صغير عن قصد: العنوان عليه overflow:hidden عشان حركة الكلمات،
   ولو كبّرناه الكبسولة هتتقصّ من فوق. */
.hl {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-txt);
  border-radius: .38em;
  padding: 0 .24em;
  font-weight: inherit;
}

/* عناوين */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  color: var(--accent-txt);
  background: var(--accent-soft);
  border: 1px solid var(--tint-20);
  padding: .34rem .85rem;
  border-radius: var(--r-pill);
  margin-bottom: .85rem;
  position: relative;
}
/* خط رفيع بيكمّل من بعد الكبسولة لآخر السطر — بيربط العنوان بالسكشن
   بدل ما يبقى عايم في الركن وناحية الشمال فاضية */
.eyebrow::after {
  content: ''; position: absolute; top: 50%;
  inset-inline-start: 100%; margin-inline-start: .9rem;
  width: clamp(48px, 13vw, 190px); height: 1px;
  /* في العناوين اللي واخدة عرض السكشن كله الخط بيمتد أكتر */
  background: linear-gradient(to left, var(--glass-brd-hi), transparent);
  pointer-events: none;
}
:root[dir="ltr"] .eyebrow::after {
  background: linear-gradient(to right, var(--glass-brd-hi), transparent);
}
/* العناوين بقت كلها في النص — الخط اللي كان بيكمّل الفراغ الجنبي
   مالوش لازمة، والكبسولة بقت متوسّطة بنقطتها. */
.eyebrow::after { display: none; }
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-txt); box-shadow: 0 0 0 3px var(--tint-16);
}
.h2 {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.26;
  letter-spacing: -.015em; max-width: 28ch; overflow: hidden;
  /* بيوزّع الكلام على السطور بالتساوي بدل ما يفضل سطر طويل وسطر كلمتين */
  text-wrap: balance;
  /* الـ4 بكسل دول مساحة للكبسولة الليمونية: العنوان عليه overflow:hidden
     عشان حركة الكلمات، ومن غيرهم حرف الكبسولة بيتقصّ من فوق أو من تحت */
  padding-block: 4px;
}
/* 🔴 كل عناوين السكاشن في نص الصفحة — قرار محمد.
   قبل كده كانت على الجنب والنص التاني فاضي. */
.shead {
  margin-bottom: clamp(1.4rem, 3vh, 2.4rem);
  text-align: center;
}
.shead .h2 { margin-inline: auto; max-width: 26ch; }
.shead--center .h2 { max-width: 24ch; }
/* والعناوين اللي جوّه عمود (المشكلة · عن ياسر) بتتوسّط في عمودها */
.prob__copy > .eyebrow,
.prob__copy > .h2,
.about__copy > .eyebrow,
.about__copy > .h2 { text-align: center; }
.prob__copy > .h2,
.about__copy > .h2 { margin-inline: auto; }
.prob__copy,
.about__copy { display: flex; flex-direction: column; }
.prob__copy > .eyebrow,
.about__copy > .eyebrow { align-self: center; }

/* أزرار */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px;
  padding: .72rem 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-sm);
  border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-accent); }
.btn--primary:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 46px var(--tint-34); }
.btn--primary:active { transform: translateY(0) scale(.99); }
.btn--lg { padding: .95rem 1.9rem; font-size: var(--fs-body); }
/* الزر التاني — مفرّغ بحدود، زي اللي في مواقع محمد */
.btn--ghost {
  background: var(--glass);
  color: var(--text);
  border-color: var(--glass-brd-hi);
}
.btn--ghost:hover { background: var(--glass-strong); border-color: var(--accent); transform: translateY(-2px); }
.btn--ghost svg { width: 16px; height: 16px; }
:root[dir="rtl"] .btn--ghost svg { transform: scaleX(-1); }
/* الزرار الكبير اتصغّر: كان تقيل جداً جوّه الكارت */
.btn--xl { padding: .82rem 1.7rem; font-size: var(--fs-body); }

/* الأزرار الكبيرة: دايرة في آخر الزر جوّاها سهم — من مراجع محمد */
.btn--lg.btn--primary,
.btn--xl.btn--primary { padding-inline-end: 3.2rem; }
.btn--lg.btn--primary::before,
.btn--xl.btn--primary::before {
  content: ''; position: absolute; z-index: 1;
  inset-inline-end: 5px; top: 50%;
  width: 32px; height: 32px; margin-top: -16px;
  border-radius: 50%;
  background: var(--accent-ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4F82A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E")
    center / 15px no-repeat;
  transition: transform .4s var(--ease);
}
/* في العربي السهم بيتقلب — والدايرة مدوّرة فالقلب مابيبانش عليها */
:root[dir="rtl"] .btn--lg.btn--primary::before,
:root[dir="rtl"] .btn--xl.btn--primary::before { transform: scaleX(-1); }
.btn--lg.btn--primary:hover::before,
.btn--xl.btn--primary:hover::before { transform: scale(1.12); }
:root[dir="rtl"] .btn--lg.btn--primary:hover::before,
:root[dir="rtl"] .btn--xl.btn--primary:hover::before { transform: scaleX(-1) scale(1.12); }

/* لمعة بتعدي على الزر */
.btn--primary::after {
  content: ''; position: absolute; inset-block: 0; width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease);
}
.btn--primary:hover::after { left: 115%; }
:root[dir="rtl"] .btn--primary::after { left: auto; right: -60%; transition: right .7s var(--ease); }
:root[dir="rtl"] .btn--primary:hover::after { right: 115%; left: auto; }

/* ───────── 3. الهيدر — بيضاوي زجاجي عائم ─────────
   بنفس لغة هيدر موقع محمد ياسر (محمد طلبها 2026-10-05):
   الروابط في مجرى واحد · الكلام بيلفّ لفوق مع الماوس (.roll) · الوضع واللغة في كبسولة
   بمقبض · زرار الحجز بنور ماشي على حرفه ومغناطيس خفيف · حلقة بتلف حوالين الصورة. */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes edgeSpin { to { --angle: 360deg; } }

.header {
  position: fixed; inset-inline: 0; top: 10px; z-index: 90;
  display: flex; justify-content: center;
  padding-inline: var(--pad-x);
  pointer-events: none;
}
.header__inner {
  pointer-events: auto;
  position: relative;
  width: max-content;
  max-width: min(100%, var(--maxw));
  display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.3rem);
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.header.is-stuck .header__inner {
  background: var(--glass-strong);
  border-color: var(--glass-brd-hi);
  box-shadow: var(--shadow-lg);
}
/* شريط القراية: خيط ليموني منوّر على الحرف التحتاني */
.header__progress {
  position: absolute; inset-inline: 24px; bottom: 0; height: 2px;
}
.header__progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: var(--r-pill);
  box-shadow: 0 0 10px var(--tint-45);
}

/* ── الصورة + الاسم ── */
.brand { display: flex; align-items: center; gap: .6rem; padding-inline-start: .15rem; }
/* حلقة ليمونية بتلف ببطء حوالين الصورة */
.brand__ring {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 2px; border-radius: 50%;
  background: conic-gradient(from var(--angle), var(--accent), var(--tint-16) 40%, var(--accent-2) 60%, var(--accent));
  box-shadow: 0 0 16px var(--tint-26);
  animation: edgeSpin 6s linear infinite;
}
.brand__pic {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--bg);
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand__txt > span { font-weight: 700; font-size: .93rem; white-space: nowrap; }
.brand__txt small { font-size: .66rem; color: var(--text-3); white-space: nowrap; }

/* ── الكلام اللي بيلفّ لفوق ──
   نسخة تانية من الكلام تحته (text-shadow)، والرابط/الزرار بيقصّها — مع الماوس الاتنين بيطلعوا. */
.roll {
  --roll: 2.4em;
  display: inline-block;
  text-shadow: 0 var(--roll) currentColor;
  transition: transform .55s var(--ease-out);
}
:root[lang="ar"] .roll { --roll: 3.4em; }   /* نقط وحروف العربي أطول — بـ2.4 النسخة كانت بتبان */
a:hover > .roll, button:hover > .roll, a:focus-visible > .roll { transform: translateY(calc(var(--roll) * -1)); }

/* ── الروابط: مجرى واحد، والحبّاية بتتزحلق للرابط الشغّال ── */
.nav { position: relative; display: flex; align-items: center; gap: 2px; }
.nav > a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .45rem;
  height: 36px; padding: 0 .85rem; border-radius: var(--r-pill);
  overflow: hidden;
  font-size: .86rem; font-weight: 500; color: var(--text-2);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav > a:hover, .nav > a.is-active { color: var(--text); }
/* نقطة ليمونية منوّرة جنب الرابط الشغّال */
/* 🔴 مقاسها ثابت (بتكبر بـscale بس): لما كانت بتتمدّ من 0 لـ5px الرابط كان بيعرض بعد ما
   الحبّاية اتقاست عليه، فكانت بتقف مزاحة 5px */
.nav > a::before {
  content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  transform: scale(0); transition: transform .3s var(--ease);
}
.nav > a.is-active::before { transform: scale(1); }
.nav__glider {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  background: var(--tint-08);
  box-shadow: inset 0 0 0 1px var(--tint-34);
  border-radius: var(--r-pill);
  opacity: 0;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s;
  pointer-events: none;
}
@media (min-width: 981px) {
  .nav { padding: 4px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--glass-brd); }
}

.header__tools { display: flex; align-items: center; gap: .4rem; }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  color: var(--text-2);
  transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}
.icon-btn:hover { color: var(--accent-txt); border-color: var(--tint-34); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; }
.burger { display: none; }

/* ── كبسولة التفضيلات: شمس/قمر · EN/ع — المقبض تحت الاختيار الحالي وبيتزحلق للتاني ── */
.prefs {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-brd);
}
.prefs__sep { width: 1px; height: 18px; background: var(--glass-brd-hi); }
.pref {
  position: relative; isolation: isolate; flex: none;
  height: 36px; border-radius: var(--r-pill);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center;
  color: var(--text-3);
  transition: color .3s var(--ease);
}
.pref--theme { width: 68px; }
.pref--lang { width: 72px; }
.pref:hover { color: var(--text); }
.pref:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 2px; }
.prefs__knob {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px var(--glass-brd-hi), 0 2px 10px rgba(0,0,0,.35);
  transition: inset-inline-start .5s var(--ease-out), box-shadow .3s var(--ease);
}
.pref:hover .prefs__knob { box-shadow: inset 0 0 0 1px var(--tint-45), 0 0 14px var(--tint-26); }
.pref svg { width: 16px; height: 16px; transition: color .3s var(--ease), transform .6s var(--ease-out); }
.pref:hover svg { transform: rotate(-20deg); }
/* الدارك (الأساسي) = ناحية القمر · اللايت = ناحية الشمس */
.pref--theme .prefs__knob { inset-inline-start: 50%; }
:root[data-theme="light"] .pref--theme .prefs__knob { inset-inline-start: 3px; }
.pref__moon { color: var(--accent-txt); }
:root[data-theme="light"] .pref__moon { color: var(--text-3); }
:root[data-theme="light"] .pref__sun { color: var(--accent-txt); transform: rotate(90deg); }
/* EN | ع — المقبض تحت لغة الصفحة */
:root[lang="ar"] .pref--lang .prefs__knob { inset-inline-start: 50%; }
.pref__opt { font-size: .7rem; font-weight: 700; letter-spacing: .05em; line-height: 1; transition: color .3s var(--ease); }
.pref__opt--ar { font-size: .95rem; letter-spacing: 0; }
:root:not([lang="ar"]) .pref__opt--en, :root[lang="ar"] .pref__opt--ar { color: var(--text); }
:root[data-theme="light"] .prefs__knob { background: var(--surface); box-shadow: inset 0 0 0 1px var(--glass-brd-hi), 0 2px 8px rgba(26,26,18,.14); }

/* ── زرار الحجز: نور ماشي على حرفه + الكلام بيلفّ + مغناطيس خفيف (--mx/--my من main.js) ── */
.hdr-cta {
  --mx: 0px; --my: 0px;
  isolation: isolate;
  min-height: 0; height: 40px; padding: 0 1.25rem;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .45s var(--ease), box-shadow .3s var(--ease);
}
.hdr-cta:hover { transform: translate3d(var(--mx), calc(var(--my) - 2px), 0); }
.hdr-cta:active { transform: translate3d(var(--mx), calc(var(--my) + 1px), 0); }
/* النور اللي بيلف على الحرف (حلقة مقصوصة من تدرّج دوّار) */
.hdr-cta::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--angle), transparent 0 72%, rgba(255,255,255,.9) 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: edgeSpin 4.5s linear infinite;
}

/* ───────── 4. الهيرو ───────── */
.hero { overflow: hidden; padding-bottom: 5.5rem; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.orb--1 { width: 40vw; height: 40vw; background: var(--tint-26); top: -10%; inset-inline-end: -8%; }
.orb--2 { width: 32vw; height: 32vw; background: rgba(123,224,164,.13); bottom: -14%; inset-inline-start: -6%; }
:root[data-theme="light"] .orb--1 { background: rgba(71,105,10,.14); opacity: .8; }
:root[data-theme="light"] .orb--2 { background: rgba(30,122,82,.10); opacity: .8; }

.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--glass-brd) 1px, transparent 1px),
    linear-gradient(to bottom, var(--glass-brd) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity: .5;
}

.growth { position: absolute; inset-inline: 0; bottom: 0; height: 58%; width: 100%; }
.growth path {
  fill: none; stroke: var(--accent-txt); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: .28;
  stroke-linecap: round; stroke-linejoin: round;
}

/* الهيرو بياخد عرض أوسع من باقي الصفحة — على الشاشات الكبيرة
   الحبس في 1240 بيخلّي الكلام متكوّم في النص وفراغ ميت على الجنب */
.hero .wrap { max-width: min(1520px, 100%); }
.hero__wrap { position: relative; z-index: 2; width: 100%; }
/* عمود فاضي على الشمال مكان الصورة، والكلام في العمود التاني */
.hero__layout {
  display: grid;
  /* العمود الفاضي = مكان البرواز بالظبط (عرضه + بُعده عن طرف الشاشة)
     ناقص حشوة الصفحة، عشان الكلام يبدأ بعد البرواز مايركبش عليه */
  grid-template-columns: calc(var(--media-w) + var(--media-x) - var(--pad-x)) 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
}
.hero__layout::before { content: ''; }
/* طبقة الكلام ممدودة على عرض الهيرو كله — يعني عمودها الفاضي واقف فوق كارت ياسر
   وكان بياكل الماوس، فالـhover على الكارت عمره ما اشتغل.
   الطبقة نفسها بتعدّي الماوس، والكلام بس هو اللي بيستقبله. */
.hero__wrap, .hero__layout { pointer-events: none; }
.hero__copy { pointer-events: auto; }

/* ───── ياسر جوّه برواز ───── */
:root {
  --media-w: clamp(280px, 27vw, 420px);   /* عرض البرواز */
  --media-x: clamp(.8rem, 3vw, 3rem);     /* بُعده عن طرف الشاشة */
  --brands-h: 54px;                        /* شريط الشركتين تحت الصورة */
  /* 🔴 لازم يفضل لون مصمت (من غير شفافية):
     اللي بيلف تحته مخروط ضوء كبير، ولو الغطا شفّاف ولو 10% المخروط بيبان
     من ورا ياسر وبيمشي — وده اللي كان مخلّي الصورة شكلها مقصوصة وملزوقة. */
  --ring-fill: #0F0F11;
}
:root[data-theme="light"] { --ring-fill: #FAFAF6; }

.hero__media {
  position: absolute; z-index: 1;
  inset-block: 0;
  inset-inline-start: var(--media-x);
  width: var(--media-w);
}

/* ───── الكارت = رسم بياني طالع ─────
   الكارت القديم كان مستطيل مدوّر وجوّاه صورة — نفس اللي في أي بورتفوليو.
   دلوقتي حافة الكارت اللي فوق هي خط مبيعات طالع، وياسر واقف جوّه
   وراسه وكتافه طالعين برّه الخط. الشكل نفسه بيقول «أرقامك بتطلع». */
.hero__frame {
  position: absolute; inset-inline: 0;
  bottom: clamp(78px, 10vh, 110px);
  height: min(72%, 585px);
  --pf-r: 28px;                 /* نص قطر الركنين اللي تحت — لازم يمشي مع الـSVG */
}

/* الـSVG بيتمطّ على مقاس الكارت (preserveAspectRatio="none").
   مقاس الكارت قريب من نسبة اللوحة 400×560 فالمطّ مابيبانش على الخطوط والنقط.
   overflow ظاهر عشان نبضة «دلوقتي» على الحرف تطلع نصها برّه */
.pf {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
/* الزجاج والخط والنقط قدّام ياسر — عشان يبان واقف ورا اللوح وطالع منه */
.pf--front { z-index: 4; }
.pf__rim { fill: none; stroke: rgba(255,255,255,.075); stroke-width: 18; }
:root[data-theme="light"] .pf__rim { stroke: rgba(255,255,255,.7); }
.pf__body {
  fill: var(--ring-fill);
  stroke: var(--glass-brd-hi); stroke-width: 1;
}
/* صبغة ليمونية نازلة من الخط لتحت — زي أي رسم بياني مساحي */
.pf__s1 { stop-color: var(--accent); stop-opacity: .2; }
.pf__s2 { stop-color: var(--accent); stop-opacity: .07; }
.pf__s3 { stop-color: var(--accent); stop-opacity: 0; }
.pf__tint { fill: url(#pfTint); }
.pf__grid line { stroke: var(--glass-brd); stroke-width: 1; }

.pf__glow {
  fill: none; stroke: var(--accent); stroke-width: 12; opacity: .13;
  stroke-linecap: round; stroke-linejoin: round;
}
.pf__line {
  fill: none; stroke: var(--accent); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* نقطة نور بتجري على الخط كل شوية — «الأرقام شغالة دلوقتي».
   الشرطة 7 من 100 والفراغ 193، فالدورة 200 والخط 100 بس:
   نص الوقت النقطة ماشية على الخط، والنص التاني مستخبية. */
.pf__spark {
  fill: none; stroke: #fff; stroke-width: 3.2; opacity: .85;
  stroke-linecap: round;
  stroke-dasharray: 7 193;
  stroke-dashoffset: 200;
  animation: pfSpark 6.5s cubic-bezier(.45,.05,.35,1) 2.8s infinite;
}
@keyframes pfSpark { to { stroke-dashoffset: 0; } }

.pf__dots circle {
  fill: var(--bg); stroke: var(--accent); stroke-width: 2;
}
.pf__head { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; }
.pf__ping {
  fill: none; stroke: var(--accent); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: pfPing 2.4s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes pfPing {
  0%   { transform: scale(1);   opacity: .75; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* في الفاتح الليموني كخط رفيع على ورق مابيبانش —
   الخط بالأخضر الغامق، والليموني يفضل تعبئة (النقطة والصبغة) */
:root[data-theme="light"] .pf__line,
:root[data-theme="light"] .pf__dots circle { stroke: var(--accent-txt); }
:root[data-theme="light"] .pf__glow  { opacity: .3; }
:root[data-theme="light"] .pf__spark { stroke: var(--accent); opacity: 1; }
:root[data-theme="light"] .pf__head  { stroke: var(--accent-txt); stroke-width: 2; }
:root[data-theme="light"] .pf__ping  { stroke: var(--accent-txt); }
:root[data-theme="light"] .pf__s1 { stop-opacity: .45; }
:root[data-theme="light"] .pf__s2 { stop-opacity: .14; }

/* ياسر مرتين من نفس الصورة، كل نسخة مقصوصة على حتة:
   · --top   : الحاد — فوق الخط بس
   · --glass : المبلور — على شكل الكارت (تحت الخط)
   حدود القصّ نفسها بيحطها الجافاسكربت (clip-path: path) لأنها بتتبع الخط
   وبتتحرّك معاه وقت الـhover. والنتيجة إن ياسر واقف ورا لوح زجاج مصنفر.
   وكل مسرح مقفول من تحت عند حافة الكارت، فلما ياسر يطلع في الأول
   بيبان طالع من جوّه الكارت — والحتة اللي بتعدّي الخط بتتحوّل من مبلورة لحادة. */
.pf__stage {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
}
/* قبل ما الجافاسكربت يحط حدود القصّ، المبلور مستخبي —
   وإلا كان هيغطّي الحاد كله والصورة تبان مهزوزة */
.pf__stage--glass { visibility: hidden; }
.hero__frame.is-cut .pf__stage--glass { visibility: visible; }

/* الكلاسين مع بعض عن قصد: قاعدة .hero__cut العادية جاية بعد كده في الملف،
   ولو الأولوية متساوية هي اللي بتكسب وبتشيل البلور */
.hero__cut.hero__cut--glass {
  /* ورا زجاج مصنفر: مبلور ولونه مطفي — مش مهزوز.
     البلور 7px بس: أكتر من كده بيبقى بقعة، وأقل مابيتفرقش عن الحاد.
     والإضاءة .9 مش أقل: البدلة سودا والكارت غامق — على .72 كان بيختفي
     بدل ما يبان «ورا زجاج» */
  filter: blur(7px) saturate(.6) brightness(.9);
  /* رجليه بتدوب لتحت جوّه الزجاج — من غير ده البنطلون وطرف الجاكيت
     (عريضين ومستقيمين) بيتحوّلوا لبلوك مبلور.
     التدريج رأسي بس، والبلور 7px أقل بكتير من الفاضي اللي على جناب الصورة (~35px)،
     فمفيش قصّ بحواف مستقيمة على الجناب زي ما حصل مع الـmask القديم */
  /* 70% = تحت الخط بحتة (الخط بيعدّي عند ~69% من طول الصورة) — لو بدأ التدريج
     قبل الخط، الحتة اللي تحته مباشرة بتبان باهتة والحد بين الحاد والمبلور بيتكسر */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}
:root[data-theme="light"] .hero__cut.hero__cut--glass {
  /* على ورق فاتح الزجاج «حليبي»: فاتح ومطفي مش غامق.
     على .62 البدلة السودا كانت بتبان بقعة رمادي تقيلة — لازم تبقى طيف */
  filter: blur(8px) saturate(.4) brightness(1.35);
  opacity: .36;
}

/* الضوء اللي ورا ياسر جوّه البرواز — بيتنفّس وبيلف ببطء.
   🔴 القاعدة هنا: ممنوع يكون ليه حدّ واضح.
   كل طبقة بتنتهي عند `transparent` قبل حواف البرواز بكتير، وعليها blur تقيل —
   عشان كده الحركة بتتحس ومحصلش خط قصّ حوالين الصورة. */
.hero__glow {
  position: absolute; z-index: 2;
  /* الضوء بيبدأ من تحت الراس — لما كان واصل لفوق كان بيوقع على الوش
     ويغسله. دلوقتي هو ضوء خلفي على الكتوف والجسم. */
  inset-inline: 6%; bottom: var(--brands-h); top: 40%;
  /* التدرّج نفسه بينتهي شفاف جوّه حدود العنصر، فمش محتاج blur على الأب —
     وده مقصود: الـblur على الأب كان هيخلّي المتصفح يعيد حساب الضبابية
     كل فريم عشان الابن بيلف جوّاه. */
  background: radial-gradient(closest-side at 50% 62%, var(--tint-16), transparent 76%);
  animation: auraBreathe 10s ease-in-out infinite alternate;
}
/* طبقة تانية بتلف جوّه الأولى — الحركة بتبقى غير منتظمة فمابتحسّش إنها لوب */
.hero__glow::after {
  content: ''; position: absolute; inset: -8%;
  background: radial-gradient(38% 30% at 42% 58%, var(--tint-12), transparent 70%);
  filter: blur(34px);
  animation: auraDrift 19s linear infinite;
}
/* حركة هادية: التفاصيل الكبيرة بتتلغي لو اتحرّكت كتير */
@keyframes auraBreathe {
  from { transform: translate3d(-3%, 1%, 0) scale(.96); opacity: .62; }
  to   { transform: translate3d(3%, -1%, 0) scale(1.05); opacity: .92; }
}
@keyframes auraDrift { to { transform: rotate(1turn); } }
:root[data-theme="light"] .hero__glow {
  background: radial-gradient(58% 52% at 50% 44%, rgba(196,248,42,.5), transparent 74%);
}

/* الكلمة الضخمة — ياسر واقف قدّامها وقاطعها */
.hero__word {
  position: absolute; z-index: 1;
  /* الكلمة ناحية جوّه الصفحة عشان تتقري، وياسر واقف على طرفها الخارجي */
  top: 27%; inset-inline-end: -12%; left: auto; transform: none;
  font-size: clamp(3.6rem, 8vw, 6.8rem);
  font-weight: 700; line-height: .9; letter-spacing: -.05em;
  white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1.6px var(--tint-45);
  pointer-events: none; user-select: none;
}

/* ياسر نفسه — في نص البرواز وواقف على شريط الشركتين */
.hero__cut {
  position: absolute; z-index: 3;
  bottom: calc(var(--brands-h) - 4px);
  /* الطرفين صفر + هوامش أوتوماتيك = الصورة في النص من غير transform
     (عشان متتعاركش مع حركة السكرول اللي في GSAP) */
  inset-inline: 0; margin-inline: auto;
  top: auto; transform: none;
  height: calc(100% - var(--brands-h) - 22px); width: auto; max-width: 100%;
  /* عشان يبقى جزء من المشهد مش صورة ملزوقة:
     1) ألوانه اتهدّت شوية عشان تمشي مع لون الصفحة
     2) ضل ناعم تحته بس — شيلنا الهالة الليمونية اللي كانت بترسم حدود القصّ
     3) رجليه بتدوب في أرضية البرواز بدل ما تنتهي فجأة */
  /* من غير drop-shadow (اتشال v43): الضل كان بيترسم لكل بكسل شبه شفاف حوالين
     القصّ، فكان بيطلع مستطيل رمادي ورا جسمه — باين جدًا في الفاتح.
     ياسر مش محتاج ضل يفصله: الهالة الليمونية ورا وحافة الزجاج قدّام بيعملوا ده. */
  filter: saturate(.82) contrast(1.06);
  /* كان فيه mask بيدوّب رجليه في الأرضية — اتشال في v43:
     1) بقى مالوش لازمة: النسخة الحادة مقصوصة فوق الخط، والمبلورة تحتها ورا الزجاج
     2) والـmask بيقصّ أي حاجة برّه حدود الصورة، فالضل والبلور كانوا بيتقصّوا
        بحواف مستقيمة — بتبان كمستطيل رمادي جنب دراعه في الوضع الفاتح */
}
:root[data-theme="light"] .hero__cut { filter: saturate(.92) contrast(1.02); }

/* شريط الشركتين — تحت الصورة جوّه البرواز */
.brands {
  position: absolute; z-index: 5; inset-inline: 0; bottom: 0;
  height: var(--brands-h);
  display: flex; align-items: center; justify-content: center;
  gap: .62rem; padding-inline: .7rem;
  border-top: 1px solid var(--glass-brd);
  border-radius: 0 0 var(--pf-r) var(--pf-r);
  /* من غير backdrop-filter: تحت الشريط جسم الكارت المصمت أصلًا،
     فالضبابية كانت بتكلّف المعالج على الفاضي */
  background: linear-gradient(to top, rgba(8,8,9,.92), rgba(8,8,9,.3));
}
:root[data-theme="light"] .brands {
  background: linear-gradient(to top, rgba(255,255,255,.9), rgba(255,255,255,.3));
}
.brands__label {
  flex: none; font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  color: var(--accent-txt); opacity: .9;
}
/* كل شركة = علامتها + اسمها */
.brands__one { display: flex; align-items: center; gap: .3rem; }
.brands__one b {
  font-size: clamp(.68rem, 1vw, .78rem); font-weight: 700; letter-spacing: -.01em;
  color: var(--text); white-space: nowrap;
}
.brands__dot {
  flex: none; width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-3);
}
/* اللوجوهات أصلاً بنفس اللون الليموني بتاع الموقع.
   في الوضع الفاتح بنغمّقها بدل ما نعكسها — العكس بيقلب الليموني لبنفسجي. */
.brands__one img { height: 22px; width: auto; flex: none; }
:root[data-theme="light"] .brands__one img { filter: brightness(.52) saturate(1.15); }

/* كارت النتيجة عايم في المساحة الفاضية على الجنب التاني من الشاشة */
.hero > .score {
  position: absolute; z-index: 3;
  inset-inline-end: clamp(1.5rem, 6vw, 7rem);
  top: 42%;
  min-width: 235px;
}

/* كل جملة في سطر واحد: الجملة الأولى في سطر، «والمقياس واحد: المبيعات» في سطر.
   الحجم محسوب عشان أطول جملة تكمّل في عرض العمود من غير ما تلف. */
.hero__title {
  font-size: clamp(1.55rem, 2.45vw, 2.65rem);
  font-weight: 700; line-height: 1.34; letter-spacing: -.015em;
  margin-block: .25rem .9rem;
  max-width: none;
}
:root[dir="ltr"] .h2 { max-width: 26ch; }
/* (كان 24ch للإنجليزي — اتشال: عنوان البوست المموّل سطر واحد في اللغتين، 52ch تحت) */
.ht__a { display: block; overflow: hidden; }
.ht__b { display: block; margin-top: .12em; }
.punch { position: relative; display: inline-block; color: var(--accent-txt); font-weight: 700; }
.punch i {
  position: absolute; inset-inline: 0; bottom: .06em; height: .16em;
  background: var(--accent);
  border-radius: var(--r-pill);
  opacity: .32;
  transform-origin: var(--po, right);
  animation: punchIn 1s var(--ease) .9s both;
}
:root[dir="ltr"] .punch i { transform-origin: left; }
@keyframes punchIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* سطر واحد كمان، ومتماشي مع العنوان اللي فوقه */
.hero__sub {
  font-size: var(--fs-lead); color: var(--text-2); max-width: none; line-height: 1.75;
}
.hero__cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .7rem; }

/* شريط الأرقام — في عمود الكلام نفسه، مش على عرض الشاشة */
.hstats {
  position: relative; z-index: 3;
  grid-column: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(1.1rem, 3vh, 1.9rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.hstat {
  display: flex; flex-direction: column; gap: .08rem;
  padding: .62rem clamp(.65rem, 1.3vw, 1.15rem);
  border-inline-start: 1px solid var(--glass-brd);
}
.hstat:first-child { border-inline-start: 0; }
.hstat b {
  display: flex; align-items: baseline; gap: .22rem;
  font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 700; line-height: 1.15;
  color: var(--accent-txt); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.hstat b em { font-style: normal; font-size: .68rem; color: var(--text-3); font-weight: 600; }
.hstat > span { font-size: .72rem; color: var(--text-2); line-height: 1.45; }
.hero__note {
  display: flex; align-items: center; gap: .55rem;
  margin-top: 1rem; font-size: var(--fs-sm); color: var(--text-3);
  text-wrap: pretty;
}
.hero__note svg { width: 17px; height: 17px; flex: none; color: var(--accent-txt); }

.score {
  position: absolute;
  min-width: 205px;
  padding: .85rem 1rem .75rem;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd-hi);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  z-index: 3;
}
.score__tag {
  display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .05em;
  color: var(--accent-ink); background: var(--accent);
  padding: .14rem .5rem; border-radius: var(--r-pill); margin-bottom: .45rem;
}
.score__v { display: block; font-size: 1.22rem; font-weight: 700; line-height: 1.25; }
.score__l { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.score__spark { width: 100%; height: 26px; margin-top: .4rem; }
.score__spark path { fill: none; stroke: var(--accent-txt); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* شريط لوجوهات العملاء — أبيض شفاف من غير براويز */
.strip {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .55rem var(--pad-x);
  border-top: 1px solid var(--glass-brd);
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
}
:root[data-theme="light"] .strip { background: linear-gradient(to top, rgba(26,26,18,.06), transparent); }
.strip__label {
  flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3);
  letter-spacing: .04em;
}
.strip__mask {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.strip__track { display: flex; width: max-content; animation: slide 34s linear infinite; }
.strip__set { display: flex; align-items: center; gap: .55rem; padding-inline-end: .55rem; }
/* كل اللوجوهات صورة واحدة — طلب واحد بدل 15 */
.strip__img {
  height: 52px; width: auto; flex: none;
  opacity: .5;
  transition: opacity .4s var(--ease);
}
.strip:hover .strip__img { opacity: .92; }
/* اللوجوهات مرسومة أبيض — في اللايت مود بنقلبها أسود */
:root[data-theme="light"] .strip__img { filter: invert(1); opacity: .5; }
:root[data-theme="light"] .strip:hover .strip__img { opacity: .85; }
@keyframes slide { to { transform: translateX(-50%); } }
:root[dir="rtl"] .strip__track { animation-name: slideRtl; }
@keyframes slideRtl { to { transform: translateX(50%); } }

/* ───────── 5. المشكلة = القمع المخروم ─────────
   كان تقرير أرقام + 3 تنبيهات في صناديق، والاتنين بيقولوا نفس الجملة.
   دلوقتي رسمة واحدة: قمع المبيعات (أداة ياسر اليومية) مخروم من 3 أماكن،
   والفلوس بتتسرّب منه قبل ما توصل لـ«المبيعات = ؟».
   العنوان بيقول «أين تذهب» — والرسمة بتوريها حرفيًا. */
.prob__wrap {
  display: grid; grid-template-columns: .74fr 1.26fr;
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; width: 100%;
}
.prob__sub {
  margin: 1rem auto 0; max-width: 34ch; text-align: center;
  font-size: var(--fs-lead); color: var(--text-2); line-height: 1.7;
}

.fn { position: relative; margin: 0; }
/* الرسمة + الأسامي فوقها بنِسَب من نفس اللوحة (720×460) — بيكبروا ويصغروا مع بعض */
.fn__pic { position: relative; }
.fn__svg { display: block; width: 100%; height: auto; overflow: visible; }

.fn__s1 { stop-color: var(--accent); stop-opacity: .16; }
.fn__s2 { stop-color: var(--accent); stop-opacity: .03; }
.fn__band {
  fill: url(#fnTint); stroke: var(--tint-34); stroke-width: 1.5; stroke-linejoin: round;
}
/* «المبيعات» — فاضية ومتقطّعة: المكان اللي المفروض الفلوس توصله */
.fn__band--out {
  fill: rgba(255,107,90,.05); stroke: rgba(255,107,90,.45); stroke-dasharray: 5 5;
}
.fn__leads path { fill: none; stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .6; }

.fn__money circle { fill: var(--accent); }
.fn__money .fn__win { fill: #fff; }

.fn__hole { fill: var(--bg); stroke: var(--warn); stroke-width: 2; }
.fn__ring {
  fill: none; stroke: var(--warn); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: fnPing 2.2s cubic-bezier(.2,.7,.3,1) infinite;
}
.fn__holes g:nth-child(2) .fn__ring { animation-delay: .7s; }
.fn__holes g:nth-child(3) .fn__ring { animation-delay: 1.4s; }
@keyframes fnPing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
/* أرقام الخروم بتظهر على الموبايل بس — جنب القايمة اللي تحت */
.fn__nums text { display: none; fill: var(--warn); font-size: 15px; font-weight: 700; font-family: inherit; }

/* أسامي الطبقات وأرقامها — في نص كل طبقة */
.fn__tiers { margin: 0; padding: 0; list-style: none; }
.fn__tiers li {
  position: absolute; left: 50%; top: var(--y); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  line-height: 1.2; text-align: center; white-space: nowrap; pointer-events: none;
}
.fn__tiers span { font-size: var(--fs-xs); color: var(--text-2); }
.fn__tiers b {
  font-size: clamp(.86rem, 1.15vw, 1.05rem); font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.fn__out span { color: var(--warn); font-weight: 700; font-size: var(--fs-sm); }

/* «؟» تحت القمع — مكان رقم المبيعات */
.fn__q {
  position: absolute; left: 50%; top: 89.5%; transform: translate(-50%, -50%);
  margin: 0; display: flex; flex-direction: column; align-items: center;
  line-height: 1; white-space: nowrap; pointer-events: none;
}
.fn__q b { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 700; color: var(--warn); }
.fn__q span { font-size: var(--fs-xs); color: var(--text-3); margin-top: .3rem; }

/* المشاكل التلاتة — كل واحدة جنب الخرم بتاعها والخط واصل بينهم */
.fn__leaks { margin: 0; padding: 0; list-style: none; }
.fn__leak {
  position: absolute; transform: translateY(-50%);
  padding: .55rem .75rem; border-radius: var(--r-md);
  border: 1px solid rgba(255,107,90,.3);
  background: linear-gradient(rgba(255,107,90,.07), rgba(255,107,90,.07)), var(--surface);
  box-shadow: var(--shadow-sm);
}
.fn__leak b { display: block; font-size: .7rem; font-weight: 700; color: var(--warn); margin-bottom: .2rem; letter-spacing: .02em; }
.fn__leak > span { display: block; font-size: clamp(.76rem, .88vw, .86rem); color: var(--text-2); line-height: 1.55; }
.fn__leak--1 { left: 76.5%; top: 20.7%; width: 23.5%; }
.fn__leak--2 { left: 0;     top: 40.2%; width: 29%; }
.fn__leak--3 { left: 66%;   top: 60.4%; width: 34%; }

:root[data-theme="light"] .fn__s1 { stop-opacity: .4; }
:root[data-theme="light"] .fn__s2 { stop-opacity: .08; }
:root[data-theme="light"] .fn__money circle { stroke: var(--accent-txt); stroke-width: 1.5; }
:root[data-theme="light"] .fn__money .fn__win { fill: var(--accent-txt); }
:root[data-theme="light"] .fn__leak {
  background: linear-gradient(rgba(255,107,90,.06), rgba(255,107,90,.06)), var(--surface);
  border-color: rgba(200,70,55,.32);
}
/* (--warn في الفاتح أغمق لوحده: #C0392B — فالكلام الأحمر بيتقري من غير قواعد زيادة) */

/* ───────── 6. الخدمات = «إذا كنت…» ─────────
   (v54 كان مقبض «مين ماسك الدركسيون» — ياسر: «مش موضّح وملخبط وشكله كمان».)
   التلات خدمات جنب بعض في نفس اللحظة، وكل كارت بيبدأ بحال الزائر بكلامه.
   الترتيب جوّه الكارت ثابت فالعين بتقارن على طول: الحال ← الخدمة ← مين بينفّذ ←
   إيه اللي فيها ← الشكل والزرار (الأخير لازق في قاع الكارت فالتلاتة على خط واحد). */
.sc {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.4vw, 1.2rem);
  align-items: stretch;
}
.sc__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-brd-hi);
  background: var(--surface);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
:root[data-theme="light"] .sc__card { box-shadow: 0 14px 34px rgba(26,26,18,.1), inset 0 1px 0 #fff; }
.sc__card:hover, .sc__card:focus-within { transform: translateY(-4px); border-color: var(--tint-34); }
/* الكارت اللي في النص متعلّم — حرف ليموني وهالة خفيفة من فوق */
.sc__card--hot { border-color: var(--tint-34); background: linear-gradient(180deg, var(--tint-08), transparent 46%), var(--surface); }
.sc__card--hot::before {
  content: ''; position: absolute; inset-inline: 1.4rem; top: 0; height: 2px;
  background: var(--accent); border-radius: 0 0 2px 2px;
}

/* (كان فيه رقم كبير 01/02/03 في الركن — محمد: «باينة إنها AI»، فاتشال) */

/* «إذا كنت…» + حال الزائر */
.sc__if { font-size: var(--fs-xs); font-weight: 700; color: var(--accent-txt); }
.sc__who {
  margin: .3rem 0 0;
  font-size: clamp(1rem, 1.25vw, 1.14rem); font-weight: 700; line-height: 1.5; color: var(--text);
  min-height: 3em;                                   /* سطرين — فالخدمة تحتها على نفس الارتفاع في التلاتة */
}

/* الخدمة + مين بينفّذ */
.sc__h {
  margin: 1rem 0 0; padding-top: .95rem; border-top: 1px solid var(--glass-brd);
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--text);
}
.sc__chip {
  align-self: flex-start; margin-top: .45rem;
  padding: .18rem .6rem; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700; color: var(--accent-txt);
  background: var(--accent-soft); border: 1px solid var(--tint-26);
}

.sc__list { display: grid; gap: .45rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.sc__list li {
  position: relative; padding-inline-start: 1.55rem;
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5;
}
.sc__list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .18em;
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft);
}
/* ✓ واحدة في كل اللغات — الحدود left/bottom فيزيائي عن قصد (لو اتقلبت بتبقى «<») */
.sc__list li::after {
  content: ''; position: absolute; inset-inline-start: 5px; top: calc(.18em + 4px);
  width: 6px; height: 4px;
  border-left: 2px solid var(--accent-txt); border-bottom: 2px solid var(--accent-txt);
  transform: rotate(-45deg);
}

/* الشكل + الزرار — لازقين في قاع الكارت */
.sc__foot {
  margin-top: auto; padding-top: 1rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem;
}
.sc__fmt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sc__fmt small { font-size: .68rem; font-weight: 600; color: var(--text-3); }
/* سطرين محجوزين دايمًا — لو شكل خدمة نزل سطرين، «الشكل» في التلات كروت يفضل على خط واحد */
.sc__fmt b { font-size: var(--fs-xs); font-weight: 600; color: var(--text); line-height: 1.45; min-height: 2.9em; }
/* على العرض الأضيق جملة «إذا كنت» ممكن تنزل 3 سطور — نحجزهم عشان أسامي الخدمات تفضل على خط واحد */
@media (max-width: 1180px) { .sc__who { font-size: .96rem; } .sc__card { padding-inline: 1.1rem; } }
/* الدوك العايم في نص تحت — الكروت بتخلص فوقه مش وراه */
@media (min-width: 981px) { .section.svc { padding-bottom: calc(2.4rem + 56px); } }
.sc__go {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--text); border: 1px solid var(--glass-brd-hi);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.sc__go svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
:root[dir="rtl"] .sc__go svg { transform: scaleX(-1); }
.sc__go:hover, .sc__card--hot .sc__go { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.sc__go:hover svg { transform: translateX(3px); }
:root[dir="rtl"] .sc__go:hover svg { transform: scaleX(-1) translateX(3px); }
.sc__go:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 3px; }

/* ───────── 7. طريقة العمل = منحنى المبيعات ─────────
   كان جدول مواعيد زي أدوات الإعلانات: شرايط ليمونية فاضية، والكلام بعيد عنها على
   الجنب، وأسابيع ثابتة ياسر لسه ماأكّدهاش (الزائر بيقراها وعد).
   دلوقتي خط واحد هو نفسه الخطوات: مسطّح على مستوى المبيعات الحالي وإحنا بنفهم
   ونشخّص، وبيطلع من أول التنفيذ، وفوق علامة «أول نتيجة» (نتيجة حقيقية من سجل النتائج).
   الخط بيترسم مع التمرير (زي سما الفوتر) والمحطات بتنوّر وهو بيعدّي عليها.
   🔴 الرسمة بتتبني بالبكسل في الجافاسكربت — مفيش scaleX(-1) ولا تمطيط للخط. */
.cv {
  --base: 52%;                  /* مستوى المبيعات الحالي — الخط المسطّح والمحطات عليه */
  --rise: .58;                  /* التنفيذ = الخط بيبدأ يطلع */
  --winx: .87;                  /* مكان «أول نتيجة» على طول الخط */
  position: relative;
  height: clamp(360px, 62vh, 520px);
}
.cv__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cv__base { fill: none; stroke: var(--glass-brd-hi); stroke-width: 1; stroke-dasharray: 3 6; }
.cv__a1 { stop-color: var(--accent); stop-opacity: .2; }
.cv__a2 { stop-color: var(--accent); stop-opacity: 0; }
.cv__area { fill: url(#cvArea); transition: opacity .3s linear; }
.cv__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* من غير جافاسكربت الرسمة الثابتة بتتمطّ مع العرض — وبتتقلب في العربي */
:root[dir="rtl"] .cv:not(.is-js) .cv__svg { transform: scaleX(-1); }
.cv:not(.is-js) .cv__head { display: none; }

/* «المبيعات ↑» — اسم المحور فوق أول السطر */
.cv__y {
  position: absolute; top: 0; inset-inline-start: 0;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-txt); letter-spacing: .02em;
}
.cv__y svg { width: 14px; height: 14px; }

/* رأس الخط — نقطة بتنبض في آخر حتة اترسمت (ولما الخط يخلص: «لسه طالع») */
.cv__head {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px var(--tint-16), 0 0 22px rgba(196,248,42,.55);
  pointer-events: none;
}
.cv__head::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0;
  animation: cvPulse 2.2s var(--ease) infinite;
}
@keyframes cvPulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* الجملة الصريحة فوق الجزء المسطّح */
.cv__note {
  position: absolute; margin: 0;
  top: calc(var(--base) - 2.6rem);
  inset-inline-start: 14%;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-3);
  white-space: nowrap;
}
.cv__note::before {             /* شرطة صغيرة بتشاور على الخط */
  content: ''; display: inline-block; vertical-align: middle;
  width: 18px; height: 1px; margin-inline-end: .5rem; background: var(--text-3); opacity: .6;
}

/* «أول نتيجة» — الجافاسكربت بيحطها على الخط عند --winx */
/* الكلام بيقف «ورا» النقطة في الزمن (ناحية نص الخط) — فوق الجزء الأوطى من المنحنى،
   ومابيخرجش برّه السكشن. row-reverse بيعمل ده في الاتجاهين:
   في الإنجليزي النقطة آخر العلبة يمين، وفي العربي النقطة آخرها شمال. */
.cv__win {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: row-reverse; align-items: center; gap: .55rem;
  white-space: nowrap;
  opacity: 0; transform: translate(calc(-100% + 7px), -50%) scale(.6); transform-origin: calc(100% - 7px) 50%;
  transition: opacity .35s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1);
}
.cv__win.is-on { opacity: 1; transform: translate(calc(-100% + 7px), -50%) scale(1); }
:root[dir="rtl"] .cv__win { transform: translate(-7px, -50%) scale(.6); transform-origin: 7px 50%; }
:root[dir="rtl"] .cv__win.is-on { transform: translate(-7px, -50%) scale(1); }
.cv__win i {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--tint-34);
}
.cv__win b {
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-ink);
  background: var(--accent); padding: .22rem .6rem; border-radius: var(--r-pill);
}
.cv__win small { font-size: .74rem; color: var(--text-2); }
/* من غير جافاسكربت: مكانها التقريبي ثابت */
.cv:not(.is-js) .cv__win { opacity: 1; left: auto; inset-inline-start: 80%; top: 20%; transform: translateY(-50%); }

/* ── المحطات ── */
.cv__steps { margin: 0; padding: 0; list-style: none; }
.cv__st {
  position: absolute; top: var(--base);
  inset-inline-start: calc(var(--x) * 100%);
  width: min(27%, 330px);
  margin-top: -14px;            /* نص الدايرة — مركزها على الخط */
}
.cv__n {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-style: normal; font-size: .78rem; font-weight: 700;
  color: var(--text-3); background: var(--bg); border: 1.5px solid var(--glass-brd-hi);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.cv__st.is-on .cv__n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 0 5px var(--tint-16); }
.cv__t { display: block; margin-top: .85rem; font-size: var(--fs-body); font-weight: 700; color: var(--text); }
.cv__m { display: block; margin-top: .1rem; font-size: var(--fs-xs); font-weight: 600; color: var(--accent-txt); }
.cv__d { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
/* الكلام بيوضح وهو الخط بيوصل لمحطته */
.cv.is-js .cv__t, .cv.is-js .cv__m, .cv.is-js .cv__d { opacity: .35; transition: opacity .5s var(--ease); }
.cv.is-js .cv__st.is-on .cv__t, .cv.is-js .cv__st.is-on .cv__m, .cv.is-js .cv__st.is-on .cv__d { opacity: 1; }

:root[data-theme="light"] .cv__a1 { stop-opacity: .4; }
:root[data-theme="light"] .cv__line { stroke: var(--accent-txt); }
:root[data-theme="light"] .cv__win i,
:root[data-theme="light"] .cv__head { background: var(--accent-txt); }
:root[data-theme="light"] .cv__head { box-shadow: 0 0 0 5px rgba(105,145,15,.18); }
:root[data-theme="light"] .cv__head::after { border-color: var(--accent-txt); }

/* ───────── 8. النتائج = من اللقطة للرقم ─────────
   كان: أرقام في ناحية وكوّمة صور في ناحية، والزائر لازم يصدّقنا.
   دلوقتي: اللقطة الحقيقية بتتقري قدّامه — خط مسح بيقف على سطر الإجمالي،
   والرقمين بيطيروا منها للقراية اللي جنبها، والعائد بيتحسب منهم. */
.rx__wrap { width: 100%; }
/* عنوان النتائج في سطر واحد على الشاشات الواسعة (طلب محمد).
   .shead في النص عشان يغلب قاعدة الإنجليزي (26ch) — من غيرها الفاصلة
   كانت بتنزل أول السطر التاني لوحدها */
.rx .shead .h2 { max-width: min(100%, 54ch); }
.rx__stage {
  position: relative;
  display: grid; grid-template-columns: 1.3fr .7fr;
  gap: clamp(1.2rem, 3.2vw, 2.8rem); align-items: center;
}

/* ── اللقطة ── */
.rx__doc {
  position: relative;
  height: clamp(260px, 50vh, 420px);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-brd-hi);
}
:root[data-theme="light"] .rx__doc { box-shadow: 0 22px 50px rgba(26,26,18,.18), 0 0 0 1px rgba(26,26,18,.16); }
.rx__doc:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 6px; }

/* الصفحة = اللقطة بمقاسها الأصلي (768). الجافاسكربت بيكبّرها ويحرّكها عشان
   الجدول بس اللي يملا البرواز — وكل اللي فوقها (المسح والمربعات) بنفس وحدات
   اللقطة، فبيتحرّكوا معاها بالظبط. --s = التكبير، عشان الخطوط والكلام
   يفضلوا بنفس الحجم على الشاشة مهما اتكبّرت اللقطة. */
.rx__page {
  --s: 1;
  position: absolute; left: 0; top: 0;
  width: 768px; height: 768px;
  transform-origin: 0 0;
  direction: ltr;            /* اللقطة إنجليزي — الأماكن جوّاها بالشمال واليمين الحقيقيين */
}
.rx__img {
  display: block; width: 768px; height: 768px; max-width: none;
  user-select: none; -webkit-user-drag: none;
}
/* من غير جافاسكربت: اللقطة بتملا البرواز عادي ومفيش مسح ولا مربعات */
.rx__stage:not(.is-js) .rx__page { position: static; width: 100%; height: 100%; }
.rx__stage:not(.is-js) .rx__img { width: 100%; height: 100%; object-fit: cover; }
.rx__stage:not(.is-js) .rx__scan,
.rx__stage:not(.is-js) .rx__box { display: none; }

/* خط المسح + ذيل خفيف فوقه (اللي اتقري) */
.rx__scan {
  position: absolute; left: 0; top: 0; width: 768px;
  height: calc(3px / var(--s));
  margin-top: calc(-1.5px / var(--s));
  background: #C4F82A;
  box-shadow: 0 0 calc(14px / var(--s)) rgba(196,248,42,.9), 0 0 0 calc(1px / var(--s)) rgba(63,93,9,.55);
  opacity: 0;
  pointer-events: none;
}
.rx__scan::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 120px;
  background: linear-gradient(to bottom, rgba(196,248,42,0), rgba(196,248,42,.22));
}

/* المربعين اللي بيقفلوا على الصرف والمبيعات */
.rx__box {
  position: absolute;
  border-radius: calc(5px / var(--s));
  box-shadow:
    0 0 0 calc(2px / var(--s)) #0A0A0B,
    0 0 0 calc(5px / var(--s)) #C4F82A,
    0 calc(10px / var(--s)) calc(28px / var(--s)) rgba(10,10,11,.32);
  opacity: 0;
  pointer-events: none;
}
/* اسم المربع تحته (فوقه في اللقطة في سهم «حجم المبيعات») */
.rx__box i {
  position: absolute; top: calc(100% + 9px / var(--s)); left: 50%;
  transform: translateX(-50%);
  font-style: normal; white-space: nowrap; line-height: 1.3;
  font-size: calc(12px / var(--s)); font-weight: 700;
  padding: calc(3px / var(--s)) calc(10px / var(--s));
  border-radius: 999px;
  background: #0A0A0B; color: #C4F82A;
}

.rx__chip {
  position: absolute; z-index: 3; top: 12px; inset-inline-start: 12px;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(10,10,11,.18);
}
.rx__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); opacity: .55; }
.rx__zoom {
  position: absolute; z-index: 3; bottom: 12px; inset-inline-end: 12px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%;
  background: #0A0A0B; color: #C4F82A;
  box-shadow: 0 8px 22px rgba(10,10,11,.25);
  transition: transform .45s var(--ease);
}
.rx__zoom svg { width: 17px; height: 17px; }
.rx__doc:hover .rx__zoom { transform: scale(1.12); }

/* ── القراية ── */
.rx__read { display: flex; flex-direction: column; gap: clamp(.55rem, 1.6vh, .95rem); min-width: 0; }
.rx__cap {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-3);
}
.rx__no { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.rx__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.rx__row {
  display: grid; gap: .1rem;
  padding-bottom: clamp(.45rem, 1.4vh, .8rem);
  border-bottom: 1px solid var(--glass-brd);
}
.rx__lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
/* الرقم اتجاهه شمال-يمين، و justify-self بيلزقه في أول السطر بتاع اللغة */
.rx__v {
  display: inline-block; justify-self: start;
  font-size: clamp(1.6rem, 2.9vw, 2.3rem); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--text-2);
}
.rx__row--out .rx__v { font-size: clamp(2rem, 3.8vw, 3rem); color: var(--accent-txt); }
.rx__v.is-hit, .rx__x.is-hit { animation: rxHit .6s var(--ease); }
@keyframes rxHit { 35% { transform: scale(1.07); } }

.rx__x {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1rem; border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 12px 30px var(--tint-26);
}
.rx__x b { font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rx__x > span { font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; opacity: .85; }

/* الحملات الأربعة — كل زرار عليه العائد بتاعها */
.rx__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.rx__tab {
  position: relative; overflow: hidden;
  padding: .55rem .3rem; border-radius: var(--r-md);
  border: 1px solid var(--glass-brd); background: var(--glass);
  color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.rx__tab b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rx__tab:hover { border-color: var(--glass-brd-hi); color: var(--text); }
.rx__tab.is-on { border-color: var(--tint-55); color: var(--accent-txt); background: var(--accent-soft); }
.rx__tab:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 2px; }
/* شريط الوقت تحت الحملة الشغّالة — بيتملّي لحد ما اللي بعدها تيجي */
.rx__prog {
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
}
:root[dir="ltr"] .rx__prog { transform-origin: left; }
.rx__stage.is-auto .rx__tab.is-on .rx__prog { animation: rxProg var(--rx-dur, 6.5s) linear forwards; }
@keyframes rxProg { to { transform: scaleX(1); } }

/* الرقم وهو طاير من اللقطة للقراية */
.rx__fly {
  position: absolute; z-index: 8; left: 0; top: 0;
  pointer-events: none;
  padding: .28rem .7rem; border-radius: var(--r-pill);
  background: #0A0A0B; color: #C4F82A;
  font-size: 1rem; font-weight: 700; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  direction: ltr;
  box-shadow: 0 0 0 2px #C4F82A, 0 14px 30px rgba(0,0,0,.35);
}

/* ── باقي النتائج: شريط واحد بخطوط رفيعة ── */
.rx__more {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
  margin-top: clamp(1rem, 3vh, 1.9rem);
  padding-top: clamp(.8rem, 2vh, 1.15rem);
  border-top: 1px solid var(--glass-brd);
}
.rx__moreT { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); white-space: nowrap; }
.rx__more ul { display: grid; grid-template-columns: repeat(6, 1fr); }
.rx__more li {
  min-width: 0;
  padding-inline: clamp(.5rem, 1vw, .9rem);
  border-inline-start: 1px solid var(--glass-brd);
}
.rx__more li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.res__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .35rem; }
.res__v b {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.1;
  color: var(--accent-txt); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.res__v--word b { font-size: clamp(.95rem, 1.45vw, 1.12rem); }
.res__v em { font-style: normal; font-size: var(--fs-xs); color: var(--text-3); }
.res__l { display: block; margin-top: .25rem; font-size: .78rem; color: var(--text-2); line-height: 1.45; }

/* ───── عارض اللقطات (dialog) ───── */
.lb {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: clamp(1rem, 4vh, 2.4rem) 1rem 5.6rem;
  border: 0; background: transparent; color: var(--text);
  overflow: hidden;
}
.lb[open] { display: grid; place-items: center; }
/* الخلفية ورا العارض — ::backdrop مابيورثش متغيّرات :root في كل المتصفحات،
   فالألوان مكتوبة هنا صريحة */
.lb::backdrop {
  background: rgba(6,6,7,.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
:root[data-theme="light"] .lb::backdrop { background: rgba(236,234,226,.94); }

.lb__stage { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; }
.lb__img {
  display: block;
  width: auto; height: auto;
  max-width: min(100%, 820px);
  /* بالشاشة مش بالنسبة المئوية — الـ% جوّه الـgrid ماكانتش بتتحسب
     فالصورة كانت بتطلع أطول من الشاشة والشريط راكب عليها.
     8.5rem = مكان الشريط تحت + هامش فوق */
  max-height: calc(100vh - 8.5rem);
  max-height: calc(100svh - 8.5rem);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  user-select: none; -webkit-user-drag: none;
  touch-action: pan-y;         /* السحب الأفقي للتقليب، والرأسي يفضل للمتصفح */
}
/* الصفحة ورا العارض ماتتحرّكش */
.lb-open, .lb-open body { overflow: hidden; }
:root[data-theme="light"] .lb__img { box-shadow: 0 30px 70px rgba(26,26,18,.25); border: 1px solid rgba(26,26,18,.14); }
/* دخلة العارض وتقليب اللقطات — بالـtransform والشفافية بس */
.lb[open] .lb__img { animation: lbIn .55s var(--ease); }
.lb__img.is-swap { animation: lbSwap .45s var(--ease); }
@keyframes lbIn   { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes lbSwap { from { opacity: 0; transform: scale(.97); } }

/* الشريط اللي تحت: قبلها · العدّاد · بعدها */
.lb__bar {
  position: absolute; bottom: clamp(1rem, 3vh, 1.8rem); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem;
  border-radius: var(--r-pill);
  /* مصمت مش زجاج: لو الصورة عريضة ووصلت لتحت، العدّاد لازم يفضل يتقري */
  background: var(--surface); border: 1px solid var(--glass-brd-hi);
  box-shadow: var(--shadow-md);
}
.lb__count {
  display: inline-flex; align-items: center; gap: .4rem;
  min-width: 4.4rem; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  direction: ltr;              /* «1 / 4» يتقري صح في العربي كمان */
}
.lb__count b { color: var(--text); }
.lb__count i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lb__btn, .lb__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; color: var(--text);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.lb__btn { background: var(--surface-2); }
.lb__btn:hover { background: var(--accent); color: var(--accent-ink); }
.lb__btn:active { transform: scale(.94); }
.lb__btn svg, .lb__close svg { width: 20px; height: 20px; }
/* في العربي «قبلها» على اليمين، فالسهمين بيتقلبوا */
:root[dir="rtl"] .lb__btn svg { transform: scaleX(-1); }
.lb__close {
  position: absolute; top: clamp(.8rem, 2.5vh, 1.4rem); inset-inline-end: clamp(.8rem, 2.5vw, 1.4rem);
  background: var(--glass); border: 1px solid var(--glass-brd-hi);
}
.lb__close:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lb :focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 3px; }

/* ───────── 9. عن ياسر = بادج المعرض ─────────
   كان صورة على جنب وجدول معلومات — شكل أي صفحة «من نحن».
   دلوقتي: كارت دخول معرض متعلّق بشريط من أول السكشن وبيتمرجح (الجافاسكربت 5d)،
   وجنبه القصة بالأرقام + الشركتين + الاقتباس + صور الشغل الحقيقية. */
.about { overflow: hidden; }           /* الشريط بيبدأ من فوق السكشن وبيتقصّ عند أوله */
.about .shead { position: relative; z-index: 2; }
.about .shead .h2 { max-width: min(100%, 40ch); }   /* الإنجليزي كان بيقع سطرين (قاعدة 26ch) */
.pass__wrap {
  display: grid; grid-template-columns: .58fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; width: 100%;
}
.pass__col { position: relative; display: flex; flex-direction: column; align-items: center; }
/* البادج على طرف الصفحة عشان الشريط مايخبطش في الهيدر اللي فوق (هو في نص الشاشة) */
@media (min-width: 981px) { .pass__col { align-items: flex-start; } }

/* المجموعة كلها (الشريط + المشبك + الكارت) بتلف حوالين أول الشريط */
.pass {
  --h: clamp(290px, 50vh, 400px);
  --strap: 30vh;                         /* بيتحسب في الجافاسكربت */
  position: relative; z-index: 1;
  width: calc(var(--h) * .68);
  transform-origin: 50% calc((var(--strap) + 18px) * -1);   /* أول الشريط بالظبط */
  touch-action: pan-y;                   /* السحب الأفقي للمرجحة، والرأسي للصفحة */
  cursor: grab;
  /* من غيرهم السحب من على الصورة بيبدأ «سحب صورة» بتاع المتصفح وبيلغي المرجحة */
  user-select: none; -webkit-user-select: none;
}
.pass img { -webkit-user-drag: none; pointer-events: none; }
.pass.is-drag { cursor: grabbing; }
.pass__strap {
  position: absolute; left: 50%; bottom: calc(100% + 18px);
  width: 30px; height: var(--strap); margin-left: -15px;
  background: var(--accent);
  box-shadow: inset 6px 0 8px rgba(255,255,255,.18), inset -6px 0 8px rgba(0,0,0,.14);
  overflow: hidden;
}
/* اسمه مطبوع على الشريط زي شرايط المعارض */
.pass__print {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap; direction: ltr;
  font-size: 10px; font-weight: 700; letter-spacing: .24em;
  color: var(--accent-ink); opacity: .72;
}
/* المشبك المعدن */
.pass__clip {
  position: absolute; left: 50%; bottom: calc(100% - 10px);
  width: 26px; height: 30px; margin-left: -13px;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(90deg, #8a8d91, #e6e8ea 45%, #a3a6aa 60%, #6f7276);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.pass__clip::after {
  content: ''; position: absolute; left: 50%; bottom: 5px;
  width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: #4a4c50; box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}

/* الكارت نفسه — أبيض زي كروت المعارض الحقيقية في الثيمين */
.pass__card {
  position: relative; overflow: hidden;
  height: var(--h);
  display: flex; flex-direction: column;
  padding: 0 14px 14px;
  border-radius: 18px;
  background: #F7F6F0; color: #0A0A0B;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  text-align: start;
}
:root[data-theme="light"] .pass__card { box-shadow: 0 28px 54px rgba(26,26,18,.26), 0 0 0 1px rgba(26,26,18,.12); }
/* فتحة الشريط في الكارت */
.pass__slot {
  position: absolute; z-index: 2; top: 9px; left: 50%;
  width: 46px; height: 8px; margin-left: -23px; border-radius: 99px;
  background: var(--bg); box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.pass__top {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin: 0 -14px; padding: 26px 14px 9px;
  background: #C4F82A;
  font-size: 10px; letter-spacing: .14em; direction: ltr;
}
.pass__top b { font-weight: 800; }
.pass__top span { font-weight: 600; opacity: .7; }
.pass__pic {
  flex: 1; min-height: 0; margin-top: 12px;
  border-radius: 12px; overflow: hidden; background: #111;
}
.pass__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pass__who { margin-top: 10px; display: flex; flex-direction: column; line-height: 1.3; }
.pass__who b { font-size: calc(var(--h) * .056); font-weight: 800; }
.pass__who span { font-size: 11px; font-weight: 600; color: #5a5a52; }
.pass__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pass__code {
  flex: 1; height: 24px;
  background: repeating-linear-gradient(90deg,
    #0A0A0B 0 2px, transparent 2px 4px, #0A0A0B 4px 5px, transparent 5px 8px,
    #0A0A0B 8px 11px, transparent 11px 12px, #0A0A0B 12px 13px, transparent 13px 16px);
  opacity: .85;
}
.pass__tag {
  padding: 4px 11px; border-radius: 99px;
  background: #0A0A0B; color: #C4F82A;
  font-size: 11px; font-weight: 700;
}
/* لمعة البلاستيك — بتتحرّك مع الميل */
.pass__glare {
  position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(var(--gx, -40%));
  opacity: var(--go, 0);
  mix-blend-mode: soft-light;
}
/* لينك الكورس تحت البادج (مابيتمرجحش — بره .pass) */
.pass__col .crs { position: relative; z-index: 1; width: min(100%, 360px); padding-block: .7rem; }
.pass__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── القصة ── */
.pass__story { min-width: 0; }
.pass__stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.pass__stats li {
  min-width: 0;
  padding-inline: clamp(.6rem, 1.2vw, 1rem);
  border-inline-start: 1px solid var(--glass-brd);
}
.pass__stats li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.pass__stats b {
  display: block;
  font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 700; line-height: 1;
  color: var(--accent-txt); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
:root[dir="rtl"] .pass__stats b[dir="ltr"] { text-align: right; }
.pass__stats li > span { display: block; margin-top: .45rem; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; }

.pass__cos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: clamp(.9rem, 2.4vh, 1.4rem); padding-top: clamp(.9rem, 2.4vh, 1.4rem);
  border-top: 1px solid var(--glass-brd);
}
.bio__brand { display: grid; grid-template-columns: auto 1fr; gap: .1rem .55rem; align-items: center; }
.bio__brand img { grid-row: 1 / span 2; height: 26px; width: auto; }
:root[data-theme="light"] .bio__brand img { filter: brightness(.52) saturate(1.15); }
.bio__brand b { font-size: var(--fs-body); font-weight: 700; color: var(--text); line-height: 1.2; }
.bio__brand i { font-style: normal; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

/* الاقتباس — خط كبير من غير صندوق */
.quote {
  position: relative; margin: clamp(.9rem, 2.4vh, 1.4rem) 0 0;
  padding-top: clamp(.8rem, 2vh, 1.1rem);
  border-top: 2px solid var(--accent);
}
.quote p {
  font-size: clamp(1.02rem, 1.7vw, 1.3rem); font-weight: 600; line-height: 1.65;
  color: var(--text); margin: 0;
}
.quote cite {
  display: block; margin-top: .4rem;
  font-style: normal; font-size: var(--fs-xs); font-weight: 600;
  color: var(--accent-txt); letter-spacing: .03em;
}
.quote cite::before { content: '— '; }

/* صور الشغل + جملة العملاء */
.pass__field {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(.8rem, 2vw, 1.4rem);
  align-items: center; margin-top: clamp(.9rem, 2.4vh, 1.4rem);
}
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.35rem, .8vw, .55rem); }
.shot {
  margin: 0; overflow: hidden; aspect-ratio: 1 / .82;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-brd);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.shot:hover { transform: translateY(-4px); border-color: var(--tint-34); }
.shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .6s var(--ease); }
.shot:hover img { transform: scale(1.06); }
.pass__note { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.pass__note b { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.6; }
.pass__note span { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

/* لينك الكورس */
.crs {
  display: flex; align-items: center; gap: .9rem;
  margin-top: clamp(1rem, 2.4vh, 1.5rem); padding: .85rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.crs:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.crs__tag {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .05em;
  color: var(--accent-ink); background: var(--accent);
  padding: .2rem .6rem; border-radius: var(--r-pill);
}
.crs__txt { display: flex; flex-direction: column; line-height: 1.4; }
.crs__txt b { font-size: var(--fs-sm); font-weight: 700; }
.crs__txt small { font-size: var(--fs-xs); color: var(--text-3); }
.crs__go {
  margin-inline-start: auto; flex: none;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-txt);
  transition: transform .3s var(--ease);
}
.crs__go svg { width: 15px; height: 15px; }
:root[dir="rtl"] .crs__go svg { transform: scaleX(-1); }
.crs:hover .crs__go { transform: translateX(-4px); }
:root[dir="ltr"] .crs:hover .crs__go { transform: translateX(4px); }

/* ───────── 9.5 الفيديوهات = الحلقة الجديدة ─────────
   كان فيديو كبير وقايمة جنبه زي صفحة قناة. دلوقتي: 3 حاجات بنفس الطول —
   الحلقة الجديدة · «هتطلع منها بإيه» من وصفها الحقيقي · نسختها القصيرة على موبايل —
   وتحتهم شريط بالحلقات التانية. الطويل للي عنده وقت، والقصير للمستعجل. */
.ep {
  display: grid;
  /* عرض الموبايل = طول الفيديو × 9/16، وطول الفيديو = عرضه × 9/16
     فالموبايل ≈ 0.316 من عرض الفيديو — عشان التلاتة يبقوا بنفس الطول */
  grid-template-columns: 1.45fr 1fr .46fr;
  gap: clamp(1rem, 2.2vw, 1.8rem);
  align-items: center;
}

/* الشغل المشترك بين الحلقة الكبيرة والموبايل والصغيرين */
.ep__main, .ep__phone, .ep__mini { cursor: pointer; position: relative; display: block; }
.ep__main:focus-visible, .ep__phone:focus-visible, .ep__mini:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 4px; }
.vid__thumb {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--surface-2);
}
.vid__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.ep iframe, .eps iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
.vid__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.88);
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10,10,11,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  z-index: 3;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.vid__play svg { width: 22px; height: 22px; margin-inline-start: 3px; }
:is(.ep__main, .ep__phone, .ep__mini):hover .vid__play {
  transform: translate(-50%, -50%) scale(1);
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
:is(.ep__main, .ep__phone, .ep__mini):hover .vid__thumb img { transform: scale(1.04); }
.vid__time {
  position: absolute; z-index: 3; bottom: 8px; inset-inline-end: 8px;
  padding: .1rem .4rem; border-radius: 6px;
  font-size: .68rem; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.78);
  font-variant-numeric: tabular-nums;
}
.is-playing .vid__play, .is-playing .vid__time, .is-playing .ep__new { display: none; }

/* ── الحلقة الكبيرة ── */
.ep__main .vid__thumb {
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-brd-hi);
  box-shadow: var(--shadow-lg);
}
.ep__main .vid__play { width: 70px; height: 70px; }
.ep__main .vid__play svg { width: 28px; height: 28px; }
.ep__new {
  position: absolute; z-index: 3; top: 12px; inset-inline-start: 12px;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 700;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
/* نقطة «على الهوا» بتنبض */
.ep__new i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink);
  animation: epPulse 1.6s ease-in-out infinite;
}
@keyframes epPulse { 50% { opacity: .25; } }

/* ── هتطلع منها بإيه ── */
.ep__notes { display: flex; flex-direction: column; min-width: 0; }
.ep__meta { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ep__title {
  margin: .35rem 0 0;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 700; line-height: 1.45; color: var(--text);
  text-wrap: balance;
}
/* عنوان السكشن في سطر واحد في الإنجليزي كمان (قاعدة 26ch كانت بتقسمه) */
.vids .shead .h2 { max-width: min(100%, 44ch); }
.ep__lbl {
  margin-top: clamp(.7rem, 2vh, 1.1rem);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--accent-txt);
}
.ep__list { margin-top: .45rem; display: grid; gap: .45rem; }
.ep__list li {
  position: relative; padding-inline-start: 1.5rem;
  font-size: var(--fs-sm); color: var(--text); line-height: 1.5;
}
.ep__list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .3em;
  width: 1em; height: 1em; border-radius: 50%;
  background: var(--accent-soft) center / 62% no-repeat;
  /* علامة صح بالليموني (SVG جوّه الخلفية) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4F82A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .ep__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F5D09' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* سهم بيشاور على الموبايل */
.ep__hint {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  margin-top: clamp(.8rem, 2.2vh, 1.2rem);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
}
.ep__hint svg { width: 16px; height: 16px; color: var(--accent-txt); animation: epNudge 1.8s var(--ease) infinite; }
:root[dir="rtl"] .ep__hint svg { transform: scaleX(-1); animation-name: epNudgeR; }
@keyframes epNudge  { 50% { transform: translateX(5px); } }
@keyframes epNudgeR { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateX(5px); } }

/* ── الموبايل ── */
.ep__phone {
  padding: 7px; border-radius: 30px;
  background: linear-gradient(160deg, #2a2b2e, #0d0d0f);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .45s var(--ease);
}
.ep__phone:hover { transform: translateY(-6px) rotate(-1.5deg); }
:root[dir="ltr"] .ep__phone:hover { transform: translateY(-6px) rotate(1.5deg); }
.ep__phone .vid__thumb { aspect-ratio: 9 / 16; border-radius: 23px; }
/* الكاميرا اللي فوق */
.ep__phone::before {
  content: ''; position: absolute; z-index: 5; top: 15px; left: 50%;
  width: 34%; height: 13px; margin-left: -17%; border-radius: 99px;
  background: #0a0a0b;
}
.ep__phone .vid__play { width: 46px; height: 46px; }
.ep__phone .vid__play svg { width: 19px; height: 19px; }
.ep__phone.is-playing::before { display: none; }

/* ── الحلقات التانية ── */
.eps {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
  margin-top: clamp(1.1rem, 3vh, 1.9rem);
  padding-top: clamp(.9rem, 2.2vh, 1.2rem);
  border-top: 1px solid var(--glass-brd);
}
.eps__t { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); white-space: nowrap; }
.eps__row { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: clamp(.7rem, 1.6vw, 1.2rem); align-items: center; }
.ep__mini { display: grid; grid-template-columns: 96px 1fr; gap: .7rem; align-items: center; min-width: 0; }
.ep__mini .vid__thumb { border-radius: var(--r-sm, 10px); border: 1px solid var(--glass-brd); }
.ep__mini .vid__play { width: 34px; height: 34px; }
.ep__mini .vid__play svg { width: 14px; height: 14px; }
.ep__mini .vid__time { bottom: 4px; inset-inline-end: 4px; font-size: .6rem; }
.ep__mini b {
  font-size: .8rem; font-weight: 600; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .3s var(--ease);
}
.ep__mini:hover b { color: var(--accent-txt); }
.eps__chan {
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem .9rem; border-radius: var(--r-md);
  border: 1px solid var(--glass-brd); background: var(--glass);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.eps__chan:hover { border-color: var(--accent); background: var(--accent-soft); }
.eps__n { display: flex; flex-direction: column; line-height: 1.2; }
.eps__n b { font-size: 1.1rem; font-weight: 700; color: var(--accent-txt); font-variant-numeric: tabular-nums; }
:root[dir="rtl"] .eps__n b { text-align: right; }
.eps__n span { font-size: .64rem; color: var(--text-3); }
.eps__go { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-txt); white-space: nowrap; }
.eps__go svg { width: 15px; height: 15px; }
:root[dir="rtl"] .eps__go svg { transform: scaleX(-1); }

/* ───────── 10. الدعوة + الأسئلة = مكالمة واردة ─────────
   (اتجرّب قبلها «بوست مموّل» — محمد: «مش حلو خالص»: الأسئلة كانت محشورة في صندوق
   بيسكرول ونصها مقصوص، وشكله نسخة من فيسبوك.)
   دلوقتي: شاشة مكالمة واردة من ياسر — صورته مالية الشاشة، «رد» = احجز،
   و«عندي سؤال الأول» بيفتح الأسئلة اللي جنبها. والأسئلة كلها باينة بخطوط رفيعة. */
.final { overflow: hidden; }
.final__glow {
  position: absolute; inset-inline: 0; top: 50%; height: 60vh;
  transform: translateY(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--tint-20), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.final__wrap { position: relative; z-index: 2; width: 100%; }
.final__t {
  font-size: clamp(1.5rem, 3.1vw, 2.65rem);
  font-weight: 700; line-height: 1.26; letter-spacing: -.015em;
  max-width: min(100%, 52ch); margin-inline: auto; overflow: hidden;   /* سطر واحد في اللغتين على الديسكتوب */
  padding-block: 4px;
  text-align: center;
  text-wrap: balance;
}

.ring {
  --ch: clamp(380px, 62vh, 500px);          /* طول شاشة المكالمة */
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.6rem, 4.5vw, 4rem);
  align-items: center;
  max-width: 1000px; margin-inline: auto;
}

/* ── شاشة المكالمة ── */
.call {
  position: relative; overflow: hidden; isolation: isolate;
  width: calc(var(--ch) * .62); height: var(--ch);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1rem, 2.4vh, 1.4rem) 1.1rem clamp(1rem, 2.6vh, 1.5rem);
  border-radius: 34px;
  background: #0A0A0B; color: #fff;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.08), 0 0 0 7px #151517, 0 0 0 8px rgba(255,255,255,.07);
}
:root[data-theme="light"] .call { box-shadow: 0 30px 70px rgba(26,26,18,.28), 0 0 0 7px #151517, 0 0 0 8px rgba(26,26,18,.18); }
/* الصورة مالية الشاشة، وتعتيم فوق وتحت عشان الكلام يتقري */
.call__bg {
  /* الصورة نازلة شوية: الاسم فوق على أسود، مش راكب على راس ياسر */
  position: absolute; inset: 21% 0 0 0; z-index: -1;
  width: 100%; height: 79%; object-fit: cover; object-position: 50% 18%;
}
.call::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, #0A0A0B 0%, #0A0A0B 22%, rgba(10,10,11,.7) 29%, rgba(10,10,11,.2) 37%, rgba(10,10,11,0) 46%, rgba(10,10,11,.6) 62%, rgba(10,10,11,.97) 80%);
}
.call__top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.call__type {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.78);
}
.call__type i { width: 7px; height: 7px; border-radius: 50%; background: #C4F82A; animation: callBlink 1.2s ease-in-out infinite; }
@keyframes callBlink { 50% { opacity: .2; } }
.call__name { margin-top: .35rem; font-size: clamp(1.6rem, 3.6vh, 2.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.call__sub { margin-top: .2rem; font-size: .8rem; color: rgba(255,255,255,.72); }

.call__bottom { display: flex; flex-direction: column; gap: clamp(.8rem, 2.2vh, 1.2rem); }
.call__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.call__marks li {
  padding: .26rem .65rem; border-radius: 99px;
  font-size: .7rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.call__acts { display: flex; justify-content: space-between; align-items: flex-start; padding-inline: .4rem; }
.call__btn {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  width: 46%; text-align: center;
  font-size: .76rem; font-weight: 600; color: #fff; line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.call__ico {
  position: relative;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800;
  transition: transform .3s var(--ease);
}
.call__btn:hover .call__ico { transform: scale(1.07); }
.call__btn:focus-visible { outline: none; }
.call__btn:focus-visible .call__ico { outline: 2px solid #C4F82A; outline-offset: 4px; }
/* «عندي سؤال» بعلامة فقاعة كلام (علامة ؟ العربي كانت بتبان مقلوبة في الإنجليزي) */
.call__btn--q .call__ico svg { width: 25px; height: 25px; }
.call__btn--q .call__ico {
  background: rgba(255,255,255,.18); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.call__btn--ok .call__ico { background: #C4F82A; color: #0A0A0B; box-shadow: 0 12px 30px rgba(196,248,42,.4); }
.call__btn--ok .call__ico svg { position: relative; z-index: 1; width: 26px; height: 26px; animation: callRing 1.6s ease-in-out infinite; }
/* التليفون بيرنّ: هزّة صغيرة كل لفّة */
@keyframes callRing {
  0%, 45%, 100% { transform: rotate(0); }
  5%, 15%, 25% { transform: rotate(-14deg); }
  10%, 20%, 30% { transform: rotate(14deg); }
}
/* موجات طالعة من زرار «رد» */
.call__wave {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #C4F82A; opacity: 0;
  animation: callWave 2.4s ease-out infinite;
}
.call__wave + .call__wave { animation-delay: 1.2s; }
@keyframes callWave { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── الأسئلة ── */
.ask { min-width: 0; }
.ask__lbl {
  display: block; margin-bottom: .4rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--text-3);
}
.qa { border-bottom: 1px solid var(--glass-brd); }
.qa summary {
  display: flex; align-items: center; gap: .9rem;
  padding: clamp(.75rem, 2vh, 1rem) .2rem;
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 2px; border-radius: 6px; }
.qa__n {
  flex: none; font-size: .72rem; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums; transition: color .3s var(--ease);
}
.qa__q {
  font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 600; color: var(--text); line-height: 1.45;
  transition: color .3s var(--ease);
}
.qa summary:hover .qa__q, .qa[open] .qa__q { color: var(--accent-txt); }
.qa[open] .qa__n { color: var(--accent-txt); }
.qa__ico {
  margin-inline-start: auto; flex: none;
  width: 28px; height: 28px; position: relative;
  border-radius: 50%; border: 1px solid var(--glass-brd-hi);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
}
.qa__ico::before, .qa__ico::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px;
  background: var(--text-2);
}
.qa__ico::after { transform: rotate(90deg); transition: transform .35s var(--ease); }
.qa[open] .qa__ico { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.qa[open] .qa__ico::before, .qa[open] .qa__ico::after { background: var(--accent-ink); }
.qa[open] .qa__ico::after { transform: rotate(0deg); }
.qa__a { padding: 0 .2rem clamp(.8rem, 2vh, 1.05rem); padding-inline-start: calc(.2rem + 1.6rem + .9rem); }
.qa__a p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.75; max-width: 56ch; }
.qa[open] .qa__a { animation: qaIn .4s var(--ease) both; }
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px); } }
/* لما «عندي سؤال الأول» يتداس: لمعة على الأسئلة */
.ask.is-flash .qa { animation: askFlash 1s var(--ease); }
@keyframes askFlash { 30% { background: var(--accent-soft); } }
.ask__more {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: clamp(.8rem, 2.2vh, 1.2rem);
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent-txt);
}
.ask__more svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
:root[dir="rtl"] .ask__more svg { transform: scaleX(-1); }
.ask__more:hover svg { transform: translateX(4px); }
:root[dir="rtl"] .ask__more:hover svg { transform: scaleX(-1) translateX(4px); }

/* ───────── 12. الفوتر = سما الرياض ─────────
   كان 3 أعمدة بتعيد روابط الهيدر + زرار «لفوق» تاني، وبعدها اسم ضخم (اترفض).
   دلوقتي: ساعة الرياض حيّة، وتحتها سما الرياض بأبراجها، وسطر واحد تحت. */
.footer {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--glass-brd);
  background:
    radial-gradient(90% 60% at 50% 100%, var(--tint-08), transparent 60%),
    var(--bg-soft);
  padding-block: clamp(1.4rem, 3.4vh, 2.2rem) 1.1rem;
}
.footer::before {
  content: ''; position: absolute; inset-inline: 0; top: -1px; height: 1px;
  background: linear-gradient(to left, transparent, var(--tint-55), transparent);
}
.ft__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.2rem; }
.ft__live {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd); background: var(--glass);
  font-size: var(--fs-sm); color: var(--text-2);
}
.ft__live b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ft__live i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 0 var(--tint-55);
  animation: ftPing 2.2s ease-out infinite;
}
.ft__live.is-off i { background: var(--text-3); animation: none; }
@keyframes ftPing { 0% { box-shadow: 0 0 0 0 var(--tint-55); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.ft__sep { color: var(--text-3); }
.ft__course {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
  transition: color .25s var(--ease);
}
.ft__course:hover { color: var(--accent-txt); }
.ft__tag {
  padding: .15rem .55rem; border-radius: var(--r-pill);
  font-size: .64rem; font-weight: 700; background: var(--accent); color: var(--accent-ink);
}
.ft__course svg { width: 15px; height: 15px; }
:root[dir="rtl"] .ft__course svg { transform: scaleX(-1); }

/* سما الرياض (بدل الاسم الضخم — محمد: «شكله وحش أوي»).
   الأبراج خطوط رفيعة بتترسم مع النزول، والسما بتتبع ساعة الرياض الحقيقية. */
.sky {
  --draw: 0;
  position: relative; overflow: hidden;
  margin-top: clamp(.8rem, 2.4vh, 1.4rem);
  height: clamp(200px, 36vh, 300px);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transition: background 1.2s var(--ease);
}
/* لون السما حسب الوقت — خفيف عشان يفضل في روح الصفحة الغامقة */
.sky__glow { position: absolute; inset: 0; opacity: .9; transition: background 1.2s var(--ease); }
.sky.is-day   .sky__glow { background: radial-gradient(70% 90% at var(--ox, 50%) 100%, rgba(196,248,42,.16), transparent 70%); }
.sky.is-dawn  .sky__glow { background: radial-gradient(80% 90% at var(--ox, 20%) 100%, rgba(255,170,110,.22), rgba(150,110,255,.08) 55%, transparent 80%); }
.sky.is-dusk  .sky__glow { background: radial-gradient(80% 90% at var(--ox, 80%) 100%, rgba(255,140,80,.26), rgba(255,90,120,.1) 55%, transparent 80%); }
.sky.is-night .sky__glow { background: linear-gradient(to bottom, rgba(40,60,140,.18), transparent 80%); }
:root[data-theme="light"] .sky.is-day .sky__glow { background: radial-gradient(70% 90% at var(--ox, 50%) 100%, rgba(120,170,20,.16), transparent 70%); }

/* النجوم بالليل بس */
.sky__stars {
  position: absolute; inset: 0 0 35% 0; opacity: 0; transition: opacity 1.2s var(--ease);
  background-image:
    radial-gradient(1.4px 1.4px at 8% 30%, #fff, transparent), radial-gradient(1px 1px at 17% 62%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 18%, #fff, transparent), radial-gradient(1px 1px at 41% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 22%, #fff, transparent), radial-gradient(1px 1px at 63% 58%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 74% 14%, #fff, transparent), radial-gradient(1px 1px at 86% 40%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 94% 20%, #fff, transparent), radial-gradient(1px 1px at 35% 80%, #fff, transparent);
  animation: skyTwinkle 4s ease-in-out infinite;
}
.sky.is-night .sky__stars { opacity: .75; }
:root[data-theme="light"] .sky__stars { filter: invert(1); }
@keyframes skyTwinkle { 50% { filter: brightness(.55); } }

/* الشمس أو القمر — مكانها على قوس حسب الساعة (--ox/--oy من الجافاسكربت) */
.sky__orb {
  position: absolute; left: var(--ox, 50%); top: var(--oy, 30%);
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  transition: left 1.2s var(--ease), top 1.2s var(--ease), background 1.2s var(--ease), box-shadow 1.2s var(--ease);
}
.sky.is-day   .sky__orb { background: #C4F82A; box-shadow: 0 0 40px 10px rgba(196,248,42,.35); }
.sky.is-dawn  .sky__orb,
.sky.is-dusk  .sky__orb { background: #FFB36B; box-shadow: 0 0 44px 12px rgba(255,150,80,.35); }
/* القمر: هلال بظلّ داخلي */
.sky.is-night .sky__orb { background: transparent; box-shadow: inset -9px 5px 0 0 #EDEBD9, 0 0 30px 4px rgba(237,235,217,.12); }
:root[data-theme="light"] .sky.is-night .sky__orb { box-shadow: inset -9px 5px 0 0 #5a5a52; }

/* الأبراج */
.sky__city { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 72%; }   /* فوقها مساحة للشمس والقمر */
.sky__l {
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw));
  /* مفيش vector-effect هنا: بيبوّظ الرسم بالـdash (درس طريقة العمل v46) */
}
.sky__l--far { stroke: var(--tint-55); stroke-width: 1.2; }
.sky__l--ground { stroke: var(--glass-brd-hi); }
:root[data-theme="light"] .sky__l { stroke: #3F5D09; }
:root[data-theme="light"] .sky__l--far { stroke: rgba(63,93,9,.5); }
/* الشبابيك بتنوّر بالليل بس، وبترمش ببطء */
.sky__wins rect { fill: var(--accent); opacity: 0; transition: opacity 1s var(--ease); }
.sky.is-night .sky__wins rect, .sky.is-dusk .sky__wins rect { opacity: calc(var(--draw) * .9); animation: skyWin 5s ease-in-out infinite; }
.sky__wins rect:nth-child(3n) { animation-delay: 1.4s; }
.sky__wins rect:nth-child(4n) { animation-delay: 2.6s; }
@keyframes skyWin { 50% { opacity: .25; } }

.ft__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.2rem;
  margin-top: 0; padding-top: .9rem;   /* خط الأرض بتاع السما هو الفاصل */
  font-size: var(--fs-xs); color: var(--text-3);
}
.ft__cos { display: inline-flex; align-items: center; gap: .45rem; }
.ft__cos img { height: 15px; width: auto; opacity: .8; }
.ft__cos img + span + img { margin-inline-start: .6rem; }
:root[data-theme="light"] .ft__cos img { filter: brightness(.52) saturate(1.15); }

/* ───────── 13. الواتساب والرجوع لفوق ───────── */
.wa {
  position: fixed; z-index: 80;
  inset-inline-start: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .55rem;
  min-height: 48px; padding: .6rem 1rem .6rem .7rem;
  border-radius: var(--r-pill);
  background: #25D366; color: #08240F;
  font-weight: 700; font-size: var(--fs-sm);
  box-shadow: 0 12px 34px rgba(37,211,102,.32);
  /* visibility كمان — عشان ميتاخدش focus بالكيبورد وهو مخفي */
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.95); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}
.wa.is-on {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s 0s;
}
.wa:hover { transform: translateY(-3px); }
/* لحد ما يتحط رقم واتساب حقيقي في data-wa، الزر العايم مايظهرش */
.wa.is-off, .wa.is-off.is-on { display: none; }
.wa__ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.wa__ico svg { width: 24px; height: 24px; }
.wa__pulse {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  border: 2px solid rgba(37,211,102,.55);
  animation: pulse 2.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes pulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

/* ───── الدوك العايم ─────
   (كان «حلقة ستوري» بصورة ياسر — محمد: «مش بروفيشنال، والصور اتكررت».)
   شريط زجاجي في نص تحت: الحسابات + «لفوق». الأيقونة اللي الماوس عليها بتكبر
   واللي جنبها بتكبر أقل — زي دوك الماك. */
.dock {
  position: fixed; z-index: 81;
  left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .2rem;
  padding: .35rem .45rem;
  border-radius: 20px;
  background: rgba(20,20,22,.72);
  border: 1px solid var(--glass-brd-hi);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; visibility: hidden; transform: translate(-50%, 22px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
:root[data-theme="light"] .dock { background: rgba(255,255,255,.78); box-shadow: 0 16px 40px rgba(26,26,18,.18); }
.dock.is-on {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s 0s;
}
.dock__it {
  position: relative;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 13px; color: var(--text-2);
  transform-origin: 50% 100%;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), color .2s var(--ease), background .2s var(--ease);
}
.dock__it svg { width: 19px; height: 19px; }
.dock__it:hover, .dock__it:focus-visible { color: var(--accent-ink); background: var(--accent); outline: none; transform: translateY(-6px) scale(1.22); }
.dock__it:hover + .dock__it { transform: translateY(-2px) scale(1.08); }
/* لوحده عشان لو المتصفح مابيعرفش :has مايضيّعش القاعدة اللي فوقه */
.dock__it:has(+ .dock__it:hover) { transform: translateY(-2px) scale(1.08); }
/* اسم الحساب وعدد المتابعين فوق الأيقونة */
.dock__tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap; pointer-events: none;
  padding: .22rem .55rem; border-radius: 8px;
  font-size: .68rem; font-weight: 700;
  background: var(--surface); color: var(--text); border: 1px solid var(--glass-brd-hi);
  opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.dock__tip b { color: var(--accent-txt); margin-inline-start: .25rem; }
.dock__it:hover .dock__tip, .dock__it:focus-visible .dock__tip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* نقطة «حلقة جديدة» على يوتيوب */
.dock__dot {
  position: absolute; top: 6px; inset-inline-end: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF3B5C; box-shadow: 0 0 0 2px rgba(20,20,22,.9);
  transform: scale(0); transition: transform .3s var(--ease);
}
.dock.has-new .dock__dot { transform: scale(1); }
.dock__sep { width: 1px; height: 24px; margin-inline: .25rem; background: var(--glass-brd-hi); }

/* «لفوق» + حلقة التقدّم */
/* .dock__it قبلها عشان تغلب «.dock__it svg» (19px) — من غيرها الحلقة كانت بتطلع صغيرة ومكسورة */
.dock__it .dock__ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); }
.dock__ring circle { fill: none; stroke-width: 2.4; }
.dock__track { stroke: var(--glass-brd); }
.dock__fill { stroke: var(--accent); stroke-dasharray: 125.6; stroke-dashoffset: 125.6; stroke-linecap: round; }
.dock__top:hover .dock__fill { stroke: var(--accent-ink); }
.dock__it .dock__arrow { position: relative; width: 17px; height: 17px; }

/* فقاعة الحلقة الجديدة فوق الدوك */
.dock__toast {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  width: max-content; max-width: min(340px, calc(100vw - 32px));
  display: flex; align-items: center; gap: .3rem;
  padding: .45rem; padding-inline-end: .3rem;
  border-radius: 16px;
  background: var(--surface); border: 1px solid var(--tint-34);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  transform: translateX(-50%);
  animation: toastIn .55s cubic-bezier(.34,1.56,.64,1) both;
}
.dock__toast[hidden] { display: none; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.85); } }
.story__go { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.story__go img { flex: none; width: 74px; height: 42px; object-fit: cover; border-radius: 8px; }
.story__go span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.story__go b { font-size: .74rem; font-weight: 700; color: var(--accent-txt); }
.story__go small {
  font-size: .76rem; font-weight: 600; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story__close {
  flex: none; align-self: flex-start;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; color: var(--text-3);
}
.story__close:hover { color: var(--text); background: var(--glass); }
.story__close svg { width: 13px; height: 13px; }

/* الفوتر: مساحة تحت عشان الدوك مايغطّيش السطر الأخير */
.footer { padding-bottom: calc(1.1rem + 64px); }

/* في العربي «البداية» هي اليمين — فالحافة الآمنة لازم تتقلب */
:root[dir="rtl"] .wa    { inset-inline-start: max(18px, env(safe-area-inset-right)); }

/* على الموبايل: blur مع position:fixed بيعمل تهنيج على iOS */
@media (hover: none) {
  .dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  .wa__pulse { display: none; }
}

/* شاشات لابتوب قصيرة (13" و14") — الهيرو يفضل شاشة واحدة */
@media (min-width: 981px) and (max-height: 820px) {
  .hero { padding-block: calc(var(--header-h) + 1.1rem) 4.7rem; }
  .hero__title { font-size: clamp(1.8rem, 3.4vw, 2.65rem); margin-block: .25rem .7rem; }
  .hero__sub { font-size: var(--fs-body); }
  .hero__cta { margin-top: 1.15rem; }
  .hero__note { margin-top: .85rem; }
  .eyebrow { margin-bottom: .7rem; }

  .shead { margin-bottom: 1.2rem; }
  /* شاشة قصيرة: العنوان بيرجع أصغر عشان السكشن يفضل شاشة واحدة */
  .h2 { font-size: clamp(1.45rem, 2.7vw, 2.12rem); }
  /* شاشة المكالمة بتقصر شوية على الشاشات القصيرة */
  .ring { --ch: clamp(350px, 60vh, 460px); }
  /* النتائج: اللقطة بتقصر شوية عشان السكشن يفضل شاشة واحدة */
  .rx__doc { height: clamp(240px, 47vh, 360px); }
  .rx__read { gap: .55rem; }
  /* شاشة قصيرة: كروت الخدمات بتتلمّ شوية عشان السكشن يفضل شاشة واحدة */
  .sc__card { padding: 1.05rem 1.2rem 1rem; }
  .sc__who { font-size: 1rem; }
  .sc__h { margin-top: .6rem; padding-top: .65rem; font-size: 1.08rem; }
  .sc__chip { margin-top: .35rem; }
  .sc__list { gap: .28rem; margin-top: .6rem; }
  .sc__list li { font-size: .82rem; }
  .sc__foot { padding-top: .8rem; }
  /* شاشة قصيرة: المنحنى بيقصر شوية عشان السكشن يفضل شاشة واحدة */
  .cv { height: clamp(320px, 57vh, 440px); }
  .cv__d { font-size: .82rem; line-height: 1.5; }
  /* والبورتريه بيتحدّد عرضه عشان سكشن «عن ياسر» يفضل شاشة واحدة */
  .pass { --h: clamp(270px, 49vh, 360px); }
}

/* ───────── 14. المقاسات ───────── */
@media (max-width: 1180px) {
  .brand__txt { display: none; }
  .nav > a { padding-inline: .62rem; font-size: .82rem; }
}

@media (max-width: 980px) {
  .burger { display: grid; }
  .nav {
    position: absolute; top: calc(100% + 10px); inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: .55rem;
    border-radius: var(--r-lg);
    background: var(--glass-strong);
    border: 1px solid var(--glass-brd-hi);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s 0s; }
  /* 🔴 خلفية مصمتة: القايمة جوّه الهيدر اللي عليه blur، والـblur مابيشتغلش جوّه blur —
     فكانت شفافة وصورة الهيرو باينة من ورا الروابط */
  .nav { background: var(--surface); }
  .nav > a { padding: .7rem .9rem; min-height: 44px; display: flex; align-items: center; }
  /* أهداف اللمس على الموبايل: 44 بكسل زي ما آبل بتوصي */
  .icon-btn { width: 44px; height: 44px; }
  .pref { height: 40px; }
  .nav__glider { display: none; }
  .header { top: max(8px, env(safe-area-inset-top)); }
  .header__inner { width: 100%; overflow: visible; }
  .header__progress { display: none; }
  .brand__txt { display: flex; }
  .header__tools .btn { display: none; }

  .section { min-height: 0; padding-block: calc(var(--header-h) + 2.2rem) 2.6rem; }
  .hero { min-height: 100vh; min-height: 100svh; padding-bottom: 6rem; }

  /* على الموبايل الصورة بتبقى بلوك فوق الكلام مش عمود جنبه */
  .hero { flex-direction: column; justify-content: center; }
  .hero__layout { grid-template-columns: 1fr; gap: 0; }
  .hero__layout::before { display: none; }
  .hero__title { max-width: 100%; }
  .hero__sub { max-width: 100%; }
  .hero__media {
    position: relative; inset: auto; z-index: 2;
    width: 100%; flex: none;
    height: min(330px, 38vh);
    height: min(330px, 38svh);
    margin-bottom: .6rem;
  }
  /* على الموبايل البرواز بيقف في نص الشاشة فوق الكلام */
  :root { --brands-h: 44px; }
  .hero__frame {
    position: relative; inset: auto; bottom: auto;
    /* العرض هنا محسوب على شريط الشركتين مش على الصورة —
       العلامتين والاسمين لازم يدخلوا في سطر واحد */
    height: 100%; width: min(246px, 66vw); margin-inline: auto;
    --pf-r: 17px;               /* 7% من عرض الكارت — نفس نسبة ركن الـSVG */
  }
  .hero__cut { height: calc(100% - var(--brands-h) - 12px); }
  .brands { gap: .4rem; padding-inline: .45rem; }
  .brands__one { gap: .25rem; }
  .brands__one b { font-size: .63rem; }
  .brands__one img { height: 19px; }
  .hero__word { font-size: clamp(2.3rem, 11.5vw, 3.4rem); top: 22%; }
  .hero__glow { inset-inline: 12%; top: 10%; bottom: 4%; }
  /* على الموبايل مفيش مساحة فاضية للكارت — شريط الأرقام بيغطّي نفس الدور */
  .hero > .score { display: none; }
  .hstats { grid-column: 1; grid-template-columns: 1fr 1fr; margin-top: 1.1rem; }
  .hstat { border-inline-start: 1px solid var(--glass-brd); border-top: 1px solid var(--glass-brd); }
  .hstat:nth-child(-n+2) { border-top: 0; }
  .hstat:nth-child(odd) { border-inline-start: 0; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .score__v { font-size: 1.02rem; }

  .prob__wrap { grid-template-columns: 1fr; }
  /* القمع بيملا العرض (الجافاسكربت بيقصّ الفراغ اللي على جنابه)، والمشاكل قايمة تحته
     بأرقام زي أرقام الخروم */
  .fn__leak { position: static; transform: none; width: auto; margin-top: .55rem; }
  .fn__leaks { margin-top: .5rem; }
  .fn__leads { display: none; }
  .fn__nums text { display: block; }

  /* الخدمات على الموبايل: الكروت تحت بعض */
  .sc { grid-template-columns: 1fr; }
  .sc__who { min-height: 0; }

  /* الفيديوهات على الموبايل: الحلقة فوق، وتحتها الموبايل جنب «هتطلع منها بإيه»،
     والحلقات التانية تحت بعض */
  .ep { grid-template-columns: 1fr 34%; }
  .ep__main { grid-column: 1 / -1; }
  .ep__hint { display: none; }
  .eps { grid-template-columns: 1fr; gap: .7rem; }
  .eps__row { grid-template-columns: 1fr; }
  .eps__chan { justify-content: space-between; }

  /* المنحنى على الموبايل: الرسمة فوق بعرض الشاشة، والمحطات تحتها قايمة */
  .cv { height: auto; padding-top: 200px; --base: 80%; }
  .cv__svg { height: 180px; bottom: auto; }
  .cv__note, .cv__win small { display: none; }
  .cv__steps { display: grid; gap: 1.1rem; }
  .cv__st {
    position: relative; top: auto; inset-inline-start: auto; width: auto; margin: 0;
    display: grid; grid-template-columns: 28px 1fr; column-gap: .8rem;
  }
  .cv__n { grid-row: 1 / 4; }
  .cv__t { margin-top: .2rem; }

  /* النتائج: اللقطة فوق والقراية تحتها، والنتايج التانية 3 في الصف */
  .rx__stage { grid-template-columns: 1fr; gap: 1.2rem; }
  .rx__doc { height: clamp(220px, 62vw, 380px); }
  .rx__more { grid-template-columns: 1fr; gap: .6rem; }
  .rx__more ul { grid-template-columns: repeat(3, 1fr); row-gap: .9rem; }
  .rx__more li:nth-child(3n+1) { border-inline-start: 0; padding-inline-start: 0; }

  /* المكالمة على الموبايل: الشاشة في النص والأسئلة تحتها */
  .ring { grid-template-columns: 1fr; --ch: min(500px, 125vw); justify-items: center; }
  .ask { width: 100%; }
  /* عن ياسر على الموبايل: البادج فوق القصة، والشريط بيبدأ من تحت العنوان (الجافاسكربت)
     بمسافة كفاية عشان يبان إنه متعلّق. الأرقام 2×2 والشركتين تحت بعض */
  .pass__wrap { grid-template-columns: 1fr; }
  .pass__col { padding-top: 64px; }
  .pass { --h: clamp(300px, 80vw, 380px); }
  .pass__stats { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .pass__stats li:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .pass__cos, .pass__field { grid-template-columns: 1fr; gap: .7rem; }
}

@media (max-width: 560px) {
  :root { --header-h: 54px; }
  .brand__txt small { display: none; }
  .hero { padding-bottom: 5.4rem; }
  .hero__media { height: min(250px, 29vh); height: min(250px, 29svh); }
  .hero__media .score { min-width: 154px; }
  .score__v { font-size: .96rem; }
  .strip { padding-inline: 1rem; }
  .strip__label { display: none; }
  .fn__leak > span { font-size: .84rem; }
  .ft__bottom { justify-content: center; text-align: center; }
  .wa__txt { display: none; }
  .wa { padding: .6rem; min-width: 48px; justify-content: center; }
}

/* ───────── 14ب. جوّ الصفحة — الطبقة اللي ورا كل السكاشن ─────────
   المشكلة اللي بتحلّها: الهيرو لوحده كان فيه طبقات (شبكة + هالات + خط نمو)،
   وباقي السكاشن خلفيتهم أسود مصمت — فالصفحة بتبدأ حلوة وبعدين تهدى.

   الطبقة دي `position: fixed` و`z-index: -1` يعني ورا كل المحتوى وبتتشاف
   من خلال السكاشن (مفيش سكشن فيه خلفية معتمة ما عدا الفوتر، وده مقصود).

   🔴 التحريك بالـtransform بس، مش بتغيير مكان التدرّج — تغيير التدرّج بيعيد
   الرسم كل إطار، والـtransform بيتركّب على الجرافيك من غير رسم.
   وعشان كده الهالات هنا من غير `filter: blur` — التدرّج الدائري ناعم أصلًا. */
:root {
  --fx-a: rgba(196,248,42,.085);   /* الهالة الليموني — خفيفة جدًا عن قصد */
  --fx-b: rgba(123,224,164,.055);  /* هالة تانية أبرد شوية تدّي عمق */
  --fx-grain: .05;
  --fx-vig: rgba(0,0,0,.5);
  --fx-grid-o: .32;
}
:root[data-theme="light"] {
  /* على ورق فاتح الليموني محتاج يكون أقوى عشان يبان — بس مش أكتر من كده،
     جرّبناه على .3 فبقى بقعة صفرا على نص الشاشة. */
  --fx-a: rgba(196,248,42,.19);
  --fx-b: rgba(30,122,82,.07);
  --fx-grain: .05;
  --fx-vig: rgba(62,60,42,.1);
  --fx-grid-o: .5;
}

.bgfx {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none; overflow: hidden;
}

/* الهالة: مربّع مركزه على 0,0 عشان الـtransform يبقى «حطّ المركز هنا».
   left/top فيزيائية عن قصد — الجافاسكربت بيحسب بالبكسل من حرف الشاشة،
   والشكل دائري متماثل فمفيش فرق بين عربي وإنجليزي. */
.bgfx__aura {
  position: absolute; left: 0; top: 0;
  width: min(1180px, 96vw); height: min(1180px, 96vw);
  margin: calc(min(1180px, 96vw) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--fx-a), transparent 72%);
  transform: translate3d(50vw, 40vh, 0);
  animation: fxBreathe 13s ease-in-out infinite alternate;
}
.bgfx__aura--b {
  width: min(920px, 82vw); height: min(920px, 82vw);
  margin: calc(min(920px, 82vw) / -2);
  background: radial-gradient(closest-side, var(--fx-b), transparent 70%);
  transform: translate3d(30vw, 80vh, 0);
  animation-duration: 17s;
  animation-direction: alternate-reverse;
}
@keyframes fxBreathe { from { opacity: .72; } to { opacity: 1; } }

/* الشبكة: نفس مقاس شبكة الهيرو (74px) عشان تبان امتداد ليها مش حاجة تانية.
   مخفيّة فوق خالص عن قصد — الهيرو ليه شبكته، ولو الاتنين ظهروا مع بعض
   الخطوط بتتزاحم وتعمل تشويش. بتبان بعد ما الهيرو يعدّي نصّه. */
.bgfx__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--glass-brd) 1px, transparent 1px),
    linear-gradient(to bottom, var(--glass-brd) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 76% 64% at 50% 50%, #000 10%, transparent 74%);
  mask-image: radial-gradient(ellipse 76% 64% at 50% 50%, #000 10%, transparent 74%);
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.bgfx__grid.is-on { opacity: var(--fx-grid-o); }

/* الحبيبات: ضوضاء SVG مرسومة في المتصفّح — مفيش صورة تتحمّل، صفر طلب زيادة.
   بتشيل إحساس «الدهان المصمت» من الأسود وبتدّي الورق الفاتح ملمس. */
.bgfx__grain {
  position: absolute; inset: 0;
  opacity: var(--fx-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* تعتيم خفيف على الحواف — بيخلي النص يبان مضيّ والحواف غامقة */
.bgfx__vig {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 84% 74% at 50% 46%, transparent 42%, var(--fx-vig));
}

/* ───────── 15. احترام إيقاف الحركة ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .strip__track { animation: none; }
  .fn__money { display: none; }
  .fn__ring { animation: none; opacity: 0; }
  .punch i { transform: scaleX(1); }
  /* الهالات بتقف مكانها — الجافاسكربت كمان بيبطّل يحرّكها */
  .bgfx__aura { animation: none; opacity: 1; }
  /* نقطة النور والنبضة بتختفي خالص — لو وقفت في نص حركتها بتبان غلطة */
  .pf__spark { display: none; }
  .pf__ping  { animation: none; opacity: 0; }
}