/* ==========================================================================
   MultiServe — landing page
   2026-09-11 (evening): the page is one product story, not a stack of cards.
   Light ground, one accent, hairlines for structure, the brand at the edges,
   and the product's own UI as the visual language (panels, bubbles, badges,
   rows) — nothing decorative that does not explain the product.

   Every value is a token; buttons, cards, badges, chips, icon-badge,
   section-head and the path cards live in primitives.css, shared with app/.
   ========================================================================== */

html[lang='ar'] {
  --font-body: var(--font-arabic);
}
html[lang='en'] {
  --font-body: var(--font-ui);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font: inherit;
  color: inherit;
}
::selection {
  background: color-mix(in srgb, var(--interactive) 22%, transparent);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  inset-inline-start: var(--space-xs);
  top: -60px;
  z-index: 100;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
.skip:focus {
  top: var(--space-xs);
}

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--margin-page);
}
/* هوامش الصفحة والمقاسات الكبيرة تتدرّج مع العرض. html[lang] لا :root كي تغلب تجاوزات html[lang="ar"] في tokens.css */
@media (max-width: 1023px) {
  html[lang] {
    --margin-page: 32px;
  }
}
@media (max-width: 767px) {
  html[lang] {
    --margin-page: 20px;
    --text-display: 36px;
    --leading-display: 48px;
    --text-h1: 30px;
    --leading-h1: 40px;
    --text-h2: 26px;
    --leading-h2: 36px;
    --text-lead: 18px;
    --leading-lead: 30px;
  }
}

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header-in {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 68px;
}
.lockup {
  --x: 30px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--x) * 0.3);
  direction: ltr;
  unicode-bidi: isolate;
  text-decoration: none;
}
.lockup .mark,
.lockup img {
  width: var(--x);
  height: var(--x);
  flex: none;
}
.lockup--sm {
  --x: 20px;
}
.lockup--sm .wordmark {
  font-size: 11px;
}
.wordmark {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--text);
}
.site-nav {
  display: flex;
  gap: var(--space-4xs);
  margin-inline-start: var(--space-md);
}
.site-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-2);
  font-size: var(--text-body-s);
  font-weight: 500;
}
.site-nav a:hover {
  color: var(--text);
  background: var(--surface-3);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-inline-start: auto;
}
.i-moon {
  display: none;
}
:root[data-theme='dark'] .i-sun {
  display: none;
}
:root[data-theme='dark'] .i-moon {
  display: block;
}
.lang-toggle {
  min-height: 36px;
  font-family: var(--font-ui);
}
@media (max-width: 1023px) {
  .site-nav {
    display: none;
  }
}
@media (max-width: 767px) {
  .header-actions .btn-primary {
    display: none;
  }
  .header-actions .btn-icon,
  .header-actions .lang-toggle {
    min-height: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* ---- الخلفية: أبيض صريح (قرار المنتج 2026-09-17) --------------------------
   على الموقع وحده وفي السمة الفاتحة: الأرضية والأقسام الملوّنة بيضاء، والفصل
   بينها بالخطوط الشعرية القائمة. tokens.css لا يُمسّ — المنتج يبقى على --void.
   أرقام خطوات «كيف يعمل» تُخفي الخط الواصل بلون خلفية قسمها، فتتبعها.
   -------------------------------------------------------------------------- */
:root[data-theme='light'] {
  --void: var(--n0);
}
:root[data-theme='light'] .section--tint,
:root[data-theme='light'] .step-top {
  background: var(--n0);
}

/* ---- Hero ----------------------------------------------------------------
   مركزي، النص هو العنصر (قرار المنتج 2026-09-17): المنصة أولًا،
   وموظف واتساب أول خدمة داخلها. لا صورة ولا لوحة.
   خلفية بيضاء صريحة بلا أي طبقة خلف النص — لا شبكة ولا ضوء محيطي (قرار المنتج،
   2026-09-17): الهرمية يحملها الخط والفراغ وحدهما.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-6xl) var(--space-4xl);
}
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* اللافتة لاتينية بطبيعتها (اسم ومعرّف) — معزولة LTR، وتباعدها اللاتيني مكتوب هنا
   صراحةً لأن --track-label يُصفَّر تحت html[lang="ar"] (دليل الهوية: الاستثناء اللاتيني) */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-lg);
  padding: 6px var(--space-xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-1) 85%, transparent);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-2);
  direction: ltr;
  unicode-bidi: isolate;
}
/* العنوان: أكبر مستوى في الصفحة — Display × 1.25 مع سلّمه (العربي 600 وleading أعلى من التوكنز) */
.hero-title {
  margin: 0;
  font-size: calc(var(--text-display) * 1.25);
  line-height: calc(var(--leading-display) * 1.2);
  letter-spacing: var(--track-display);
  font-weight: var(--weight-display);
  color: var(--text);
  text-wrap: balance;
}
.hero-line {
  display: block;
}
.hero-lead {
  /* 30ch بلا balance: الكسر بعد «الذكية» كما في الرسمة المعتمدة */
  margin: var(--space-md) 0 0;
  max-width: 30ch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--text-2);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-lg);
}
.hero .hero-actions {
  justify-content: center;
  margin-block-start: var(--space-xl);
}
.hero .hero-actions .btn {
  min-width: 200px;
}
.hero .btn-primary {
  box-shadow: var(--glow-soft);
}

/* السطر تحت الـHero: رابط إلى الخدمة الأولى. النقطة Live Cyan — لون «الحيّ» في دليل الهوية */
.hero-first {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-start: var(--space-4xl);
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  text-decoration: none;
  transition:
    border-color var(--motion-fast),
    color var(--motion-fast);
}
.hero-first:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.hero-first-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--g3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g3) 22%, transparent);
}

@media (max-width: 1023px) {
  .hero {
    padding-block: var(--space-5xl) var(--space-3xl);
  }
}
@media (max-width: 767px) {
  .hero {
    padding-block: var(--space-3xl) var(--space-2xl);
  }
  .hero-eyebrow {
    margin-block-end: var(--space-md);
    letter-spacing: 0.1em;
  }
  .hero-lead {
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
  }
  .hero .hero-actions {
    flex-direction: column;
    align-self: stretch;
    margin-block-start: var(--space-lg);
  }
  .hero .hero-actions .btn {
    width: 100%;
    min-width: 0;
  }
  .hero-first {
    margin-block-start: var(--space-2xl);
    min-height: 44px;
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
  }
}

/* ---- اعتماد Meta — شارة تحقّق (قرار المنتج 2026-09-17) --------
   عنصر اعتماد رسمي بين شركتين تقنيتين، لا بطاقة ميزة:
   [رمز MultiServe]  «مزود تقني معتمد لدى Meta» / التوضيح  [شعار واتساب]
   صف واحد منخفض: الشعاران يحيطان بكتلة نص واحدة، فتنكمش البطاقة رأسيًا.
   أرضية بيضاء، خط شعري محايد، ظل عريض ناعم جدًا، وخط علامة قصير رفيع أعلاها.
   بلا تفاعل بصري: لا hover ولا مؤشر — ليست زرًا.

   الحجم بالوزن البصري لا بالأبعاد: رمز MultiServe بتفاصيله الداخلية الدقيقة يبدو
   أصغر من حجمه فيُعطى 54px، وشعار واتساب مصمت الكتلة يكفيه 46px.
   -------------------------------------------------------------------------- */
.meta-trust {
  padding-block: 0;
}
/* قسم واتساب يلي الشارة مباشرة، فيُقصَّر فراغه العلوي كي يقارب الفراغ فوق الشارة
   ولا يتراكم الحشوان */
.meta-trust + .service-hero {
  padding-block-start: var(--space-3xl);
}
.meta-trust-card {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow:
    0 1px 2px rgba(8, 11, 24, 0.04),
    0 18px 44px -28px rgba(8, 11, 24, 0.2);
  cursor: default;
}
/* خط العلامة: قصير ورفيع على الحافة العليا في المنتصف — توقيع لا زخرفة */
.meta-trust-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 56px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 0 0 2px 2px;
  background: var(--brand-gradient);
  opacity: 0.85;
}
.meta-trust-logo {
  display: block;
  flex: none;
  object-fit: contain;
}
.meta-trust-logo[hidden] {
  display: none;
}
.meta-trust-logo--ms {
  width: 54px;
  height: 54px;
}
.meta-trust-logo--wa {
  width: 46px;
  height: 46px;
}
.meta-trust-text {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.meta-trust-title {
  margin: 0;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--track-h3);
  font-weight: 700;
  color: var(--text);
}
.meta-trust-sub {
  margin: 0;
  white-space: nowrap;
  color: var(--text-2);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

@media (max-width: 767px) {
  .meta-trust + .service-hero {
    padding-block-start: var(--space-2xl);
  }
  /* الجوال: الشعاران متجاوران فوق، ثم النص تحتهما */
  .meta-trust-card {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs) var(--space-lg);
    padding: var(--space-md) var(--space-md) var(--space-sm);
  }
  .meta-trust-text {
    order: 3;
    flex-basis: 100%;
  }
  .meta-trust-title {
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
  }
  .meta-trust-sub {
    white-space: normal;
    text-wrap: balance;
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }
  .meta-trust-logo--ms {
    width: 46px;
    height: 46px;
  }
  .meta-trust-logo--wa {
    width: 40px;
    height: 40px;
  }
}

/* ---- فقاعات المحادثة (مشتركة: جوال قسم واتساب + بينتو «لماذا») ------------- */
.turn {
  display: flex;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--motion-base),
    transform var(--motion-base);
}
.turn.is-visible {
  opacity: 1;
  transform: none;
}
.turn-inner {
  display: flex;
  flex-direction: column;
  max-width: 86%;
}
.turn--customer {
  justify-content: flex-end;
}
.turn--customer .turn-inner {
  align-items: flex-end;
}
.turn--system,
.turn--human {
  justify-content: flex-start;
}
.bubble {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--wa-bubble-in);
  color: var(--wa-text);
  font-size: 15px;
  line-height: 21px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.turn--customer .bubble {
  background: var(--wa-bubble-out);
}
.turn--human .bubble {
  background: #d9edff;
}
.bubble-sender {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wa-header);
  margin-block-end: 2px;
}
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--wa-bubble-in);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--wa-meta);
  opacity: 0.35;
  animation: typing 1.1s var(--ease) infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.18s;
}
.typing i:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
.turn[data-typing] .bubble,
.turn[data-typing] .did {
  display: none;
}
.turn:not([data-typing]) .typing {
  display: none;
}
.did {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity var(--motion-base),
    transform var(--motion-base);
}
.did.is-visible {
  opacity: 1;
  transform: none;
}
.did .ic {
  width: 14px;
  height: 14px;
  color: var(--interactive);
}
.did--hand .ic {
  color: var(--warning);
}
/* ---- Sections ------------------------------------------------------------ */
.section {
  padding-block: var(--space-5xl);
  border-top: 1px solid var(--line);
}
.section--tint {
  background: var(--surface-3);
}
:root[data-theme='dark'] .section--tint {
  background: var(--surface-1);
}
.section .section-head {
  margin-block-end: var(--space-2xl);
}
@media (max-width: 767px) {
  .section {
    padding-block: var(--space-3xl);
  }
  .section .section-head {
    margin-block-end: var(--space-lg);
  }
}

/* الخدمة الأولى: نفس شبكة الـHero، رأس القسم بلا هامش سفلي */
.service-hero {
  border-top: 0;
}
.service-hero .section-head {
  margin-block-end: 0;
}
.service-hero .service-title {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--track-h1);
  font-weight: var(--weight-display);
}

/* ==========================================================================
   موظف واتساب (قرار المنتج 2026-09-17)
   النص يمينًا، والجوال يسارًا هو «الموظف»، وحوله قدراته الأربع. الجوال مواجه
   تمامًا — لا tilt ولا perspective — ومبني بـ HTML/CSS. ألوان MultiServe هي
   المسيطرة: إطار حبري، رأس محادثة أبيض، أرضية محايدة، وفقاعة العميل وحدها
   تحمل خضرة واتساب.
   ========================================================================== */
.wa-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: center;
}
.wa-line {
  display: block;
}
.wa-lead {
  margin: var(--space-md) 0 0;
  color: var(--text-2);
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  max-width: 44ch;
}
.wa-lead span {
  display: block;
}
.wa-lead span + span {
  margin-block-start: var(--space-4xs);
}

.wa-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.wa-proof li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  font-weight: 500;
  color: var(--text);
}
.wa-proof-ic {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--i50);
  color: var(--interactive);
}
.service-hero .hero-actions {
  margin-block-start: var(--space-xl);
}

/* المسرح: الجوال في المنتصف، والبطاقات مثبّتة حوله على سطح المكتب */
.wa-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-md);
}

/* ---- الجهاز ---- */
.device {
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--motion-slow),
    transform var(--motion-slow);
}
.device-frame {
  position: relative;
  width: 264px;
  height: 548px;
  padding: 9px;
  border-radius: 48px;
  background: var(--n950);
  box-shadow:
    inset 0 0 0 1.5px var(--n800),
    0 1px 2px rgba(8, 11, 24, 0.1),
    0 32px 64px -32px rgba(8, 11, 24, 0.38),
    0 12px 28px -18px rgba(8, 11, 24, 0.22);
}
/* أزرار الجانبين — تفصيل صامت يجعل الإطار جهازًا لا بطاقة */
.device-frame::before,
.device-frame::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--n800);
}
.device-frame::before {
  left: -3px;
  top: 112px;
  height: 30px;
  box-shadow: 0 44px 0 var(--n800);
}
.device-frame::after {
  right: -3px;
  top: 150px;
  height: 60px;
}
.device-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 39px;
  background: var(--n50);
}
.device-island {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 82px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  background: var(--n950);
  z-index: 2;
}
.device-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding-inline: 24px;
  flex: none;
  background: var(--surface-1);
}
.device-time {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  direction: ltr;
  unicode-bidi: isolate;
}
.device-sys {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  direction: ltr;
}
.device-signal {
  width: 15px;
  height: 9px;
  background: linear-gradient(
    to right,
    var(--text) 3px,
    transparent 3px 4px,
    var(--text) 4px 7px,
    transparent 7px 8px,
    var(--text) 8px 11px,
    transparent 11px 12px,
    var(--text) 12px
  );
  -webkit-mask: linear-gradient(to top right, #000 50%, transparent 50%);
  mask: linear-gradient(to top right, #000 50%, transparent 50%);
}
.device-battery {
  position: relative;
  width: 21px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 45%, transparent);
  border-radius: 3px;
}
.device-battery::after {
  content: '';
  position: absolute;
  inset: 1px 4px 1px 1px;
  border-radius: 1px;
  background: var(--text);
}

/* ---- رأس المحادثة ---- */
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 6px 12px 10px;
  flex: none;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
.chat-back {
  display: grid;
  place-items: center;
  color: var(--interactive);
  margin-inline-end: -2px;
}
html[dir='ltr'] .chat-back {
  transform: scaleX(-1);
}
.chat-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--i50);
  color: var(--i700);
  font-size: 13px;
  font-weight: 600;
}
.chat-id {
  display: grid;
  min-width: 0;
}
.chat-name {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-status {
  font-size: 11px;
  line-height: 15px;
  color: var(--mute);
}

/* ---- الرسائل ---- */
/* الرسائل تتكدّس من حقل الكتابة صعودًا كما في واتساب — لا فراغ تحتها */
.chat-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}
.chat-day {
  align-self: center;
  margin: 2px 0 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--mute);
  font-size: 10.5px;
  line-height: 16px;
}
.device .turns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.device .turn {
  transition:
    opacity 360ms var(--ease-out),
    transform 360ms var(--ease-out);
  transform: translateY(6px);
}
.device .turn.is-visible {
  transform: none;
}
.device .turn-inner {
  max-width: 84%;
}
.device .bubble {
  position: relative;
  padding: 7px 10px 5px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 19px;
  color: var(--wa-text);
  background: var(--surface-1);
  box-shadow:
    0 1px 1px rgba(8, 11, 24, 0.06),
    0 0 0 1px rgba(8, 11, 24, 0.03);
}
.device .turn--system .bubble {
  border-start-start-radius: 4px;
}
.device .turn--customer .bubble {
  background: var(--wa-bubble-out);
  border-start-end-radius: 4px;
}
.device .bubble-text {
  display: inline;
}
.device .bubble-link {
  color: var(--i600);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--i600) 40%, transparent);
}
.bubble-meta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  float: inline-end;
  margin: 6px 0 -2px;
  margin-inline-start: 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 12px;
  color: var(--wa-meta);
  direction: ltr;
}
.bubble-meta .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  color: var(--wa-tick);
}
.bubble-meta .ic + .ic {
  margin-inline-start: -8px;
}
.device .typing {
  padding: 9px 11px;
  border-radius: 14px;
  border-start-start-radius: 4px;
  background: var(--surface-1);
  box-shadow: 0 1px 1px rgba(8, 11, 24, 0.06);
}

.chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 22px;
  flex: none;
  background: var(--surface-1);
  border-top: 1px solid var(--line);
}
.chat-input {
  flex: 1;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  background: var(--n50);
  border: 1px solid var(--line);
  color: var(--mute);
  font-size: 12px;
  line-height: 16px;
}
.chat-send {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--interactive-fill);
  color: var(--text-on-fill);
}
html[dir='rtl'] .chat-send .ic {
  transform: scaleX(-1);
}

/* ---- البطاقات العائمة ---- */
.fcards {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(8, 11, 24, 0.04),
    0 10px 24px -14px rgba(8, 11, 24, 0.16);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: calc(420ms + var(--n) * 150ms);
}
.fcard-ic {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--i50);
  color: var(--interactive);
}
.fcard-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.fcard-t {
  font-size: 13.5px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text);
}
.fcard-d {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-2);
}

.wa-micro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-block-start: var(--space-lg);
  padding: 6px 4px;
  color: var(--interactive);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  font-weight: 500;
  text-decoration: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 1100ms;
}
.wa-micro .ic {
  transition: transform var(--motion-base);
}
.wa-micro:hover .ic {
  transform: translateX(-3px);
}
html[dir='ltr'] .wa-micro .ic {
  transform: scaleX(-1);
}
html[dir='ltr'] .wa-micro:hover .ic {
  transform: scaleX(-1) translateX(-3px);
}

/* الدخول: الجهاز، ثم الرسائل (conversation.js)، ثم البطاقات بالتتابع */
.wa-stage.is-in .device,
.wa-stage.is-in .fcard {
  opacity: 1;
  transform: none;
}
.wa-stage.is-in .wa-micro {
  opacity: 1;
}

/* سطح المكتب الواسع: البطاقات حول الجهاز. الجانب البعيد عن النص يتدلّى إلى هامش
   الصفحة (≤48px ضمن هامش 64px) ويرتبط بالجهاز بخط رفيع. الجانب القريب من النص
   يلامس إطار الجهاز فوق منطقتي الرأس وحقل الكتابة — لا فوق الرسائل. */
@media (min-width: 1280px) {
  /* هندسة واحدة للجهتين (طلب المنتج 2026-09-17): كل بطاقة على بُعد --fc-gap من إطار
     الجهاز، ومربوطة به بخط بطول تلك المسافة ونقطة على الإطار.
     حافة الجهاز من حافة المسرح = 50% − نصف عرضه (132px). */
  .wa-stage {
    --fc-w: 176px;
    --fc-gap: 24px;
    --fc-edge: calc(50% - 132px - var(--fc-gap) - var(--fc-w));
  }
  .fcards {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .fcard {
    position: absolute;
    width: var(--fc-w);
    pointer-events: auto;
  }
  /* جهة النص (يمينًا في العربية) — استجابة فورية أعلى، وجرّبه قبل عملائك في المنتصف */
  .fcard--near {
    inset-inline-start: var(--fc-edge);
  }
  .fcard--1 {
    top: 60px;
  }
  .fcard--4 {
    top: 39%;
  } /* منتصف الجهاز رأسيًا */
  /* الجهة البعيدة (يسارًا) — تتدلّى في هامش الصفحة */
  .fcard--far {
    inset-inline-end: var(--fc-edge);
  }
  .fcard--2 {
    top: 31%;
  }
  .fcard--3 {
    top: 54%;
  }

  .fcard--linked::before,
  .fcard--linked::after {
    content: '';
    position: absolute;
    top: 50%;
    pointer-events: none;
  }
  /* الخط: من حافة البطاقة المواجهة للجهاز، بتدرّج من خط محايد إلى النيلي عند الجهاز */
  .fcard--linked::before {
    width: var(--fc-gap);
    height: 1px;
    background: linear-gradient(
      to var(--toward),
      var(--line-strong),
      color-mix(in srgb, var(--interactive) 50%, transparent)
    );
    transform-origin: var(--from);
    transform: scaleX(0);
    transition: transform 700ms var(--ease-out);
    transition-delay: calc(900ms + var(--n) * 150ms);
  }
  /* النقطة على إطار الجهاز */
  .fcard--linked::after {
    width: 6px;
    height: 6px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--interactive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive) 14%, transparent);
    opacity: 0;
    transition: opacity 400ms var(--ease-out);
    transition-delay: calc(1400ms + var(--n) * 150ms);
  }
  /* بعيدة: الجهاز على جهة نهاية السطر منها · قريبة: على جهة بدايته */
  .fcard--far::before {
    inset-inline-end: 100%;
  }
  .fcard--far::after {
    inset-inline-end: calc(100% + var(--fc-gap) - 3px);
  }
  .fcard--near::before {
    inset-inline-start: 100%;
  }
  .fcard--near::after {
    inset-inline-start: calc(100% + var(--fc-gap) - 3px);
  }
  /* اتجاه التدرّج ونقطة بدء الرسم = حافة البطاقة؛ فيزيائيًا في العربية: البعيدة يسار الجهاز، القريبة يمينه */
  .fcard--far {
    --toward: right;
    --from: left;
  }
  .fcard--near {
    --toward: left;
    --from: right;
  }
  html[dir='ltr'] .fcard--far {
    --toward: left;
    --from: right;
  }
  html[dir='ltr'] .fcard--near {
    --toward: right;
    --from: left;
  }

  .wa-stage.is-in .fcard--linked::before {
    transform: none;
  }
  .wa-stage.is-in .fcard--linked::after {
    opacity: 1;
  }
}

/* أضيق من ذلك: عمود واحد — النص، ثم الجهاز، ثم البطاقات شبكة 2×2 بلا تداخل ولا خطوط */
@media (max-width: 1279px) {
  .wa-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .wa-copy {
    max-width: 620px;
  }
  .fcards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
    width: min(100%, 560px);
    margin-block-start: var(--space-xl);
  }
}
@media (max-width: 767px) {
  .wa-lead {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
  .service-hero .hero-actions {
    flex-direction: column;
  }
  .service-hero .hero-actions .btn {
    width: 100%;
  }
  .wa-stage {
    padding-block: 0;
  }
  .device-frame {
    width: 252px;
    height: 524px;
  }
}
@media (max-width: 479px) {
  .fcard {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }
}

/* ---- لمن: ثلاث بطاقات في صف بشكل بطاقة اعتماد Meta (قرار المنتج 2026-09-17) ----
   نفس لغة الشارة: أرضية بيضاء، خط شعري، ظل عريض ناعم، خط علامة قصير أعلاها،
   أيقونة بجانب كتلة نص (عنوان + توضيح + شرح تفصيلي). الفرق الوحيد: قابلة للاختيار، والاختيار
   يُحمل مع «أنشئ موظفك» إلى المنتج — فحدّ بلون التفاعل وعلامة صح عند الاختيار.
   -------------------------------------------------------------------------- */
.paths-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}
.path-trust {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  color: inherit;
  font: inherit;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(8, 11, 24, 0.04),
    0 18px 44px -28px rgba(8, 11, 24, 0.2);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-base) var(--ease);
}
.path-trust::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 56px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 0 0 2px 2px;
  background: var(--brand-gradient);
  opacity: 0.85;
}
.path-trust:hover {
  border-color: var(--line-strong);
}
.path-trust[aria-checked='true'] {
  border-color: var(--interactive);
  box-shadow:
    0 0 0 1px var(--interactive),
    0 18px 44px -28px rgba(8, 11, 24, 0.2);
}
.path-trust:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.path-trust-icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--i50);
  color: var(--interactive);
}
.path-trust-icon .ic {
  width: 24px;
  height: 24px;
}
.path-trust[aria-checked='true'] .path-trust-icon {
  background: var(--interactive);
  color: #fff;
}
.path-trust-text {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}
.path-trust-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  font-weight: 700;
  color: var(--text);
}
.path-trust-sub {
  color: var(--text);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  text-wrap: balance;
}
/* الشرح التفصيلي (لمن يناسب) تحت التوضيح: أهدأ لونًا، ويلتف بتوازن */
.path-trust-detail {
  margin-block-start: 2px;
  color: var(--text-2);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  text-wrap: balance;
}
/* العربية: التوضيح سطر واحد كالشارة (أطولها 231px ويتسع من 1200px). الإنجليزية أطول فتلتف */
html[lang='ar'] .path-trust-sub {
  white-space: nowrap;
}
.path-trust-mark {
  position: absolute;
  top: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--interactive);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--motion-fast) var(--ease),
    transform var(--motion-base) var(--ease-out);
}
.path-trust[aria-checked='true'] .path-trust-mark {
  opacity: 1;
  transform: none;
}
.paths-cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-xl);
}
/* أضيق من أن تتسع ثلاث بطاقات بسطر توضيح واحد: تُكدَّس */
@media (max-width: 1199px) {
  .paths-trust {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    max-width: 560px;
    margin-inline: auto;
  }
}
@media (max-width: 767px) {
  .path-trust {
    padding: var(--space-sm) var(--space-md);
  }
  html[lang='ar'] .path-trust-sub {
    white-space: normal;
  }
  .paths-cta .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .path-trust,
  .path-trust-mark {
    transition: none;
  }
}

/* ---- Steps: أربع خطوات على خط واحد --------------------------------------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.steps::before {
  content: '';
  position: absolute;
  top: 44px;
  inset-inline: 44px;
  height: 1px;
  background: var(--line-strong);
}
.step {
  position: relative;
  padding: 0 var(--space-3xs);
}
.step-top {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-xs);
  background: var(--surface-3);
  width: max-content;
  padding-inline-end: var(--space-3xs);
}
:root[data-theme='dark'] .step-top {
  background: var(--surface-1);
}
.step .icon-badge {
  order: -1;
  background: var(--surface-1);
}
.step h3 {
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  font-weight: 600;
}
.step p {
  margin-block-start: 6px;
  color: var(--text-2);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
}
.how-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-block-start: var(--space-2xl);
  color: var(--text-2);
  font-size: var(--text-body-s);
  text-align: center;
}
.how-note .ic {
  color: var(--success);
  flex: none;
  margin-top: 4px;
}
@media (max-width: 1023px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .steps::before {
    top: 0;
    bottom: 0;
    inset-inline-start: 22px;
    inset-inline-end: auto;
    width: 1px;
    height: auto;
  }
  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-xs);
    padding: var(--space-xs) 0;
  }
  .step-top {
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 6px;
  }
  .step .icon-badge {
    order: 0;
  }
}

/* ---- Why: بينتو من قطع المنتج ------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}
.bento-item {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-xs);
  padding: var(--space-md);
}
.bento-item h3 {
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  font-weight: 600;
  margin-block-start: var(--space-3xs);
}
.bento-item p {
  color: var(--text-2);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  margin-block-start: 4px;
}
.snip {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-xs);
  min-height: 180px;
  display: grid;
  align-content: start;
  gap: 6px;
}
:root[data-theme='dark'] .snip {
  background: var(--void);
}
.snip--chat {
  background: var(--wa-canvas);
}
.snip--chat .turn {
  opacity: 1;
  transform: none;
}
.snip-k {
  font-size: var(--text-caption);
  color: var(--mute);
}
.snip .item {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2xs) var(--space-xs);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xs);
  align-items: start;
}
.snip .item.is-suggested {
  border-style: dashed;
  border-color: var(--i300);
  background: var(--i50);
}
.snip .q {
  font-weight: 500;
  font-size: var(--text-body-s);
}
.snip .a {
  color: var(--text-2);
  font-size: var(--text-body-s);
}
.snip .row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.snip .btn {
  pointer-events: none;
}
.conv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-body-s);
}
.conv b {
  display: block;
  font-weight: 500;
}
.conv small {
  display: block;
  color: var(--text-2);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.stack-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-body-s);
  color: var(--text-2);
}
.stack-row .ic {
  width: 18px;
  height: 18px;
  color: var(--mute);
}
.stack-row.is-on {
  color: var(--text);
  font-weight: 500;
  border-color: color-mix(in srgb, var(--interactive) 35%, var(--line));
}
.stack-row.is-on .ic {
  color: var(--interactive);
}
@media (max-width: 767px) {
  .bento {
    grid-template-columns: 1fr;
  }
}

/* ---- FAQ ------------------------------------------------------------------ */
.faq-in {
  max-width: 760px;
}
.faq {
  display: grid;
  gap: var(--space-3xs);
}
.faq-item {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  min-height: 56px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary .ic {
  color: var(--mute);
  flex: none;
  transition: transform var(--motion-base) var(--ease);
}
html[dir='ltr'] .faq-item summary .ic {
  transform: scaleX(-1);
}
.faq-item[open] summary .ic {
  transform: rotate(-90deg);
}
html[dir='ltr'] .faq-item[open] summary .ic {
  transform: scaleX(-1) rotate(-90deg);
}
.faq-item p {
  padding: 0 var(--space-md) var(--space-xs);
  color: var(--text-2);
  max-width: 62ch;
}

/* ---- Final CTA ----------------------------------------------------------- */
.final {
  background: var(--n950);
  color: var(--n0);
  border-top: 0;
}
:root[data-theme='dark'] .final {
  background: var(--surface-2);
}
.final-in {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-xs);
}
.final h2 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--track-h1);
  font-weight: var(--weight-display);
  max-width: 22ch;
  text-wrap: balance;
}
.final p {
  color: var(--n400);
  font-size: var(--text-body-l);
}
.final .btn {
  margin-block-start: var(--space-xs);
}
.final .btn-primary {
  background: var(--n0);
  color: var(--n950);
}
.final .btn-primary:hover {
  background: var(--n100);
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-xl);
}
.site-footer-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  color: var(--mute);
  font-size: var(--text-body-s);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}
.foot-tag {
  color: var(--text-2);
}
.site-footer .lockup {
  --x: 24px;
}
.site-footer .wordmark {
  color: var(--text-2);
}
.foot-nav {
  display: flex;
  gap: var(--space-xs);
}
.foot-nav a {
  text-decoration: none;
  color: var(--text-2);
}
.foot-nav a:hover {
  color: var(--text);
}
.foot-meta {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
}
.foot-domain {
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: isolate;
}
@media (max-width: 1023px) {
  .site-footer-in {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-xs);
  }
  .foot-meta {
    justify-content: flex-start;
  }
}

/* ---- Mobile action bar --------------------------------------------------- */
.cta-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  padding: var(--space-2xs) var(--margin-page);
  padding-block-end: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--void) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--motion-base);
}
.cta-bar.is-shown {
  transform: none;
}
.cta-bar .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .cta-bar {
    display: none;
  }
}

/* ==========================================================================
   Intro — افتتاحية الشعار (قرار المنتج 2026-09-17)
   شاشة بيضاء نظيفة في كل تحميل جديد ← الرمز ينفتح من مركزه كعدسة ←
   القفل كله ينزاح إلى المنتصف والكلمة تخرج من حافة الرمز ← الطبقة تذوب في الموقع.
   لا نص آخر ولا توهّج ولا زخرفة.

   الملف الرسمي كما هو: الرمز مسار واحد مملوء لا يُعدَّل. الحركة قصّ (clip-path)
   وإزاحة ومقياس فقط.
   القفل بمعادلات دليل الهوية: الكلمة = x × 0.50 ÷ 0.70 · الفجوة = x × 0.30 ·
   Space Grotesk 700 uppercase 0.055em · الحبر #080B18 على الفاتح.

   الانعكاس (قرار 2026-09-17، مُنقَّح): لمعة زجاجية ناعمة تعبر سطح الرمز مرة ثم
   تخبو — لا نقطة ضوء ولا نيون ولا هالة. هندستها هندسة الرمز حرفيًا: landing.js
   يقرأ المسار من الملف الرسمي ويقسمه إلى محيطاته الخمسة (كلها باتجاه عقارب
   الساعة من أعلى اليسار)، ويرسم على كل محيط خطًّا عريضًا مغبَّشًا بشدة، ثم
   **يقنّعه بصورة الرمز الرسمية نفسها** — فلا يخرج ضوء إلى الأبيض أبدًا، ويبقى
   انعكاسًا على السطح. حافتا كل حلقة تحملان اللمعة معًا فتبدو شريطًا واحدًا يعبر الحلقة.
   الرمز الرسمي تحته لا يُغبَّش: التغبيش على الطبقة فقط.

   التوقيت (يطابقه HOLD في landing.js): العدسة 0–900ms · الانعكاس 150–1410ms ·
   الإزاحة والكلمة بعد اكتمال الرمز 1450–2250ms · وقفة حتى 2650ms ·
   الذوبان 450ms (كما هو). المجموع ≈ 3.1 ثانية.
   الإزاحة على القفل كله لا على الرمز وحده: الكلمة تتحرك مع الرمز فتنكشف من
   حافته، ولا يمرّ الرمز فوق حروف ظاهرة.
   ========================================================================== */
.intro {
  /* حجم الرمز: يكبر مع الشاشة، ولا يسمح للقفل كاملًا (≈ 6.9x) أن يتجاوز عرض الجوال */
  --x: clamp(36px, min(11vw, calc((100vw - 48px) / 7)), 72px);
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--n0);
  cursor: pointer;
  transition:
    opacity 450ms var(--ease),
    visibility 0s linear 450ms;
}
.intro-lockup {
  display: flex;
  align-items: center;
  gap: calc(var(--x) * 0.3);
  direction: ltr;
  unicode-bidi: isolate;
  transform: translateX(var(--shift, 0px));
}
/* العدسة على الحاوية لا على الصورة: تكشف الرمز والضوء الذي فوقه معًا */
.intro-slot {
  position: relative;
  flex: none;
  width: var(--x);
  height: var(--x);
  opacity: 0;
  transform: scale(0.92);
  clip-path: circle(0% at 50% 50%);
}
.intro-mark {
  display: block;
  width: 100%;
  height: 100%;
}
/* الأداء: تغبيش واحد بـ CSS على الطبقة كلها (يُركَّب على GPU)، وترتيب CSS يطبّق
   filter قبل mask — فيُغبَّش الضوء أولًا ثم يُقنَّع بصورة الرمز، فلا يخرج عن السطح.
   لا mix-blend-mode ولا مرشّح SVG لكل محيط: كلاهما مع القناع يجمّد الرسم.
   الإضاءة من درجات أفتح لتدرّج العلامة نفسه (landing.js).
   التغبيش ≈ 4.3٪ من حجم الرمز (≈ 3px على 72px) فيبقى ناعمًا بالنسبة نفسها في كل مقاس. */
.intro-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(calc(var(--x) * 0.043));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* pathLength=1: الأطوال نِسب من المحيط. السماكة بوحدات الرمز (512) — لا
   vector-effect: non-scaling-stroke الذي يُسقط pathLength من حساب الشرطة.
   56 وحدة ≈ عرض الحلقة كاملًا، والشرطة 32٪ من المحيط: لمعة واسعة لا نقطة. */
.intro-sheen {
  fill: none;
  stroke: url(#ms-intro-light);
  stroke-width: 56;
  stroke-linecap: butt;
  stroke-dasharray: 0.32 0.68;
  stroke-dashoffset: 0.32;
  opacity: 0;
}
.intro-word {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(var(--x) * 0.5 / 0.7);
  line-height: 1;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--n950);
  white-space: nowrap;
  /* يُلغي تباعد ما بعد آخر حرف كي يتوسّط القفل — الفجوة بين الرمز والكلمة لا تتغيّر */
  margin-inline-end: calc(-1 * var(--track-wordmark));
  opacity: 0;
  clip-path: inset(-20% 100% -20% 0);
}
/* الانتقالات على حالة البدء فقط: ضبط --shift قبلها يحدث فورًا بلا حركة */
.intro.is-go .intro-slot {
  opacity: 1;
  transform: none;
  clip-path: circle(80% at 50% 50%);
  transition:
    clip-path 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    opacity 350ms var(--ease);
}
/* الحلقة b (0 = المركز · 1 = الوسطى · 2 = الخارجية): المركز أولًا، وكل حلقة بعد سابقتها
   بـ80ms، وحافتا الحلقة الواحدة معًا. عبور لا دورة: 70٪ من المحيط ثم تخبو. */
.intro.is-go .intro-sheen {
  animation: intro-sheen 1100ms cubic-bezier(0.4, 0, 0.2, 1) calc(150ms + var(--b) * 80ms) both;
}
@keyframes intro-sheen {
  0% {
    stroke-dashoffset: 0.32;
    opacity: 0;
  }
  40% {
    opacity: 0.55;
  }
  60% {
    opacity: 0.55;
  }
  100% {
    stroke-dashoffset: -0.38;
    opacity: 0;
  }
}
.intro.is-go .intro-lockup {
  transform: none;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1) 1450ms;
}
.intro.is-go .intro-word {
  opacity: 1;
  clip-path: inset(-20% -20% -20% 0);
  transition:
    clip-path 800ms cubic-bezier(0.65, 0, 0.35, 1) 1450ms,
    opacity 350ms var(--ease) 1450ms;
}
.intro.is-out {
  opacity: 0;
  visibility: hidden;
}
html.no-intro .intro,
.intro.is-done {
  display: none;
}
html.has-intro {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  /* الافتتاحية تبقى، بلا حركة: القفل ثابت ثم يذوب بسرعة */
  .intro-lockup,
  .intro-slot,
  .intro-word,
  .intro.is-go .intro-lockup,
  .intro.is-go .intro-slot,
  .intro.is-go .intro-word {
    transform: none;
    clip-path: none;
    opacity: 1;
    transition: none;
  }
  .intro-light {
    display: none;
  }
  .intro {
    transition-duration: 200ms, 0s;
    transition-delay: 0s, 200ms;
  }
  .turn,
  .did,
  .cta-bar,
  .faq-item summary .ic {
    transition: none;
  }
  .device,
  .fcard,
  .wa-micro,
  .fcard--linked::before,
  .fcard--linked::after {
    transition: none !important;
  }
  .typing i {
    animation: none;
  }
}