/* ============================================================================
   Jodfay V3 — Editorial Motion System
   ---------------------------------------------------------------------------
   نظام تصميم مائع بالكامل: كل المقاسات بـ rem، وجذر الصفحة يتمدّد مع العرض،
   فتتغيّر الصفحة نسبيًا بلا نقاط قفز.

   مبنيّ للعربية (RTL) أولًا: كل الاتجاهات بخصائص منطقية
   (inline-start / inline-end) حتى ينعكس التخطيط تلقائيًا.

   لا يعتمد على أي مُجمِّع — CSS نقي بنفس عرف المشروع.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. الجذر المائع
   1rem = عرض النافذة ÷ المقسوم. المقسوم يكبر مع الشاشة فتهدأ سرعة التمدّد.
   --------------------------------------------------------------------------- */
html.tr-root                              { font-size: 3.125vw; }    /* ÷32  — جوال  */
@media (min-width: 768px)  { html.tr-root { font-size: 1.3333vw; } } /* ÷75  — لوحي  */
@media (min-width: 1024px) { html.tr-root { font-size: 1.1765vw; } } /* ÷85  — لوحي عريض */
@media (min-width: 1280px) { html.tr-root { font-size: 1vw; } }      /* ÷100 — سطح مكتب */

/* سقف علوي حتى لا تتضخّم الصفحة على الشاشات الضخمة */
@media (min-width: 2200px) { html.tr-root { font-size: 22px; } }

/* قفل التمرير أثناء التحميل أو فتح القائمة */
html.tr-locked, html.tr-locked body { overflow: hidden; }

/* ---------------------------------------------------------------------------
   2. رموز التصميم
   --------------------------------------------------------------------------- */
.tr-v3 {
  /* --- الأسطح --- */
  --tr-bg:            #040508;   /* خلفية الصفحة */
  --tr-hero:          #0C0C0C;   /* خلفية البطل */
  --tr-black:         #000000;
  --tr-white:         #FFFFFF;
  --tr-panel:         #C8C8C8;   /* لوح التحميل */
  --tr-panel-2:       #C3C3C3;   /* القسم الأخير */
  --tr-panel-3:       #D2D2D2;   /* نهاية التدرّج */
  --tr-cream:         #E6E4E2;   /* بطاقات وحدود القائمة */
  --tr-card-dark:     #272727;

  /* --- الحبر --- */
  --tr-light-font:    #D8D8D8;   /* نص على داكن */
  --tr-dark-font:     #000000;   /* نص على فاتح */
  --tr-line:          #434343;   /* نص ثانوي */
  --tr-line-dark:     #2F323B;   /* حدود على داكن */
  --tr-line-dark-2:   #24262E;
  --tr-glass:         rgba(255, 255, 255, 0.18);
  --tr-ghost:         rgba(216, 216, 216, 0.10); /* النص المُطفأ قبل الإضاءة */

  /* --- التدرّجات --- */
  --tr-grad-up:       linear-gradient(0deg, #FFFFFF 0%, #D2D2D2 100%);
  --tr-grad-down:     linear-gradient(0deg, #C3C3C3 0%, #FFFFFF 100%);

  /* --- الخطوط --- */
  /* اللاتيني أولًا، والعربي يتكفّل بما لا تغطّيه العائلة اللاتينية */
  --tr-display: "Familjen Grotesk", "IBM Plex Sans Arabic", system-ui, sans-serif;
  /* خط المتن تقني. العربية أولًا لأن خطوط mono لا تحوي حروفًا عربية،
     ولو تقدّمت لأُخذت منها المسافةُ أحاديةُ العرض فتباعدت الكلمات شذوذًا.
     ما هو لاتيني خالص يُعلَّم dir="ltr" فيستعيد الـmono الحقيقي أدناه. */
  --tr-body:    "IBM Plex Sans Arabic", "IBM Plex Mono", ui-monospace, monospace;
  --tr-body-ltr: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
  --tr-mono:    "Martian Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
  --tr-serif:   "Instrument Serif", "IBM Plex Sans Arabic", Georgia, serif;

  /* --- نصف القطر --- */
  --tr-r-sm:  0.25rem;
  --tr-r-lg:  0.5rem;
  --tr-r-full: 9999px;

  /* --- التخطيط --- */
  --tr-gutter: 2.5rem;   /* حشوة الحاوية */
  --tr-gap:    1.5rem;   /* فجوة الشبكة */

  /* --- الحركة --- */
  --tr-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --tr-ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --tr-dur:       300ms;
  --tr-char-step:  30ms;   /* تدرّج الحروف */
  --tr-ul-out:   1000ms;   /* انسحاب خط الزر */
  --tr-ul-in:     500ms;   /* عودة خط الزر */
  --tr-arrow-out: 200ms;
  --tr-arrow-in:  320ms;

  background: var(--tr-bg);
  color: var(--tr-light-font);
  font-family: var(--tr-body);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   3. إعادة تعيين موضعية (داخل .tr-v3 فقط — لا تمسّ باقي الموقع)
   --------------------------------------------------------------------------- */
/* :where() يجعل وزن هذه القواعد صفرًا، فلا تتغلّب إعادةُ التعيين على
   مُعدِّلات المكوّنات. بدونها كانت `.tr-v3 a` (0,1,1) تهزم
   `.tr-btn--on-light` (0,1,0) فيبقى لون الزر فاتحًا فوق خلفية فاتحة. */
:where(.tr-v3) *, :where(.tr-v3) *::before, :where(.tr-v3) *::after { box-sizing: border-box; }
:where(.tr-v3) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(.tr-v3) :where(ul, ol) { list-style: none; }
:where(.tr-v3) :where(img, svg, video) { display: block; max-width: 100%; }
:where(.tr-v3) :where(a) { color: inherit; text-decoration: none; }
:where(.tr-v3) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.tr-v3 ::selection { background: var(--tr-light-font); color: var(--tr-black); }

/* ---------------------------------------------------------------------------
   4. الطباعة
   الأرقام مشتقّة من قياس الأصل: h1 6.25rem/0.90/-0.06em … إلخ
   --------------------------------------------------------------------------- */
.tr-v3 .t-h1,
.tr-v3 h1 {
  font-family: var(--tr-display);
  font-size: 3.75rem;          /* جوال */
  line-height: 0.933;
  letter-spacing: -0.06em;
  font-weight: 400;
}
.tr-v3 .t-h2,
.tr-v3 h2 {
  font-family: var(--tr-display);
  font-size: 2.5rem;
  line-height: 0.88;
  letter-spacing: -0.06em;
  font-weight: 400;
}
.tr-v3 .t-h3,
.tr-v3 h3 {
  font-family: var(--tr-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 400;
}
.tr-v3 p { font-size: 1.25rem; line-height: 1.85; }

/* الوسم الصغير — يقابل .title في الأصل */
.tr-v3 .t-label {
  font-family: var(--tr-display);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 400;
}
/* المتن الثانوي */
.tr-v3 .t-small { font-size: 1.125rem; line-height: 1.8; color: var(--tr-line); }
/* السطر التقني — mono */
.tr-v3 .t-mono {
  font-family: var(--tr-mono);
  font-size: 0.875rem;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
/* في السياق العربي تُقدَّم العائلة العربية على الـmono، لأن حرف المسافة
   في الخط أحادي العرض واسع جدًا فيُباعد الكلمات العربية بشكل شاذّ.
   ما هو لاتيني/رقمي خالص يُعلَّم dir="ltr" فيستعيد شكل الـmono. */
[dir="rtl"] .tr-v3 .t-mono { font-family: "IBM Plex Sans Arabic", var(--tr-mono); letter-spacing: -0.02em; }
[dir="rtl"] .tr-v3 .t-mono[dir="ltr"] { font-family: var(--tr-mono); letter-spacing: -0.06em; }
/* أي نص لاتيني خالص (أرقام، بريد، حقول إدخال) يأخذ الـmono الحقيقي */
[dir="rtl"] .tr-v3 [dir="ltr"] { font-family: var(--tr-body-ltr); }
/* الأرقام الضخمة */
.tr-v3 .t-num {
  font-family: var(--tr-display);
  font-size: 3.5rem;
  line-height: 0.893;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .tr-v3 .t-h1, .tr-v3 h1 { font-size: 6.25rem; line-height: 0.90; }
  .tr-v3 .t-h2, .tr-v3 h2 { font-size: 5.94rem; line-height: 0.947; }
  .tr-v3 .t-h3, .tr-v3 h3 { font-size: 2.25rem; }
  .tr-v3 p                { font-size: 1.125rem; }
  .tr-v3 .t-label         { font-size: 1.0625rem; }
  .tr-v3 .t-small         { font-size: 1.125rem; }
}

.tr-v3 .t-on-dark  { color: var(--tr-light-font); }
.tr-v3 .t-on-light { color: var(--tr-dark-font); }
.tr-v3 .t-dim      { color: var(--tr-line); }

/* ---------------------------------------------------------------------------
   5. التخطيط
   --------------------------------------------------------------------------- */
.tr-v3 .tr-container {
  width: 100%;
  padding-inline: 1.5rem;
  margin-inline: auto;
}
@media (min-width: 768px) { .tr-v3 .tr-container { padding-inline: var(--tr-gutter); } }

.tr-v3 .tr-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--tr-gap);
}
/* امتدادات الأعمدة.
   نستخدم grid-column-end لا الاختصار grid-column: span N — لأن الاختصار
   يضع "span N" في grid-column-START، فيُلغيه أي .start-N لاحق ويتقلّص
   العنصر إلى عمود واحد. الفصل بينهما يجعل .col-N و .start-N يتركّبان. */
.tr-v3 .col-12,
.tr-v3 .col-8,
.tr-v3 .col-6,
.tr-v3 .col-5,
.tr-v3 .col-4,
.tr-v3 .col-3 { grid-column-end: span 12; }
@media (min-width: 768px) {
  .tr-v3 .col-8 { grid-column-end: span 8; }
  .tr-v3 .col-6 { grid-column-end: span 6; }
  .tr-v3 .col-5 { grid-column-end: span 5; }
  .tr-v3 .col-4 { grid-column-end: span 4; }
  .tr-v3 .col-3 { grid-column-end: span 3; }
  .tr-v3 .start-2 { grid-column-start: 2; }
  .tr-v3 .start-9 { grid-column-start: 9; }
}

.tr-v3 .tr-section { position: relative; min-height: 100svh; }

/* ---------------------------------------------------------------------------
   6. عناصر الزينة — علامات "+" والخطوط
   --------------------------------------------------------------------------- */
.tr-v3 .tr-plus {
  position: absolute;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  pointer-events: none;
  color: currentColor;
  opacity: 0.55;
}
.tr-v3 .tr-plus::before,
.tr-v3 .tr-plus::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  background: currentColor;
}
.tr-v3 .tr-plus::before { inline-size: 100%; block-size: 1px; translate: -50% -50%; }
.tr-v3 .tr-plus::after  { inline-size: 1px; block-size: 100%; translate: -50% -50%; }

/* أركان الإطار الأربعة */
.tr-v3 .tr-corners { position: absolute; inset: 0; pointer-events: none; }
.tr-v3 .tr-corners .tr-plus.tl { inset-block-start: 0; inset-inline-start: 0; }
.tr-v3 .tr-corners .tr-plus.tr { inset-block-start: 0; inset-inline-end: 0; }
.tr-v3 .tr-corners .tr-plus.bl { inset-block-end: 0; inset-inline-start: 0; }
.tr-v3 .tr-corners .tr-plus.br { inset-block-end: 0; inset-inline-end: 0; }

/* خط ينمو أفقيًا مع علامتَي "+" على طرفيه */
.tr-v3 .tr-rule {
  position: relative;
  display: flex;
  align-items: center;
  block-size: 0.75rem;
}
.tr-v3 .tr-rule__line {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  block-size: 1px;
  inline-size: 0;                       /* تنمو بالجافاسكربت عند الظهور */
  background: var(--tr-line-dark);
  transition: inline-size 1.2s var(--tr-ease);
}
.tr-v3 .tr-rule--light .tr-rule__line { background: rgba(67, 67, 67, 0.15); }
.tr-v3 .tr-rule.is-in .tr-rule__line   { inline-size: 100%; }

/* ---------------------------------------------------------------------------
   7. شاشة التحميل (Preloader)
   --------------------------------------------------------------------------- */
.tr-pl {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.tr-pl[hidden] { display: none; }

/* الأحزمة: عشرة شرائط تنسحب واحدًا تلو الآخر فتكشف الصفحة */
.tr-pl__belts { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tr-pl__belt {
  flex: 1 1 0;
  background: var(--tr-panel);
  transform-origin: center top;
}

.tr-pl__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* إطار الشعار مع علامات الأركان */
.tr-pl__logo {
  position: relative;
  inline-size: 12rem;
  block-size: 12rem;
  display: grid;
  place-items: center;
}
.tr-pl__logo .tr-plus { color: var(--tr-black); opacity: 1; }
.tr-pl__logo-mark { inline-size: 60%; block-size: auto; }

/* الوسم: كلمات يفصلها نقاط */
.tr-pl__tagline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tr-black);
}
.tr-pl__tag-word { opacity: 0; }
.tr-pl__tag-dot  { opacity: 0; inline-size: 3px; block-size: 3px; border-radius: 50%; background: currentColor; }

/* عدّاد بكرات ٪ */
.tr-pl__counter {
  position: fixed;
  inset-block-end: 2.5rem;
  inset-inline-end: 2.5rem;
  display: flex;
  color: var(--tr-black);
  font-family: var(--tr-mono);
  font-size: 0.875rem;
}

/* علامات "+" تطير عبر الشاشة أثناء التحميل */
.tr-pl__flyer {
  position: fixed;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  z-index: 9500;
  color: var(--tr-black);
  pointer-events: none;
}

/* طبقة الانتقال بين الصفحات — نفس الأحزمة بالاتجاه المعاكس */
.tr-trans {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  visibility: hidden;
}
.tr-trans.is-active { visibility: visible; }
.tr-trans__belt { flex: 1 1 0; background: var(--tr-panel); transform: scaleY(0); transform-origin: center bottom; }

/* ---------------------------------------------------------------------------
   8. الترويسة
   mix-blend-difference تجعل الترويسة تقلب لونها تلقائيًا فوق أي قسم.
   --------------------------------------------------------------------------- */
.tr-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 99;
  padding-block: 1.5rem;
  mix-blend-mode: difference;
  transition: transform 400ms var(--tr-ease);
}
@media (min-width: 768px) { .tr-header { padding-block: 2.5rem; } }

/* تختفي عند النزول وتعود عند الصعود */
.tr-header.is-hidden { transform: translateY(-120%); }

.tr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tr-header__logo { position: relative; z-index: 50; display: flex; inline-size: 9.5rem; flex-direction: column; align-items: center; gap: .1rem; }
.tr-header__logo img {
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
  opacity: 1;
  filter: brightness(0) saturate(0) invert(1) contrast(1.15)
          drop-shadow(0 6px 18px rgba(255, 255, 255, .24));
}
@media (max-width: 480px) {
  .tr-header__logo { inline-size: 8rem; }
}

.tr-header__actions { display: flex; align-items: center; gap: 0.5rem; }

/* حساب المستخدم: يبقى ظاهرًا في سطح المكتب والجوال. */
.tr-header .header-account {
  position: relative;
  z-index: 50;
  display: inline-flex;
  min-block-size: 2rem;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding-inline: .72rem;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: var(--tr-r-full);
  background: rgba(255,255,255,.1);
  color: var(--tr-white);
  font-family: var(--tr-mono);
  font-size: .67rem;
  line-height: 1;
  text-decoration: none;
  transition: color var(--tr-dur) var(--tr-ease), background var(--tr-dur) var(--tr-ease), transform var(--tr-dur) var(--tr-ease);
}
.tr-header .header-account svg { inline-size: 1rem; block-size: 1rem; flex: 0 0 auto; }
.tr-header .header-account:hover,
.tr-header .header-account:focus-visible { color: var(--tr-black); background: var(--tr-white); transform: translateY(-2px); outline: none; }
.tr-header .header-account--active { color: var(--tr-black); background: var(--tr-white); }

@media (max-width: 640px) {
  .tr-header { padding-block: 1rem; }
  .tr-header__logo { inline-size: 6.5rem; }
  .tr-header__actions { gap: .35rem; }
  .tr-sound { display: none; }
  .tr-header .header-account { inline-size: 2.2rem; block-size: 2.2rem; min-block-size: 2.2rem; padding: 0; }
  .tr-header .header-account span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 420px) {
  .tr-header .tr-pill--solid { display: none; }
}

/* زر الصوت الدائري */
.tr-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;
  border-radius: var(--tr-r-full);
  background: rgba(217, 217, 217, 0.10);
  color: var(--tr-white);
  transition: background 500ms var(--tr-ease);
}
.tr-sound:hover { background: rgba(217, 217, 217, 0.20); }
.tr-sound svg { inline-size: 55%; block-size: auto; }

/* أزرار الحبّة (pill) */
.tr-pill {
  position: relative;
  z-index: 50;
  padding-block: 0.375rem 0.5rem;
  padding-inline: 1rem;
  border-radius: var(--tr-r-full);
  border: 1px solid var(--tr-white);
  transition: background var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease);
}
.tr-pill--solid { background: var(--tr-white); color: var(--tr-black); }
.tr-pill--solid:hover { background: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.8); }
.tr-pill--ghost { color: var(--tr-white); }
.tr-pill--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* أيقونة القائمة داخل الزر */
.tr-pill__bars { display: inline-flex; flex-direction: column; gap: 3px; margin-inline-start: 0.5rem; }
.tr-pill__bars span {
  display: block;
  inline-size: 0.75rem;
  block-size: 1px;
  background: currentColor;
  transition: transform var(--tr-dur) var(--tr-ease);
}
.tr-pill.is-open .tr-pill__bars span:first-child { transform: translateY(2px) rotate(45deg); }
.tr-pill.is-open .tr-pill__bars span:last-child  { transform: translateY(-2px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   9. رابط بحركة حرف-بحرف
   طبقتان فوق بعض: الأصلية تصعد وتختفي، والنسخة تصعد من الأسفل مكانها.
   --------------------------------------------------------------------------- */
.tr-link {
  position: relative;
  display: inline-flex;
  overflow: visible;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.tr-link__layer { display: inline-flex; }
.tr-link__layer.is-clone {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
  pointer-events: none;
}
.tr-link__char {
  display: inline-block;
  will-change: transform, opacity, filter;
  transition:
    transform var(--tr-dur) var(--tr-ease),
    opacity   var(--tr-dur) var(--tr-ease),
    filter    var(--tr-dur) var(--tr-ease);
  transition-delay: var(--tr-char-delay, 0ms);
}
.tr-link:hover .is-original .tr-link__char { transform: translateY(-100%); opacity: 0; filter: blur(2px); }
.tr-link:hover .is-clone    .tr-link__char { transform: translateY(0);     opacity: 1; filter: blur(0); }
.tr-link .is-clone .tr-link__char { transform: translateY(100%); opacity: 0; filter: blur(2px); }
.tr-link:hover .is-clone { opacity: 1; }

/* ---------------------------------------------------------------------------
   10. الزر النصّي — خطّان أسفل + سهم ينزلق
   الخط ينسحب من طرف ويعود من الطرف الآخر؛ والسهم يخرج ويدخل مقابلًا له.
   --------------------------------------------------------------------------- */
.tr-btn {
  --tr-arrow: 2.5rem;
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 12.5rem;
  min-block-size: 2.5rem;
  overflow: hidden;
  cursor: pointer;
  color: var(--tr-light-font);
  font-family: var(--tr-mono);
  font-size: 0.875rem;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.tr-btn--on-light { color: var(--tr-dark-font); }

/* الخطّان */
.tr-btn__rule { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; }
.tr-btn__rule span {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: currentColor;
  will-change: transform;
}
.tr-btn__rule .out { transform-origin: right center; transform: scaleX(1); transition: transform var(--tr-ul-out) var(--tr-ease); }
.tr-btn__rule .in  { transform-origin: left center;  transform: scaleX(0); transition: transform var(--tr-ul-in)  var(--tr-ease); }
.tr-btn:hover .tr-btn__rule .out { transform: scaleX(0); }
.tr-btn:hover .tr-btn__rule .in  { transform: scaleX(1); }

/* الحروف تقفز بتدرّج */
.tr-btn__word { position: relative; display: inline-flex; padding-inline-end: 1px; }
.tr-btn__char {
  display: inline-block;
  will-change: transform;
  transition: transform var(--tr-dur) var(--tr-ease);
  transition-delay: var(--tr-char-delay, 0ms);
}
.tr-btn:hover .tr-btn__char { transform: translateY(-0.15rem); }

/* السهمان — يتبادلان الموضع */
.tr-btn__arrow {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tr-arrow);
  block-size: var(--tr-arrow);
  pointer-events: none;
}
.tr-btn__arrow.is-lead  { inset-inline-end: 0; }
.tr-btn__arrow.is-trail { inset-inline-start: 0; }
.tr-btn__arrow svg { inline-size: 1rem; block-size: auto; }
/* في RTL يُقلب رأس السهم ليشير لجهة القراءة */
[dir="rtl"] .tr-btn__arrow svg { transform: scaleX(-1); }

.tr-btn__arrow span {
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  align-items: center;
  will-change: transform, opacity;
}
.tr-btn__arrow.is-lead  span { justify-content: flex-end; opacity: 1; transform: translateX(0);
  transition: transform var(--tr-arrow-out) var(--tr-ease), opacity var(--tr-arrow-out) var(--tr-ease); }
.tr-btn__arrow.is-trail span { opacity: 0; transform: translateX(-120%);
  transition: transform var(--tr-arrow-in) var(--tr-ease), opacity var(--tr-arrow-in) var(--tr-ease); }
.tr-btn:hover .tr-btn__arrow.is-lead  span { opacity: 0; transform: translateX(120%); }
.tr-btn:hover .tr-btn__arrow.is-trail span { opacity: 1; transform: translateX(0); }

/* ---------------------------------------------------------------------------
   11. لوح القائمة (سطح مكتب) — ينفتح بدائرة من زاوية الزر
   --------------------------------------------------------------------------- */
.tr-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  justify-content: flex-end;
  padding: 1rem;
  pointer-events: none;
}
@media (min-width: 768px) { .tr-menu { display: flex; } }

.tr-menu__panel {
  position: relative;
  z-index: 5;
  display: flex;
  inline-size: 100%;
  max-inline-size: 27.5rem;
  max-block-size: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tr-cream);
  border-radius: var(--tr-r-lg);
  background: var(--tr-white);
  color: var(--tr-dark-font);
  pointer-events: auto;
  /* مغلق: دائرة صفرية عند زاوية الزر + ميل خفيف */
  clip-path: circle(0% at 95% 5%);
  transform: rotate(2deg) scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition:
    clip-path 700ms var(--tr-ease),
    transform 700ms var(--tr-ease),
    opacity   300ms var(--tr-ease),
    visibility 0s linear 700ms;
}
[dir="rtl"] .tr-menu__panel { clip-path: circle(0% at 5% 5%); transform: rotate(-2deg) scale(0.9); }

.tr-menu.is-open .tr-menu__panel {
  clip-path: circle(150% at 95% 5%);
  transform: rotate(0) scale(1);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s, 0s, 0s;
}
[dir="rtl"] .tr-menu.is-open .tr-menu__panel { clip-path: circle(150% at 5% 5%); }

.tr-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
  inline-size: 100%;
  min-block-size: 100%;
  padding-block: 5rem 2.5rem;
  padding-inline: 2rem;
}
.tr-menu__list { display: flex; flex-direction: column; gap: 0.5rem; margin-block: auto; }
.tr-menu__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
}
.tr-menu__arrow {
  display: inline-flex;
  opacity: 0;
  transition: opacity var(--tr-dur) var(--tr-ease), translate var(--tr-dur) var(--tr-ease);
  transition-delay: var(--tr-dur);
}
.tr-menu__item a:hover .tr-menu__arrow { opacity: 1; translate: 0.5rem 0; }
[dir="rtl"] .tr-menu__item a:hover .tr-menu__arrow { translate: -0.5rem 0; }
[dir="rtl"] .tr-menu__arrow svg { transform: scaleX(-1); }

.tr-menu__foot { display: flex; flex-direction: column; gap: 1.5rem; }
.tr-menu__foot-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }

/* قائمة الجوال — شاشة كاملة */
.tr-menu-m {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 100%;
  block-size: 100dvh;
  z-index: 40;
  background: var(--tr-black);
  overflow-y: auto;
  overscroll-behavior: contain;
  translate: 0 -100%;
  visibility: hidden;
  transition: translate 600ms var(--tr-ease), visibility 0s linear 600ms;
}
@media (min-width: 768px) { .tr-menu-m { display: none; } }
.tr-menu-m.is-open { translate: 0 0; visibility: visible; transition-delay: 0s, 0s; }
.tr-menu-m__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
  min-block-size: 100%;
  inline-size: 100%;
  padding-block: 10rem 5rem;
  padding-inline: 1.5rem;
}

/* ---------------------------------------------------------------------------
   12. البطل — مثبّت بارتفاع ثلاثة أضعاف النافذة
   --------------------------------------------------------------------------- */
/* isolation ضرورية: بدونها تتسرّب طبقة mix-blend-difference الداخلية إلى
   مجموعة المزج الجذرية فتُسوّد كل الأقسام التالية. تحصر المزج داخل البطل. */
.tr-hero { position: relative; isolation: isolate; background: var(--tr-hero); overflow: hidden; }

/* لوحة الخطوط التفاعلية خلف كل شيء */
.tr-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100dvh;
  pointer-events: none;
}
/* اللوحات صارت داخل طبقات فرعية — انظر القسم 24 */

/* الغلاف المثبّت — mix-blend-difference ليقرأ النص فوق الخطوط */
.tr-hero__sticky {
  position: relative;
  z-index: 3;
  color: var(--tr-light-font);
  mix-blend-mode: difference;
}

.tr-hero__stage {
  position: relative;
  display: flex;
  inline-size: 100%;
  min-block-size: 100svh;
  padding-block: 6.25rem 3.5rem;
}
@media (min-width: 1024px) { .tr-hero__stage { padding-block-start: 7.5rem; } }

.tr-hero__layout {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  inline-size: 100%;
}
.tr-hero__title { margin-block-end: 2.5rem; }
.tr-hero__title .word { display: inline-block; }

/* شريط أسفل البطل: مؤشر التمرير | التلميح | البطاقة */
.tr-hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; align-items: end; }
.tr-hero__scroll { grid-column: span 4; display: flex; align-items: end; opacity: 0.5; }
.tr-hero__scroll svg { inline-size: 1.5rem; block-size: auto; }
.tr-hero__hint {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  text-align: center;
  order: 3;
}
@media (min-width: 1024px) { .tr-hero__hint { grid-column: span 4; order: 0; } }
/* نصّ اللمس مقابل نصّ المؤشّر — يظهر الملائم للجهاز */
.tr-hero__hint .is-touch { display: none; }
@media (hover: none) {
  .tr-hero__hint .is-pointer { display: none; }
  .tr-hero__hint .is-touch { display: block; }
}
.tr-hero__aside { grid-column: span 8; display: flex; justify-content: flex-end; }
@media (min-width: 1024px) { .tr-hero__aside { grid-column: 9 / span 4; } }
.tr-hero__aside-inner { display: flex; flex-direction: column; gap: 1.5rem; inline-size: 100%; max-inline-size: 16.25rem; }

/* بطاقة معلومات ذات خانتين */
.tr-fact-box {
  display: flex;
  min-block-size: 4.5rem;
  overflow: hidden;
  border: 1px solid var(--tr-line-dark);
  border-radius: var(--tr-r-sm);
}
.tr-fact-box__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-inline-size: 6.5rem;
  padding: 1rem;
  text-align: center;
  border-inline-end: 1px solid var(--tr-line-dark);
}
.tr-fact-box__left svg { inline-size: 1.25rem; block-size: auto; }
.tr-fact-box__right { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
.tr-fact-box .t-mono { font-size: 0.875rem; line-height: 1.15; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------------------
   13. قسم "عن" — نص يُضاء كلمة-بكلمة مع التمرير
   --------------------------------------------------------------------------- */
.tr-about {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 100svh;
  padding-block: 5rem;
}
@media (min-width: 1024px) { .tr-about { padding-block-start: 9.375rem; } }

.tr-reveal { color: var(--tr-ghost); }
.tr-reveal .word { color: inherit; transition: color 250ms linear; }
.tr-reveal .word.is-lit { color: var(--tr-light-font); }

/* ---------------------------------------------------------------------------
   14. الحقائق — بطاقات بمنظور ثلاثي الأبعاد
   --------------------------------------------------------------------------- */
.tr-facts {
  position: relative;
  z-index: 20;
  min-block-size: 100svh;
  padding-block: 6.25rem 5rem;
  background: var(--tr-grad-up);
  overflow: hidden;
}
@media (min-width: 1024px) { .tr-facts { padding-block-end: 10rem; } }

.tr-facts__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-block-end: 2.5rem;
  text-align: center;
}
@media (min-width: 1024px) { .tr-facts__head { margin-block-end: 5rem; } }

.tr-facts__list {
  display: flex;
  gap: var(--tr-gap);
  justify-content: flex-start;
  perspective: 1400px;
  transform-style: preserve-3d;
  /* على الجوال تُمرَّر أفقيًا */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: 1.5rem;
  scrollbar-width: none;
}
.tr-facts__list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .tr-facts__list { justify-content: center; flex-wrap: nowrap; overflow: visible; padding-inline: 0; }
}

.tr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
  inline-size: 85vw;
  max-inline-size: 24.75rem;
  block-size: 50svh;
  min-block-size: 300px;
  max-block-size: 27.5rem;
  padding: 2rem;
  overflow: hidden;
  border-radius: var(--tr-r-lg);
  scroll-snap-align: center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: background-color 500ms var(--tr-ease);
}
@media (min-width: 768px) { .tr-card { inline-size: 23.75rem; block-size: 30.5rem; } }
@media (min-width: 1024px) { .tr-card { inline-size: 100%; padding: 2.5rem; } }

.tr-card--dark  { background: var(--tr-black); color: var(--tr-light-font); }
.tr-card--cream { background: var(--tr-cream); color: var(--tr-dark-font); text-align: center; }
.tr-card__media { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tr-card__body  { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; block-size: 100%; }
.tr-card__disc  {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 12.5rem;
  block-size: 12.5rem;
  border-radius: 50%;
  background: var(--tr-white);
}
.tr-card__logos { position: relative; display: flex; align-items: flex-end; block-size: 3rem; margin-block-end: 0.5rem; }
.tr-card__logos img { position: absolute; inset-inline-start: 0; max-inline-size: 7.5rem; max-block-size: 5rem; object-fit: contain; opacity: 0; }
.tr-card__logos img.is-on { opacity: 1; }
.tr-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* عدّاد بكرات — كل خانة أسطوانة أرقام تدور لتستقر على الرقم المطلوب.
   direction:ltr إلزامية: الأرقام تُقرأ من اليسار لليمين حتى داخل نص عربي،
   وبدونها ينعكس ترتيب الخانات فيصير ٢٤٠ ← ٠٤٢. */
.tr-reel { display: inline-flex; align-items: flex-start; direction: ltr; font-variant-numeric: tabular-nums; }
.tr-reel__slot { position: relative; display: inline-block; overflow: hidden; block-size: 1em; }
.tr-reel__strip { display: flex; flex-direction: column; will-change: transform; transition: transform 1.4s var(--tr-ease); }
.tr-reel__strip span { display: flex; align-items: center; justify-content: center; block-size: 1em; }
.tr-reel__static { display: inline-block; }

/* ---------------------------------------------------------------------------
   15. الأعمال — تمرير أفقي مثبّت
   --------------------------------------------------------------------------- */
.tr-work {
  position: relative;
  inline-size: 100%;
  block-size: 100dvh;
  overflow: hidden;
  background: var(--tr-white);
}

.tr-work__viewport { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

/* المسار أفقي في كل المقاسات — الجوال يحصل على نفس تجربة سطح المكتب.
   في RTL يسير نحو اليسار؛ الجافاسكربت يتكفّل بإشارة الإزاحة. */
.tr-work__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  block-size: 100dvh;
  will-change: transform;
}

.tr-work__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 100vw;
  block-size: 100%;
  padding-inline: 1.5rem;
  background: var(--tr-grad-up);
}
@media (min-width: 768px) {
  .tr-work__intro { inline-size: 50%; padding-inline: 2.5rem; }
}
.tr-work__intro-inner { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; text-align: center; }
@media (min-width: 768px) { .tr-work__intro-inner { gap: 3rem; } }

.tr-work__item {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  inline-size: 84vw;
  block-size: 100%;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .tr-work__item { inline-size: 37.5rem; padding: 2.5rem; }
}
.tr-work__figure {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--tr-r-lg);
  background: var(--tr-panel-3);
}
.tr-work__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tr-work__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-start: 1rem; color: var(--tr-dark-font); }

/* ---------------------------------------------------------------------------
   16. الشهادات
   --------------------------------------------------------------------------- */
.tr-quotes {
  position: relative;
  z-index: 20;
  min-block-size: 100svh;
  background: var(--tr-grad-down);
  overflow: hidden;
}
.tr-quotes__inner { min-block-size: 100svh; padding-block: 5rem; }
@media (min-width: 1024px) { .tr-quotes__inner { padding-block: 9.375rem; } }

/* على الجوال: صفّ أفقي قابل للسحب بدل الإخفاء التام */
.tr-quotes__tabs {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  margin-block-end: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tr-quotes__tabs::-webkit-scrollbar { display: none; }
.tr-quotes__tabs .tr-quotes__tab { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 768px) {
  .tr-quotes__tabs { flex-direction: column; gap: 1rem; margin-block-end: 0; overflow: visible; }
  .tr-quotes__tabs .tr-quotes__tab { white-space: normal; }
}
.tr-quotes__tab {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: start;
  color: var(--tr-dark-font);
  opacity: 0.3;
  transition: opacity 500ms var(--tr-ease);
}
.tr-quotes__tab:hover,
.tr-quotes__tab.is-active { opacity: 1; }
.tr-quotes__tab .icon { flex: 0 0 auto; opacity: 0; transition: opacity 500ms var(--tr-ease); }
.tr-quotes__tab.is-active .icon { opacity: 1; }
[dir="rtl"] .tr-quotes__tab .icon svg { transform: scaleX(-1); }

.tr-quotes__panel { position: relative; }
.tr-quotes__quote {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  opacity: 0;
  translate: 0 1rem;
  visibility: hidden;
  transition: opacity 500ms var(--tr-ease), translate 500ms var(--tr-ease), visibility 0s linear 500ms;
}
.tr-quotes__quote.is-active { position: relative; opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }

/* ---------------------------------------------------------------------------
   17. النداء الأخير
   --------------------------------------------------------------------------- */
.tr-final {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* min بدل block-size: المحتوى (عمود الحسابات) قد يتجاوز ارتفاع النافذة،
     والارتفاع الثابت مع overflow:hidden كان يقصّ أسفل القسم. */
  min-block-size: 100dvh;
  padding-block: 6.25rem 5rem;
  background: var(--tr-panel-2);
  color: var(--tr-dark-font);
  overflow: hidden;
}
.tr-final__mark { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; }
.tr-final__mark svg { inline-size: 60%; block-size: auto; opacity: 0.9; }
.tr-final__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }

/* ---------------------------------------------------------------------------
   18. شريط الكوكيز
   --------------------------------------------------------------------------- */
.tr-cookie {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 1.5rem;
  transition: opacity var(--tr-dur) var(--tr-ease), translate var(--tr-dur) var(--tr-ease);
}
@media (min-width: 768px) {
  .tr-cookie { inset-block-end: 7.5rem; padding-inline: 5rem; mix-blend-mode: difference; }
}
.tr-cookie.is-gone { opacity: 0; translate: 0 1rem; pointer-events: none; }
.tr-cookie__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  inline-size: 100%;
  padding: 1.5rem;
  border: 1px solid var(--tr-line-dark-2);
  border-radius: var(--tr-r-sm);
  color: var(--tr-light-font);
  background: rgba(4, 5, 8, 0.6);
  backdrop-filter: blur(8px);
}
@media (min-width: 768px) {
  .tr-cookie__box { inline-size: auto; max-inline-size: max-content; padding: 1rem; background: none; backdrop-filter: none; }
}
.tr-cookie__actions { display: flex; align-items: center; gap: 0.5rem; }

/* ---------------------------------------------------------------------------
   19. مساعدات الظهور عند التمرير
   --------------------------------------------------------------------------- */
.tr-v3 [data-reveal] {
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity 700ms var(--tr-ease), translate 700ms var(--tr-ease);
  transition-delay: var(--tr-reveal-delay, 0ms);
}
.tr-v3 [data-reveal].is-in { opacity: 1; translate: 0 0; }

.tr-v3 .tr-sr {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* التركيز بلوحة المفاتيح — لا يُخفى أبدًا */
.tr-v3 :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   20. احترام تفضيل تقليل الحركة
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tr-v3 *,
  .tr-v3 *::before,
  .tr-v3 *::after,
  .tr-pl *, .tr-trans * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tr-v3 [data-reveal] { opacity: 1; translate: none; }
  .tr-reveal .word { color: var(--tr-light-font); }
  .tr-hero__canvas { display: none; }
}

/* ============================================================================
   21. الصفحات الداخلية
   نفس نظام البطل لكن بارتفاع نافذة واحدة: عنوان ضخم + وسم + سطر وصف.
   ============================================================================ */
.tr-phero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-block-size: 70svh;
  padding-block: 10rem 4rem;
  background: var(--tr-hero);
  color: var(--tr-light-font);
  overflow: hidden;
}
.tr-phero__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tr-phero__canvas canvas { inline-size: 100%; block-size: 100%; display: block; }
.tr-phero__inner { position: relative; z-index: 2; inline-size: 100%; }
.tr-phero__eyebrow { display: block; margin-block-end: 1.5rem; opacity: 0.7; }
.tr-phero__lead { margin-block-start: 2rem; max-inline-size: 40rem; }

/* فتات الخبز */
.tr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 1.5rem; opacity: 0.6; }
.tr-crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.tr-crumbs li + li::before { content: "/"; opacity: 0.5; }
.tr-crumbs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* --- قسم فاتح عام --- */
.tr-block { position: relative; padding-block: 6rem; background: var(--tr-white); color: var(--tr-dark-font); }
.tr-block--tint { background: var(--tr-grad-up); }
.tr-block--panel { background: var(--tr-panel-2); }
.tr-block--dark { background: var(--tr-hero); color: var(--tr-light-font); }
.tr-block__head { margin-block-end: 4rem; }
.tr-block__head .t-label { display: block; margin-block-end: 1.5rem; opacity: 0.6; }

/* --- قائمة مفهرسة: رقم + عنوان + سهم، صفّ لكل عنصر --- */
.tr-index { border-block-start: 1px solid rgba(67, 67, 67, 0.2); }
.tr-index__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 2rem;
  border-block-end: 1px solid rgba(67, 67, 67, 0.2);
  transition: padding-inline var(--tr-dur) var(--tr-ease), background var(--tr-dur) var(--tr-ease);
}
.tr-index__row:hover { padding-inline: 1rem; background: rgba(0, 0, 0, 0.03); }
.tr-index__num { font-family: var(--tr-mono); font-size: 0.75rem; opacity: 0.5; }
.tr-index__title { font-family: var(--tr-display); font-size: 2rem; line-height: 1.05; letter-spacing: -0.04em; }
.tr-index__desc { display: block; margin-block-start: 0.75rem; font-size: 1rem; line-height: 1.8; opacity: 0.65; max-inline-size: 46rem; }
.tr-index__go { display: inline-flex; opacity: 0; transition: opacity var(--tr-dur) var(--tr-ease), translate var(--tr-dur) var(--tr-ease); }
.tr-index__row:hover .tr-index__go { opacity: 1; translate: -0.5rem 0; }
[dir="ltr"] .tr-index__row:hover .tr-index__go { translate: 0.5rem 0; }
[dir="rtl"] .tr-index__go svg { transform: scaleX(-1); }
.tr-block--dark .tr-index,
.tr-block--dark .tr-index__row { border-color: var(--tr-line-dark); }
.tr-block--dark .tr-index__row:hover { background: rgba(255, 255, 255, 0.04); }

/* --- شبكة بطاقات --- */
.tr-cards { display: grid; grid-template-columns: 1fr; gap: var(--tr-gap); }
@media (min-width: 640px)  { .tr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-cards--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .tr-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tr-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-block-size: 18rem;
  padding: 2rem;
  border: 1px solid rgba(67, 67, 67, 0.2);
  border-radius: var(--tr-r-lg);
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transition: background var(--tr-dur) var(--tr-ease), transform var(--tr-dur) var(--tr-ease);
}
.tr-tile:hover { background: var(--tr-white); transform: translateY(-4px); }
.tr-tile__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tr-tile__title { font-family: var(--tr-display); font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.03em; margin-block: 0.5rem; }
.tr-tile__desc { font-size: 1rem; line-height: 1.8; opacity: 0.7; flex: 1 1 auto; }
.tr-tile__media { aspect-ratio: 16 / 10; border-radius: var(--tr-r-sm); overflow: hidden; background: var(--tr-panel-3); }
.tr-tile__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tr-block--dark .tr-tile { border-color: var(--tr-line-dark); background: rgba(255, 255, 255, 0.03); }
.tr-block--dark .tr-tile:hover { background: rgba(255, 255, 255, 0.07); }

/* --- فريق العمل: أيقونات شخصية فقط، والمحتوى من لوحة التحكم --- */
.tr-team {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(124, 58, 237, 0.18), transparent 28rem),
    radial-gradient(circle at 8% 88%, rgba(33, 191, 232, 0.08), transparent 24rem),
    var(--tr-hero);
}
.tr-team__head { display: grid; gap: 1rem; max-inline-size: 54rem; }
.tr-team__head .t-label { margin-block-end: 0; }
.tr-team__head p { max-inline-size: 46rem; color: rgba(216, 216, 216, 0.7); line-height: 1.9; }
.tr-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--tr-line-dark);
  border-radius: var(--tr-r-lg);
  background: var(--tr-line-dark);
  overflow: hidden;
}
@media (min-width: 640px) { .tr-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tr-team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-team__card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-block-size: 17rem;
  padding: 1.5rem;
  color: var(--tr-light-font);
  background: rgba(12, 12, 12, 0.94);
  isolation: isolate;
  overflow: hidden;
  transition: background var(--tr-dur) var(--tr-ease), transform var(--tr-dur) var(--tr-ease);
}
.tr-team__card::after {
  content: "";
  position: absolute;
  inset: auto -3rem -5rem auto;
  inline-size: 11rem;
  block-size: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.2), transparent 68%);
  z-index: -1;
  transition: transform 600ms var(--tr-ease), opacity var(--tr-dur) var(--tr-ease);
}
.tr-team__card--female::after { background: radial-gradient(circle, rgba(203, 92, 255, 0.22), transparent 68%); }
.tr-team__card:hover { background: #121017; transform: translateY(-3px); }
.tr-team__card:hover::after { transform: scale(1.25); }
.tr-team__number { justify-self: end; color: rgba(216, 216, 216, 0.44); font-family: var(--tr-mono); font-size: 0.72rem; }
.tr-team__icon {
  display: grid;
  place-items: center;
  align-self: center;
  inline-size: 5.25rem;
  block-size: 5.25rem;
  border: 1px solid rgba(160, 119, 255, 0.4);
  border-radius: 50%;
  color: #a77bff;
  background: rgba(124, 58, 237, 0.08);
  box-shadow: 0 0 2.5rem rgba(124, 58, 237, 0.12);
}
.tr-team__card--female .tr-team__icon { color: #d49cff; border-color: rgba(212, 156, 255, 0.44); }
.tr-team__icon svg { inline-size: 3.15rem; block-size: 3.15rem; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tr-team__copy { padding-block-start: 1.5rem; border-block-start: 1px solid rgba(216, 216, 216, 0.12); }
.tr-team__copy h3 { font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.25; }
.tr-team__copy p { margin-block-start: 0.55rem; color: rgba(216, 216, 216, 0.64); font-size: 0.9rem; line-height: 1.7; }
@media (max-width: 639px) {
  .tr-team__card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 1.25rem; min-block-size: 10.5rem; }
  .tr-team__number { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; }
  .tr-team__icon { grid-row: 1 / span 2; inline-size: 4.5rem; block-size: 4.5rem; }
  .tr-team__icon svg { inline-size: 2.75rem; block-size: 2.75rem; }
  .tr-team__copy { padding-block-start: 0; border-block-start: 0; }
}

/* --- شرائح تصفية --- */
.tr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 3rem; }
.tr-chip {
  padding-block: 0.4rem 0.55rem;
  padding-inline: 1rem;
  border: 1px solid rgba(67, 67, 67, 0.3);
  border-radius: var(--tr-r-full);
  transition: background var(--tr-dur) var(--tr-ease), color var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease);
}
.tr-chip:hover { border-color: var(--tr-dark-font); }
.tr-chip.is-active { background: var(--tr-black); border-color: var(--tr-black); color: var(--tr-white); }

/* --- نص المقال --- */
.tr-prose { max-inline-size: 46rem; font-size: 1.125rem; line-height: 1.95; }
.tr-prose > * + * { margin-block-start: 1.5rem; }
.tr-prose h2 { font-size: 2.5rem; line-height: 1.1; margin-block-start: 3rem; }
.tr-prose h3 { font-size: 1.75rem; line-height: 1.15; margin-block-start: 2.5rem; }
.tr-prose ul, .tr-prose ol { padding-inline-start: 1.25rem; }
.tr-prose ul li { list-style: disc; }
.tr-prose ol li { list-style: decimal; }
.tr-prose li + li { margin-block-start: 0.5rem; }
.tr-prose a { text-decoration: underline; text-underline-offset: 3px; }
.tr-prose img { border-radius: var(--tr-r-lg); margin-block: 2rem; }
.tr-prose blockquote {
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--tr-line);
  font-family: var(--tr-serif);
  font-size: 1.5rem;
  line-height: 1.35;
}

/* --- النماذج --- */
.tr-form { display: grid; gap: 1.5rem; max-inline-size: 44rem; }
.tr-field { display: flex; flex-direction: column; gap: 0.5rem; }
.tr-field > label { font-family: var(--tr-display); font-size: 0.9rem; text-transform: uppercase; letter-spacing: -0.02em; opacity: 0.7; }
.tr-input {
  inline-size: 100%;
  padding-block: 0.9rem;
  padding-inline: 0;
  font: inherit;
  font-size: 1.05rem;
  color: inherit;
  background: none;
  border: 0;
  border-block-end: 1px solid rgba(67, 67, 67, 0.35);
  border-radius: 0;
  transition: border-color var(--tr-dur) var(--tr-ease);
}
.tr-input:focus { outline: none; border-block-end-color: var(--tr-dark-font); }
.tr-input::placeholder { color: rgba(67, 67, 67, 0.45); }
textarea.tr-input { min-block-size: 8rem; resize: vertical; }
select.tr-input { appearance: none; cursor: pointer; }
.tr-field--row { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.tr-field--row input { margin-block-start: 0.25rem; flex: 0 0 auto; }
.tr-field--row label { font-family: var(--tr-body); text-transform: none; font-size: 0.95rem; letter-spacing: normal; opacity: 0.8; }
@media (min-width: 640px) { .tr-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }

.tr-alert {
  padding: 1rem 1.25rem;
  border: 1px solid currentColor;
  border-radius: var(--tr-r-sm);
  font-size: 1rem;
}
.tr-alert--error { color: #B00020; }
.tr-alert--ok { color: #0A7A32; }

/* --- التذييل --- */
.tr-footer {
  position: relative;
  padding-block: 5rem 2.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 58, 237, .2), transparent 34rem),
    linear-gradient(180deg, #0b0714 0%, #05030a 100%);
  color: var(--tr-light-font);
}
.tr-footer__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) { .tr-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.tr-footer__identity { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; }
.tr-footer__identity > img {
  inline-size: 10rem;
  block-size: auto;
  object-fit: contain;
  filter: brightness(1.18) saturate(1.12) drop-shadow(0 8px 24px rgba(137, 55, 255, .3));
}
.tr-footer__tag { margin-block-start: 1.5rem; max-inline-size: 24rem; line-height: 1.85; opacity: 0.9; }
.tr-footer__col h2 { font-family: var(--tr-display); font-size: 0.9rem; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; opacity: 0.78; margin-block-end: 1.25rem; }
.tr-footer__col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.tr-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tr-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 4rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--tr-line-dark);
  opacity: 0.88;
}

/* --- صفحات الأخطاء --- */
.tr-err { display: flex; flex-direction: column; justify-content: center; min-block-size: 100svh; padding-block: 8rem 4rem; background: var(--tr-hero); color: var(--tr-light-font); }
.tr-err__code { font-family: var(--tr-display); font-size: 12rem; line-height: 0.8; letter-spacing: -0.06em; opacity: 0.15; }

/* ============================================================================
   22. الأدوات العائمة — شات بوت جودفاي، واتساب، العودة للأعلى
   أنماط أصلية لـV3: نفس بنية DOM المستخدمة في chatbot.js دون تعديله،
   لكن بلغة النظام الجديد بدل نظام styles.css القديم.
   ============================================================================ */
.tr-v3 .jbot { position: fixed; inset-block-end: 1.5rem; inset-inline-start: 1.5rem; z-index: 60; }

.tr-v3 .jbot-fab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--tr-r-full);
  background: var(--tr-white);
  color: var(--tr-black);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: transform var(--tr-dur) var(--tr-ease), background var(--tr-dur) var(--tr-ease);
}
.tr-v3 .jbot-fab:hover { transform: translateY(-3px); }
.tr-v3 .jbot-fab .jic { inline-size: 1.5rem; block-size: 1.5rem; }
.tr-v3 .jbot-fab .jic-x { display: none; }
.tr-v3 .jbot.is-open .jbot-fab .jic-chat { display: none; }
.tr-v3 .jbot.is-open .jbot-fab .jic-x { display: block; }
.tr-v3 .jbot-ping {
  position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem;
  inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%;
  background: #4ADE80;
}
.tr-v3 .jbot.is-open .jbot-ping { display: none; }

.tr-v3 .jbot-win {
  position: absolute;
  inset-block-end: 4.5rem;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  inline-size: min(23rem, calc(100vw - 3rem));
  max-block-size: min(34rem, calc(100dvh - 8rem));
  overflow: hidden;
  border: 1px solid var(--tr-line-dark);
  border-radius: var(--tr-r-lg);
  background: #0E0E10;
  color: var(--tr-light-font);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.tr-v3 .jbot-win[hidden] { display: none; }

.tr-v3 .jbot-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-block-end: 1px solid var(--tr-line-dark); }
.tr-v3 .jbot-ava { inline-size: 2rem; block-size: 2rem; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; overflow: hidden; }
.tr-v3 .jbot-ava img { inline-size: 65%; block-size: auto; }
.tr-v3 .jbot-id { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-inline-size: 0; }
.tr-v3 .jbot-id b { font-family: var(--tr-display); font-size: 0.95rem; font-weight: 500; letter-spacing: -0.02em; }
.tr-v3 .jbot-live { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-style: normal; opacity: 0.6; }
.tr-v3 .jbot-live em { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #4ADE80; }
.tr-v3 .jbot-x { inline-size: 1.75rem; block-size: 1.75rem; display: grid; place-items: center; border-radius: 50%; opacity: 0.6; }
.tr-v3 .jbot-x:hover { opacity: 1; background: rgba(255,255,255,.08); }
.tr-v3 .jbot-x svg { inline-size: 1rem; block-size: 1rem; }

.tr-v3 .jbot-log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.tr-v3 .jmsg {
  max-inline-size: 85%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--tr-r-lg);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tr-v3 .jmsg--bot { align-self: flex-start; background: rgba(255,255,255,.07); border-start-start-radius: var(--tr-r-sm); }
.tr-v3 .jmsg--me  { align-self: flex-end; background: var(--tr-white); color: var(--tr-black); border-end-end-radius: var(--tr-r-sm); }
.tr-v3 .jtyping { opacity: 0.6; font-style: italic; }

.tr-v3 .jbot-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-inline: 1rem; }
.tr-v3 .jbot-chips:empty { display: none; }
.tr-v3 .jchip {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--tr-line-dark);
  border-radius: var(--tr-r-full);
  font-size: 0.8rem;
  transition: background var(--tr-dur) var(--tr-ease);
}
.tr-v3 .jchip:hover { background: rgba(255,255,255,.09); }

.tr-v3 .jbot-privacy { padding: 0.75rem 1rem 0; font-size: 0.7rem; line-height: 1.5; opacity: 0.5; }
.tr-v3 .jbot-privacy a { text-decoration: underline; text-underline-offset: 2px; }

.tr-v3 .jbot-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem 1rem; }
.tr-v3 .jbot-input {
  flex: 1 1 auto; min-inline-size: 0;
  padding: 0.6rem 0.9rem;
  font: inherit; font-size: 0.9rem; color: inherit;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--tr-line-dark);
  border-radius: var(--tr-r-full);
}
.tr-v3 .jbot-input:focus { outline: none; border-color: rgba(255,255,255,.35); }
.tr-v3 .jbot-input::placeholder { color: rgba(216,216,216,.4); }
.tr-v3 .jbot-send {
  flex: 0 0 auto; inline-size: 2.25rem; block-size: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--tr-white); color: var(--tr-black);
}
.tr-v3 .jbot-send:disabled, .tr-v3 .jbot-input:disabled { opacity: 0.45; cursor: not-allowed; }
.tr-v3 .jbot-send svg { inline-size: 1rem; block-size: 1rem; }
/* في RTL يُقلب رأس سهم الإرسال ليشير لجهة الكتابة */
[dir="rtl"] .tr-v3 .jbot-send svg { transform: scaleX(-1); }

/* واتساب */
.tr-v3 .wa-fab {
  position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 60;
  display: grid; place-items: center;
  inline-size: 3.5rem; block-size: 3.5rem;
  border-radius: var(--tr-r-full);
  background: #25D366; color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: transform var(--tr-dur) var(--tr-ease);
}
.tr-v3 .wa-fab:hover { transform: translateY(-3px); }
.tr-v3 .wa-fab svg { inline-size: 1.65rem; block-size: 1.65rem; }
.tr-v3 .wa-ping { display: none; }

/* العودة للأعلى */
.tr-v3 .to-top {
  position: fixed; inset-block-end: 5.75rem; inset-inline-end: 1.5rem; z-index: 55;
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border: 1px solid var(--tr-glass);
  border-radius: var(--tr-r-full);
  background: rgba(0, 0, 0, 0.5);
  color: var(--tr-light-font);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--tr-dur) var(--tr-ease), visibility 0s linear var(--tr-dur), transform var(--tr-dur) var(--tr-ease);
}
.tr-v3 .to-top.has { opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s; }
.tr-v3 .to-top:hover { transform: translateY(-3px); }

@media (max-width: 640px) {
  .tr-v3 .jbot { inset-block-end: 1rem; inset-inline-start: 1rem; }
  .tr-v3 .wa-fab { inset-block-end: 1rem; inset-inline-end: 1rem; }
  .tr-v3 .to-top { inset-block-end: 5rem; inset-inline-end: 1rem; }
}

/* ============================================================================
   23. مكوّنات المحتوى — أسئلة، مؤشرات، تقنيات، منهجية، شركاء
   ============================================================================ */

/* --- أكورديون الأسئلة --- */
.tr-faq { border-block-start: 1px solid rgba(67, 67, 67, 0.2); }
.tr-block--dark .tr-faq, .tr-block--dark .tr-faq__item { border-color: var(--tr-line-dark); }
.tr-faq__item { border-block-end: 1px solid rgba(67, 67, 67, 0.2); }
.tr-faq__q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  inline-size: 100%;
  padding-block: 1.75rem;
  text-align: start;
}
.tr-faq__num { font-family: var(--tr-mono); font-size: 0.75rem; opacity: 0.5; }
.tr-faq__label { font-family: var(--tr-display); font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.03em; }
.tr-faq__sign { position: relative; inline-size: 0.875rem; block-size: 0.875rem; flex: 0 0 auto; }
.tr-faq__sign::before, .tr-faq__sign::after {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  background: currentColor; transition: transform var(--tr-dur) var(--tr-ease);
}
.tr-faq__sign::before { inline-size: 100%; block-size: 1px; translate: -50% -50%; }
.tr-faq__sign::after  { inline-size: 1px; block-size: 100%; translate: -50% -50%; }
.tr-faq__item.is-open .tr-faq__sign::after { transform: scaleY(0); }
/* grid-template-rows من 0fr إلى 1fr يعطي انسيابًا حقيقيًا بلا ارتفاع ثابت */
.tr-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--tr-ease); }
.tr-faq__item.is-open .tr-faq__a { grid-template-rows: 1fr; }
.tr-faq__a > div { overflow: hidden; }
.tr-faq__a p { padding-block-end: 1.75rem; padding-inline-start: 2.5rem; max-inline-size: 52rem; line-height: 1.9; opacity: 0.75; }

/* --- شبكة المؤشرات --- */
.tr-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(67,67,67,.2); border: 1px solid rgba(67,67,67,.2); border-radius: var(--tr-r-lg); overflow: hidden; }
@media (min-width: 768px) { .tr-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-metric { display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem; background: var(--tr-white); }
.tr-metric__v { font-family: var(--tr-display); font-size: 2.75rem; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.tr-metric__l { font-size: 0.95rem; line-height: 1.7; opacity: 0.65; }
.tr-block--dark .tr-metrics { background: var(--tr-line-dark); border-color: var(--tr-line-dark); }
.tr-block--dark .tr-metric { background: var(--tr-hero); }

/* --- وسوم التقنيات --- */
.tr-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tr-tag {
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(67, 67, 67, 0.28);
  border-radius: var(--tr-r-full);
  font-family: var(--tr-mono);
  font-size: 0.75rem;
  letter-spacing: -0.04em;
}
.tr-block--dark .tr-tag { border-color: var(--tr-line-dark); }

/* --- خطوات المنهجية --- */
.tr-steps { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(67,67,67,.2); border-block: 1px solid rgba(67,67,67,.2); }
@media (min-width: 768px) { .tr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-step { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: var(--tr-white); }
.tr-step__n { font-family: var(--tr-mono); font-size: 0.75rem; opacity: 0.5; }
.tr-step__t { font-family: var(--tr-display); font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.03em; }
.tr-block--dark .tr-steps { background: var(--tr-line-dark); border-color: var(--tr-line-dark); }
.tr-block--dark .tr-step { background: var(--tr-hero); }

/* --- شبكة الشركاء الثابتة — تعرض كل ما هو مفعّل في لوحة التحكم --- */
.tr-marquee { position: relative; overflow: visible; }
.tr-marquee__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  inline-size: 100%;
}
@media (min-width: 640px) { .tr-marquee__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-marquee__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.tr-marquee__item {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: 7.5rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(67,67,67,.18);
  border-radius: var(--tr-r-md);
  background: rgba(255,255,255,.76);
  color: var(--tr-dark-font);
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 8px 24px rgba(76,29,149,.06);
  transition: transform var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease), background var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease);
}
.tr-marquee__item--static { cursor: default; }
.tr-marquee__logo {
  display: grid;
  place-items: center;
  inline-size: 5.25rem;
  block-size: 5.25rem;
  padding: .55rem;
  border: 1px solid rgba(124,58,237,.16);
  border-radius: calc(var(--tr-r-md) - .35rem);
  background: linear-gradient(145deg, #fff, rgba(245,241,255,.88));
  overflow: hidden;
}
.tr-marquee__logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transition: opacity var(--tr-dur) var(--tr-ease), filter var(--tr-dur) var(--tr-ease), transform var(--tr-dur) var(--tr-ease);
}
.tr-marquee__fallback {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  border-radius: .75rem;
  background: linear-gradient(135deg, #7c3aed, #21bfe8);
  color: #fff;
  font-family: var(--tr-display);
  font-size: 1.5rem;
  font-weight: 800;
}
.tr-marquee__copy { display: flex; min-inline-size: 0; flex-direction: column; gap: .35rem; }
.tr-marquee__copy strong {
  color: var(--tr-dark-font);
  font-family: var(--tr-display);
  font-size: 1rem;
  line-height: 1.45;
}
.tr-marquee__copy small { color: rgba(11,8,24,.52); font-size: .72rem; font-weight: 700; }
.tr-marquee__arrow {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid rgba(124,58,237,.24);
  border-radius: 999px;
  color: #7c3aed;
  font-size: 1rem;
  transition: color var(--tr-dur) var(--tr-ease), background var(--tr-dur) var(--tr-ease), transform var(--tr-dur) var(--tr-ease);
}
.tr-marquee__item:hover,
.tr-marquee__item:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(124,58,237,.48);
  background: #fff;
  box-shadow: 0 16px 40px rgba(76,29,149,.14);
  outline: none;
}
.tr-marquee__item:hover .tr-marquee__logo img,
.tr-marquee__item:focus-visible .tr-marquee__logo img { opacity: 1; filter: none; transform: scale(1.05); }
.tr-marquee__item:hover .tr-marquee__arrow,
.tr-marquee__item:focus-visible .tr-marquee__arrow { color: #fff; background: #7c3aed; transform: translate(-2px,-2px); }
@media (max-width: 767px) {
  .tr-marquee__item { grid-template-columns: 4.5rem minmax(0, 1fr) auto; min-inline-size: 0; min-block-size: 6.5rem; padding: .7rem; }
  .tr-marquee__logo { inline-size: 4.5rem; block-size: 4.5rem; }
  .tr-marquee__copy strong { font-size: .9rem; }
}

/* ============================================================================
   24. تشكّل الشعار ثلاثي الأبعاد
   ثلاث طبقات داخل الغلاف المثبّت: الخطوط التفاعلية، شظايا الشعار، والوميض.
   ============================================================================ */
.tr-hero__lines,
.tr-hero__logo3d {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.tr-hero__lines  { z-index: 1; transition: opacity 200ms linear; }
.tr-hero__logo3d { z-index: 2; }
.tr-hero__lines canvas,
.tr-hero__logo3d canvas { inline-size: 100%; block-size: 100%; display: block; }

/* الوميض: طبقة بيضاء تُضاء لحظة التشكّل ولحظة التفكّك.
   screen يجعلها تُشعّ فوق الأسود بدل أن تغسله. */
.tr-hero__flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 60% 42% at 50% 50%, #ffffff 0%, rgba(196,168,255,.55) 38%, transparent 72%);
  will-change: opacity;
}

/* بلا حركة: يبقى السواد ساكنًا بلا ومض ولا شظايا */
@media (prefers-reduced-motion: reduce) {
  .tr-hero__logo3d, .tr-hero__flash { display: none; }
}

/* احتياط: بلا تثبيت (تقليل الحركة أو غياب GSAP) يعود المسار للتمرير باللمس،
   وإلا بقيت البطاقات محجوبة خلف overflow:hidden بلا وسيلة للوصول إليها. */
.tr-work.is-static .tr-work__viewport {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tr-work.is-static .tr-work__viewport::-webkit-scrollbar { display: none; }
.tr-work.is-static .tr-work__intro,
.tr-work.is-static .tr-work__item { scroll-snap-align: center; }

/* ============================================================================
   25. روبوت البطل
   منقول عن التصميم السابق لكن بلغة V3: رمادي/بنفسجي بدل التدرّج الملوّن.
   يقع داخل .tr-hero__stage فيتلاشى مع بدء تجمّع الشعار — لا تصادم بينهما.
   ============================================================================ */
.tr-hero__bot {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  inline-size: 100%;
  min-block-size: 0;                /* يسمح للعنصر بالانكماش داخل flex */
  pointer-events: none;
  /* إزاحة لطيفة تتبع المؤشّر — يضبطها الجافاسكربت */
  transform: translate3d(calc(var(--tr-bot-mx, 0) * 10px), calc(var(--tr-bot-my, 0) * 8px), 0);
  transition: transform 400ms var(--tr-ease);
}

.tr-hero__bot-fig {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  block-size: 100%;
  animation: trBotFloat 5.6s ease-in-out infinite;
}
.tr-hero__bot-fig img {
  inline-size: auto;
  block-size: min(42svh, 22rem);
  max-inline-size: 82vw;
  object-fit: contain;
  /* الروبوت ملوّن أصلًا؛ نخفّف تشبّعه ليجلس داخل لوحة V3 الرمادية */
  filter: saturate(0.55) contrast(1.05) drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}
@media (min-width: 768px)  { .tr-hero__bot-fig img { block-size: min(48svh, 26rem); } }
@media (min-width: 1024px) { .tr-hero__bot-fig img { block-size: min(52svh, 30rem); } }

/* هالة خلفية تفصل الروبوت عن السواد */
.tr-hero__bot-halo {
  position: absolute;
  z-index: 1;
  inline-size: min(34rem, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.20), rgba(109, 40, 217, 0.07) 44%, transparent 70%);
  filter: blur(6px);
  animation: trBotHalo 4.4s ease-in-out infinite;
}

/* حلقتا طاقة تدوران حول قاعدة الروبوت */
.tr-hero__bot-rings {
  position: absolute;
  z-index: 3;
  inline-size: min(30rem, 76vw);
  aspect-ratio: 1;
  pointer-events: none;
}
.tr-hero__bot-rings svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.tr-hero__bot-rings .tr-ring {
  fill: none;
  stroke: rgba(196, 168, 255, 0.55);
  stroke-width: 1;
  stroke-dasharray: 14 86;
  animation: trRingFlow 5.4s linear infinite;
}
.tr-hero__bot-rings .tr-ring--b { stroke: rgba(216, 216, 216, 0.30); animation-duration: 7.8s; animation-direction: reverse; }

@keyframes trBotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.1rem); } }
@keyframes trBotHalo  { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes trRingFlow { to { stroke-dashoffset: -100; } }

@media (prefers-reduced-motion: reduce) {
  .tr-hero__bot { transform: none; }
  .tr-hero__bot-fig, .tr-hero__bot-halo, .tr-hero__bot-rings .tr-ring { animation: none; }
}

/* ============================================================================
   26. تصحيح ارتفاع السطر للعربية
   ---------------------------------------------------------------------------
   قيم العناوين (0.90–1.05) مضبوطة للخط اللاتيني. العربية أعمق صعودًا ونزولًا
   (ا ل ك مقابل ج ح ي ن)، فارتفاع سطر دون 1 يجعل الأسطر تتشابك.
   كذلك التتبّع السالب يضغط وصلات الحروف المتصلة، فنلغيه.
   محصور في سياق RTL حتى يبقى الضبط اللاتيني كما صُمِّم.
   ============================================================================ */
[dir="rtl"] .tr-v3 .t-h1,
[dir="rtl"] .tr-v3 h1            { line-height: 1.4;  letter-spacing: -0.01em; }
[dir="rtl"] .tr-v3 .t-h2,
[dir="rtl"] .tr-v3 h2            { line-height: 1.4;  letter-spacing: -0.01em; }
[dir="rtl"] .tr-v3 .t-h3,
[dir="rtl"] .tr-v3 h3            { line-height: 1.45; letter-spacing: normal; }
[dir="rtl"] .tr-v3 .t-label      { line-height: 1.5;  letter-spacing: normal; }

[dir="rtl"] .tr-v3 .tr-index__title { line-height: 1.45; letter-spacing: -0.01em; }
[dir="rtl"] .tr-v3 .tr-tile__title  { line-height: 1.45; letter-spacing: -0.01em; }
[dir="rtl"] .tr-v3 .tr-faq__label   { line-height: 1.45; letter-spacing: normal; }
[dir="rtl"] .tr-v3 .tr-step__t      { line-height: 1.45; letter-spacing: normal; }
[dir="rtl"] .tr-v3 .tr-prose h2     { line-height: 1.3; }
[dir="rtl"] .tr-v3 .tr-prose h3     { line-height: 1.4; }
[dir="rtl"] .tr-v3 .tr-footer__col h2 { line-height: 1.4; letter-spacing: normal; }
[dir="rtl"] .tr-v3 .tr-fact-box .t-mono { line-height: 1.7; }

/* الأرقام لاتينية ولا نزول فيها — تبقى مضغوطة كما صُمِّمت */
[dir="rtl"] .tr-v3 .t-num,
[dir="rtl"] .tr-v3 .tr-metric__v,
[dir="rtl"] .tr-v3 .tr-err__code { line-height: 1; letter-spacing: -0.05em; }

/* العنوان العربي الضخم يحتاج توازنًا في الأسطر لا قصًّا حادًّا */
[dir="rtl"] .tr-v3 h1,
[dir="rtl"] .tr-v3 h2 { text-wrap: balance; }

/* ============================================================================
   27. تصحيح تباين الأسطح الفاتحة
   ---------------------------------------------------------------------------
   .tr-facts و.tr-work و.tr-quotes تضع خلفيات فاتحة لكنها لم تحدّد لون نص،
   فكان كل ما بداخلها يرث --tr-light-font (#D8D8D8) فيصير رماديًا فاتحًا
   فوق أبيض — نصّ شبه غير مقروء. نثبّت لون الحبر على كل سطح فاتح.
   ============================================================================ */
.tr-facts,
.tr-work,
.tr-quotes { color: var(--tr-dark-font); }

/* البطاقات الداكنة داخل تلك الأقسام تستعيد الحبر الفاتح */
.tr-facts .tr-card--dark { color: var(--tr-light-font); }

/* مكوّنات ذات خلفية بيضاء صريحة */
.tr-metric,
.tr-step,
.tr-tile { color: var(--tr-dark-font); }
.tr-block--dark .tr-metric,
.tr-block--dark .tr-step,
.tr-block--dark .tr-tile { color: var(--tr-light-font); }

/* التسميات الثانوية كانت 0.65 شفافية فوق رمادي — نرفعها لتتجاوز 4.5:1 */
.tr-metric__l { opacity: 0.78; }
.tr-step__n   { opacity: 0.62; }
.tr-index__desc { opacity: 0.75; }
.tr-tile__desc  { opacity: 0.8; }

/* ============================================================================
   28. عمود حسابات التواصل — القسم الختامي
   مرصوص رأسيًا فوق حقّ النشر، بلغة V3: دوائر محيطية رفيعة تنقلب عند اللمس.
   ============================================================================ */
.tr-final__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  /* الأزرار العائمة (واتساب والعودة للأعلى) مثبّتة على هذه الجهة،
     فنترك لها ممرًّا حتى لا تتراكب مع الأيقونات وحقّ النشر. */
  padding-inline-end: 4rem;
}

.tr-social { display: flex; flex-direction: column; gap: 0.5rem; }

.tr-social__link {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--tr-r-full);
  color: var(--tr-dark-font);
  transition: background var(--tr-dur) var(--tr-ease),
              border-color var(--tr-dur) var(--tr-ease),
              color var(--tr-dur) var(--tr-ease),
              transform var(--tr-dur) var(--tr-ease);
}
.tr-social__link svg { inline-size: 1rem; block-size: 1rem; }
.tr-social__link:hover,
.tr-social__link:focus-visible {
  background: var(--tr-black);
  border-color: var(--tr-black);
  color: var(--tr-white);
  transform: translateY(-2px);
}

/* على الأسطح الداكنة ينقلب الحبر */
.tr-block--dark .tr-social__link,
.tr-footer .tr-social__link { border-color: var(--tr-line-dark); color: var(--tr-light-font); }
.tr-block--dark .tr-social__link:hover,
.tr-footer .tr-social__link:hover { background: var(--tr-white); border-color: var(--tr-white); color: var(--tr-black); }

/* على أجهزة اللمس تتقلّص الأيقونة إلى 26px بفعل الجذر المائع، وهو أصغر من
   الحدّ الآمن لمساحة اللمس. نكبّرها ونوسّع الفجوة بحيث تصير مساحة الهدف ~42px
   دون أن تتداخل أهداف الأيقونات المتجاورة. */
@media (hover: none) {
  .tr-social { gap: 0.7rem; }
  .tr-social__link { position: relative; inline-size: 2.9rem; block-size: 2.9rem; }
  .tr-social__link::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 3.6rem;
    block-size: 3.6rem;
    translate: -50% -50%;
  }
  [dir="rtl"] .tr-social__link::after { translate: 50% -50%; }
}

/* ============================================================================
   29. بطاقة اعتمادات الفريق
   شارات الشهادات تتبدّل آليًا مع تلاشٍ متقاطع، واسم الشهادة يتبعها.
   ============================================================================ */
.tr-card--creds .tr-creds {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex: 1 1 auto;
  min-block-size: 0;
}

/* المسرح يحجز مساحة ثابتة فلا يقفز التخطيط عند تبدّل الشارات */
.tr-card--creds .tr-creds__stage {
  position: relative;
  inline-size: 100%;
  block-size: 8rem;
}
.tr-card--creds .tr-creds__stage img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-inline-size: 82%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 620ms var(--tr-ease), transform 620ms var(--tr-ease);
}
.tr-card--creds .tr-creds__stage img.is-on { opacity: 1; transform: scale(1); }

.tr-card--creds .tr-creds__name {
  min-block-size: 2.4em;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  opacity: 0.72;
  transition: opacity 300ms var(--tr-ease);
}
.tr-card--creds .tr-creds__name.is-swapping { opacity: 0; }

/* هالة خفيفة تفصل الشارة عن سواد البطاقة */
.tr-card--creds .tr-creds::before {
  content: "";
  position: absolute;
  inline-size: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16), transparent 68%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tr-card--creds .tr-creds__stage img { transition: none; }
}

/* ============================================================================
   31. شارتا متجرَي التطبيقات — أسفل العلامة في القسم الختامي
   ============================================================================ */
.tr-final__mark {
  flex-direction: column;
  gap: 2.5rem;
}
.tr-final__logo {
  inline-size: min(60%, 40rem);
  block-size: auto;
  opacity: 0.85;
}

.tr-apps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.tr-app {
  display: block;
  border-radius: 0.55rem;
  transition: transform var(--tr-dur) var(--tr-ease), opacity var(--tr-dur) var(--tr-ease);
}
.tr-app img {
  block-size: 2.75rem;
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
}
.tr-app:hover,
.tr-app:focus-visible { transform: translateY(-3px); opacity: 0.88; }

@media (max-width: 480px) {
  .tr-final__mark { gap: 1.75rem; }
  .tr-app img { block-size: 3.2rem; }   /* أكبر على الجوال لتكفي مساحةُ اللمس */
}

/* ============================================================================
   32. زرّ الموسيقى الخلفية
   مكتوم: أيقونة سمّاعة مشطوبة. يعمل: معادل صوتي بأربعة أعمدة نابضة.
   ============================================================================ */
.tr-sound { position: relative; overflow: hidden; }
.tr-sound__icon { inline-size: 55%; block-size: auto; transition: opacity var(--tr-dur) var(--tr-ease); }
.tr-sound.is-on .tr-sound__icon { opacity: 0; }
/* الشطبة تختفي أولًا عند التشغيل فيُقرأ التحوّل */
.tr-sound.is-on .tr-sound__slash { opacity: 0; }

.tr-sound__eq {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--tr-dur) var(--tr-ease);
}
.tr-sound.is-on .tr-sound__eq { opacity: 1; }
.tr-sound__eq i {
  inline-size: 2px;
  block-size: 30%;
  border-radius: 1px;
  background: currentColor;
  animation: trEq 1.05s ease-in-out infinite;
}
.tr-sound__eq i:nth-child(2) { animation-delay: .16s; }
.tr-sound__eq i:nth-child(3) { animation-delay: .32s; }
.tr-sound__eq i:nth-child(4) { animation-delay: .48s; }
@keyframes trEq { 0%, 100% { block-size: 22%; } 50% { block-size: 62%; } }

/* نبضة خفيفة تلفت النظر إلى الزرّ حين يكون الصوت مُعلَّقًا بانتظار تفاعل */
.tr-sound.is-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: .6;
  animation: trSoundPing 1.9s ease-out infinite;
}
@keyframes trSoundPing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tr-sound__eq i, .tr-sound.is-pending::after { animation: none; }
}

/* ============================================================================
   33. الأزرار العائمة كمجسّمات
   ---------------------------------------------------------------------------
   لا دائرة ولا خلفية: الروبوت نفسه هو الزرّ، واقفًا في الصفحة.
   التمييز باللون يأتي من توهّج أسفله ومن إزاحة تدرّج لونه.
   ============================================================================ */
.tr-v3 .tr-fab {
  /* بلا position هنا: زرّ واتساب مثبّت بقاعدته الخاصة، وزرّ الشات بوت
     نسبيّ داخل حاوية .jbot المثبّتة. فرض fixed كان يُفقده أبعاده. */
  display: grid;
  place-items: end center;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transition: transform 420ms var(--tr-ease), filter 420ms var(--tr-ease);
}
.tr-v3 .tr-fab:hover,
.tr-v3 .tr-fab:focus-visible { transform: translateY(-6px) scale(1.04); }

.tr-v3 .tr-fab .tr-fab__face { display: block; line-height: 0; }
.tr-v3 .tr-fab .tr-fab__face img {
  inline-size: auto;
  block-size: 5.5rem;                 /* حجم معقول: حاضر بلا أن يزاحم المحتوى */
  object-fit: contain;
  animation: trFabFloat 5.2s ease-in-out infinite;
}

/* توهّج أرضي يفصل المجسّم عن الخلفية ويحمل لون كل زرّ */
.tr-v3 .tr-fab::before {
  content: "";
  position: absolute;
  inset-block-end: -0.4rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 4.2rem;
  block-size: 1.1rem;
  border-radius: 50%;
  filter: blur(7px);
  opacity: .55;
  transition: opacity 420ms var(--tr-ease);
}
.tr-v3 .tr-fab:hover::before { opacity: .85; }

/* واتساب — أخضر: نُزيح تدرّج لون الروبوت البنفسجي نحو الأخضر */
.tr-v3 .tr-fab--wa .tr-fab__face img {
  filter: hue-rotate(212deg) saturate(1.25)
          drop-shadow(0 10px 16px rgba(0, 0, 0, .45))
          drop-shadow(0 0 14px rgba(37, 211, 102, .5));
}
.tr-v3 .tr-fab--wa::before { background: #25D366; }

/* الشات بوت — بنفسجي العلامة كما هو */
.tr-v3 .tr-fab--bot .tr-fab__face img {
  filter: saturate(1.1)
          drop-shadow(0 10px 16px rgba(0, 0, 0, .45))
          drop-shadow(0 0 14px rgba(168, 85, 247, .55));
}
.tr-v3 .tr-fab--bot::before { background: #A855F7; }

/* شارة المنصّة: قرص صغير عند الكتف يُبقي هوية الزرّ مقروءة */
.tr-v3 .tr-fab__badge {
  position: absolute;
  inset-block-end: 0.9rem;
  inset-inline-end: -0.2rem;
  display: grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.tr-v3 .tr-fab__badge svg { inline-size: 62%; block-size: 62%; }
.tr-v3 .tr-fab--wa  .tr-fab__badge { background: #25D366; }
.tr-v3 .tr-fab--bot .tr-fab__badge { background: #A855F7; }

/* حالة الإغلاق: يختفي المجسّم وتظهر علامة × */
.tr-v3 .jbot.is-open .tr-fab--bot .tr-fab__face,
.tr-v3 .jbot.is-open .tr-fab--bot .tr-fab__badge { display: none; }
.tr-v3 .jbot.is-open .tr-fab--bot {
  inline-size: 3rem; block-size: 3rem;
  place-items: center;
  border-radius: var(--tr-r-full);
  background: var(--tr-white);
  color: var(--tr-black);
}
.tr-v3 .jbot.is-open .tr-fab--bot::before { display: none; }

/* مواضع المجسّمين */
.tr-v3 .jbot-fab { position: relative; z-index: 1; }
/* المجسّم يحمل صنف .jic ليعمل تبديل الفتح/الإغلاق في chatbot.js،
   لكن قاعدة .jic القديمة تُقيّده بـ1.5rem فينكمش صندوق الزرّ. نحرّره. */
.tr-v3 .jbot-fab .tr-fab__face.jic { inline-size: auto; block-size: auto; }
.tr-v3 .jbot-fab .tr-fab__badge.jic { inline-size: 1.6rem; block-size: 1.6rem; }
.tr-v3 .jbot   { inset-block-end: 1rem; inset-inline-start: 1.25rem; }
.tr-v3 .wa-fab { inset-block-end: 1rem; inset-inline-end: 1.25rem; }
.tr-v3 .to-top { inset-block-end: 7.5rem; }
.tr-v3 .wa-ping, .tr-v3 .jbot-ping { display: none; }

/* نافذة المحادثة تنفتح فوق المجسّم */
.tr-v3 .jbot-win { inset-block-end: 6.5rem; }

@keyframes trFabFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.45rem); } }

@media (max-width: 640px) {
  .tr-v3 .tr-fab .tr-fab__face img { block-size: 4.4rem; }
  .tr-v3 .tr-fab::before { inline-size: 3.4rem; }
  .tr-v3 .jbot-win { inset-block-end: 5.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-v3 .tr-fab .tr-fab__face img { animation: none; }
}

/* ============================================================================
   34. القسم الختامي — توزيع على أعمدة
   ---------------------------------------------------------------------------
   القياس أظهر أن الفراغ أفقي لا رأسي: الكتل كانت مكدّسة، كل واحدة تحتلّ
   سطرًا كامل العرض ومحتواها في وسطه (الشعار كان يشغل 40% فقط).
   ثلاثة أعمدة تملأ العرض وتُقصّر القسم في آنٍ واحد.
   ============================================================================ */
.tr-final {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  min-block-size: 100svh;
  padding-block: 7rem 2.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(circle at 78% 10%, rgba(124, 58, 237, .24), transparent 34rem),
    linear-gradient(150deg, #0c0718 0%, #05030a 72%);
  color: var(--tr-light-font);
}

.tr-final__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3.5rem;
  inline-size: 100%;
}
@media (min-width: 900px) {
  /* الرسالة (أولًا في DOM) تقع يمينًا في RTL، ثم العلامة، ثم شريط الحسابات يسارًا */
  .tr-final__grid { grid-template-columns: 1.05fr 1fr auto; gap: 3rem; }
}

/* --- عمود الرسالة --- */
.tr-final__say { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; }
.tr-final__say .t-small { max-inline-size: 26rem; color: rgba(245, 243, 255, .78); }
.tr-final .tr-btn--on-light { color: var(--tr-light-font); }

/* --- عمود العلامة --- */
.tr-final__brand { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.tr-final__identity { display: flex; flex-direction: column; align-items: center; gap: .4rem; inline-size: 100%; }
.tr-final__logo {
  inline-size: 100%;
  max-inline-size: 26rem;
  block-size: auto;
  opacity: 1;
  filter: brightness(1.16) saturate(1.1) drop-shadow(0 12px 32px rgba(137, 55, 255, .3));
}

/* --- السجل التجاري والرقم الضريبي في الفوتر --- */
.tr-registry-cluster {
  display: grid;
  gap: .7rem;
  inline-size: min(100%, 25rem);
}
.tr-commerce-reg,
.tr-tax-reg {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  inline-size: 100%;
  padding: .8rem 1rem;
  border: 1px solid rgba(124,58,237,.28);
  border-radius: var(--tr-r-md);
  color: var(--tr-dark-font);
  background: rgba(255,255,255,.78);
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(76,29,149,.09);
  transition: transform var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease);
}
.tr-commerce-reg:hover,
.tr-commerce-reg:focus-visible { transform: translateY(-3px); border-color: rgba(124,58,237,.56); box-shadow: 0 18px 40px rgba(76,29,149,.16); outline: none; }
.tr-commerce-reg__mark {
  display: grid;
  place-items: center;
  inline-size: 4.75rem;
  block-size: 3.25rem;
  padding: .45rem;
  border-radius: .75rem;
  background: #10233f;
  overflow: hidden;
}
.tr-commerce-reg__mark img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.tr-commerce-reg__body { display: flex; min-inline-size: 0; flex-direction: column; gap: .25rem; }
.tr-commerce-reg__body strong { font-family: var(--tr-display); font-size: .95rem; line-height: 1.4; }
.tr-commerce-reg__body span { font-family: var(--tr-mono); font-size: .72rem; opacity: .62; }
.tr-commerce-reg__go { color: #7c3aed; font-size: 1.1rem; }
.tr-tax-reg { grid-template-columns: 4.75rem minmax(0, 1fr); }
.tr-tax-reg__mark {
  display: grid;
  place-items: center;
  inline-size: 4.75rem;
  block-size: 3.25rem;
  padding: .35rem;
  border-radius: .75rem;
  background: #fff;
  overflow: hidden;
}
.tr-tax-reg__mark img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.tr-tax-reg__body { display: flex; min-inline-size: 0; flex-direction: column; gap: .25rem; }
.tr-tax-reg__body strong { font-family: var(--tr-display); font-size: .88rem; line-height: 1.4; }
.tr-tax-reg__body span { font-family: var(--tr-mono); font-size: .7rem; opacity: .68; }
.tr-footer .tr-registry-cluster { margin-block-start: 1.5rem; }
.tr-footer .tr-commerce-reg,
.tr-footer .tr-tax-reg { border-color: rgba(255,255,255,.18); color: var(--tr-light-font); background: rgba(255,255,255,.07); box-shadow: none; }
.tr-footer .tr-commerce-reg:hover,
.tr-footer .tr-commerce-reg:focus-visible { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.11); }
@media (max-width: 480px) {
  .tr-commerce-reg { grid-template-columns: 4rem minmax(0,1fr) auto; gap: .75rem; }
  .tr-tax-reg { grid-template-columns: 4rem minmax(0,1fr); gap: .75rem; }
  .tr-commerce-reg__mark,
  .tr-tax-reg__mark { inline-size: 4rem; block-size: 2.8rem; }
}

/* --- شريط الحسابات: عمود رفيع على الحافّة --- */
.tr-final__rail { flex-direction: column; gap: 0.6rem; }
.tr-final .tr-social__link {
  border-color: rgba(255, 255, 255, .34);
  color: var(--tr-light-font);
  background: rgba(255, 255, 255, .04);
}
.tr-final .tr-social__link:hover,
.tr-final .tr-social__link:focus-visible {
  border-color: var(--tr-white);
  background: var(--tr-white);
  color: var(--tr-black);
}
@media (max-width: 899px) {
  /* دون الشاشات العريضة يصير صفًّا أفقيًا فلا يُطيل الصفحة بلا داعٍ */
  .tr-final__rail { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* --- الشريط السفلي --- */
.tr-final__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  inline-size: 100%;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid rgba(255, 255, 255, .2);
}
.tr-final__copyright {
  color: rgba(245, 243, 255, .74);
  font-family: var(--tr-mono);
  font-size: .72rem;
  line-height: 1.7;
}
.tr-final__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.25rem;
  color: rgba(245, 243, 255, .9);
  font-size: .8rem;
  font-weight: 700;
}
.tr-final__legal a {
  position: relative;
  padding-block: .35rem;
}
.tr-final__legal a + a::before {
  content: "";
  position: absolute;
  inset-inline-start: -.7rem;
  inset-block: .55rem;
  inline-size: 1px;
  background: rgba(255, 255, 255, .28);
}
.tr-final__bar a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* الأزرار العائمة تحتلّ زاويتي الأسفل — نترك لها ممرًّا */
@media (max-width: 899px) {
  .tr-final__bar { padding-inline: 1rem; justify-content: center; text-align: center; }
  .tr-final__legal { justify-content: center; }
}