/* =========================================================
   واكب — ملف التنسيق الرئيسي
   الأقسام:
   1. المتغيرات (مأخوذة من متغيرات Figma)
   2. الخطوط
   3. الأساسيات
   4. عناصر مشتركة (أزرار، شارات، أيقونات)
   5. القائمة العلوية
   6. الواجهة الرئيسية ونافذة البحث
   7. أقسام الصفحة (العملاء، من نحن، الخدمات، أودو، الشركاء، التقنيات، الآراء، لماذا واكب، الأسئلة، الدعوة، التذييل)
   8. الموشن
   9. التجاوب
   ========================================================= */


/* =========================================================
   1. المتغيرات
   الأسماء نفسها في Figma بعد تحويل "/" إلى "-"
   ========================================================= */

/* ---------- الألوان الأساسية (Primitives) ---------- */
:root {
  --navy-950: #000b26;
  --navy-900: #00123a;
  --navy-800: #031b52;
  --navy-700: #062b7c;

  --blue-700: #01236f;
  --blue-600: #012c8b;
  --blue-500: #408dcc;
  --blue-300: #87c9ed;
  --blue-100: #dceefa;
  --blue-50:  #f0f7fd;

  --neutral-0:   #ffffff;
  --neutral-50:  #f6f8fb;
  --neutral-100: #edf0f5;
  --neutral-200: #dde2eb;
  --neutral-300: #b9c1d1;
  --neutral-400: #9ba2b2;
  --neutral-500: #6f7a91;
  --neutral-600: #4e586e;
  --neutral-900: #141a2b;

  --orange-500: #fdb956;
  --green-500:  #25d366;
  --green-600:  #1eb257;
  --teal-500:   #40b7b4;

  --alpha-white-4:  rgba(255, 255, 255, 0.04);
  --alpha-white-6:  rgba(255, 255, 255, 0.06);
  --alpha-white-8:  rgba(255, 255, 255, 0.08);
  --alpha-white-10: rgba(255, 255, 255, 0.10);
  --alpha-white-12: rgba(255, 255, 255, 0.12);
  --alpha-white-16: rgba(255, 255, 255, 0.16);
  --alpha-white-24: rgba(255, 255, 255, 0.24);
  --alpha-white-70: rgba(255, 255, 255, 0.70);
  --alpha-white-90: rgba(255, 255, 255, 0.90);
  --alpha-navy-10:  rgba(0, 18, 59, 0.10);

  /* ---------- المسافات (Spacing) ---------- */
  --spacing-2xs: 4px;
  --spacing-xs:  8px;
  --spacing-sm:  12px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --spacing-5xl: 120px;

  /* ---------- الحواف (Radius) ---------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 999px;

  /* ---------- الخطوط (Typography) ---------- */
  --font-family: "Somar Sans", system-ui, sans-serif;

  --display-size: 64px;    --display-weight: 700;  --display-line: 1.25;
  --heading-h1-size: 48px; --heading-h1-weight: 700; --heading-h1-line: 1.3;
  --heading-h2-size: 36px; --heading-h2-weight: 600; --heading-h2-line: 1.35;
  --heading-h3-size: 24px; --heading-h3-weight: 600; --heading-h3-line: 1.4;
  --body-large-size: 18px;  --body-large-line: 1.75;
  --body-medium-size: 16px; --body-medium-line: 1.75;
  --body-small-size: 14px;  --body-small-line: 1.7;
  --label-medium-size: 14px; --label-medium-weight: 500; --label-medium-line: 1.5;
  --label-button-size: 16px; --label-button-weight: 600; --label-button-line: 1.5;

  /* ---------- التأثيرات (Effects) ---------- */
  --glass-blur: 12px;
  --effect-glass-surface: 0 0 72px rgba(64, 141, 204, 0.10);
  --effect-glass-hover:   0 12px 40px rgba(64, 140, 204, 0.12);

  /* ---------- الحركة ---------- */
  --duration-hover: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- التخطيط ---------- */
  --container-max: 1280px;
  --page-gutter: 80px;
  --header-height: 102px;
}

/* ---------- ألوان الوضع الفاتح (Color / Light) ---------- */
:root,
[data-theme="light"] {
  --color-bg-page:          var(--neutral-0);
  --color-bg-surface:       var(--neutral-50);
  --color-bg-elevated:      var(--neutral-0);
  --color-bg-brand:         var(--blue-600);
  --color-bg-brand-hover:   var(--blue-600);
  --color-bg-brand-subtle:  var(--blue-50);
  --color-bg-whatsapp:      var(--green-500);
  --color-bg-whatsapp-hover: var(--green-600);
  --color-bg-placeholder:   var(--neutral-200);

  --color-text-primary:     var(--navy-900);
  --color-text-secondary:   var(--neutral-600);
  --color-text-brand:       var(--blue-600);
  --color-text-on-brand:    var(--neutral-0);

  --color-border-default:   var(--neutral-200);
  --color-border-brand:     var(--blue-500);

  --color-accent-default:   var(--orange-500);
  --color-accent-teal:      var(--teal-500);

  --color-glass-fill:         var(--alpha-white-6);
  --color-glass-fill-hover:   var(--alpha-white-12);
  --color-glass-border:       var(--alpha-navy-10);
  --color-glass-border-hover: var(--blue-300);

  --color-button-primary-bg:       var(--blue-600);
  --color-button-primary-bg-hover: var(--blue-700);
  --color-button-primary-text:     var(--neutral-0);

  --color-text-btn-footer:      var(--neutral-300);

  color-scheme: light;
}

/* ---------- ألوان الوضع الداكن (Color / Dark) — الافتراضي ---------- */
[data-theme="dark"] {
  --color-bg-page:          var(--navy-950);
  --color-bg-surface:       var(--navy-900);
  --color-bg-elevated:      var(--navy-800);
  --color-bg-brand:         var(--blue-500);
  --color-bg-brand-hover:   var(--navy-900);
  --color-bg-brand-subtle:  var(--navy-800);
  --color-bg-whatsapp:      var(--green-500);
  --color-bg-whatsapp-hover: var(--green-600);
  --color-bg-placeholder:   var(--neutral-600);

  --color-text-primary:     var(--neutral-0);
  --color-text-secondary:   var(--neutral-300);
  --color-text-brand:       var(--blue-300);
  --color-text-on-brand:    var(--neutral-0);

  --color-border-default:   var(--navy-700);
  --color-border-brand:     var(--blue-300);

  --color-accent-default:   var(--orange-500);
  --color-accent-teal:      var(--teal-500);

  --color-glass-fill:         var(--alpha-white-6);
  --color-glass-fill-hover:   var(--alpha-white-12);
  --color-glass-border:       var(--alpha-white-16);
  --color-glass-border-hover: var(--blue-600);

  --color-button-primary-bg:       var(--neutral-0);
  --color-button-primary-bg-hover: var(--blue-100);
  --color-button-primary-text:     var(--navy-950);
  --color-text-btn-footer:     var(--neutral-300);
  color-scheme: dark;
}


/* =========================================================
   2. الخطوط — Somar Sans (أربعة أوزان فقط)
   ========================================================= */
@font-face {
  font-family: "Somar Sans";
  src: url("assets/fonts/SomarSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("assets/fonts/SomarSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("assets/fonts/SomarSans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("assets/fonts/SomarSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   3. الأساسيات
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

/* إخفاء الصفحة لحظة تبديل النصوص إلى الإنجليزية (يمنع الوميض) */
html.is-translating body {
  visibility: hidden;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--font-family);
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-line);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

kbd {
  font-family: inherit;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-glass-border-hover);
  outline-offset: 3px;
}

main {
  position: relative;
}


/* =========================================================
   4. عناصر مشتركة
   ========================================================= */

/* ---------- سطح زجاجي (Glass/Surface) ---------- */
.glass,
.navbar,
.chip,
.badge,
.btn--secondary--footer,
.btn--secondary {
  background-color: var(--color-glass-fill);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--effect-glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* ---------- الأزرار (Button) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
  font-size: var(--label-button-size);
  font-weight: var(--label-button-weight);
  line-height: var(--label-button-line);
  white-space: nowrap;
  transition:
    background-color var(--duration-hover) ease,
    border-color var(--duration-hover) ease,
    box-shadow var(--duration-hover) ease,
    transform var(--duration-hover) ease;
}

/* أساسي */
.btn--primary {
  background-color: var(--color-bg-brand);
  color: var(--color-text-on-brand);
}
.btn--primary:hover {
  background-color: var(--color-bg-brand-hover);
  /* الإطار كظل داخلي حتى لا يتغير حجم الزر */
  box-shadow:
    inset 0 0 0 1.5px var(--color-glass-border-hover),
    var(--effect-glass-hover);
}

/* ثانوي */
.btn--secondary {
  border: 1.5px solid var(--color-border-brand);
  color: var(--color-text-primary);
}
.btn--secondary:hover {
  background-color: var(--color-glass-fill-hover);
  border-color: var(--color-glass-border-hover);
  box-shadow: var(--effect-glass-hover);
}

.btn--secondary--footer {
  border: 1.5px solid var(--color-border-brand);
  color: var(--color-text-btn-footer);
}

.btn--secondary--footer:hover {
  background-color: var(--color-glass-fill-hover);
  border-color: var(--color-glass-border-hover);
  box-shadow: var(--effect-glass-hover);
}

/* واتساب */
.btn--whatsapp {
  background-color: var(--color-bg-whatsapp);
  color: var(--color-text-on-brand);
}
.btn--whatsapp:hover {
  background-color: var(--color-bg-whatsapp-hover);
  box-shadow: var(--effect-glass-hover);
}

/* ---------- الشارة (Badge) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-brand);
}

/* ---------- زر صغير (Chip) للغة والوضع ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-primary);
  transition:
    background-color var(--duration-hover) ease,
    border-color var(--duration-hover) ease,
    box-shadow var(--duration-hover) ease;
}
.chip:hover {
  background-color: var(--color-glass-fill-hover);
  border-color: var(--color-glass-border-hover);
  box-shadow:
    inset 0 0 0 0.5px var(--color-glass-border-hover),
    var(--effect-glass-hover);
}

/* ---------- الأيقونات ----------
   الأيقونات ملفات SVG من Figma، تُلوَّن بـ currentColor عبر mask
   حتى يتغير لونها تلقائيًا مع الوضع الفاتح والداكن */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon--sun    { --icon: url("assets/icons/sun.svg"); }
.icon--moon   { --icon: url("assets/icons/moon.svg"); }
.icon--layers { --icon: url("assets/icons/layers.svg"); }
.icon--link   { --icon: url("assets/icons/link.svg"); }
.icon--server { --icon: url("assets/icons/server.svg"); }
.icon--phone  { --icon: url("assets/icons/phone.svg"); }
.icon--card   { --icon: url("assets/icons/card.svg"); }

/* الشعار وعلامته (لونهما يتبع لون النص الأساسي) */
.logo,
.mark {
  display: block;
  background-color: var(--color-text-primary);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.logo {
  --icon: url("assets/icons/logo.svg");
  width: 150.3px;
  height: 45px;
}
.mark {
  --icon: url("assets/icons/mark.svg");
  width: 24px;
  height: 13.6px;
}

/* ---------- مفتاح لوحة المفاتيح (Keycap) ---------- */
.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--spacing-xs);
  border: 1px solid var(--color-glass-border);
  border-radius: 7px;
  background-color: var(--color-glass-fill-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.5);
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-secondary);
}


/* =========================================================
   5. القائمة العلوية
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--spacing-lg) var(--page-gutter) var(--spacing-xs);
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  min-height: 70px;
  margin-inline: auto;
  padding-block: 10px;
  padding-inline-start: 28px;
  padding-inline-end: var(--spacing-sm);
  border-radius: var(--radius-full);
}

.navbar__logo {
  display: block;
  flex-shrink: 0;
}

/* الروابط */
.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

.nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--duration-hover) ease;
}

/* الخط الصغير تحت الرابط */
.nav-link::after {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-glass-border-hover);
  opacity: 0;
  transition: opacity var(--duration-hover) ease, background-color var(--duration-hover) ease;
}

.nav-link:hover {
  color: var(--color-text-primary);
}
.nav-link:hover::after {
  opacity: 1;
}

.nav-link.is-active {
  color: var(--color-text-primary);
}
.nav-link.is-active::after {
  opacity: 1;
  background-color: var(--color-accent-default);
}

/* الأزرار */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* أيقونة الوضع: الشمس في الداكن (للتحويل إلى الفاتح) والقمر في الفاتح */
.chip--icon .icon {
  color: var(--color-text-brand);
}
[data-theme="dark"] .icon--moon,
[data-theme="light"] .icon--sun {
  display: none;
}

/* زر القائمة (يظهر في الشاشات الصغيرة فقط) */
.navbar__toggle {
  display: none;
}

.burger {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
  margin-block: 5px;
}
.burger span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-text-primary);
  transition: transform var(--duration-hover) ease, opacity var(--duration-hover) ease;
}
.navbar__toggle[aria-expanded="true"] .burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.navbar__toggle[aria-expanded="true"] .burger span:nth-child(2) {
  opacity: 0;
}
.navbar__toggle[aria-expanded="true"] .burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* =========================================================
   6. الواجهة الرئيسية ونافذة البحث
   ========================================================= */

/* ---------- هالات الضوء ---------- */
.page-glows {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.glow {
  position: absolute;
  max-width: none;
}

.glow--hero {
  top: 120px;
  left: 50%; /* الهالة في المنتصف، فلا تحتاج قلبًا مع الاتجاه */
  width: 1900px;
  height: 1500px;
  translate: -50% 0;
}

.glow--round {
  top: var(--y);
  left: calc(50% + var(--x) - 670px);
  width: 1340px;
  height: 1340px;
}

/* ---------- الواجهة ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-4xl) var(--page-gutter);
  text-align: center;
}

.hero__title {
  max-width: 900px;
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: var(--display-line);
  color: var(--color-text-primary);
}

.hero__text {
  max-width: 720px;
  font-size: var(--body-large-size);
  line-height: var(--body-large-line);
  color: var(--color-text-secondary);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-md);
}

/* ---------- نافذة البحث (Launcher) ---------- */
.launcher {
  width: 780px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-glass-border);
  border-radius: 18px;
  background-color: var(--color-bg-surface);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 90px rgba(79, 140, 209, 0.35),
    0 40px 80px rgba(0, 0, 0, 0.15);
  text-align: start;
}

/* سطر البحث */
.launcher__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-glass-border);
}

.launcher__placeholder {
  font-size: var(--body-large-size);
  line-height: var(--body-large-line);
  color: var(--color-text-secondary);
}

/* النتائج */
.launcher__results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--spacing-xs) var(--spacing-xs);
  border-bottom: 1px solid var(--color-glass-border);
}

.launcher__group {
  padding-inline-start: var(--spacing-sm);
  padding-bottom: 6px;
  font-size: var(--body-small-size);
  line-height: var(--body-small-line);
  color: var(--color-text-secondary);
}

.result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 9px var(--spacing-sm);
  border-radius: 10px;
  transition: background-color var(--duration-hover) ease;
}

.result.is-selected,
.result:hover {
  background-color: var(--color-glass-fill-hover);
}

.result__main {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.result__title {
  font-size: var(--label-button-size);
  font-weight: var(--label-button-weight);
  line-height: var(--label-button-line);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.result__desc,
.result__tag {
  font-size: var(--body-small-size);
  line-height: var(--body-small-line);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.result__desc {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* مربع الأيقونة */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-glass-fill-hover);
  color: var(--color-text-brand);
}
.icon-tile .icon {
  width: 18px;
  height: 18px;
}
.icon-tile--brand {
  background-color: var(--color-bg-brand);
  color: var(--color-text-on-brand);
}

/* الشريط السفلي */
.launcher__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 10px var(--spacing-md);
  background-color: var(--color-glass-fill);
}

.launcher__brand,
.launcher__hints {
  display: flex;
  align-items: center;
}

.launcher__brand {
  gap: var(--spacing-xs);
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-secondary);
}
.launcher__brand .mark {
  background-color: var(--color-text-primary);
}

.launcher__hints {
  gap: 10px;
  font-size: var(--body-small-size);
  line-height: var(--body-small-line);
  color: var(--color-text-secondary);
}

.launcher__hint-strong {
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-primary);
}

.launcher__sep {
  width: 1px;
  height: 16px;
  background-color: var(--color-glass-border);
}


/* =========================================================
   7. أقسام الصفحة
   ========================================================= */

/* ---------- عناصر عامة للأقسام ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
}

.section {
  padding: var(--spacing-4xl) var(--page-gutter);
}

.section > .container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.section__title {
  font-size: var(--heading-h2-size);
  font-weight: var(--heading-h2-weight);
  line-height: var(--heading-h2-line);
  color: var(--color-text-primary);
}

.section__text {
  max-width: 760px;
  font-size: var(--body-large-size);
  line-height: var(--body-large-line);
  color: var(--color-text-secondary);
}

/* الشبكات */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* تصفير الهوامش الافتراضية */
figure,
blockquote {
  margin: 0;
}

/* ---------- البطاقات الزجاجية وحالة hover ---------- */
.info-card,
.service-card,
.partner-card,
.quote-card,
.faq-item,
.diagram,
.diagram__system,
.tech__item,
.odoo__panel {
  background-color: var(--color-glass-fill);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--effect-glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.info-card,
.service-card,
.faq-item,
.tech__item {
  transition:
    background-color var(--duration-hover) ease,
    border-color var(--duration-hover) ease,
    box-shadow var(--duration-hover) ease,
    transform var(--duration-hover) ease;
}

/* حالة Hover من صفحة Components: خلفية أفتح، إطار أزرق، ظل */
.info-card:hover,
.service-card:hover,
.faq-item:hover,
.tech__item:hover {
  background-color: var(--color-glass-fill-hover);
  border-color: var(--color-glass-border-hover);
  box-shadow:
    inset 0 0 0 0.5px var(--color-glass-border-hover),
    var(--effect-glass-hover);
}

/* ---------- بطاقة المعلومات (Info Card) ---------- */
.info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 28px;
  border-radius: var(--radius-lg);
}

.info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-brand-subtle);
  color: var(--color-text-brand);
  transition: background-color var(--duration-hover) ease, color var(--duration-hover) ease;
}

.info-card:hover .info-card__icon {
  background-color: var(--color-bg-brand);
  color: var(--color-text-on-brand);
}

.info-card__label {
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-brand);
}

.info-card__title,
.service-card__title,
.service-card__number {
  font-size: var(--heading-h3-size);
  font-weight: var(--heading-h3-weight);
  line-height: var(--heading-h3-line);
  color: var(--color-text-primary);
}

.info-card__text,
.service-card__text,
.partner-card__text {
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-line);
  color: var(--color-text-secondary);
}

/* أيقونات البطاقات (24px) */
.icon--eye       { --icon: url("assets/icons/eye.svg"); }
.icon--target    { --icon: url("assets/icons/target.svg"); }
.icon--star      { --icon: url("assets/icons/star.svg"); }
.icon--layers-24 { --icon: url("assets/icons/layers-24.svg"); }
.icon--link-24   { --icon: url("assets/icons/link-24.svg"); }
.icon--sliders   { --icon: url("assets/icons/sliders.svg"); }
.icon--headset   { --icon: url("assets/icons/headset.svg"); }
.icon--users     { --icon: url("assets/icons/users.svg"); }
.icon--server-24 { --icon: url("assets/icons/server-24.svg"); }


/* ---------- شريط العملاء ---------- */
.clients {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: 40px 0 var(--spacing-3xl);
}

.clients__label {
  padding-inline: var(--page-gutter);
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-secondary);
}

/* حاوية الصفين مع تلاشي الأطراف بلون خلفية الصفحة */
.marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  overflow: hidden;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 1;
  width: 200px;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background-image: linear-gradient(to right, var(--color-bg-page), transparent);
}
.marquee::after {
  right: 0;
  background-image: linear-gradient(to left, var(--color-bg-page), transparent);
}

.marquee__row {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}

/* الصف الثاني يتحرك بالاتجاه المعاكس */
.marquee__row--reverse .marquee__track {
  animation-direction: reverse;
}

/* يتوقف الصف عند وضع المؤشر عليه */
.marquee__row:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__list {
  display: flex;
  gap: var(--spacing-md);
  padding-inline-end: var(--spacing-md);
}

/* بطاقة شعار العميل: خلفية بيضاء في الوضعين كما في Figma */
.client-logo {
  position: relative;
  flex: none;
  width: 176px;
  height: 80px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  background-color: var(--neutral-0);
  transition: border-color var(--duration-hover) ease, box-shadow var(--duration-hover) ease, transform var(--duration-hover) ease;
}

.client-logo:hover {
  border-color: var(--color-glass-border-hover);
  box-shadow: var(--effect-glass-hover);
  transform: translateY(-2px);
}

/* مساحة الشعار داخل البطاقة */
.client-logo__frame {
  position: absolute;
  inset: 11px 13px;
  overflow: hidden;
  border-radius: 6px;
}

.client-logo__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.client-logo__frame img.is-cover {
  object-fit: cover;
}

/* قص الصورة كما في Figma (قيم فيزيائية لأنها داخل الصورة وليست تخطيطًا) */
.client-logo__frame img.is-cropped {
  position: absolute;
  top: var(--t);
  left: var(--l);
  width: var(--w);
  height: var(--h);
  max-width: none;
}

/* الحركة: في العربي تتحرك لليمين وفي الإنجليزي لليسار */
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
  to { transform: translateX(50%); }
}
[dir="rtl"] .marquee__track {
  animation-name: marquee-rtl;
}


/* ---------- من نحن ---------- */
.about__intro {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xl);
}

.about__image {
  flex: none;
  width: 577px;
  height: 622px;
  object-fit: contain;
}

.about__header {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-md);
}

.about__header .section__text {
  max-width: none;
}


/* ---------- بطاقة الخدمة (Service Card) ---------- */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
}

.service-card__media {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--neutral-0);
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s var(--ease-out);
}

.service-card:hover .service-card__media img {
  transform: scale(1.04);
}

.service-card__number {
  color: var(--color-accent-default);
}


/* ---------- حلول أودو ---------- */
.odoo__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: var(--spacing-3xl) var(--spacing-2xl);
  border-radius: var(--radius-xl);
}

.odoo__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.odoo__note {
  font-size: var(--body-small-size);
  line-height: var(--body-small-line);
  color: var(--color-text-secondary);
}

.odoo__integration {
  display: flex;
  gap: var(--spacing-lg);
  width: 100%;
}

.odoo__panel > .grid {
  width: 100%;
}

/* مخطط الربط */
.diagram {
  display: flex;
  /* لا ينكمش المخطط أقل من محتواه، والصورة هي التي تصغر */
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  height: 315px;
  padding: 40px var(--spacing-xl);
  border-radius: var(--radius-lg);
}

.diagram__systems {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.diagram__system {
  padding: var(--spacing-sm) 18px;
  border-radius: var(--radius-md);
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.diagram__connector {
  flex: none;
  width: 56px;
  height: 2px;
  background-color: var(--color-border-brand);
}

/* مكعب أودو (قص الصورة كما في Figma) */
.diagram__hub {
  position: relative;
  flex: none;
  width: 187px;
  height: 183px;
  overflow: hidden;
}

.diagram__hub img {
  position: absolute;
  top: -36.51%;
  left: -73.39%;
  width: 245.32%;
  height: 166.67%;
  max-width: none;
  animation: hub-float 6s ease-in-out infinite;
}

@keyframes hub-float {
  50% { transform: translateY(-6px); }
}

/* صورة ERP: تصغر حسب المساحة المتبقية بجانب المخطط */
.odoo__image {
  position: relative;
  flex: 0 1 502px;
  min-width: 0;
  height: 315px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.odoo__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* على الشاشات الكبيرة: نفس قص الصورة في Figma */
@media (min-width: 1281px) {
  .odoo__image img {
    position: absolute;
    top: -44.45%;
    left: -6.68%;
    width: 113.24%;
    height: 225.72%;
    max-width: none;
  }
}


/* ---------- الشركاء ---------- */
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 28px;
  border-radius: var(--radius-lg);
}

.partner-card__logo {
  width: 200px;
  height: 80px;
  object-fit: contain;
}

.partner-card__name {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.partner-card__name h3 {
  font-size: var(--heading-h3-size);
  font-weight: var(--heading-h3-weight);
  line-height: var(--heading-h3-line);
  color: var(--color-text-primary);
}

.partner-card__name span {
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
  color: var(--color-text-brand);
}


/* ---------- التقنيات (دوائر مؤقتة) ---------- */
.tech__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
}

.tech__item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  overflow: hidden;
  border-radius: var(--radius-full);
}

/* الأيقونة بنسبة ثابتة من حجم الدائرة */
.tech__item img {
  width: 37%;
  height: auto;
}

.tech__item--main {
  width: 148px;
  height: 148px;
  border-color: var(--color-border-default);
  background-color: var(--color-glass-fill-hover);
  box-shadow: none;
}


/* ---------- آراء العملاء ---------- */
.voices__wall {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.voices__column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-width: 0;
}

.quote-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 28px;
  border-radius: var(--radius-lg);
}

.quote-card__mark {
  font-size: var(--heading-h1-size);
  font-weight: var(--heading-h1-weight);
  line-height: var(--heading-h1-line);
  color: var(--color-accent-default);
}

.quote-card__text {
  font-size: var(--body-large-size);
  line-height: var(--body-large-line);
  color: var(--color-text-primary);
}

.quote-card__text--large {
  font-size: var(--heading-h3-size);
  font-weight: var(--heading-h3-weight);
  line-height: var(--heading-h3-line);
}

.quote-card__caption {
  font-size: var(--label-button-size);
  font-weight: var(--label-button-weight);
  line-height: var(--label-button-line);
  color: var(--color-text-primary);
}

/* صاحب الرأي */
.person {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.person__avatar {
  flex: none;
  width: 44px;
  height: 44px;
}

.person__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.person__text strong {
  font-size: var(--label-button-size);
  font-weight: var(--label-button-weight);
  line-height: var(--label-button-line);
  color: var(--color-text-primary);
}

.person__text span {
  font-size: var(--body-small-size);
  line-height: var(--body-small-line);
  color: var(--color-text-secondary);
}

/* مكان الفيديو المؤقت */
.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  border-radius: 14px;
  background-color: var(--color-bg-placeholder);
}

.video-placeholder__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background-color: var(--neutral-0);
  font-size: var(--heading-h3-size);
  font-weight: var(--heading-h3-weight);
  color: var(--blue-600);
}

/* بطاقة الرقم */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-brand);
  color: var(--color-text-on-brand);
}

.stat-card__number {
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: var(--display-line);
}

.stat-card__text {
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-line);
}

.stat-card__company {
  font-size: var(--label-medium-size);
  font-weight: var(--label-medium-weight);
  line-height: var(--label-medium-line);
}


/* ---------- الأسئلة الشائعة ---------- */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 880px;
  max-width: 100%;
  margin-inline: auto;
}

.faq-item {
  padding: 22px 28px;
  border-radius: var(--radius-lg);
}

.faq-item h3 {
  font: inherit;
}

.faq-item__question {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  font-size: var(--label-button-size);
  font-weight: var(--label-button-weight);
  line-height: var(--label-button-line);
  color: var(--color-text-primary);
  text-align: start;
}

/* علامة + و − */
.faq-item__icon {
  flex: none;
  width: 15px;
  font-size: var(--heading-h3-size);
  font-weight: var(--heading-h3-weight);
  line-height: var(--heading-h3-line);
  color: var(--color-text-brand);
  text-align: center;
}
.faq-item__icon::before {
  content: "+";
}
.faq-item.is-open .faq-item__icon::before {
  content: "−";
}

/* الإجابة: تفتح بانتقال ناعم للارتفاع */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out);
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
}

.faq-item__answer > div {
  overflow: hidden;
}

.faq-item__list li::before {
  content: "\2022\00a0";
}

.faq-item__answer .faq-item__list {
  padding-top: 0;
}

/* خطوات مرقّمة (سؤال: كيف تبدأ رحلة العمل) */
.faq-item__list--steps {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: step;
}
.faq-item__list--steps li {
  counter-increment: step;
}
.faq-item__list--steps li::before {
  content: counter(step) ".\00a0";
}

.faq-item__list strong {
  font-weight: var(--label-button-weight);
  color: var(--color-text-primary);
}

.faq-item__answer p,
.faq-item__list {
  padding-top: var(--spacing-sm);
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-line);
  color: var(--color-text-secondary);
}



/* ---------- الدعوة الأخيرة ---------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-4xl) var(--spacing-2xl);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-xl);
  background-image: linear-gradient(158.7deg, rgb(43, 51, 138) 0%, rgb(10, 13, 23) 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

[dir="ltr"] .cta-panel {
  background-image: linear-gradient(201.3deg, rgb(43, 51, 138) 0%, rgb(10, 13, 23) 50%);
}

/* الرسومات تنعكس مع اتجاه الصفحة */
.cta-panel__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

[dir="ltr"] .cta-panel__art {
  transform: scaleX(-1);
}

/* أشعة الضوء */
.beam {
  position: absolute;
  height: 620px;
  background-image: linear-gradient(to bottom, rgba(79, 140, 209, 0), rgba(145, 207, 242, 0.9) 50%, rgba(79, 140, 209, 0));
  filter: blur(9px);
  transform: rotate(32deg);
  animation: beam-glow 7s ease-in-out infinite alternate;
}
.beam--1 { top: -84px; left: -22px;  width: 90px; border-radius: 45px; opacity: 0.6; }
.beam--2 { top: -98px; left: -98px;  width: 40px; border-radius: 20px; animation-delay: -2s; }
.beam--3 { top: -90px; left: -211px; width: 70px; border-radius: 35px; opacity: 0.8; animation-delay: -4s; }

@keyframes beam-glow {
  to { filter: blur(14px); translate: 12px 0; }
}

/* يد الروبوت */
.cta-panel__hand {
  position: absolute;
  top: 42px;
  left: 59px;
  width: 354px;
  height: 374px;
  overflow: hidden;
}

.cta-panel__hand img {
  position: absolute;
  top: 6.28%;
  left: 0;
  width: 100%;
  height: 94.65%;
  max-width: none;
}

.cta-panel__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.cta-panel__content .section__title,
.cta-panel__content .section__text {
  color: var(--color-text-on-brand);
}

.cta-panel__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

/* في الوضع الفاتح: اللوحة زرقاء (من تصميم Light) */
[data-theme="light"] .cta-panel {
  background-image: linear-gradient(158.7deg, rgb(43, 51, 138) 0%, rgb(0, 43, 140) 70%);
}
[data-theme="light"][dir="ltr"] .cta-panel {
  background-image: linear-gradient(201.3deg, rgb(43, 51, 138) 0%, rgb(0, 43, 140) 70%);
}

/* ---------- التذييل ---------- */
.site-footer {
  padding: var(--spacing-3xl) var(--page-gutter) var(--spacing-xl);
  border-top: 1px solid var(--color-glass-border);
  background-color: var(--color-glass-fill);
}

.site-footer > .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.site-footer__columns {
  display: flex;
  gap: var(--spacing-3xl);
}

.site-footer__brand,
.site-footer__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.logo--footer {
  width: 183.7px;
  height: 55px;
}

.site-footer__brand p {
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-line);
  color: var(--color-text-brand);
}

.site-footer__title {
  font-size: var(--label-button-size);
  font-weight: var(--label-button-weight);
  line-height: var(--label-button-line);
  color: var(--color-text-primary);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.footer-link {
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-line);
  color: var(--color-text-secondary);
  transition: color var(--duration-hover) ease;
}

a.footer-link:hover {
  color: var(--color-text-primary);
}

.site-footer__copy {
  padding-top: 40px;
  border-top: 1px solid var(--color-border-default);
  font-size: var(--body-small-size);
  line-height: var(--body-small-line);
  color: var(--color-text-secondary);
  text-align: center;
}


/* =========================================================
   8. الموشن
   ========================================================= */

/* ظهور العناصر: يعمل فقط عند توفر JavaScript (class="js") */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* حركة الهالات البطيئة جدًا */
.glow {
  animation: glow-drift 22s ease-in-out infinite alternate;
}

@keyframes glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, 2%) scale(1.06); }
  100% { transform: translate(-3%, -1%) scale(0.97); }
}

/* احترام إعداد "تقليل الحركة" */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   9. التجاوب
   المرجع ديسكتوب 1440، ثم 1024 و 768 و 375
   ========================================================= */

/* ---------- حتى 1280 ---------- */
@media (max-width: 1280px) {
  :root {
    --page-gutter: 40px;
  }
}

/* ---------- حتى 1024: القائمة تتحول إلى زر ---------- */
@media (max-width: 1024px) {
  :root {
    --page-gutter: 32px;
  }

  .navbar__toggle {
    display: inline-flex;
  }

  /* قائمة منسدلة أسفل الشريط */
  .navbar__links {
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2xs);
    padding: var(--spacing-sm);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-surface);
    box-shadow: var(--effect-glass-surface), 0 24px 48px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--duration-hover) ease,
      transform var(--duration-hover) ease,
      visibility 0s linear var(--duration-hover);
  }

  .navbar__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav-link {
    flex-direction: row;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--body-medium-size);
  }
  .nav-link:hover {
    background-color: var(--color-glass-fill-hover);
  }

  .hero__title {
    font-size: var(--heading-h1-size);
    line-height: var(--heading-h1-line);
  }
}

/* ---------- حتى 768 ---------- */
@media (max-width: 768px) {
  :root {
    --page-gutter: 16px;
    --header-height: 86px;
  }

  .site-header {
    padding-top: var(--spacing-md);
  }

  .navbar {
    padding-inline-start: 20px;
  }

  .logo {
    width: 120px;
    height: 36px;
  }

  .hero {
    gap: var(--spacing-lg);
    padding-block: var(--spacing-3xl);
  }

  .hero__title {
    font-size: 40px;
  }

  .hero__text {
    font-size: var(--body-medium-size);
    line-height: var(--body-medium-line);
  }

  /* إخفاء الوصف الطويل في نتائج البحث */
  .result__desc {
    display: none;
  }
}

/* ---------- حتى 480 (الموبايل) ---------- */
@media (max-width: 480px) {
  .navbar {
    min-height: 62px;
    padding-block: 6px;
    padding-inline-start: 16px;
    padding-inline-end: 6px;
  }

  .navbar__actions {
    gap: var(--spacing-xs);
  }

  /* زر الحجز موجود في الواجهة، فنخفيه من الشريط */
  .navbar__book {
    display: none;
  }

  .logo {
    width: 104px;
    height: 31px;
  }

  .hero__title {
    font-size: 32px;
    line-height: var(--heading-h1-line);
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .launcher__search {
    padding: 14px var(--spacing-md);
  }
  .launcher__placeholder {
    font-size: var(--body-medium-size);
  }

  .result__tag,
  .launcher__hints > :not(.launcher__hint-strong):not(.keycap:nth-of-type(1)) {
    display: none;
  }
}


/* ---------- تجاوب الأقسام: حتى 1180 ---------- */
@media (max-width: 1180px) {
  /* أودو: المخطط فوق الصورة عندما لا تكفي المساحة لهما جنبًا إلى جنب */
  .odoo__integration {
    flex-direction: column;
  }
  .diagram {
    flex: none;
  }
  .odoo__image {
    flex: none;
    width: 100%;
  }
}

/* ---------- تجاوب الأقسام: حتى 1024 ---------- */
@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* من نحن: الصورة فوق النص */
  .about__intro {
    flex-direction: column;
    gap: var(--spacing-xl);
  }
  .about__image {
    width: min(100%, 440px);
    height: auto;
  }
  .about__header {
    align-items: center;
    text-align: center;
  }

  .odoo__panel {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  /* آراء العملاء: عمودان */
  .voices__wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .voices__column {
    display: contents;
  }

  /* الدعوة الأخيرة: اليد أخف حتى لا تزاحم النص */
  .cta-panel__art {
    opacity: 0.35;
  }
}

/* ---------- تجاوب الأقسام: حتى 768 ---------- */
@media (max-width: 768px) {
  .section {
    padding-block: var(--spacing-3xl);
  }
  .section > .container {
    gap: var(--spacing-xl);
  }
  .section__title {
    font-size: 28px;
  }
  .section__text {
    font-size: var(--body-medium-size);
    line-height: var(--body-medium-line);
  }

  .grid--2,
  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* مخطط الربط عموديًا */
  .diagram {
    flex-direction: column;
    height: auto;
    padding: var(--spacing-xl) var(--spacing-md);
  }
  .diagram__systems {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
  }
  .diagram__connector {
    width: 2px;
    height: 32px;
  }
  .odoo__image {
    height: 240px;
  }

  .tech__list {
    gap: var(--spacing-md);
  }
  .tech__item {
    width: 88px;
    height: 88px;
  }
  .tech__item--main {
    width: 120px;
    height: 120px;
  }

  .voices__wall {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-card__number {
    font-size: var(--heading-h1-size);
  }

  .faq-item {
    padding: 18px 20px;
  }

  .cta-panel {
    padding: var(--spacing-3xl) var(--spacing-lg);
  }

  .site-footer__columns {
    flex-direction: column;
    gap: var(--spacing-xl);
  }
}

/* ---------- تجاوب الأقسام: حتى 560 ---------- */
@media (max-width: 560px) {
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .odoo__panel {
    padding: var(--spacing-xl) var(--spacing-md);
    border-radius: var(--radius-lg);
  }

  .cta-panel__buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}

/* ---------- شريط العملاء على الشاشات الصغيرة ---------- */
@media (max-width: 768px) {
  /* تلاشي أقصر حتى لا يغطي الشعارات */
  .marquee::before,
  .marquee::after {
    width: 48px;
  }
  .client-logo {
    width: 144px;
    height: 68px;
  }
}

/* ---------- قائمة "أعمالنا" المنسدلة ---------- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

/* السهم الصغير: يدور عند الفتح */
.nav-dropdown__chevron {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("assets/icons/chevron-down.svg") center / contain no-repeat;
  mask: url("assets/icons/chevron-down.svg") center / contain no-repeat;
  transition: transform var(--duration-hover) ease;
}

.nav-dropdown__toggle[aria-expanded="true"] {
  color: var(--color-text-primary);
}
.nav-dropdown__toggle[aria-expanded="true"]::after {
  opacity: 1;
}
.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__chevron {
  transform: rotate(180deg);
}

/* اللوحة المنسدلة */
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 24px);
  inset-inline-start: -16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 382px;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-glass-border);
  border-radius: 22px;
  background-color: var(--color-bg-surface);
  box-shadow: 0 20px 50px rgba(0, 8, 31, 0.35);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--duration-hover) ease,
    transform var(--duration-hover) ease,
    visibility 0s linear var(--duration-hover);
}

/* جسر غير مرئي بين الرابط واللوحة حتى لا تُغلق أثناء تحريك المؤشر */
.nav-dropdown__menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 26px;
}

.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

/* عنصر المنتج (Dropdown Item) */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--spacing-sm);
  border-radius: 14px;
  transition: background-color var(--duration-hover) ease;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background-color: var(--color-glass-fill-hover);
}

.dropdown-item__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
}

.dropdown-item__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-2xs);
  min-width: 0;
  text-align: start;
}

.dropdown-item__name {
  font-size: var(--label-button-size);
  font-weight: var(--label-button-weight);
  line-height: var(--label-button-line);
  color: var(--color-text-primary);
}

.dropdown-item__desc {
  font-size: var(--body-small-size);
  line-height: var(--body-small-line);
  color: var(--color-text-secondary);
  white-space: normal;
}

/* السطر السفلي: مهتم بمنتجاتنا؟ اطلب عرض سعر */
.nav-dropdown__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-2xs) var(--spacing-sm) 0;
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-line);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.nav-dropdown__footer a {
  font-weight: var(--label-button-weight);
  line-height: var(--label-button-line);
  color: var(--color-text-primary);
  transition: color var(--duration-hover) ease;
}

.nav-dropdown__footer a:hover {
  color: var(--color-text-brand);
}

/* في الموبايل: تظهر داخل القائمة تحت الرابط مباشرة */
@media (max-width: 1024px) {
  .nav-dropdown__toggle {
    width: 100%;
  }

  .nav-dropdown__menu {
    position: static;
    display: none;
    width: auto;
    margin-top: var(--spacing-2xs);
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-dropdown__menu::before {
    content: none;
  }

  .nav-dropdown.is-open .nav-dropdown__menu {
    display: flex;
  }
}


/* ---------- شعارات مخطط الربط (أودو) ---------- */
.diagram__system {
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram__system--wide {
  justify-content: flex-start;
  min-width: 167px;
}

/* الشعار يأخذ مقاسه من width و height في HTML (كما في Figma) */
.diagram__system img {
  display: block;
  object-fit: contain;
}

/* Offline POS: نص بلون النص الأساسي فيتبدل مع الوضع */
.diagram__logo--offline-pos {
  display: block;
  width: 102px;
  height: 38px;
  background-color: var(--color-text-primary);
  -webkit-mask: url("assets/images/integrations/offline-pos.svg") center / contain no-repeat;
  mask: url("assets/images/integrations/offline-pos.svg") center / contain no-repeat;
}

/* SUNMI: نفس شعار قسم الشركاء مع القص من Figma */
.diagram__logo--sunmi {
  position: relative;
  display: block;
  width: 102px;
  height: 35px;
  overflow: hidden;
}

.diagram__logo--sunmi img {
  position: absolute;
  top: 10.88%;
  left: 8.95%;
  width: 82.8%;
  height: 80.44%;
  max-width: none;
  object-fit: contain;
}