/*
 * صفحة Engage الأمّ — الأسلوب نفسه الذي في engagedecks وengageposts.
 *
 * نُسخت الرموز والخلفية والمبدّلات من الموقعين لا اختُرعت: موقعٌ ثالث بهويّة
 * ثالثة يجعل العائلة تبدو ثلاث شركات. والنسخ هنا بيد واحدة، وهذا ثمن كون
 * الثلاثة مشاريع منفصلة.
 */

:root {
  --bg: #f8f8fa;
  --surface: #ffffff;
  --elevated: #f0f0f3;
  --fg: #16161b;
  --muted: #55555f;
  --faint: #6e6e7c;
  --line: #dedee5;
  --brand: #e82a72;
  --brand-ink: #c4185c;
  --brand-strong: #c4185c;
  --brand-soft: rgb(232 42 114 / 0.1);
  --pink: #ff4d8f;
  --on-brand: #ffffff;
  --glow-strong: 7%;
  --glow-soft: 5%;

  /* غشاء الفقاعة — على خلفيةٍ فاتحة تُرسم بحبر الهوية لا بالأبيض */
  --bub-sheen: rgb(255 255 255 / 0.92);
  --bub-spec: rgb(255 255 255 / 0.95);
  --bub-crescent: rgb(255 77 143 / 0.3);
  --bub-body: rgb(232 42 114 / 0.09);
  --bub-edge: rgb(232 42 114 / 0.34);
  --bub-rim: rgb(232 42 114 / 0.3);
  --bub-inner: rgb(255 255 255 / 0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0a0a0c;
    --surface: #16161b;
    --elevated: #232329;
    --fg: #ffffff;
    --muted: #a8a8b4;
    --faint: #6e6e7c;
    --line: #33333d;
    --brand: #e82a72;
    --brand-ink: #ff4d8f;
    --brand-strong: #ff4d8f;
    --brand-soft: rgb(232 42 114 / 0.16);
    --glow-strong: 13%;
    --glow-soft: 9%;

    /* وعلى الداكنة بالأبيض: الحافّة المضيئة هي ما يُرى من الفقاعة في العتمة */
    --bub-sheen: rgb(255 255 255 / 0.32);
    --bub-spec: rgb(255 255 255 / 0.8);
    --bub-crescent: rgb(255 77 143 / 0.32);
    --bub-body: rgb(232 42 114 / 0.14);
    --bub-edge: rgb(255 255 255 / 0.24);
    --bub-rim: rgb(255 255 255 / 0.26);
    --bub-inner: rgb(255 255 255 / 0.2);
  }
}

:root[data-theme='dark'] {
  --bg: #0a0a0c;
  --surface: #16161b;
  --elevated: #232329;
  --fg: #ffffff;
  --muted: #a8a8b4;
  --faint: #6e6e7c;
  --line: #33333d;
  --brand: #e82a72;
  --brand-ink: #ff4d8f;
  --brand-strong: #ff4d8f;
  --brand-soft: rgb(232 42 114 / 0.16);
  --glow-strong: 13%;
  --glow-soft: 9%;

  --bub-sheen: rgb(255 255 255 / 0.32);
  --bub-spec: rgb(255 255 255 / 0.8);
  --bub-crescent: rgb(255 77 143 / 0.32);
  --bub-body: rgb(232 42 114 / 0.14);
  --bub-edge: rgb(255 255 255 / 0.24);
  --bub-rim: rgb(255 255 255 / 0.26);
  --bub-inner: rgb(255 255 255 / 0.2);
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Tajawal, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
.shell {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ── الخلفية: هالاتٌ منقولة عن page-glow في engagedecks ── */
.glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-image:
    radial-gradient(38rem 26rem at 84% 11%, rgb(232 42 114 / var(--glow-strong)), transparent 70%),
    radial-gradient(34rem 24rem at 8% 31%, rgb(255 77 143 / var(--glow-soft)), transparent 70%),
    radial-gradient(40rem 28rem at 92% 53%, rgb(232 42 114 / var(--glow-soft)), transparent 70%),
    radial-gradient(32rem 22rem at 10% 74%, rgb(255 77 143 / var(--glow-soft)), transparent 70%),
    radial-gradient(46rem 30rem at 55% 91%, rgb(232 42 114 / var(--glow-strong)), transparent 70%),
    linear-gradient(104deg, transparent 34%, rgb(255 255 255 / 0.04) 50%, transparent 66%);
}
:root[data-theme='light'] .glow,
:root:not([data-theme='dark']) .glow {
  /* الوهج نفسه أخفّ على الفاتح: نسبته تأتي من المتغيّرين أعلاه */
}

/* ── الترويسة ── */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px);
}
header .shell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}

/*
 * خيطٌ بلون الهوية أسفل الشريط، ثلاث طبقات لا واحدة: الخيط، ثم وهجٌ قريب،
 * ثم هالةٌ واسعة خافتة. الوهج الواحد يبدو ضبابةً رمادية، والمتدرّج يبدو ضوءاً.
 * منقول عن ترويسة engageposts حرفاً بحرف.
 */
header .line,
header .line::before,
header .line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}
header .line {
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brand), transparent);
}
header .line::before {
  bottom: -4px;
  height: 4px;
  background: linear-gradient(to right, transparent, rgb(232 42 114 / 0.35), transparent);
  filter: blur(3px);
}
header .line::after {
  bottom: -16px;
  height: 16px;
  background: linear-gradient(to right, transparent, rgb(232 42 114 / 0.12), transparent);
  filter: blur(12px);
}

.logo {
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s ease;
}
.logo:hover {
  transform: translateY(-1px);
}
/*
 * بلا `display` هنا: أسبقية `.logo img` أعلى من `.on-dark`، فلو حملت
 * `display: block` لتغلّبت عليها وظهرت النسختان معاً. الإظهار والإخفاء
 * تتولّاهما القاعدتان أدناه وحدهما.
 */
.logo img {
  height: 34px;
  width: auto;
}
/*
 * نسختا الشعار: تظهر واحدة وتُخفى الأخرى.
 *
 * القاعدة عامّة لا مقيّدةً بالترويسة: التذييل يستعمل الشعار نفسه، وقاعدةٌ
 * تعرف `.logo` وحدها تترك نسختي التذييل ظاهرتين فوق بعضهما.
 */
.on-light {
  display: block;
}
.on-dark {
  display: none;
}
:root[data-theme='dark'] .on-light {
  display: none;
}
:root[data-theme='dark'] .on-dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .on-light {
    display: none;
  }
  :root:not([data-theme='light']) .on-dark {
    display: block;
  }
}

/* روابط الصفحة في وسط الشريط، وتُطوى على الجوّال حيث يكفي التمرير */
.nav {
  display: inline-flex;
  align-items: center;
  margin-inline: auto;
  gap: 18px;
  font-size: 0.85rem;
  color: var(--muted);
}
@media (min-width: 640px) {
  .nav {
    gap: 28px;
    font-size: 0.9rem;
  }
}
/* على الجوّال ينزل الشريط سطراً كاملاً تحت الشعار: الروابط صارت صفحات، فطيُّها يقطع الطريق */
@media (max-width: 559px) {
  header .shell {
    flex-wrap: wrap;
    row-gap: 10px;
    padding-bottom: 10px;
  }
  .nav {
    order: 3;
    flex-basis: 100%;
    margin-inline: 0;
    justify-content: center;
  }
}
.nav a {
  position: relative;
  padding-block: 4px;
  transition: color 0.2s ease;
}
.nav a:hover {
  color: var(--fg);
}
/* خيطٌ ينمو من الوسط عند المرور — لا يزيح النصّ لأنه مطلق */
.nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after,
.nav a[aria-current='page']::after {
  transform: scaleX(1);
}
.nav a[aria-current='page'] {
  color: var(--fg);
  font-weight: 700;
}
.navmenu > button[aria-current='page'] {
  color: var(--fg);
  font-weight: 700;
}

/*
 * «منتجاتنا» قائمة لا رابط. المنتجات وجهاتٌ خارج الموقع، ورابطٌ واحد لا
 * يأخذ الزائر إلى اثنين. وشكلها شكل قائمة اللغة نفسه ليقرأها من رآها هناك.
 */
.navmenu {
  position: relative;
  display: inline-flex;
}
.navmenu > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.navmenu > button:hover,
.navmenu[data-open='true'] > button {
  color: var(--fg);
}
.navmenu .chev {
  width: 13px;
  height: 13px;
  transition: transform 0.25s ease;
}
.navmenu[data-open='true'] .chev {
  transform: rotate(180deg);
}
.navmenu menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  translate: -50% 0;
  margin: 10px 0 0;
  padding: 5px;
  min-width: 17rem;
  list-style: none;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 22px 46px -14px rgb(0 0 0 / 0.4);
  display: none;
  z-index: 60;
}
[dir='rtl'] .navmenu menu {
  translate: 50% 0;
}
.navmenu[data-open='true'] menu {
  display: block;
}
.navmenu menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--fg);
  transition: background 0.15s ease;
}
.navmenu menu a:hover {
  background: var(--elevated);
}
.navmenu menu .ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--brand-ink);
}
.navmenu menu .ic svg {
  width: 17px;
  height: 17px;
}
.navmenu menu .txt {
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.navmenu menu strong {
  font-size: 0.88rem;
  font-weight: 700;
}
.navmenu menu small {
  font-size: 0.74rem;
  color: var(--muted);
}
.navmenu menu > li > a > svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--faint);
}

.controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* مبدّل المظهر — دائرةٌ كما في engageposts */
.btn-round {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.18s;
}
.btn-round:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* مبدّل اللغة — حبّةٌ فيها كرةٌ أرضية ورمز اللغة، تفتح قائمة */
.lang {
  position: relative;
  display: inline-flex;
}
.lang > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding-inline: 10px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.18s;
}
.lang > button:hover,
.lang[data-open='true'] > button {
  border-color: var(--brand);
  color: var(--brand-ink);
}
.lang svg {
  width: 16px;
  height: 16px;
}
.lang menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin: 8px 0 0;
  padding: 4px;
  min-width: 10rem;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.35);
  display: none;
  z-index: 50;
}
.lang[data-open='true'] menu {
  display: block;
}
.lang menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  text-align: start;
  cursor: pointer;
  transition: 0.15s;
}
.lang menu button:hover {
  background: var(--elevated);
}
.lang menu button[aria-checked='true'] {
  color: var(--brand-ink);
  font-weight: 700;
}
.lang menu .code {
  font-size: 0.72rem;
  color: var(--faint);
}
.lang menu .name {
  flex: 1;
}

/* ── البطل ── */
main {
  flex: 1;
}
.hero {
  padding-block: clamp(64px, 13vw, 128px) clamp(28px, 6vw, 56px);
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 6.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: normal;
  color: var(--brand);
}
.hero p {
  margin: 20px auto 0;
  max-width: 36rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.8;
  color: var(--muted);
}

/* ── بطاقتا المنتجين ── */
.products {
  position: relative;
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  padding-bottom: clamp(56px, 10vw, 104px);
  /* المنظور على الحاوية لا على البطاقة: بطاقتان تحت منظورٍ واحد تميلان
     كأنّهما في فراغٍ واحد، ومنظورٌ لكلٍّ يجعل لكلٍّ فراغَها فيبدو الميل مسطّحاً */
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
@media (min-width: 720px) {
  /*
   * العمودان بعرض الدائرة نفسها لا بنصف الحاوية: العمود المرن كان أوسع من
   * البطاقة بنحو ٤٠ بكسلاً من كل جانب، فتنضاف إلى الفجوة ثلاث مرّات وتبدو
   * الدائرتان متباعدتين وإن كانت `gap` صغيرة. وبتثبيت العمود تصير الفجوة
   * المرئية هي المكتوبة.
   */
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: calc(48rem + clamp(18px, 3vw, 30px) + 40px);
  }
  /* الثالثة تعبر العمودين وتتوسّطهما: وعدٌ تحت المنتجين لا ثالثٌ بينهما */
  .card-wrap.from-bottom {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* وتبقى أصغر من أختيها في كل المقاسات */
.card-wrap.from-bottom {
  width: min(62vw, 16rem);
}
.card-wrap.from-bottom .card {
  padding: 13%;
  gap: 8px;
}
.card-wrap.from-bottom .card h2 {
  font-size: 1.05rem;
}
.card-wrap.from-bottom .card p {
  font-size: 0.8rem;
  line-height: 1.7;
}
.card-wrap.from-bottom .card .icon {
  width: 42px;
  height: 42px;
}
.card-wrap.from-bottom .card .icon svg {
  width: 21px;
  height: 21px;
}

/*
 * غلافٌ للدخول وبطاقةٌ للتمايل — طبقتان لا واحدة.
 *
 * التحويل خاصّية واحدة لا تُجمع: حركتان عليه تتنازعانه، فتُلغي المتأخّرة
 * وضعَ السابقة وتهتزّ البطاقة. وبفصلهما تتراكب الحركتان بلا تصادم، ويمكن
 * أن يكون الدخول ثلاثيّ الأبعاد والتمايل مركّباً في آنٍ واحد.
 */
.card-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 24rem);
  margin-inline: auto;
  opacity: 0;
  transform-style: preserve-3d;
  /*
   * ٢٫٤ ثانية لا ١٫٠٥، ومنحنى موزّع لا أُسّي.
   *
   * والمدّة وحدها لم تكن تكفي: `cubic-bezier(0.16, 1, 0.3, 1)` يقطع أكثر
   * المسافة في خُمس الزمن الأوّل ثمّ يزحف، فتبدو الدائرة قافزةً وإن طالت
   * المدّة. وهذا المنحنى يوزّع الحركة على الزمن كلّه، فتنساب كما تنساب
   * الفقاعات حولها.
   */
  animation: fly-in 2.4s cubic-bezier(0.34, 0.68, 0.24, 1) forwards;
}

/*
 * ── الفقاعات الفارغة ──
 *
 * أحجامها متفاوتة عمداً: المتساوية تبدو نقطاً مرصوفة، والمتفاوتة تبدو عمقاً.
 * ولذلك تقلّ الشفافية والحدّة مع الصغر — ما بَعُد في الفراغ قلّ أثره — وهذا
 * ما يجعلها تبدو محيطاً حول الدوائر لا زينةً ملصقة عليها.
 *
 * وهي خلف البطاقات (`z-index`) ولا تتلقّى نقراً (`pointer-events`): زينةٌ
 * تسرق نقرةً من رابطٍ أسوأ من غيابها.
 */
.bubbles {
  position: absolute;
  inset: 0 -8%;
  pointer-events: none;
  z-index: -1;
}
/*
 * الفقاعة جوفاء لا قرصٌ ملوّن.
 *
 * ما يجعل العين تقرأ «فقاعة» ثلاثةٌ معاً: وسطٌ شبه شفّاف يُرى ما خلفه، وحافّةٌ
 * مضيئة لأنّ الضوء يمرّ في غشائها مائلاً عند الأطراف فيتجمّع هناك، وبريقٌ
 * صغيرٌ ثابت في أعلاها هو انعكاس مصدر الضوء. واحدٌ منها وحده يعطي دائرة.
 */
.bubbles span {
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: calc(var(--s) * var(--k, 1));
  height: calc(var(--s) * var(--k, 1));
  border-radius: 50%;
  border: 1px solid var(--bub-rim);
  /*
   * أربع طبقاتٍ من التدرّج هي ما يعطي الكرويّة. والترتيب من الأعلى:
   *
   *   ١. الوجه المضيء — الضوء يأتي من أعلى اليسار، فيسطع هناك ويخفت بسرعة.
   *   ٢. الهلال المقابل — ضوءٌ ينفذ من الغشاء ويخرج من الجهة الأخرى، وهو
   *      أدقّ ما يفرّق كرةً شفّافة عن كرةٍ صمّاء.
   *   ٣. جسم الفقاعة — شفّافٌ في الوسط يكثف كلّما اتّجه إلى الحافّة، لأنّ
   *      البصر يخترق غشاءً أطول عند الأطراف. هذا التدرّج هو العمق نفسه.
   *   ٤. ظلٌّ داخليّ في أسفلها يقابل الضوء أعلاها.
   */
  background:
    radial-gradient(circle at 32% 27%, var(--bub-sheen), rgb(255 255 255 / 0.08) 24%, transparent 50%),
    radial-gradient(circle at 70% 76%, var(--bub-crescent), transparent 42%),
    radial-gradient(circle at 44% 40%, transparent 36%, var(--bub-body) 74%, var(--bub-edge) 100%);
  box-shadow:
    inset 6px 7px 12px -6px var(--bub-inner),
    inset -5px -7px 12px -6px rgb(232 42 114 / 0.28),
    0 6px 12px -8px rgb(0 0 0 / 0.35),
    0 0 14px rgb(232 42 114 / 0.1);
  /* الشفافية محسوبةٌ من الحجم في `build.py`: ما صغر بَعُد، وما بَعُد خفَت */
  opacity: var(--o);
  animation: var(--d) ease-in-out var(--dl) infinite;
}
/*
 * البريق لا يدور مع الفقاعة: مصدر الضوء في الغرفة ثابت، فلو دار البريق
 * معها لبدت كرةً مرسومة تُلَفّ لا غشاءً يعكس ضوءاً.
 */
.bubbles span::before {
  content: '';
  position: absolute;
  inset-inline-start: 20%;
  top: 15%;
  width: 28%;
  height: 21%;
  border-radius: 50%;
  background: var(--bub-spec);
  filter: blur(0.6px);
}
/*
 * والسباحة لا التمايل: مع كل انتقالةٍ يتمدّد الغشاء في محورٍ وينكمش في
 * الآخر (`scale(1.07, 0.94)`) كما يفعل السطح المشدود وهو يشقّ الهواء. وهي
 * حركةٌ صغيرة لا تكاد تُرى مفردةً، لكنّها الفرق بين كرةٍ تنزلق وفقاعةٍ تسبح.
 *
 * ثلاثة مسارات لا مسارٌ واحد. المسار الواحد يجعل الفقاعات كلّها تتمايل
 * الميلة نفسها في اللحظة نفسها فتبدو صفّاً يتحرّك معاً، وثلاثةٌ تجعلها
 * تبدو متطايرةً كلٌّ في شأنها. و`--rev` يعكس الاتجاه فتصير ستّاً.
 */
.bubbles .p1 {
  animation-name: fly-1;
}
.bubbles .p2 {
  animation-name: fly-2;
}
.bubbles .p3 {
  animation-name: fly-3;
}
@keyframes fly-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(calc(22px * var(--rev)), -28px) scale(1.07, 0.94);
  }
  50% {
    transform: translate(calc(-12px * var(--rev)), -42px) scale(0.94, 1.06);
  }
  75% {
    transform: translate(calc(-26px * var(--rev)), -14px) scale(1.05, 0.97);
  }
}
/* الثاني يرسم ثمانيةً راقدة: يذهب ويعود من فوق لا من حيث جاء */
@keyframes fly-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(calc(-30px * var(--rev)), -16px) scale(0.96, 1.05);
  }
  45% {
    transform: translate(calc(-8px * var(--rev)), -38px) scale(1.09, 0.93);
  }
  70% {
    transform: translate(calc(28px * var(--rev)), -24px) scale(1);
  }
  88% {
    transform: translate(calc(14px * var(--rev)), -6px) scale(0.97, 1.03);
  }
}
/* والثالث يصعد أكثر ممّا يزيغ — كفقاعةٍ خفيفة في ماء */
@keyframes fly-3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  30% {
    transform: translate(calc(10px * var(--rev)), -34px) scale(1.06, 0.95);
  }
  60% {
    transform: translate(calc(-14px * var(--rev)), -52px) scale(0.93, 1.07);
  }
  85% {
    transform: translate(calc(6px * var(--rev)), -20px) scale(1.02, 0.99);
  }
}
/*
 * على الجوّال تُخفّ الكتلة إلى نصفها. الشاشة أضيق فتزدحم الفقاعات نفسها
 * فوق بعضها، والجهاز أضعف فأربعٌ وستّون طبقةً متحرّكة تُثقل التمرير.
 */
/*
 * وثلاثٌ موضوعةٌ بالعين لا بالمولّد، تملأ ثلاث فجواتٍ تركتها الكتلة: أعلى
 * اليسار، وأعلى اليمين، وأسفل الوسط. المولّد يوزّع توزيعاً إحصائياً عادلاً،
 * والعين ترى الفراغ الذي لا يراه — فلا يُستبدل أحدهما بالآخر.
 *
 * وحجمها أكبر من أيّ مولَّدة (حتى ١٠٤px مقابل ٦٨) لأنّ الفجوة الكبيرة لا
 * تمتلئ برذاذ.
 */
.bubbles .anchor {
  --o: 0.5;
}
/*
 * على الجوّال كانت الفكرة تضيع: من ٦٩ فقاعة كان يظهر ٣٢، ولا يقع داخل
 * الشاشة منها إلّا ١٥، ويختفي خلف الدوائر ٨ — فلا يرى الزائر إلّا سبع
 * نقاطٍ متوسّطها ثماني بكسلات. وسبعُ نقاطٍ لا تقول «منتجاتٌ قادمة تتطاير».
 *
 * فثلاثة تصحيحات: يُحذف ربعها لا نصفها، ويُضيَّق إطارها فتقع مواضعها داخل
 * الشاشة بدل أن تخرج عنها، وتكبر أقطارها الثلث لأنّ ما يُقرأ فقاعةً على
 * شاشةٍ عريضة يصير غباراً على شاشة جوّال.
 */
@media (max-width: 719px) {
  .bubbles {
    inset: 0 -1%;
  }
  .bubbles span {
    --k: 1.35;
  }
  .bubbles span:not(.anchor):nth-child(4n) {
    display: none;
  }
  /* مواضع الموضوعة بالعين محسوبةٌ لعمودين، إلّا طرفيّتين تصحّان هنا أيضاً */
  .bubbles .anchor:not(.edge) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bubbles span {
    animation: none;
  }
}
.card-wrap.from-right {
  animation-delay: 0.2s;
}
.card-wrap.from-left {
  animation-delay: 0.62s;
}

/*
 * البطاقة كرةٌ لا لوح.
 *
 * الشكل الدائري يناسب التمايل: المستطيل يميل فتُرى زواياه تتأرجح، والدائرة
 * تميل فتبدو كرةً تدور في فراغ. والعمق من الضوء لا من الحدّ: لمعةٌ أعلى
 * اليسار حيث يُفترض مصدر الضوء، وظلٌّ داخليّ أسفلها، وظلٌّ خارجيّ تحتها.
 * ثلاثتها معاً تقرأها العين كرةً، وأيٌّ منها وحده يقرأها قرصاً مسطّحاً.
 */
.card {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 11px;
  padding: 16%;
  border-radius: 50%;
  border: 1px solid var(--bub-rim);
  /*
   * والبريق بمقاسٍ ثابت بالبكسل لا بنسبةٍ من القطر: الانعكاس صورةُ مصدر
   * الضوء على السطح، وحجمها لا يكبر بكِبَر الكرة. وبالنسبة المئوية كبر معها
   * حتى صار ضبابةً بيضاء. وهو طبقتان: نواةٌ صغيرة حادّة وهالةٌ أوسع حولها،
   * لأنّ البريق الواحد المشوّش يبدو بقعةً والمزدوج يبدو ضوءاً.
   *
   * الطبقات نفسها التي في الفقاعات الصغيرة بمقياسٍ أكبر: بريقٌ، ووجهٌ مضيء،
   * وهلالٌ مقابل، وحافّةٌ تكثف. والفرق الوحيد أنّ التكثيف هنا يبدأ من ٥٤٪ من
   * نصف القطر لا من مركزه — لأنّ في جوف هذه نصّاً يُقرأ، فيُترك وسطها صافياً
   * وتُعطى الكرويّة لحافّتها وحدها.
   */
  background:
    radial-gradient(52px 34px at 27% 18%, var(--bub-spec), transparent 70%),
    radial-gradient(18px 12px at 25% 16%, var(--bub-spec), transparent 62%),
    radial-gradient(circle at 32% 24%, var(--bub-sheen), transparent 48%),
    radial-gradient(circle at 72% 80%, var(--bub-crescent), transparent 46%),
    radial-gradient(circle at 46% 42%, transparent 54%, var(--bub-body) 82%, var(--bub-edge) 100%),
    /*
     * طبقةُ السطح الرمادية ذهبت، وبقي منها همسة.
     *
     * كانت `80%` من `--surface` — وهو رماديٌّ داكن (`#16161b`) أفتحُ من
     * خلفيّة الصفحة نفسها. فكانت تُقحم رمادياً لا وجود له في الفقاعات
     * الصغيرة، فتبدو الكرّات الثلاث من مادّةٍ أخرى غير مادّة ما حولها.
     *
     * وبـ`18%` تصير الطبقات هي الطبقات: بريقٌ ووجهٌ وهلالٌ وحافّةٌ تكثف،
     * لا غير — والجوف يصير أدكن، فيزداد تباين النصّ الأبيض لا ينقص.
     */
    color-mix(in srgb, var(--surface) 18%, transparent);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 14px 16px 34px -20px var(--bub-inner),
    inset -16px -20px 40px -20px rgb(232 42 114 / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    inset 0 -34px 64px -34px rgb(0 0 0 / 0.45),
    0 28px 56px -28px rgb(0 0 0 / 0.42);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
  transform-style: preserve-3d;
}
:root[data-theme='light'] .card {
  box-shadow:
    inset 14px 16px 34px -20px rgb(255 255 255 / 0.9),
    inset -16px -20px 40px -20px rgb(232 42 114 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    inset 0 -30px 56px -34px rgb(0 0 0 / 0.14),
    0 24px 48px -26px rgb(0 0 0 / 0.16);
}
/*
 * وهذه للوضع «يتبع الجهاز» حين يكون الجهاز فاتحاً.
 *
 * كانت `:root:not([data-theme='dark'])` وحدها بلا استعلام، وهي تصدُق أيضاً
 * حين لا تُضبط السمة أصلاً — أي في وضع المتابعة على جهازٍ داكن، فتُطبَّق
 * ظلالُ الفاتح على خلفيةٍ سوداء. والاستعلام هو ما يفرّق الحالتين.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .card {
  box-shadow:
    inset 14px 16px 34px -20px rgb(255 255 255 / 0.9),
    inset -16px -20px 40px -20px rgb(232 42 114 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    inset 0 -30px 56px -34px rgb(0 0 0 / 0.14),
    0 24px 48px -26px rgb(0 0 0 / 0.16);
  }
}

/* هالةٌ تتّقد خلف الكرة عند المرور */
.card::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 30%, var(--brand-soft), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card:hover::before {
  opacity: 1;
}
.card:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--brand);
  box-shadow:
    inset 14px 16px 34px -20px var(--bub-inner),
    inset -16px -20px 40px -20px rgb(232 42 114 / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 -34px 64px -34px rgb(0 0 0 / 0.45),
    0 34px 68px -26px rgb(232 42 114 / 0.45);
}

.card .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.card .icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  transition: 0.3s ease;
}
.card:hover .icon {
  background: var(--brand);
  color: var(--on-brand);
  transform: rotate(-6deg) scale(1.06);
}
.card .icon svg {
  width: 26px;
  height: 26px;
}
.card h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/*
 * النصّ داخل دائرة: أوسع سطرٍ فيه لا يجوز أن يبلغ أوسع نقطةٍ في الكرة،
 * وإلّا وقع طرفاه على الحافّة حيث يكثف التدرّج فيغبش الحرف. و«أعرض من
 * اللازم» في المستطيل عيبُ تنسيق، وفي الدائرة عيبُ قراءة.
 */
.card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 15rem;
}
.card .go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-ink);
}
.card .go svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s ease;
}
.card:hover .go svg {
  transform: translateX(4px);
}
html[dir='rtl'] .card .go svg {
  transform: scaleX(-1);
}
html[dir='rtl'] .card:hover .go svg {
  transform: scaleX(-1) translateX(4px);
}

/*
 * الدخول: تطير البطاقة من جهتها في عمقٍ ثلاثيّ الأبعاد، تستدير وتقترب
 * وتتّضح. والتأخير بينهما ربع ثانية: دخولٌ متزامن يبدو انتقالَ شريحة،
 * ومتتابعٌ يبدو حركةً حيّة.
 *
 * ثم تتمايل بعد استقرارها: ارتفاعٌ وميلٌ حول محورين، بمدّتين مختلفتين
 * (٩ و١١ ثانية) فلا تتزامنان أبداً ولا يُرى لهما نمط.
 */
@keyframes fly-in {
  from {
    opacity: 0;
    transform: translate3d(var(--from-x), var(--from-yy, 34px), -160px) rotateY(var(--from-y)) rotateZ(var(--from-z)) scale(0.93);
    filter: blur(7px);
  }
  26% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1);
    filter: blur(0);
  }
}

.card-wrap.from-right {
  --from-x: 110px;
  --from-y: -16deg;
  --from-z: 3deg;
}
.card-wrap.from-left {
  --from-x: -110px;
  --from-y: 16deg;
  --from-z: -3deg;
}
/*
 * الثالثة تدخل انسحاباً لا انزلاقاً: تبدأ قريبةً كبيرة ثمّ تتراجع إلى
 * حجمها. والحركة تقول ما يقوله الشكل — أنّها أبعد وأصغر، وعدٌ لا منتج.
 */
.card-wrap.from-bottom {
  animation-name: zoom-out;
  animation-duration: 2.6s;
  animation-delay: 1.05s;
}
@keyframes zoom-out {
  from {
    opacity: 0;
    transform: scale(1.42) translateZ(90px);
    filter: blur(10px);
  }
  24% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0);
  }
}

/*
 * التمايل: عَوْمٌ يمنةً ويسرةً وصعوداً وهبوطاً، لا ارتفاعٌ وحده.
 *
 * والمسار ليس ذهاباً وإياباً على خطّ: كل بطاقةٍ تدور دورةً غير منتظمة
 * فلا تبدو موقّعةً بمسطرة، ولكلٍّ اتجاهٌ ومدّة تخالف جارتها حتى لا
 * يتمايل الثلاث معاً كأنهنّ جسمٌ واحد.
 *
 * والإزاحة الأفقية مضروبةٌ في `--dx` لأنّ البطاقة على الجوّال تملأ عرض
 * العمود: ما يبدو عَوْماً على الشاشة الواسعة يصير اصطداماً بالحافة هناك.
 */
@keyframes float-a {
  0%,
  100% {
    transform: translate(0, 0) rotateZ(0deg) rotateY(0deg);
  }
  20% {
    transform: translate(calc(10px * var(--dx)), -15px) rotateZ(1deg) rotateY(3deg);
  }
  40% {
    transform: translate(calc(15px * var(--dx)), -6px) rotateZ(-0.6deg) rotateY(3.5deg);
  }
  60% {
    transform: translate(calc(-7px * var(--dx)), -18px) rotateZ(-1.1deg) rotateY(-3deg);
  }
  80% {
    transform: translate(calc(-13px * var(--dx)), -7px) rotateZ(0.7deg) rotateY(-3.5deg);
  }
}
@keyframes float-b {
  0%,
  100% {
    transform: translate(0, 0) rotateZ(0deg) rotateY(0deg);
  }
  20% {
    transform: translate(calc(-11px * var(--dx)), -13px) rotateZ(-1deg) rotateY(-3deg);
  }
  40% {
    transform: translate(calc(-15px * var(--dx)), -5px) rotateZ(0.6deg) rotateY(-3.5deg);
  }
  60% {
    transform: translate(calc(8px * var(--dx)), -19px) rotateZ(1.1deg) rotateY(3deg);
  }
  80% {
    transform: translate(calc(14px * var(--dx)), -8px) rotateZ(-0.7deg) rotateY(3.5deg);
  }
}
/* الثالثة أصغر وأبعد، فعَوْمها أهدأ — وإلّا بدت أقرب من أختيها لا أبعد */
@keyframes float-c {
  0%,
  100% {
    transform: translate(0, 0) rotateZ(0deg) rotateY(0deg);
  }
  20% {
    transform: translate(calc(-8px * var(--dx)), -10px) rotateZ(0.7deg) rotateY(-2deg);
  }
  40% {
    transform: translate(calc(7px * var(--dx)), -4px) rotateZ(-0.5deg) rotateY(2.2deg);
  }
  60% {
    transform: translate(calc(10px * var(--dx)), -13px) rotateZ(0.5deg) rotateY(2.5deg);
  }
  80% {
    transform: translate(calc(-6px * var(--dx)), -6px) rotateZ(-0.7deg) rotateY(-2.2deg);
  }
}

.card {
  --dx: 0.5;
}
@media (min-width: 720px) {
  .card {
    --dx: 1;
  }
}
.from-right .card {
  animation: float-a 8s ease-in-out 2.6s infinite;
}
.from-left .card {
  animation: float-b 9.5s ease-in-out 3.05s infinite;
}
.from-bottom .card {
  animation: float-c 11s ease-in-out 3.7s infinite;
}

/*
 * لمعةٌ تمسح البطاقة كل حين — كضوءٍ يمرّ على سطحٍ لامع.
 *
 * وهي على طبقةٍ فوق المحتوى بمزجٍ ناعم لا بغطاءٍ معتم، فالنصّ يبقى مقروءاً
 * تحتها. و`overflow: hidden` على البطاقة يقصّها عند حوافّها.
 */
.card .shine {
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 46%;
  transform: rotate(12deg);
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.1), transparent);
  animation: sweep 9s ease-in-out 2s infinite;
  inset-inline-start: -50%;
}
.from-left .card .shine {
  animation-duration: 11s;
  animation-delay: 3.4s;
}
@keyframes sweep {
  0%,
  72% {
    inset-inline-start: -50%;
  }
  88%,
  100% {
    inset-inline-start: 120%;
  }
}

/* المرور: ترتفع وتثبت، ويتوقّف التمايل فلا يتنازع مع الرفع */
.card:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .card-wrap {
    opacity: 1;
    animation: none;
  }
  .from-right .card,
  .from-left .card,
  .from-bottom .card,
  .card .shine {
    animation: none;
  }
  .card .shine {
    display: none;
  }
}

/* ── الصفحات الداخلية: من نحن، وتواصل معنا ── */
.page {
  padding-block: clamp(36px, 7vw, 76px) clamp(56px, 10vw, 104px);
  max-width: 44rem;
}
.page .eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.page h1 {
  margin: 10px 0 0;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.page .lede {
  margin: 16px 0 0;
  font-size: clamp(1rem, 2.4vw, 1.14rem);
  line-height: 1.95;
  color: var(--muted);
}

.prose {
  margin-top: clamp(28px, 5vw, 44px);
}
.prose h2 {
  margin: 34px 0 0;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p {
  margin: 10px 0 0;
  font-size: 0.97rem;
  line-height: 1.95;
  color: var(--muted);
}

/*
 * ── الفقاعة الثالثة: وعدٌ لا منتج ──
 *
 * كان حدُّها متقطّعاً ليقول «قيد التكوين»، وكان خطأً: الخطّ المتقطّع اصطلاحٌ
 * من عالم المخطّطات لا من عالم الأجسام، والفقاعة زجاجٌ — وغشاء الزجاج لا
 * ينقطع. فصار يقول ذلك بخفوتٍ في الحدّ لا بقطعه، وهو أصدق مع المادّة.
 *
 * وهي غير قابلة للنقر فلا تتصرّف تصرّف رابط: لا مؤشّر يد ولا رفعة عند المرور.
 */
.card.soon {
  border-color: color-mix(in srgb, var(--bub-rim) 50%, transparent);
  cursor: default;
}
.card.soon:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--bub-rim) 50%, transparent);
}
.card.soon:hover::before {
  opacity: 0;
}
.card.soon .icon {
  color: var(--faint);
  border-color: color-mix(in srgb, var(--line) 60%, transparent);
}
.card.soon h2 {
  color: var(--muted);
}

/* ── التذييل ── */
footer {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
}
footer .shell {
  padding-block: 32px;
}
.foot-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-size: 0.875rem;
  color: var(--muted);
}
@media (min-width: 720px) {
  .foot-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
}
.foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}
.foot-brand img {
  height: 26px;
  width: auto;
}
.foot-brand .tag {
  font-size: 0.78rem;
  color: var(--faint);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
}
@media (min-width: 720px) {
  .social {
    position: absolute;
    inset-inline: 0;
    justify-content: center;
    pointer-events: none;
  }
  .social a {
    pointer-events: auto;
  }
}
.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--faint);
  transition: 0.18s;
}
.social a:hover {
  background: var(--elevated);
  color: var(--brand-ink);
  transform: translateY(-2px);
}
.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.social svg.stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.family {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  flex-shrink: 0;
}
.family .label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.family a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  direction: ltr;
  transition: 0.18s;
}
.family a:hover {
  color: var(--brand-ink);
}
.family a.here {
  font-weight: 600;
  color: var(--fg);
}
.family svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.foot-legal {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--faint);
}
@media (min-width: 640px) {
  .foot-legal {
    flex-direction: row;
    justify-content: space-between;
  }
}
.foot-legal nav {
  display: flex;
  gap: 18px;
}
.foot-legal a {
  transition: 0.18s;
}
.foot-legal a:hover {
  color: var(--fg);
}

/* ── الصفحات النصّية: الشروط والخصوصية ── */
.doc {
  padding-block: 48px 72px;
  max-width: 48rem;
}
.doc h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.doc .updated {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--faint);
}
.doc .intro {
  margin: 22px 0 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--muted);
}
.doc section {
  margin-top: 40px;
}
.doc h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.doc h2 .n {
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
}
.doc section p {
  margin: 0 0 11px;
  font-size: 0.93rem;
  line-height: 1.95;
  color: var(--muted);
}
.doc .other {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 52px;
  min-height: 42px;
  padding-inline: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: 0.2s;
}
.doc .other:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-1px);
}

[hidden] {
  display: none !important;
}