/* ============================================
     1) متغيرات الهوية البصرية - لا تُعدَّل هنا
        عدّل القيم فقط إذا أردت تغيير اللون بالكامل
     ============================================ */
  :root{
    --navy:       #001C63;   /* اللون الأساسي */
    --navy-soft:  #14306e;   /* درجة أفتح من الكحلي للنصوص الثانوية */
    --orange:     #F2400A;   /* لون التمييز والدعوة للفعل */
    --orange-dark:#c9330a;   /* للتفاعل عند التحويم */
    --cream:      #F3EFE6;   /* الخلفية */
    --white:      #FFFFFF;

    /* أخضر واتساب الرسمي - يُستخدم فقط لأزرار واتساب،
       اتساقًا مع الأيقونة الخضراء المستخدمة فعليًا في بطاقات الكتالوج المطبوعة */
    --wa-green:      #25D366;
    --wa-green-dark: #1DA851;

    --font-ar: 'IBM Plex Sans Arabic', sans-serif;
    --font-en: 'Inter', sans-serif;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    font-family: var(--font-ar);
    background: var(--cream);
    color: var(--navy);
    overflow-anchor:none;
  }
  .page-view{ overflow-anchor:none; }

  /* عند التبديل للإنجليزية نستخدم خط Inter بدل العربي */
  body.lang-en{ font-family: var(--font-en); }

  img{ max-width:100%; display:block; }
  a{ text-decoration:none; color:inherit; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }

  /* إخفاء العنصر غير المطابق للغة الحالية */
  body.lang-en [data-ar-only]{ display:none !important; }
  body:not(.lang-en) [data-en-only]{ display:none !important; }

  /* ============================================
     2) خلفية القسم الرئيسي (الهيرو)
        نمط دوائر ودارات رقمية خفيفة بنفس روح صور الكتالوج
     ============================================ */
  .hero{
    position:relative;
    min-height:calc(100svh - 72px); /* 72px ≈ ارتفاع شريط التنقل الثابت */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 32px 20px 60px;
    overflow:hidden;
  }

  /* ============================================
     2) شريط التنقل الثابت - يظهر أعلى كل صفحات الموقع
     ============================================ */
  .site-nav{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:16px 28px;
    background:rgba(243,239,230,0.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(0,28,99,0.08);
  }

  .nav__brand{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }
  .nav__brand img{ width:38px; height:38px; }
  .nav__brand span{
    font-weight:700;
    font-size:1.05rem;
    color:var(--navy);
    letter-spacing:.2px;
    font-family:'Inter', sans-serif; /* اسم العلامة يبقى بالخط اللاتيني دائمًا */
  }
  .nav__brand span b{ color:var(--orange); font-weight:800; }

  .nav__links{
    display:flex;
    align-items:center;
    gap:30px;
    flex:1;
    justify-content:center;
  }
  .nav__link{
    font-size:.94rem;
    font-weight:500;
    color:var(--navy-soft);
    position:relative;
    padding:6px 2px;
    transition:.2s;
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .nav__link:hover{ color:var(--orange); }
  .nav__link.is-active{ color:var(--navy); font-weight:700; }
  .nav__link.is-active::after{
    content:'';
    position:absolute;
    bottom:-2px; right:0; left:0;
    height:2px;
    background:var(--orange);
    border-radius:2px;
  }

  /* عنصر بقائمة فرعية (الشركة / خدماتنا) */
  .nav__item{ position:relative; }
  .nav__parent{ cursor:pointer; }
  .nav__chevron{ width:14px; height:14px; transition:.2s; }
  .nav__item.is-open > .nav__parent .nav__chevron{ transform:rotate(180deg); }

  /* القائمة الفرعية - تظهر كقائمة منسدلة عائمة على الديسكتوب */
  .nav__submenu{
    display:none;
    position:absolute;
    top:100%;
    padding-top:10px; /* مسافة بصرية شفافة تبقى ضمن منطقة التمرير فلا تنقطع القائمة */
    right:0;
    z-index:50;
  }
  .nav__submenu-inner{
    min-width:240px;
    background:var(--white);
    border:1px solid rgba(0,28,99,0.08);
    border-radius:12px;
    box-shadow:0 16px 32px rgba(0,28,99,0.12);
    padding:8px;
  }
  .nav__item.is-open .nav__submenu{ display:block; }
  .nav__submenu a{
    display:block;
    padding:11px 14px;
    border-radius:8px;
    font-size:.88rem;
    color:var(--navy-soft);
    transition:.15s;
  }
  .nav__submenu a:hover{ background:var(--cream); color:var(--orange); }

  .nav__right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
  }

  /* ============================================
     البحث بالموقع - عنصر واحد يتمدد بمكانه (الأيقونة تتحول لحقل كتابة)
     لا صندوق منفصل، لا موضع عائم - فقط توسّع أفقي بنفس المكان تمامًا
     ============================================ */
  .search-wrap{ position:relative; }

  .site-search{
    position:relative;
    display:flex;
    align-items:center;
    height:38px;
    width:38px; /* الحالة المصغّرة: أيقونة فقط */
    background:var(--white);
    border:1.5px solid rgba(242,64,10,0.3);
    border-radius:20px;
    overflow:hidden;
    transition:width .28s ease, border-color .2s;
    flex-shrink:0;
  }
  .search-wrap:hover .site-search,
  .search-wrap:focus-within .site-search,
  .site-search.is-open{
    width:230px; /* الحالة الممتدة: أيقونة + حقل كتابة */
    border-color:var(--orange);
  }

  .search-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    flex-shrink:0;
    border-radius:50%;
    color:var(--orange);
    transition:.2s;
  }
  .search-wrap:hover .site-search .search-btn,
  .search-wrap:focus-within .site-search .search-btn,
  .site-search.is-open .search-btn{
    background:var(--orange);
    color:var(--white);
  }
  .search-btn svg{ width:16px; height:16px; }

  .search-inline-input{
    flex:1;
    min-width:0;
    height:100%;
    border:none;
    outline:none;
    background:transparent;
    font-family:inherit;
    font-size:.88rem;
    color:var(--navy);
    padding:0;
    opacity:0;
    transition:opacity .2s;
  }
  .search-wrap:hover .site-search .search-inline-input,
  .search-wrap:focus-within .site-search .search-inline-input,
  .site-search.is-open .search-inline-input{
    opacity:1;
    padding-inline-end:12px;
  }

  /* نتائج البحث - تفتح أسفل العنصر الممتد مباشرة، بنفس عرضه بالضبط */
  .search-results{
    display:none;
    position:absolute;
    top:100%; /* بلا أي فجوة خارجية - يلاصق الصندوق مباشرة */
    padding-top:8px; /* المسافة البصرية داخلية الآن، فلا تقطع التمرير أثناء النقر */
    inset-inline-start:0;
    inset-inline-end:0;
    z-index:60;
  }
  .search-results.has-content{ display:block; }

  .search-results-inner{
    max-height:260px;
    overflow-y:auto;
    background:var(--white);
    border:1px solid rgba(0,28,99,0.08);
    border-radius:14px;
    box-shadow:0 16px 32px rgba(0,28,99,0.14);
    padding:6px;
  }

  .search-results-inner a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    font-size:.88rem;
    color:var(--navy-soft);
    transition:.15s;
  }
  .search-results a:hover{ background:var(--cream); color:var(--orange); }
  .search-results-inner .search-empty{
    padding:10px 12px;
    font-size:.85rem;
    color:var(--navy-soft);
    opacity:.6;
    text-align:center;
  }

  /* ============================================
     مبدّل اللغة: زر واحد بأيقونة "تغيير اللغة" + قائمة منسدلة
     تحتوي العربية (بعلم السعودية) والإنجليزية (بعلم أمريكا)
     ============================================ */
  .lang-switch{ position:relative; }

  .lang-switch-btn{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:auto;
    max-width:44px;
    min-height:42px;
    overflow:hidden;
    background:var(--white);
    border:1px solid rgba(0,28,99,0.12);
    border-radius:999px;
    padding:9px 12px;
    font-size:.85rem;
    font-weight:600;
    color:var(--navy);
    white-space:nowrap;
    box-shadow:0 2px 10px rgba(0,28,99,0.06);
    transition:max-width .28s ease, padding .28s ease, border-color .2s, box-shadow .2s;
  }
  .lang-switch-btn:hover{ border-color:rgba(242,64,10,0.35); }
  .lang-switch-btn svg{ width:17px; height:17px; flex:0 0 17px; color:var(--orange); }
  .lang-switch-btn span{
    display:inline-block;
    max-width:0;
    opacity:0;
    overflow:hidden;
    transition:max-width .28s ease, opacity .18s ease;
  }
  .lang-switch:hover .lang-switch-btn,
  .lang-switch:focus-within .lang-switch-btn{
    max-width:210px;
    padding-inline:14px 17px;
    border-color:rgba(242,64,10,0.35);
    box-shadow:0 5px 16px rgba(0,28,99,0.10);
  }
  .lang-switch:hover .lang-switch-btn span,
  .lang-switch:focus-within .lang-switch-btn span{
    max-width:160px;
    opacity:1;
  }

  .lang-menu{
    display:none;
    position:absolute;
    top:100%;
    padding-top:10px; /* مسافة بصرية شفافة ضمن منطقة التمرير - لا تقطع الاتصال بالتمرير */
    inset-inline-end:0; /* يمين بالعربي (RTL) ويسار تلقائيًا بالإنجليزي (LTR) */
    z-index:60;
  }
  .lang-menu.is-open{ display:block; }

  .lang-menu-inner{
    min-width:220px;
    background:var(--white);
    border:1px solid rgba(0,28,99,0.08);
    border-radius:14px;
    box-shadow:0 16px 32px rgba(0,28,99,0.14);
    padding:8px;
  }
  .lang-menu-title{
    padding:5px 10px 8px;
    color:var(--navy);
    font-size:.84rem;
    font-weight:700;
    text-align:start;
    border-bottom:1px solid rgba(0,28,99,.07);
    margin-bottom:4px;
  }

  .lang-option{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    transition:.15s;
    text-align:start; /* يتكيف تلقائيًا: يمين بالعربي، يسار بالإنجليزي */
  }
  .lang-option:hover{ background:var(--cream); }
  .lang-option.is-current{ background:rgba(242,64,10,0.07); }

  .lang-option__flag{
    width:32px; height:20px;
    flex-shrink:0;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(0,28,99,0.1);
    display:block;
    overflow:hidden;
    object-fit:cover;
  }

  .lang-option__texts{ display:flex; flex-direction:column; gap:1px; }
  .lang-option__name{ font-size:.9rem; font-weight:600; color:var(--navy); }
  .lang-option__country{ font-size:.76rem; color:var(--navy-soft); opacity:.75; }

  /* زر الهمبرغر - مخفي على الشاشات الكبيرة */
  .hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px; height:34px;
  }
  .hamburger span{
    display:block;
    width:100%;
    height:2px;
    background:var(--navy);
    border-radius:2px;
    transition:.25s;
  }

  /* ============================================
     4) محتوى الهيرو
     ============================================ */
  .hero__content{
    position:relative;
    z-index:2;
    max-width:760px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:26px;
  }

  .hero__logo-wrap{
    position:relative;
    width:132px; height:132px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero__logo-glow{
    position:absolute;
    inset:-14px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(0,28,99,0.10) 0%, rgba(0,28,99,0) 70%);
    animation: pulse 3.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.08); opacity:.75; }
  }
  .hero__logo-wrap img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; }

  .hero__eyebrow{
    font-size:.95rem;
    font-weight:600;
    color:var(--orange);
    letter-spacing:.3px;
  }

  .hero__headline{
    font-size:clamp(1.9rem, 4.6vw, 2.9rem);
    font-weight:700;
    line-height:1.45;
    color:var(--navy);
  }
  .hero__headline .accent{ color:var(--orange); }

  .hero__sub{
    font-size:clamp(1rem, 2vw, 1.15rem);
    font-weight:400;
    color:var(--navy-soft);
    line-height:1.9;
    max-width:600px;
  }

  /* ============================================
     5) أزرار الدعوة للفعل
     ============================================ */
  .hero__ctas{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    margin-top:6px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 30px;
    border-radius:12px;
    font-size:1rem;
    font-weight:600;
    transition:.25s;
  }

  .btn--primary{
    background:var(--orange);
    color:var(--white);
    box-shadow:0 8px 24px rgba(242,64,10,0.28);
  }
  .btn--primary:hover{
    background:var(--wa-green);
    box-shadow:0 8px 24px rgba(37,211,102,0.32);
    transform:translateY(-2px);
  }

  .btn--ghost{
    background:transparent;
    color:var(--navy);
    border:1.5px solid rgba(0,28,99,0.25);
  }
  .btn--ghost:hover{
    background:var(--navy);
    color:var(--white);
    border-color:var(--navy);
  }

  .btn svg{ width:20px; height:20px; flex-shrink:0; }

  /* صف التواصل المصغّر: اتصال / إيميل - أقل وزنًا بصريًا من الأزرار */
  .hero__mini-contact{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:2px;
    font-size:.9rem;
  }
  .mini-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--navy-soft);
    opacity:.85;
    transition:.2s;
  }
  .mini-link svg{ width:15px; height:15px; }
  a.mini-link:hover{ color:var(--orange); opacity:1; }

  .mini-divider{ color:var(--orange); font-size:.8rem; font-weight:700; }

  /* شريط القطاعات المخدومة */
  .hero__sectors{
    margin-top:6px;
    margin-bottom:34px;
    font-size:.95rem;
    color:var(--navy-soft);
    opacity:.8;
    letter-spacing:.2px;
  }
  @media (min-width:901px){
    .hero__sectors{
      width:max-content;
      max-width:calc(100vw - 64px);
      white-space:nowrap;
      align-self:center;
    }
  }
  .hero__sectors-label{
    font-weight:600;
    color:var(--navy);
    opacity:1;
    margin-inline-end:4px;
  }
  .hero__sectors .dot{
    color:var(--orange);
    opacity:1;
    font-weight:700;
    margin:0 2px;
  }

  /* ============================================
     6) زر واتساب العائم - ثابت في كل الصفحة
     ============================================ */
  .float-wa{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:50;
    width:58px; height:58px;
    border-radius:50%;
    background:var(--orange);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 22px rgba(242,64,10,0.35);
    transition:.25s;
  }
  .float-wa:hover{
    transform:scale(1.08);
    background:var(--wa-green);
    box-shadow:0 8px 22px rgba(37,211,102,0.4);
  }
  .float-wa svg{ width:28px; height:28px; }

  /* ============================================
     زر المساعدة العائم - أسفل الزاوية المقابلة لواتساب، كل الصفحات
     ============================================ */
  .float-help{
    position:fixed;
    bottom:24px;
    left:24px; /* ثابت دائمًا (لا يتغير باللغة)، بالزاوية المقابلة لواتساب تمامًا */
    z-index:180;
    height:52px;
    padding:0 18px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--orange);
    color:var(--white);
    font-size:.9rem;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 8px 22px rgba(242,64,10,0.3);
    transition:.25s;
  }
  .float-help:hover{ box-shadow:0 16px 34px rgba(242,64,10,.34); }
  /* زر المساعدة بنفس ارتفاع زر واتساب وشكله الدائري، فلا يلتبس بما بجانبه */
  .float-help{
    width:58px; height:58px; padding:0; border-radius:50%;
    justify-content:center; overflow:hidden;
  }
  .float-help .float-help__text{
    max-width:0; opacity:0; margin-inline-start:0; white-space:nowrap;
    transition:max-width .25s ease, opacity .2s ease, margin-inline-start .25s ease;
  }
  .float-help:hover, .float-help:focus-visible{
    width:auto; padding:0 20px; border-radius:999px;
  }
  .float-help:hover .float-help__text,
  .float-help:focus-visible .float-help__text{
    max-width:190px; opacity:1; margin-inline-start:9px;
  }
  @media (max-width:640px){
    .float-help{ width:52px; height:52px; }
    .float-help:hover{ padding:0 16px; }
  }
  .float-help svg{ width:22px; height:22px; flex-shrink:0; }

  .help-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,10,40,0.35);
    z-index:190;
  }
  .help-overlay.is-open{ display:block; }

  .help-panel{
    display:none;
    position:fixed;
    bottom:86px; /* فوق الزر مباشرة (52px ارتفاع الزر + 24px مسافة سفلية + هامش) */
    left:24px;
    z-index:200;
    width:290px;
    background:var(--white);
    border-radius:16px;
    box-shadow:0 20px 44px rgba(0,28,99,0.22);
    overflow:hidden;
  }
  .help-panel.is-open{ display:block; }

  .help-panel__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    background:var(--navy);
    color:var(--white);
    font-weight:700;
    font-size:.98rem;
  }
  .help-panel__close{
    width:26px; height:26px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    color:var(--white);
    font-size:.85rem;
    flex-shrink:0;
  }

  .help-panel__body{ padding:10px; max-height:min(60vh, 340px); overflow-y:auto; }
  .help-item{
    display:block;
    width:100%;
    text-align:start;
    padding:13px 12px;
    border-radius:10px;
    font-size:.9rem;
    color:var(--navy-soft);
    border-bottom:1px solid rgba(0,28,99,0.06);
    transition:.15s;
  }
  .help-item:last-child{ border-bottom:none; }
  .help-item:hover{ background:var(--cream); color:var(--orange); }

  /* ============================================
     7) مؤشر تمرير للأسفل (اختياري بصري بسيط)
     ============================================ */
  .scroll-hint{
    position:absolute;
    bottom:26px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:var(--navy-soft);
    opacity:.55;
    font-size:.78rem;
  }
  .scroll-hint svg{
    width:16px; height:16px;
    color:var(--orange);
    animation: bounce 1.8s ease-in-out infinite;
  }
  @keyframes bounce{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(6px); }
  }

  /* ============================================
     8) الديسكتوب: فتح القائمة الفرعية بالتمرير (hover) لا بالضغط
     ============================================ */
  @media (min-width:821px){
    .nav__item:hover .nav__submenu{ display:block; }
    .nav__item:hover > .nav__parent .nav__chevron{ transform:rotate(180deg); }

    .lang-switch:hover .lang-menu{ display:block; }
  }

  /* ============================================
     صفحة "انضم إلينا" - ترويسة + نموذج التقديم
     ============================================ */
  .join-page{
    padding:60px 20px 100px;
    display:flex;
    justify-content:center;
  }
  .join-page__inner{
    width:100%;
    max-width:560px;
    text-align:center;
  }

  .join-eyebrow{
    font-size:.95rem;
    font-weight:600;
    color:var(--orange);
    margin-bottom:10px;
  }
  .join-title{
    font-size:clamp(1.6rem, 4vw, 2.2rem);
    font-weight:700;
    color:var(--navy);
    line-height:1.4;
    margin-bottom:14px;
  }
  .join-sub{
    font-size:1rem;
    color:var(--navy-soft);
    line-height:1.8;
    margin-bottom:40px;
  }

  .join-form{
    text-align:start;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .form-group{ display:flex; flex-direction:column; gap:7px; }
  .form-group label{
    font-size:.88rem;
    font-weight:600;
    color:var(--navy);
  }
  .required-star{
    color:#D32F2F;
    font-weight:700;
  }

  .field-invalid{
    animation:field-shake .35s;
    outline:2px solid #D32F2F !important;
    outline-offset:2px;
    border-radius:10px;
  }
  @keyframes field-shake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-4px); }
    75%{ transform:translateX(4px); }
  }

  .field-error-msg{
    font-size:.82rem;
    color:#D32F2F;
    font-weight:600;
    margin-top:-2px;
  }

  /* ============================================
     قائمة اقتراحات مخصصة لكل حقل - تدعم حذف عنصر بعينه (✕)
     بعكس datalist الأصلي الذي لا يدعم أي تخصيص داخلي
     ============================================ */
  .field-history-wrap{ position:relative; }

  /* زر سجل Belnix: لا تظهر الاقتراحات المحفوظة إلا عند طلب المستخدم صراحة */
  /* لا نحجز مساحة للأيقونة ولا نظهرها عند تحميل الصفحة؛
     تظهر فقط أثناء تفاعل المستخدم مع الحقل الذي لديه سجل محفوظ. */
  .field-history-wrap.has-saved-history:focus-within > input,
  .field-history-wrap.has-saved-history:focus-within > textarea{
    padding-inline-end:52px;
  }

  .field-history-trigger{
    position:absolute;
    top:50%;
    inset-inline-end:10px;
    transform:translateY(-50%);
    z-index:4;
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0,28,99,.12);
    border-radius:9px;
    background:rgba(243,239,230,.96);
    color:var(--navy);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease, opacity .16s ease, visibility .16s ease;
  }
  .field-history-wrap.has-saved-history:focus-within .field-history-trigger:not([hidden]){
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .field-history-trigger:hover,
  .field-history-trigger:focus-visible{
    color:var(--orange);
    border-color:rgba(242,64,10,.45);
    background:var(--white);
    outline:none;
  }
  .field-history-trigger:active{ transform:translateY(-50%) scale(.96); }
  .field-history-trigger[hidden]{ display:none !important; }
  .field-history-trigger svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .field-history-trigger::after{
    content:'';
    position:absolute;
    width:5px;
    height:5px;
    inset-inline-end:4px;
    top:4px;
    border-radius:50%;
    background:var(--orange);
    box-shadow:0 0 0 2px var(--cream);
  }

  .field-history-dropdown{
    display:none !important;
    position:absolute;
    top:100%;
    padding-top:6px; /* مسافة شفافة ضمن منطقة التمرير - لا تقطع الاتصال */
    inset-inline-start:0;
    inset-inline-end:0;
    z-index:65;
  }
  /* حماية إضافية: لا تظهر محفوظات Belnix إلا إذا فُتحت صراحة من زر السجل */
  .field-history-dropdown.is-open[data-belnix-history-open="true"]{ display:block !important; }

  .field-history-inner{
    background:var(--white);
    border:1px solid rgba(0,28,99,0.08);
    border-radius:12px;
    box-shadow:0 16px 32px rgba(0,28,99,0.14);
    padding:6px;
    max-height:220px;
    overflow-y:auto;
  }

  .history-row{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .history-value{
    flex:1;
    min-width:0;
    text-align:start;
    padding:9px 10px;
    border-radius:8px;
    font-size:.88rem;
    color:var(--navy-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:.15s;
  }
  .history-value:hover{ background:var(--cream); color:var(--orange); }

  .history-delete{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px; height:26px;
    flex-shrink:0;
    border-radius:50%;
    color:var(--navy-soft);
    font-size:.75rem;
    transition:.15s;
  }
  .history-delete:hover{ background:#D32F2F; color:var(--white); }

  .file-field{ display:flex; align-items:center; gap:10px; }

  .file-custom-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 18px;
    border-radius:10px;
    border:1.5px solid rgba(0,28,99,0.14);
    background:var(--cream);
    color:var(--navy);
    font-size:.88rem;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    flex-shrink:0;
    transition:.2s;
  }
  .file-custom-btn:hover{ border-color:var(--orange); color:var(--orange); }

  .file-custom-name{
    flex:1;
    min-width:0;
    font-size:.86rem;
    color:var(--navy-soft);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .file-custom-name.has-file{ color:var(--navy); font-weight:600; }

  /* إخفاء عنصر الرفع الأصلي بصريًا فقط - يبقى وظيفيًا وقابلًا للوصول (لوحة المفاتيح/قارئ الشاشة) */
  .file-native-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .file-clear-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px; height:30px;
    flex-shrink:0;
    border-radius:50%;
    background:rgba(242,64,10,0.1);
    color:var(--orange);
    font-size:.85rem;
    transition:.2s;
  }
  .file-clear-btn:hover{ background:var(--orange); color:var(--white); }

  .join-form input,
  .join-form select,
  .join-form textarea{
    width:100%;
    padding:13px 15px;
    border-radius:10px;
    border:1.5px solid rgba(0,28,99,0.14);
    font-family:inherit;
    font-size:.94rem;
    color:var(--navy);
    background:var(--white);
    outline:none;
    transition:.2s;
  }
  .join-form input:focus,
  .join-form select:focus,
  .join-form textarea:focus{ border-color:var(--orange); }
  .join-form textarea{ resize:vertical; }
  .join-form .interest-area-field{
    min-height:49px;
    resize:none;
    overflow:hidden;
    line-height:1.45;
  }

  @media (max-width:640px){
    .join-form .interest-area-field{
      min-height:78px;
    }
  }

  /* حقل المصيدة المخفي - مخفي تمامًا عن البشر بصريًا وعن قارئات الشاشة */
  .hp-field{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  /* ============================================
     حقل الهاتف المركّب: مفتاح دولة (علم+رمز) + رقم
     ============================================ */
  .phone-field{
    display:flex;
    gap:8px;
    direction:ltr; /* ترتيب ثابت: المفتاح ثم الرقم، بنفس شكل الإنجليزي بكلا اللغتين */
  }

  .phone-code{ position:relative; flex-shrink:0; }

  .phone-code-btn{
    display:flex;
    align-items:center;
    gap:6px;
    height:100%;
    padding:0 10px;
    border-radius:10px;
    border:1.5px solid rgba(0,28,99,0.14);
    background:var(--white);
    transition:.2s;
  }
  .phone-code-btn:hover{ border-color:var(--orange); }
  .phone-code-btn svg{ width:13px; height:13px; color:var(--navy-soft); flex-shrink:0; }

  .phone-flag{
    width:22px; height:15px;
    border-radius:3px;
    flex-shrink:0;
    box-shadow:0 0 0 1px rgba(0,28,99,0.1);
    object-fit:cover;
  }

  #selectedDial{ font-size:.88rem; font-weight:600; color:var(--navy); white-space:nowrap; }

  .phone-code-menu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    inset-inline-start:0;
    z-index:70;
    min-width:190px;
    max-height:260px;
    overflow-y:auto;
    background:var(--white);
    border:1px solid rgba(0,28,99,0.08);
    border-radius:12px;
    box-shadow:0 16px 32px rgba(0,28,99,0.14);
    padding:6px;
  }
  .phone-code-menu.is-open{ display:block; }

  .phone-code-option{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    padding:9px 10px;
    border-radius:8px;
    font-size:.86rem;
    color:var(--navy-soft);
    text-align:start;
    transition:.15s;
  }
  .phone-code-option:hover{ background:var(--cream); color:var(--orange); }
  .phone-code-dial{ font-weight:700; color:var(--navy); min-width:38px; }

  #phoneNumberInput{ flex:1; min-width:0; text-align:left; direction:ltr; }

  .h-captcha{ margin-top:4px; }

  /* التحقق البشري هو الخطوة الأخيرة: لا يصبح متاحًا إلا بعد اكتمال
     الحقول الإلزامية السابقة وصحتها. قبل ذلك تظهر رسالة إرشادية فقط. */
  .captcha-stage{position:relative;min-height:78px;display:flex;align-items:center;justify-content:center;}
  .captcha-stage #captchaBox{min-height:78px;width:100%;display:flex;align-items:center;justify-content:center;}
  .captcha-gate{position:absolute;inset:0;z-index:5;min-height:78px;transition:opacity .12s ease;}
  .captcha-gate.is-ready{display:flex;opacity:0;pointer-events:none;}
  .captcha-stage #captchaBox[hidden]{display:flex !important;}

  .join-submit{
    margin-top:8px;
    width:100%;
    justify-content:center;
  }
  .join-submit:disabled{
    opacity:.45;
    cursor:not-allowed;
    box-shadow:none;
  }
  .join-submit:disabled:hover{ background:var(--orange); transform:none; }

  .join-status{
    text-align:center;
    font-size:.9rem;
    font-weight:600;
    min-height:20px;
  }
  .join-status.is-success{ color:var(--wa-green-dark); }
  .join-status.is-error{ color:#D32F2F; }

  /* ============================================



  /* ============================================
     صفحة "تواصل معنا" - قصيرة وموجّهة لاتخاذ إجراء
     ============================================ */
  .contact-page{
    position:relative;
    padding:68px 20px 110px;
    overflow:hidden;
  }
  .contact-page::before,
  .contact-page::after{
    content:'';
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    opacity:.55;
  }
  .contact-page::before{
    width:320px; height:320px;
    top:-210px; inset-inline-start:-150px;
    border:1px solid rgba(0,28,99,.12);
    box-shadow:0 0 0 42px rgba(0,28,99,.025), 0 0 0 84px rgba(242,64,10,.025);
  }
  .contact-page::after{
    width:260px; height:260px;
    bottom:-185px; inset-inline-end:-115px;
    border:1px solid rgba(242,64,10,.16);
    box-shadow:0 0 0 38px rgba(242,64,10,.025), 0 0 0 76px rgba(0,28,99,.025);
  }
  .contact-page__inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1160px;
    margin:0 auto;
  }
  .contact-intro{
    max-width:760px;
    margin:0 auto 42px;
    text-align:center;
  }
  .contact-eyebrow{
    margin-bottom:11px;
    color:var(--orange);
    font-size:1.1rem;
    font-weight:800;
  }
  .contact-title{
    margin-bottom:14px;
    color:var(--navy);
    font-size:clamp(1.8rem,4vw,2.65rem);
    line-height:1.4;
  }
  .contact-lead{
    max-width:680px;
    margin:0 auto;
    color:var(--navy-soft);
    font-size:1.02rem;
    line-height:1.9;
  }

  .contact-channels{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-bottom:34px;
  }
  .contact-channel{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:270px;
    padding:26px 24px 24px;
    border:1px solid rgba(0,28,99,.09);
    border-radius:20px;
    background:var(--white);
    box-shadow:0 14px 34px rgba(0,28,99,.07);
    overflow:hidden;
    transition:transform .22s, box-shadow .22s, border-color .22s;
  }
  .contact-channel::after{
    content:'';
    position:absolute;
    inset-inline-end:-38px;
    top:-46px;
    width:128px; height:128px;
    border-radius:50%;
    background:rgba(0,28,99,.035);
  }
  .contact-channel:hover{
    transform:translateY(-4px);
    border-color:rgba(242,64,10,.25);
    box-shadow:0 18px 40px rgba(0,28,99,.11);
  }
  .contact-channel--wa{
    border-color:rgba(242,64,10,.22);
    background:linear-gradient(145deg,#fff 0%,rgba(242,64,10,.045) 100%);
  }
  .contact-channel__icon{
    position:relative;
    z-index:1;
    width:54px; height:54px;
    margin-bottom:18px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--navy);
    color:var(--white);
  }
  .contact-channel--wa .contact-channel__icon{ background:var(--orange); }
  .contact-channel__icon svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .contact-channel--wa .contact-channel__icon svg{ fill:currentColor; stroke:none; width:27px; height:27px; }
  .contact-channel__title{
    position:relative;
    z-index:1;
    margin-bottom:8px;
    color:var(--navy);
    font-size:1.17rem;
    font-weight:700;
  }
  .contact-channel__text{
    position:relative;
    z-index:1;
    margin-bottom:20px;
    color:var(--navy-soft);
    font-size:.9rem;
    line-height:1.75;
  }
  .contact-channel__value{
    position:relative;
    z-index:1;
    margin-top:auto;
    margin-bottom:13px;
    color:var(--navy);
    font-family:'Inter',sans-serif;
    font-size:.86rem;
    font-weight:700;
    direction:ltr;
    text-align:start;
    overflow-wrap:anywhere;
  }
  .contact-channel__button{
    position:relative;
    z-index:1;
    width:100%;
    justify-content:center;
    padding:12px 18px;
    border-radius:11px;
    background:var(--navy);
    color:var(--white);
    font-size:.9rem;
    font-weight:700;
    transition:.22s;
  }
  .contact-channel__button:hover{ background:var(--orange); transform:translateY(-1px); }
  .contact-channel--wa .contact-channel__button{ background:var(--orange); }
  .contact-channel--wa .contact-channel__button:hover{ background:var(--wa-green); }

  .contact-request-section{
    margin-bottom:28px;
    padding:34px;
    border-radius:24px;
    background:var(--navy);
    box-shadow:0 18px 42px rgba(0,28,99,.15);
  }
  .contact-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
  }
  .contact-section-head__copy{ max-width:680px; }
  .contact-section-head__eyebrow{
    margin-bottom:8px;
    color:var(--orange);
    font-size:1.05rem;
    font-weight:800;
  }
  .contact-section-head__title{
    margin-bottom:7px;
    color:var(--white);
    font-size:clamp(1.35rem,2.7vw,1.85rem);
    line-height:1.45;
  }
  .contact-section-head__text{
    color:rgba(255,255,255,.7);
    font-size:.9rem;
    line-height:1.75;
  }
  .contact-request-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .contact-request{
    min-height:78px;
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:14px 15px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    background:rgba(255,255,255,.07);
    color:var(--white);
    text-align:start;
    transition:.2s;
  }
  .contact-request:hover,
  .contact-request:focus-visible{
    background:var(--white);
    color:var(--navy);
    border-color:var(--white);
    transform:translateY(-2px);
  }
  .contact-request:focus-visible{ outline:3px solid rgba(242,64,10,.65); outline-offset:3px; }
  .contact-request__icon{
    width:38px; height:38px;
    flex:0 0 38px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--orange);
    color:var(--white);
  }
  .contact-request__icon svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .contact-request__label{ flex:1; font-size:.89rem; font-weight:700; line-height:1.4; }
  .contact-request__arrow{ color:var(--orange); font-size:1.15rem; font-weight:800; transform:scaleX(-1); }
  body.lang-en .contact-request__arrow{ transform:none; }

  .contact-lower-grid{
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:18px;
    margin-bottom:20px;
  }
  .contact-info-card{
    min-height:260px;
    padding:28px;
    border:1px solid rgba(0,28,99,.09);
    border-radius:22px;
    background:var(--white);
    box-shadow:0 12px 30px rgba(0,28,99,.06);
  }
  .contact-info-card__icon{
    width:48px; height:48px;
    margin-bottom:16px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(242,64,10,.1);
    color:var(--orange);
  }
  .contact-info-card__icon svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .contact-info-card__title{
    margin-bottom:9px;
    color:var(--navy);
    font-size:1.2rem;
    font-weight:700;
  }
  .contact-info-card__text{
    color:var(--navy-soft);
    font-size:.91rem;
    line-height:1.85;
  }
  .contact-area-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:18px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(0,28,99,.055);
    color:var(--navy);
    font-size:.82rem;
    font-weight:700;
  }
  .contact-area-badge::before{
    content:'';
    width:7px; height:7px;
    border-radius:50%;
    background:var(--orange);
  }

  .contact-social-card{ background:linear-gradient(145deg,#fff 0%,rgba(0,28,99,.025) 100%); }
  .contact-social-links{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-top:20px;
  }
  .contact-social-link{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--navy-soft);
    font-size:.78rem;
    font-weight:700;
    transition:transform .2s,color .2s;
  }
  .contact-social-link:hover{ transform:translateY(-3px); color:var(--navy); }
  .contact-social-link:focus-visible{ outline:3px solid rgba(242,64,10,.35); outline-offset:4px; border-radius:12px; }
  .contact-social-link__icon{
    width:48px; height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--orange);
    color:var(--white);
    box-shadow:0 8px 18px rgba(242,64,10,.2);
    transition:.22s;
  }
  .contact-social-link__icon svg{ width:22px; height:25px; fill:currentColor; display:block; }
  .contact-social-link--facebook:hover .contact-social-link__icon{ background:#1877F2; }
  .contact-social-link--instagram:hover .contact-social-link__icon{ background:linear-gradient(135deg,#833AB4 0%,#FD1D1D 52%,#FCAF45 100%); }
  .contact-social-link--instagram .contact-social-link__icon svg{
    width:22px; height:22px;
    fill:none; stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round; stroke-linejoin:round;
  }

  .contact-social-link--tiktok:hover .contact-social-link__icon{ background:#000; }
  .contact-social-link--linkedin:hover .contact-social-link__icon{ background:#0A66C2; }
  .contact-social-link--haraj:hover .contact-social-link__icon{ background:#147DB9; }
  .contact-social-link__haraj{
    font-family:var(--font-ar);
    font-size:.72rem;
    font-weight:700;
    line-height:1;
  }

  .contact-tip{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:28px;
    padding:17px 19px;
    border:1px solid rgba(242,64,10,.16);
    border-radius:15px;
    background:rgba(242,64,10,.055);
    color:var(--navy-soft);
    font-size:.88rem;
    line-height:1.75;
  }
  .contact-tip__icon{
    width:28px; height:28px;
    flex:0 0 28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--orange);
    color:var(--white);
    font-weight:800;
    font-family:'Inter',sans-serif;
  }

  @media (max-width:900px){
    .contact-channels{ grid-template-columns:1fr; }
    .contact-channel{ min-height:0; }
    .contact-request-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .contact-lower-grid{ grid-template-columns:1fr; }
  }

  @media (max-width:640px){
    .contact-page{ padding:42px 16px 100px; }
    .contact-intro{ margin-bottom:30px; }
    .contact-lead{ font-size:.94rem; }
    .contact-channels{ gap:13px; margin-bottom:24px; }
    .contact-channel{ padding:22px 19px; border-radius:17px; }
    .contact-channel__icon{ width:49px; height:49px; border-radius:14px; }
    .contact-request-section{ padding:25px 16px; border-radius:20px; }
    .contact-section-head{ display:block; margin-bottom:19px; text-align:center; }
    .contact-request-grid{ grid-template-columns:1fr; gap:10px; }
    .contact-request{ min-height:66px; }
    .contact-lower-grid{ gap:13px; }
    .contact-info-card{ min-height:0; padding:22px 19px; border-radius:18px; text-align:center; }
    .contact-info-card__icon{ margin-inline:auto; }
    .contact-social-links{
      width:250px;
      max-width:100%;
      margin-inline:auto;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:16px 10px;
    }
    .contact-social-link{ width:72px; flex:0 0 72px; }
    .contact-tip{ padding:15px; font-size:.84rem; }
  }

  /* ============================================
     تذييل المتابعة الاجتماعية - الصفحة الرئيسية فقط حاليًا
     الأيقونات دائرية: برتقالية افتراضيًا، وتتحول إلى لون المنصة عند التفاعل
     ============================================ */
  .home-social-footer{
    position:relative;
    overflow:hidden;
    padding:34px 28px;
    background:var(--navy);
    color:var(--white);
    border-top:4px solid var(--orange);
  }

  /* زخرفة خفيفة داخلية بلا صور أو اتصالات خارجية */
  .home-social-footer::before,
  .home-social-footer::after{
    content:'';
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    pointer-events:none;
    opacity:.14;
  }
  .home-social-footer::before{
    top:-170px;
    inset-inline-start:-80px;
    border:1px solid var(--white);
    box-shadow:0 0 0 28px rgba(255,255,255,.08), 0 0 0 58px rgba(242,64,10,.10);
  }
  .home-social-footer::after{
    bottom:-195px;
    inset-inline-end:-90px;
    border:1px solid var(--orange);
    box-shadow:0 0 0 34px rgba(242,64,10,.09), 0 0 0 68px rgba(255,255,255,.06);
  }

  .home-social-footer__inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(230px,.8fr) minmax(0,1.45fr);
    align-items:center;
    gap:34px;
  }

  .home-social-footer__copy{ text-align:start; }
  .home-social-footer__eyebrow{
    margin-bottom:5px;
    color:var(--orange);
    font-family:'Inter', sans-serif;
    font-size:.77rem;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
  }
  .home-social-footer__title{
    margin-bottom:7px;
    color:var(--white);
    font-size:clamp(1.25rem, 2.3vw, 1.65rem);
    font-weight:700;
    line-height:1.4;
  }
  .home-social-footer__text{
    max-width:420px;
    color:rgba(255,255,255,.74);
    font-size:.91rem;
    line-height:1.8;
  }

  .social-links{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:14px;
    align-items:center;
  }
  .social-link{
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--white);
    font-size:.9rem;
    font-weight:600;
    transition:transform .2s, color .2s;
  }
  .social-link:hover{ transform:translateY(-3px); }
  .social-link:focus-visible{
    outline:3px solid rgba(255,255,255,.78);
    outline-offset:5px;
    border-radius:999px;
  }
  .social-link__icon{
    width:52px;
    height:52px;
    flex:0 0 52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--orange);
    color:var(--white);
    box-shadow:0 8px 18px rgba(0,0,0,.2);
    transition:background .22s, transform .22s, box-shadow .22s;
  }
  .social-link:hover .social-link__icon,
  .social-link:focus-visible .social-link__icon{
    transform:scale(1.07);
    box-shadow:0 10px 24px rgba(0,0,0,.26);
  }
  .social-link--facebook:hover .social-link__icon,
  .social-link--facebook:focus-visible .social-link__icon{ background:#1877F2; }
  .social-link--instagram:hover .social-link__icon,
  .social-link--instagram:focus-visible .social-link__icon{
    background:linear-gradient(135deg,#833AB4 0%,#FD1D1D 52%,#FCAF45 100%);
  }
  .social-link--tiktok:hover .social-link__icon,
  .social-link--tiktok:focus-visible .social-link__icon{ background:#000000; }
  .social-link--linkedin:hover .social-link__icon,
  .social-link--linkedin:focus-visible .social-link__icon{ background:#0A66C2; }
  .social-link--haraj:hover .social-link__icon,
  .social-link--haraj:focus-visible .social-link__icon{ background:#147DB9; }

  .social-link__icon svg{
    width:24px;
    height:28px;
    display:block;
    fill:currentColor;
  }
  .social-link--instagram .social-link__icon svg{ width:25px; height:29px; }
  .social-link--linkedin .social-link__icon svg{ width:23px; height:27px; }
  .social-link__haraj-mark{
    color:var(--white);
    font-family:var(--font-ar);
    font-size:.93rem;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    transform:translateY(-1px);
  }
  .social-link__label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:rgba(255,255,255,.92);
  }
  .social-link__label--haraj-en{ display:none; }
  body.lang-en .social-link__label--haraj-en{ display:inline; }

  @media (max-width:980px){
    .home-social-footer__inner{ grid-template-columns:1fr; gap:24px; }
    .home-social-footer__copy{ text-align:center; }
    .home-social-footer__text{ margin-inline:auto; }
    .social-links{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  }

  /* ============================================
     9) تجاوب الجوال
     ============================================ */
  @media (max-width:640px){
    .site-nav{ padding:14px 16px; gap:10px; }
    .nav__right{ gap:8px; }

    .home-social-footer{
      padding:28px 16px 92px;
    }
    .home-social-footer__inner{ gap:22px; }
    .home-social-footer__eyebrow{ font-size:.72rem; }
    .home-social-footer__title{ font-size:1.28rem; }
    .home-social-footer__text{ font-size:.86rem; line-height:1.75; }
    .social-links{ grid-template-columns:1fr 1fr; gap:16px 10px; }
    .social-link{ justify-content:center; font-size:.84rem; }
    .social-link__icon{ width:48px; height:48px; flex-basis:48px; }
    .social-link:last-child{ grid-column:1 / -1; justify-self:center; min-width:130px; }

    .nav__brand span{ font-size:.92rem; }

    /* ============================================
       قائمة الجوال - منسدلة صغيرة من الزاوية العلوية
       (بنفس أسلوب قائمة اللغة والقوائم الفرعية، وليست لوحة تغطي الشاشة)
       ============================================ */
    .nav__links{
      display:none;
      position:absolute;
      top:calc(100% + 10px);
      inset-inline-end:16px; /* تحت زر الهمبرغر تلقائيًا بأي لغة */
      min-width:230px;
      max-width:80vw;
      max-height:70vh;
      overflow-y:auto;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:var(--white);
      border:1px solid rgba(0,28,99,0.08);
      border-radius:14px;
      box-shadow:0 16px 32px rgba(0,28,99,0.18);
      padding:8px;
      z-index:200;
    }
    .nav__links.is-open{ display:flex; }

    .nav__link{
      padding:13px 10px;
      border-bottom:1px solid rgba(0,28,99,0.06);
      justify-content:space-between;
      width:100%;
      text-align:right;
      border-radius:8px;
    }
    .nav__link:last-child{ border-bottom:none; }
    .nav__link.is-active::after{ display:none; }

    /* القائمة الفرعية على الجوال: أكورديون مندمج ضمن القائمة نفسها، وليست عائمة */
    .nav__submenu{
      position:static;
      padding-top:0; /* لا حاجة لمنطقة التمرير الشفافة على الجوال (لا يوجد hover) */
    }
    .nav__submenu-inner{
      background:rgba(0,28,99,0.03);
      border:none;
      box-shadow:none;
      border-radius:8px;
      padding:2px 0 6px 14px;
      margin-bottom:2px;
    }
    .nav__submenu a{ padding:11px 6px; font-size:.85rem; }

    .hamburger{ display:flex; }

    /* على الجوال: مبدل اللغة يظهر كأيقونة فقط بدون نص، لتوفير المساحة بجانب الهمبرغر */
    .lang-switch-btn,
    .lang-switch:hover .lang-switch-btn,
    .lang-switch:focus-within .lang-switch-btn{
      width:42px;
      max-width:42px;
      min-height:42px;
      padding:9px 11px;
      justify-content:center;
    }
    .lang-switch-btn span,
    .lang-switch:hover .lang-switch-btn span,
    .lang-switch:focus-within .lang-switch-btn span{ display:none; }
    .lang-menu-inner{ min-width:200px; }
    .search-wrap:hover .site-search, .search-wrap:focus-within .site-search, .site-search.is-open{ width:min(42vw, 145px); }
    body.lang-en .search-inline-input{ font-size:.76rem; }
    body.lang-en .site-search.is-open .search-inline-input,
    body.lang-en .search-wrap:focus-within .site-search .search-inline-input{ padding-inline-end:6px; }

    .hero{ padding:24px 16px 50px; }
    .hero__logo-wrap{ width:100px; height:100px; }
    .btn{ width:100%; justify-content:center; }
    .hero__ctas{ width:100%; flex-direction:column; }
    .float-wa{ width:52px; height:52px; bottom:18px; right:18px; }
    .float-help{ font-size:.82rem; bottom:18px; left:18px; }
    .float-help svg{ width:19px; height:19px; }
    .help-panel{ width:min(82vw, 290px); bottom:76px; left:18px; }

    .join-page{ padding:40px 16px 70px; }
    .form-row{ grid-template-columns:1fr; }
    .phone-code-menu{ min-width:min(70vw, 220px); }
    /* الجوال: مفتاح الدولة فوق حقل الرقم عموديًا بدل جنب بعض،
       لضمان قراءة الرقم المكتوب كاملاً بوضوح بلا أي قص */
    /* الجوال: يبقيان جنب بعض، لكن مفتاح الدولة مصغّر (بلا نص، أيقونة العلم فقط)
       ليترك أكبر مساحة ممكنة لحقل الرقم نفسه */
    .phone-code-btn{ padding:0 7px; gap:3px; }
    .phone-code-btn svg{ width:11px; height:11px; }
    .phone-flag{ width:19px; height:13px; }
    #selectedDial{ font-size:.82rem; }
    #phoneNumberInput{ font-size:.88rem; padding:11px 10px; }
  }

  /* احترام تفضيل تقليل الحركة */
  @media (prefers-reduced-motion: reduce){
    .hero__logo-glow, .scroll-hint svg{ animation:none; }
  }


  


  /* ============================================
     صفحة الشركة - توزيع متوازن ومتنوّع
     ============================================ */
  .company-page{
    position:relative;
    padding:104px 20px 112px;
    overflow:hidden;
  }
  .company-page::before,
  .company-page::after{
    content:'';
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    opacity:.36;
  }
  .company-page::before{
    width:310px;
    height:310px;
    top:-220px;
    inset-inline-end:-125px;
    border:1px solid rgba(0,28,99,.10);
    box-shadow:
      0 0 0 42px rgba(0,28,99,.018),
      0 0 0 84px rgba(242,64,10,.018);
  }
  .company-page::after{
    width:220px;
    height:220px;
    bottom:-160px;
    inset-inline-start:-95px;
    border:1px solid rgba(242,64,10,.13);
    box-shadow:
      0 0 0 32px rgba(242,64,10,.018),
      0 0 0 64px rgba(0,28,99,.018);
  }
  .company-page__inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1080px;
    margin:0 auto;
  }

  .company-hero{
    max-width:790px;
    margin:0 auto 42px;
    text-align:center;
  }
  .company-eyebrow{
    margin-bottom:10px;
    color:var(--orange);
    font-size:1.04rem;
    font-weight:800;
  }
  .company-title{
    margin-bottom:16px;
    color:var(--navy);
    font-size:clamp(2.1rem,4.4vw,3.15rem);
    line-height:1.3;
    letter-spacing:-.35px;
  }
  .company-lead{
    max-width:740px;
    margin:0 auto;
    color:var(--navy-soft);
    font-size:1rem;
    line-height:1.9;
  }

  .company-anchor-nav{
    position:relative;
    top:auto;
    z-index:8;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin:0 auto 36px;
    padding:9px;
    border:1px solid rgba(0,28,99,.08);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 26px rgba(0,28,99,.065);
  }
  .company-anchor-link{
    flex:1 1 150px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 15px;
    border-radius:12px;
    color:var(--navy);
    font-size:.89rem;
    font-weight:700;
    transition:.2s;
  }
  .company-anchor-link:hover,
  .company-anchor-link:focus-visible{
    color:var(--white);
    background:var(--navy);
    outline:none;
  }

  .company-section{
    scroll-margin-top:112px;
    margin-bottom:22px;
  }
  .company-section-card{
    position:relative;
    overflow:hidden;
    padding:36px;
    border:1px solid rgba(0,28,99,.08);
    border-radius:24px;
    background:var(--white);
    box-shadow:0 14px 34px rgba(0,28,99,.06);
  }
  .company-section-card::after{
    content:'';
    position:absolute;
    width:125px;
    height:125px;
    top:-74px;
    inset-inline-end:-55px;
    border-radius:50%;
    background:rgba(0,28,99,.028);
    pointer-events:none;
  }
  .company-section-card--soft{
    background:linear-gradient(145deg,#fff 0%,rgba(0,28,99,.02) 100%);
  }
  .company-section-card--navy{
    background:var(--navy);
    border-color:transparent;
    box-shadow:0 18px 42px rgba(0,28,99,.17);
  }
  .company-section-card--navy::after{
    background:rgba(255,255,255,.045);
  }

  .company-split{
    display:grid;
    grid-template-columns:minmax(0,1.58fr) minmax(250px,.68fr);
    align-items:stretch;
    gap:58px;
  }
  body.lang-en .company-split{
    grid-template-columns:minmax(0,1.4fr) minmax(290px,.82fr);
    gap:34px;
  }
  .company-split__copy{
    min-width:0;
    align-self:center;
  }
  .company-side-panel{
    position:relative;
    z-index:1;
    align-self:stretch;
    padding:24px;
    border-radius:20px;
    background:rgba(0,28,99,.045);
  }
  .company-side-panel--navy{
    background:var(--navy);
    color:var(--white);
  }
  .company-side-panel__title{
    margin-bottom:14px;
    color:var(--navy);
    font-size:1.02rem;
    font-weight:800;
    line-height:1.5;
  }
  .company-side-panel--navy .company-side-panel__title{
    color:var(--white);
  }
  .company-side-list{
    display:grid;
    gap:11px;
  }
  .company-side-item{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:64px;
    padding:11px 13px;
    border:1px solid rgba(0,28,99,.065);
    border-radius:14px;
    background:var(--white);
  }
  .company-side-panel--navy .company-side-item{
    border-color:rgba(255,255,255,.13);
    background:rgba(255,255,255,.07);
  }
  .company-side-item__num,
  .company-side-item__icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:var(--orange);
    color:var(--white);
    font-family:'Inter',sans-serif;
    font-size:.88rem;
    font-weight:800;
  }
  .company-side-item__icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .company-side-item__label{
    color:var(--navy);
    font-size:.89rem;
    font-weight:700;
    line-height:1.55;
  }
  .company-side-panel--navy .company-side-item__label{
    color:var(--white);
  }

  .company-section-kicker{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:12px;
    color:var(--orange);
    font-size:1.04rem;
    font-weight:800;
  }
  .company-section-kicker::before{
    content:'';
    width:25px;
    height:2px;
    border-radius:2px;
    background:var(--orange);
  }
  .company-heading{
    position:relative;
    z-index:1;
    max-width:820px;
    margin-bottom:13px;
    color:var(--navy);
    font-size:clamp(1.5rem,2.9vw,2.08rem);
    line-height:1.42;
  }
  .company-copy{
    position:relative;
    z-index:1;
    max-width:860px;
    color:var(--navy-soft);
    font-size:.98rem;
    line-height:1.95;
  }
  .company-section-card--navy .company-section-kicker{
    color:var(--orange);
  }
  .company-section-card--navy .company-section-kicker::before{
    background:var(--orange);
  }
  .company-section-card--navy .company-heading{
    color:var(--white);
  }
  .company-section-card--navy .company-copy{
    color:rgba(255,255,255,.84);
  }

  @media (max-width:850px){
    .company-split,
    body.lang-en .company-split{
      grid-template-columns:1fr;
      gap:24px;
    }
    .company-side-panel{
      min-height:0;
    }
  }

  @media (max-width:640px){
    .company-page{
      padding:54px 16px 96px;
    }
    .company-hero{
      margin-bottom:30px;
    }
    .company-lead{
      font-size:.94rem;
    }
    .company-anchor-nav{
      position:relative;
      top:auto;
      margin-bottom:28px;
    }
    .company-anchor-link{
      flex:1 1 calc(50% - 8px);
      min-width:0;
      padding:9px 10px;
      font-size:.83rem;
    }
    .company-section-card{
      padding:25px 21px;
      border-radius:20px;
    }
    .company-split,
    body.lang-en .company-split{
      gap:22px;
    }
    .company-side-panel{
      padding:18px;
      border-radius:17px;
    }
    .company-heading{
      font-size:1.4rem;
    }
    .company-copy{
      font-size:.93rem;
      line-height:1.9;
    }
  }



  /* معاينة موحّدة: تثبيت الشريط على الجوال في صفحتي التواصل والانضمام */
  @media (max-width:640px){
    body.preview-fixed-mobile-nav{ padding-top:71px; }
    body.preview-fixed-mobile-nav .site-nav{
      position:fixed;
      top:0;
      inset-inline:0;
      width:100%;
    }
  }

  /* منع الحقول المخفية من توسيع عرض صفحة انضم إلينا على الجوال */
  .join-form .file-native-hidden,
  .join-form .hp-field{
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
  }


  /* ============================================
     صفحة "من أعمالنا / Our Work" - مضافة للمعاينة v24 فقط
     جميع التنسيقات محصورة داخل work-* حتى لا تمس الصفحات السابقة
     ============================================ */
  .work-page{
    position:relative;
    padding:68px 20px 104px;
    overflow:hidden;
    background:
      radial-gradient(circle at 9% 9%, rgba(242,64,10,.07), transparent 24%),
      radial-gradient(circle at 91% 18%, rgba(0,28,99,.07), transparent 27%),
      var(--cream);
  }
  .work-page::before,
  .work-page::after{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    pointer-events:none;
    opacity:.5;
    background-image:radial-gradient(rgba(0,28,99,.18) 1.4px, transparent 1.4px);
    background-size:14px 14px;
  }
  .work-page::before{ top:120px; inset-inline-start:-105px; }
  .work-page::after{ bottom:250px; inset-inline-end:-100px; }
  .work-page__inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1180px;
    margin:0 auto;
  }
  .work-hero{
    max-width:860px;
    margin:0 auto 34px;
    text-align:center;
  }
  .work-eyebrow{
    margin-bottom:10px;
    color:var(--orange);
    font-size:1.16rem;
    font-weight:800;
    letter-spacing:.25px;
  }
  .work-title{
    margin:0;
    color:var(--navy);
    font-size:clamp(2rem, 5vw, 3.5rem);
    line-height:1.26;
    font-weight:800;
  }
  .work-lead{
    max-width:900px;
    margin:18px auto 0;
    color:var(--navy-soft);
    font-size:clamp(1rem, 2vw, 1.14rem);
    line-height:1.9;
  }
  .work-desktop-break{ display:block; }
  .work-proof-bar{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    max-width:900px;
    margin:30px auto 54px;
  }
  .work-proof{
    min-height:98px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:13px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(0,28,99,.09);
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,28,99,.07);
    text-align:start;
  }
  .work-proof__icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:var(--white);
    background:linear-gradient(145deg,var(--navy),#0c347f);
    box-shadow:0 8px 18px rgba(0,28,99,.2);
  }
  .work-proof:nth-child(2) .work-proof__icon{ background:linear-gradient(145deg,var(--orange),#ff6a34); }
  .work-proof__icon svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .work-proof__copy{ display:flex; flex-direction:column; gap:3px; }
  .work-proof__value{ color:var(--navy); font-size:1.08rem; font-weight:800; }
  .work-proof__label{ color:var(--navy-soft); font-size:.83rem; line-height:1.55; }

  .work-section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
  }
  .work-section-heading__copy{ width:100%; max-width:none; }
  .work-section-kicker{ color:var(--orange); font-weight:800; font-size:1.13rem; margin-bottom:8px; }
  .work-section-title{ color:var(--navy); font-size:clamp(1.65rem,2.45vw,2.08rem); line-height:1.35; font-weight:800; white-space:nowrap; }
  .work-section-text{ margin-top:9px; color:var(--navy-soft); line-height:1.8; font-size:.98rem; }
  .work-section-count{
    flex:0 0 auto;
    color:rgba(0,28,99,.12);
    font-family:var(--font-en);
    font-size:4rem;
    line-height:1;
    font-weight:800;
  }

  .work-projects{ display:flex; flex-direction:column; gap:30px; }
  .work-project{
    display:grid;
    grid-template-columns:minmax(300px, 410px) minmax(0,1fr);
    gap:clamp(28px,5vw,58px);
    align-items:center;
    padding:clamp(22px,3vw,34px);
    background:rgba(255,255,255,.9);
    border:1px solid rgba(0,28,99,.09);
    border-radius:28px;
    box-shadow:0 20px 46px rgba(0,28,99,.09);
    overflow:hidden;
    position:relative;
  }
  .work-project::before{
    content:'';
    position:absolute;
    inset-inline-start:0;
    top:0;
    bottom:0;
    width:5px;
    background:linear-gradient(var(--orange),var(--navy));
  }
  .work-project:nth-child(even) .work-project__media{ order:2; }
  .work-project:nth-child(even) .work-project__body{ order:1; }
  .work-project__media{
    min-width:0;
    display:flex;
    justify-content:center;
  }
  .work-poster-button{
    width:100%;
    max-width:390px;
    padding:10px;
    border-radius:22px;
    background:linear-gradient(145deg,rgba(0,28,99,.12),rgba(242,64,10,.12));
    box-shadow:0 18px 34px rgba(0,28,99,.16);
    transition:transform .25s ease, box-shadow .25s ease;
    position:relative;
  }
  .work-poster-button:hover,
  .work-poster-button:focus-visible{
    transform:translateY(-5px);
    box-shadow:0 24px 42px rgba(0,28,99,.22);
    outline:none;
  }
  .work-poster-button::after{
    content:'';
    position:absolute;
    inset:10px;
    border-radius:15px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
    pointer-events:none;
  }
  .work-poster-button img{
    width:100%;
    height:auto;
    border-radius:15px;
    background:var(--cream);
  }
  .work-poster-zoom{
    position:absolute;
    inset-inline-end:21px;
    bottom:21px;
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--white);
    background:rgba(0,28,99,.9);
    box-shadow:0 8px 18px rgba(0,28,99,.24);
    z-index:2;
  }
  .work-poster-zoom svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

  .work-project__body{ min-width:0; text-align:start; }
  .work-project__mobile-head{ display:none; }
  .work-mobile-break{ display:inline; }
  .work-nowrap-desktop{ white-space:nowrap; }
  .work-nowrap-mobile{ white-space:normal; }
  .work-mobile-only{ display:none; }
  .work-desktop-only{ display:inline; }
  .work-project__title--compact{ font-size:clamp(1.32rem,2.25vw,1.82rem); line-height:1.28; }
  .work-project__number{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    color:var(--orange);
    font-family:var(--font-en);
    font-size:.83rem;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
  }
  .work-project__number::after{ content:''; width:42px; height:2px; background:var(--orange); border-radius:2px; }
  .work-project__title{
    color:var(--navy);
    font-size:clamp(1.45rem,2.7vw,2.05rem);
    line-height:1.38;
    font-weight:800;
  }
  .work-project__summary{
    margin-top:12px;
    color:var(--navy-soft);
    font-size:1rem;
    line-height:1.9;
  }
  .work-project__scope{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
    margin-top:22px;
    list-style:none;
  }
  .work-project__scope li{
    position:relative;
    padding-inline-start:23px;
    color:var(--navy-soft);
    font-size:.92rem;
    line-height:1.65;
  }
  .work-project__scope li::before{
    content:'✓';
    position:absolute;
    inset-inline-start:0;
    top:0;
    color:var(--orange);
    font-weight:900;
  }
  .work-project__tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:22px;
  }
  .work-project__tag{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 11px;
    border-radius:999px;
    color:var(--navy);
    background:rgba(0,28,99,.06);
    border:1px solid rgba(0,28,99,.08);
    font-family:var(--font-en);
    font-size:.75rem;
    font-weight:700;
  }
  .work-project__hint{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:18px;
    color:var(--orange);
    font-size:.84rem;
    font-weight:700;
  }
  .work-project__hint svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; }

  .work-cta{
    margin-top:54px;
    padding:clamp(28px,5vw,52px);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:28px;
    border-radius:28px;
    color:var(--white);
    background:
      linear-gradient(120deg,rgba(0,28,99,.98),rgba(6,48,123,.96)),
      var(--navy);
    box-shadow:0 22px 48px rgba(0,28,99,.2);
    overflow:hidden;
    position:relative;
  }
  .work-cta::after{
    content:'';
    position:absolute;
    width:190px;
    height:190px;
    inset-inline-end:-60px;
    top:-70px;
    border:2px solid rgba(242,64,10,.55);
    border-radius:50%;
    box-shadow:0 0 0 22px rgba(242,64,10,.08),0 0 0 44px rgba(242,64,10,.04);
  }
  .work-cta__copy{ position:relative; z-index:1; text-align:start; }
  .work-cta__eyebrow{ color:#ff8b64; font-size:1rem; font-weight:700; margin-bottom:8px; }
  .work-cta__title{ font-size:clamp(1.45rem,3vw,2.15rem); line-height:1.45; font-weight:800; }
  .work-cta__text{ margin-top:8px; max-width:720px; color:rgba(255,255,255,.78); line-height:1.8; }
  .work-cta__actions{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; min-width:210px; }
  .work-cta__btn{
    min-height:48px;
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:12px;
    font-size:.92rem;
    font-weight:800;
    transition:.2s;
  }
  .work-cta__btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; }
  .work-cta__btn--primary svg{ width:21px; height:21px; fill:currentColor; stroke:none; stroke-width:0; }
  .work-cta__btn--primary{ background:var(--orange); color:var(--white); }
  .work-cta__btn--primary:hover{ background:var(--wa-green); transform:translateY(-2px); }
  .work-cta__btn--ghost{ border:1px solid rgba(255,255,255,.3); color:var(--white); }
  .work-cta__btn--ghost:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }

  .work-preview{
    display:none;
    position:fixed;
    inset:0;
    z-index:500;
    padding:24px;
    background:rgba(0,10,40,.88);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .work-preview.is-open{ display:grid; place-items:center; }
  .work-preview__dialog{
    position:relative;
    width:min(94vw,780px);
    max-height:92vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .work-preview__image-stage{
    width:100%;
    height:min(84vh,820px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:16px;
    flex:0 0 auto;
  }
  .work-preview__image{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    border-radius:16px;
    box-shadow:0 26px 70px rgba(0,0,0,.42);
    background:var(--cream);
    flex:0 0 auto;
    object-fit:contain;
  }

  /* Desktop image zoom controls: outside the image, aligned to the close side. */
  .work-preview__zoom-controls{
    position:relative;
    align-self:flex-end;
    margin-top:10px;
    display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
    background:rgba(0,10,40,.86);box-shadow:0 10px 24px rgba(0,0,0,.30);z-index:3;
  }
  .work-preview__zoom-controls button{
    min-width:42px;height:38px;padding:0 10px;border:0;border-radius:999px;
    background:rgba(255,255,255,.12);color:#fff;font:700 .9rem/1 Inter,sans-serif;cursor:pointer;
  }
  .work-preview__zoom-controls button:hover,
  .work-preview__zoom-controls button:focus-visible{background:var(--orange);outline:none;}
  .work-preview__zoom-controls button:first-child,
  .work-preview__zoom-controls button:last-child{font-size:1.35rem;}
  .work-preview__image{
    transform-origin:center center;
    transition:transform .16s ease;
    user-select:none;-webkit-user-select:none;
    -webkit-user-drag:none;
    cursor:grab;
    will-change:transform;
  }
  .work-preview__image.is-panning{
    cursor:grabbing;
    transition:none;
  }
  .lang-en .work-preview__zoom-controls{align-self:flex-end;}
  .lang-ar .work-preview__zoom-controls{align-self:flex-start;}
  @media (hover:none){.work-preview__zoom-controls{display:none;}}

  .work-preview__close{
    position:absolute;
    top:-15px;
    inset-inline-end:-15px;
    width:44px;
    height:44px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--orange);
    color:var(--white);
    font-size:1.15rem;
    font-weight:800;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
  }

  @media (max-width:900px){
    .work-page{ padding-top:52px; }
    .work-proof-bar{ grid-template-columns:1fr; max-width:620px; margin-bottom:44px; }
    .work-proof{ min-height:82px; }
    .work-section-heading{ align-items:center; }
    .work-section-count{ font-size:3rem; }
    .work-project{ grid-template-columns:minmax(250px,340px) minmax(0,1fr); gap:26px; }
    .work-project__scope{ grid-template-columns:1fr; }
    .work-cta{ grid-template-columns:1fr; }
    .work-cta__actions{ flex-direction:row; min-width:0; }
    .work-cta__btn{ flex:1; }
  }
  @media (max-width:700px){
    .work-page{ padding:40px 14px 84px; }
    .work-page::before,.work-page::after{ display:none; }
    .work-title{ font-size:clamp(1.85rem,9vw,2.5rem); }
    .work-title .work-mobile-break{ display:block; }
    .work-lead{ font-size:.96rem; line-height:1.8; }
    .work-proof-bar{ margin-top:24px; }
    .work-section-heading{ align-items:flex-start; margin-bottom:18px; }
    .work-section-title{ white-space:normal; }
    .work-desktop-break{ display:none; }
    .work-section-count{ font-size:2.25rem; }
    .work-project{
      grid-template-columns:1fr;
      padding:18px;
      border-radius:22px;
      gap:24px;
    }
    .work-project:nth-child(even) .work-project__media,
    .work-project:nth-child(even) .work-project__body{ order:initial; }
    .work-project__media{ order:1 !important; display:flex; flex-direction:column; align-items:center; gap:14px; }
    .work-project__body{ order:2 !important; }
    .work-project__mobile-head{ display:block; width:100%; text-align:center; margin-bottom:0; }
    .work-project__mobile-head .work-project__title{ margin:0; font-size:1.55rem; line-height:1.35; }
    .work-project__title .work-mobile-break,
    .work-project__summary .work-mobile-break,
    .work-project__scope li .work-mobile-break{ display:block; }
    .work-nowrap-desktop{ white-space:normal; }
    .work-nowrap-mobile{ white-space:nowrap; }
    .work-mobile-only{ display:inline; }
    .work-desktop-only{ display:none; }
    .work-project__body > .work-project__title{ display:none; }
    .work-poster-button{ width:100%; max-width:520px; padding:8px; border-radius:18px; }
    .work-poster-button img{ border-radius:12px; }
    .work-project__title{ font-size:1.45rem; }
    .work-project__summary{ font-size:.94rem; }
    .work-project__scope li{ font-size:.88rem; }
    .work-project__tags{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .work-project__tag{ justify-content:center; text-align:center; min-height:44px; padding:8px 6px; font-size:.8rem; line-height:1.2; white-space:normal; }
    .work-cta{ margin-top:36px; padding:26px 20px; border-radius:22px; }
    .work-cta__actions{ flex-direction:column; }
    .work-preview{ padding:12px; }
    .work-preview__close{ top:-8px; inset-inline-end:-5px; }
  }


  /* سهم "تفاصيل الخدمة" يتبع اتجاه اللغة: يشير يسارًا بالعربي (RTL)، ويمينًا بالإنجليزي (LTR) */
  .service-card__cta .rtl-flip{ transform:none; }
  body.lang-en .service-card__cta .rtl-flip{ transform:scaleX(-1); }

  .services-page{
    position:relative;
    padding:104px 20px 0;
    overflow:hidden;
  }
  .services-page::before,
  .services-page::after{
    content:'';
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    z-index:0;
  }
  .services-page::before{
    width:460px;height:460px;
    top:-260px;inset-inline-start:-220px;
    border:1px solid rgba(0,28,99,.10);
    box-shadow:0 0 0 56px rgba(0,28,99,.025),0 0 0 112px rgba(242,64,10,.02);
  }
  .services-page::after{
    width:360px;height:360px;
    top:520px;inset-inline-end:-250px;
    border:1px solid rgba(242,64,10,.12);
    box-shadow:0 0 0 48px rgba(242,64,10,.025),0 0 0 96px rgba(0,28,99,.02);
  }
  .services-page__inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;}
  .services-hero{
    min-height:560px;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
    align-items:center;
    gap:56px;
    padding:36px 0 72px;
  }
  .services-eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    color:var(--orange);font-size:.84rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    margin-bottom:15px;
  }
  .services-eyebrow::before{content:'';width:30px;height:2px;border-radius:99px;background:var(--orange);}
  .services-title{
    max-width:780px;color:var(--navy);
    font-size:clamp(2.15rem,5.4vw,4.25rem);
    line-height:1.18;letter-spacing:-.035em;
    margin:0 0 20px;
  }
  html[dir="rtl"] .services-title{letter-spacing:0;line-height:1.38;}
  .services-lead{
    max-width:720px;color:var(--navy-soft);font-size:1.08rem;line-height:1.95;margin:0 0 28px;
  }
  .services-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px;}
  .services-actions .btn{min-height:48px;}
  .services-btn-secondary{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 20px;border:1.5px solid rgba(0,28,99,.18);border-radius:10px;
    color:var(--navy);font-size:.94rem;font-weight:700;background:rgba(255,255,255,.58);transition:.2s;
  }
  .services-btn-secondary:hover{border-color:var(--orange);color:var(--orange);background:var(--white);transform:translateY(-1px);}
  .services-signals{display:flex;flex-wrap:wrap;gap:10px;}
  .services-signal{
    display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;
    color:var(--navy-soft);font-size:.82rem;font-weight:600;background:rgba(255,255,255,.62);border:1px solid rgba(0,28,99,.08);
  }
  .services-signal svg{width:16px;height:16px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .services-hero__visual{
    position:relative;display:flex;align-items:center;justify-content:center;min-height:500px;
  }
  .services-orbit{
    position:relative;width:min(458px,100%);aspect-ratio:1;border-radius:50%;isolation:isolate;
    filter:drop-shadow(0 30px 45px rgba(0,28,99,.08));
  }
  .services-orbit::before{
    content:'';position:absolute;inset:8.2%;border-radius:50%;z-index:-3;
    background:
      radial-gradient(circle at center,rgba(255,255,255,.78) 0 38%,rgba(255,255,255,.24) 39% 61%,transparent 62%),
      conic-gradient(from 18deg,rgba(0,28,99,.055),rgba(242,64,10,.045),rgba(0,28,99,.025),rgba(242,64,10,.055),rgba(0,28,99,.055));
    box-shadow:inset 0 0 0 1px rgba(0,28,99,.055),0 0 0 16px rgba(255,255,255,.17);
  }
  .services-orbit::after{
    content:'';position:absolute;inset:28%;border-radius:50%;z-index:-1;
    background:radial-gradient(circle,rgba(0,28,99,.11),rgba(0,28,99,.035) 48%,transparent 70%);
    filter:blur(12px);
  }
  .services-orbit__circuit{
    position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-2;
  }
  .services-orbit__circuit .orbit-ring-main{
    fill:none;stroke:rgba(0,28,99,.22);stroke-width:1.1;stroke-dasharray:2.2 7.2;stroke-linecap:round;
  }
  .services-orbit__circuit .orbit-ring-accent{
    fill:none;stroke:rgba(242,64,10,.26);stroke-width:1.05;stroke-dasharray:36 18 4 17;stroke-linecap:round;
  }
  .services-orbit__circuit .orbit-ring-inner{
    fill:none;stroke:rgba(0,28,99,.11);stroke-width:1;
  }
  .services-orbit__circuit .orbit-trace{
    fill:none;stroke:rgba(0,28,99,.18);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;
  }
  .services-orbit__circuit .orbit-trace-accent{stroke:rgba(242,64,10,.42);}
  .services-orbit__circuit .orbit-dot{fill:var(--cream);stroke:var(--navy);stroke-width:1.4;}
  .services-orbit__circuit .orbit-dot-accent{stroke:var(--orange);}
  .services-orbit__circuit .orbit-spark{fill:var(--orange);opacity:.88;}
  .services-orbit__center{
    position:absolute;left:50%;top:50%;width:178px;height:178px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    border-radius:38px;color:var(--white);
    background:
      linear-gradient(145deg,rgba(255,255,255,.12),transparent 38%),
      linear-gradient(145deg,#0b3b9d 0%,#001C63 58%,#00154c 100%);
    border:1px solid rgba(255,255,255,.20);
    box-shadow:
      0 28px 64px rgba(0,28,99,.28),
      0 0 0 10px rgba(0,28,99,.035),
      0 0 0 11px rgba(242,64,10,.12),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -18px 34px rgba(0,10,52,.26);
    transform:translate(-50%,-50%) rotate(45deg);z-index:4;overflow:hidden;
  }
  .services-orbit__center::before,
  .services-orbit__center::after{
    content:'';position:absolute;pointer-events:none;
  }
  .services-orbit__center::before{
    inset:13px;border-radius:29px;border:1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:16px 16px;
  }
  .services-orbit__center::after{
    width:86px;height:86px;border-radius:50%;top:-48px;right:-42px;
    background:radial-gradient(circle,rgba(242,64,10,.34),rgba(242,64,10,0) 68%);
  }
  .services-orbit__center-inner{position:relative;z-index:2;transform:rotate(-45deg);}
  .services-orbit__brand{
    display:block;font-family:'Inter',sans-serif;font-size:1.58rem;font-weight:800;letter-spacing:-.035em;
    text-shadow:0 3px 14px rgba(0,0,0,.18);
  }
  .services-orbit__brand b{color:var(--orange);}
  .services-orbit__caption{
    display:block;margin-top:7px;font-family:'Inter',sans-serif;font-size:.70rem;font-weight:500;
    letter-spacing:.045em;color:rgba(255,255,255,.78);
  }
  .services-orbit__core-status{
    display:flex;align-items:center;justify-content:center;gap:5px;margin-top:11px;
  }
  .services-orbit__core-status i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.44);}
  .services-orbit__core-status i:nth-child(2){width:18px;border-radius:99px;background:var(--orange);box-shadow:0 0 12px rgba(242,64,10,.7);}
  .services-orbit__node{
    position:absolute;width:76px;height:76px;border-radius:23px;display:grid;place-items:center;z-index:5;
    color:var(--navy);background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,247,243,.94));
    border:1px solid rgba(0,28,99,.10);
    box-shadow:0 17px 34px rgba(0,28,99,.14),inset 0 1px 0 rgba(255,255,255,.92);
    overflow:hidden;
  }
  .services-orbit__node::before{
    content:'';position:absolute;width:44px;height:44px;border-radius:50%;right:-24px;bottom:-24px;
    background:radial-gradient(circle,rgba(242,64,10,.18),rgba(242,64,10,0) 72%);
  }
  .services-orbit__node::after{
    content:'';position:absolute;top:9px;inset-inline-end:9px;width:5px;height:5px;border-radius:50%;
    background:var(--orange);box-shadow:0 0 0 3px rgba(242,64,10,.09);
  }
  .services-orbit__node svg{
    position:relative;z-index:1;width:42px;height:42px;fill:none;stroke:var(--navy);stroke-width:1.75;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .services-orbit__node svg .icon-accent{stroke:var(--orange);}
  .services-orbit__node svg .icon-accent-fill{fill:var(--orange);stroke:none;}
  .services-orbit__node--1{top:0;left:50%;transform:translateX(-50%)}
  .services-orbit__node--2{top:11%;right:7%}
  .services-orbit__node--3{top:50%;right:-1%;transform:translateY(-50%)}
  .services-orbit__node--4{bottom:11%;right:7%}
  .services-orbit__node--5{bottom:0;left:50%;transform:translateX(-50%)}
  .services-orbit__node--6{bottom:11%;left:7%}
  .services-orbit__node--7{top:50%;left:-1%;transform:translateY(-50%)}
  .services-orbit__node--8{top:11%;left:7%}
  @keyframes services-core-breathe{
    0%,100%{box-shadow:0 28px 64px rgba(0,28,99,.28),0 0 0 10px rgba(0,28,99,.035),0 0 0 11px rgba(242,64,10,.12),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -18px 34px rgba(0,10,52,.26);}
    50%{box-shadow:0 31px 70px rgba(0,28,99,.32),0 0 0 13px rgba(0,28,99,.03),0 0 0 14px rgba(242,64,10,.08),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -18px 34px rgba(0,10,52,.26);}
  }
  @keyframes services-trace-flow{to{stroke-dashoffset:-44;}}
  .services-orbit__center{animation:services-core-breathe 5.2s ease-in-out infinite;}
  .services-orbit__circuit .orbit-ring-accent{animation:services-trace-flow 10s linear infinite;}
  .services-section-head{max-width:760px;margin:0 auto 38px;text-align:center;}
  .services-section-kicker{color:var(--orange);font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px;}
  .services-section-title{color:var(--navy);font-size:clamp(1.75rem,3.5vw,2.65rem);line-height:1.35;margin:0 0 13px;}
  .services-section-copy{color:var(--navy-soft);font-size:1rem;line-height:1.9;margin:0 auto;}
  .services-catalog{padding:72px 0 84px;scroll-margin-top:96px;}
  .services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
    /* نص بطاقات الخدمات وصفحات الخدمة الفردية قابل للتحديد والنسخ */
  .service-card, .service-card *{ user-select:text !important; -webkit-user-select:text !important; }
  a.service-card{ user-select:text !important; -webkit-user-select:text !important; }
  .services-lead, .services-section-copy, .svc-item__copy, .services-step__copy,
  .svc-chips-note, .svc-intro, .services-eyebrow, .services-section-kicker,
  .services-title, .services-hero__desc,
  .page-service-cctv p, .page-service-networks p, .page-service-computers p,
  .page-service-pbx p, .page-service-access-control p, .page-service-server-rooms p,
  .page-service-advanced-it p, .page-service-maintenance p, .page-service-web p{
    user-select:text !important; -webkit-user-select:text !important;
  }
  #page-service-cctv p, #page-service-networks p, #page-service-computers p,
  #page-service-pbx p, #page-service-access-control p, #page-service-server-rooms p,
  #page-service-advanced-it p, #page-service-maintenance p, #page-service-web p,
  #page-service-cctv h3, #page-service-networks h3, #page-service-computers h3,
  #page-service-pbx h3, #page-service-access-control h3, #page-service-server-rooms h3,
  #page-service-advanced-it h3, #page-service-maintenance h3, #page-service-web h3{
    user-select:text !important; -webkit-user-select:text !important;
  }
  .service-card{
    position:relative;display:flex;flex-direction:column;min-height:365px;padding:28px;border-radius:24px;overflow:hidden;
    background:rgba(255,255,255,.86);border:1px solid rgba(0,28,99,.08);box-shadow:0 16px 40px rgba(0,28,99,.07);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  }
  .service-card::after{content:'';position:absolute;width:170px;height:170px;border-radius:50%;inset-inline-end:-100px;bottom:-105px;background:radial-gradient(circle,rgba(242,64,10,.11),rgba(242,64,10,0) 70%);}
  .service-card:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(0,28,99,.12);border-color:rgba(242,64,10,.25);}
  .service-card__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;}
  .service-card__num{font-family:'Inter',sans-serif;color:rgba(0,28,99,.25);font-size:.8rem;font-weight:800;letter-spacing:.12em;}
  .service-card__icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;color:var(--navy);background:var(--cream);border:1px solid rgba(0,28,99,.08);}
  .service-card:nth-child(3n+1) .service-card__icon,.service-card:nth-child(3n+3) .service-card__icon{color:var(--navy);}
  .service-card__icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}.service-card__icon svg .icon-accent{stroke:var(--orange);}.service-card__icon svg .icon-accent-fill{fill:var(--orange);stroke:none;}
  .service-card__title{color:var(--navy);font-size:1.28rem;line-height:1.45;margin:0 0 11px;}
  .service-card__copy{color:var(--navy-soft);font-size:.92rem;line-height:1.82;margin:0 0 18px;}
  .service-card__list{display:grid;gap:8px;margin:0 0 22px;padding:0;list-style:none;}
  .service-card__list li{position:relative;padding-inline-start:18px;color:var(--navy-soft);font-size:.83rem;line-height:1.55;}
  .service-card__list li::before{content:'';position:absolute;inset-inline-start:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(242,64,10,.10);}
  .service-card__cta{position:relative;z-index:1;margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-size:.88rem;font-weight:800;}
  .service-card__cta svg{width:17px;height:17px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.2s;}
  .service-card:hover .service-card__cta svg{transform:translateX(-4px);}
  body.lang-en .service-card:hover .service-card__cta svg{transform:translateX(4px);}
  .services-process{padding:78px 0;}
  .services-process__panel{position:relative;padding:52px;border-radius:30px;background:linear-gradient(135deg,var(--navy),#0a347f);overflow:hidden;box-shadow:0 24px 60px rgba(0,28,99,.20);}
  .services-process__panel::after{content:'';position:absolute;width:320px;height:320px;border-radius:50%;inset-inline-end:-170px;top:-180px;border:1px solid rgba(255,255,255,.13);box-shadow:0 0 0 46px rgba(255,255,255,.025),0 0 0 92px rgba(242,64,10,.055);}
  .services-process .services-section-head{position:relative;z-index:1;text-align:start;margin:0 0 34px;max-width:750px;}
  .services-process .services-section-kicker{color:#ff8b65;}
  .services-process .services-section-title{color:var(--white);}
  .services-process .services-section-copy{color:rgba(255,255,255,.73);}
  .services-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
  .services-step{padding:22px 18px;border-radius:18px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.10);}
  .services-step__num{display:block;color:#ff8b65;font-family:'Inter',sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.12em;margin-bottom:12px;}
  .services-step__title{color:var(--white);font-size:1rem;margin:0 0 8px;}
  .services-step__copy{color:rgba(255,255,255,.68);font-size:.82rem;line-height:1.7;margin:0;}
  .services-final-cta{padding:20px 0 96px;}
  .services-final-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px 38px;border-radius:24px;background:var(--white);border:1px solid rgba(0,28,99,.08);box-shadow:0 16px 44px rgba(0,28,99,.08);}
  .services-final-cta__copy{max-width:680px;}
  .services-final-cta__title{color:var(--navy);font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.4;margin:0 0 9px;}
  .services-final-cta__text{color:var(--navy-soft);font-size:.93rem;line-height:1.8;margin:0;}
  .services-final-cta__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;flex-shrink:0;}
  .nav__item--services > .nav__link{color:var(--navy);font-weight:700;}
  .nav__item--services > .nav__link::after{content:'';position:absolute;bottom:-2px;right:0;left:0;height:2px;background:var(--orange);border-radius:2px;}
  @media (max-width:980px){
    .services-hero{grid-template-columns:1fr;gap:18px;padding-top:18px;}
    .services-hero__copy{text-align:center;}
    .services-lead{margin-inline:auto;}
    .services-actions,.services-signals{justify-content:center;}
    .services-hero__visual{min-height:410px;}
    .services-orbit{width:380px;}
    .services-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
    .services-final-cta__inner{align-items:flex-start;flex-direction:column;}
    .services-final-cta__actions{justify-content:flex-start;}
  }
  @media (max-width:640px){
    .services-page{padding:82px 16px 0;}
    .services-hero{min-height:auto;padding:20px 0 50px;}
    .services-eyebrow{font-size:.75rem;}
    .services-title{font-size:2.02rem;}
    html[dir="rtl"] .services-title{line-height:1.45;}
    .services-lead{font-size:.93rem;line-height:1.85;}
    .services-actions{display:grid;grid-template-columns:1fr;width:100%;}
    .services-actions .btn,.services-btn-secondary{width:100%;}
    .services-signals{gap:7px;}
    .services-signal{font-size:.75rem;padding:8px 10px;}
    .services-hero__visual{min-height:350px;padding-bottom:52px;}
    .services-orbit{width:286px;}
    .services-orbit__node{width:54px;height:54px;border-radius:17px;}
    .services-orbit__node::after{top:7px;inset-inline-end:7px;width:4px;height:4px;}
    .services-orbit__node svg{width:31px;height:31px;}
    .services-orbit__center{width:116px;height:116px;border-radius:27px;}
    .services-orbit__center::before{inset:9px;border-radius:20px;background-size:12px 12px;}
    .services-orbit__brand{font-size:1.08rem;}
    .services-orbit__caption{font-size:.50rem;margin-top:4px;}
    .services-orbit__core-status{margin-top:7px;}
    .services-orbit__core-status i{width:3px;height:3px;}
    .services-orbit__core-status i:nth-child(2){width:12px;}
    .services-catalog{padding:55px 0 66px;scroll-margin-top:82px;}
    .services-section-head{margin-bottom:28px;}
    .services-section-title{font-size:1.65rem;}
    .services-section-copy{font-size:.91rem;line-height:1.82;}
    .services-grid{grid-template-columns:1fr;gap:14px;}
    .service-card{min-height:0;padding:23px 20px;border-radius:20px;}
    .service-card__top{margin-bottom:17px;}
    .service-card__icon{width:49px;height:49px;border-radius:15px;}
    .service-card__title{font-size:1.15rem;}
    .service-card__copy{font-size:.87rem;}
    .services-process{padding:60px 0;}
    .services-process__panel{padding:31px 20px;border-radius:24px;}
    .services-process .services-section-head{text-align:center;}
    .services-steps{grid-template-columns:1fr;gap:10px;}
    .services-step{padding:19px 17px;}
    .services-final-cta{padding:8px 0 78px;}
    .services-final-cta__inner{padding:27px 21px;border-radius:20px;}
    .services-final-cta__title{font-size:1.35rem;}
    .services-final-cta__actions{display:grid;grid-template-columns:1fr;width:100%;}
    .services-final-cta__actions .btn,.services-final-cta__actions .services-btn-secondary{width:100%;}
  }

  /* ============================================================
     أيقونات الكتالوج المُتتبَّعة متجهيًا (مسارات ممتلئة لا خطوط)
     ============================================================ */
  .icon-traced,
  .icon-traced path{ stroke:none; }
  .icon-traced .ink-navy{ fill:var(--navy); }
  .icon-traced .ink-orange{ fill:var(--orange); }

  /* ============================================================
     مركز العجلة: شعار Belnix وحده، بلا الماسة الزرقاء
     ============================================================ */
  .services-orbit__center{
    width:42%; height:42%;
    background:none; border:none; box-shadow:none;
    border-radius:0; overflow:visible;
    transform:translate(-50%,-50%);
    animation:none;
  }
  .services-orbit__center::before,
  .services-orbit__center::after{ content:none; }
  .services-orbit__center-inner{
    transform:none; width:100%; height:100%;
    display:grid; place-items:center;
  }
  .services-orbit__logo{
    width:100%; height:100%; object-fit:contain;
    animation:belnix-orbit-logo-breathe 5.2s ease-in-out infinite;
  }
  @keyframes belnix-orbit-logo-breathe{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.045); }
  }
  @media (prefers-reduced-motion: reduce){
    .services-orbit__logo{ animation:none; }
  }

  /* ============================================================
     تكبير العناوين الصغيرة (خدماتنا / منظومة خدمات متكاملة / طريقة العمل)
     ============================================================ */
  .services-eyebrow{ font-size:1.02rem; letter-spacing:.06em; }
  .services-section-kicker{ font-size:1.02rem; letter-spacing:.06em; }

  /* ============================================================
     مربعات الأيقونات حول العجلة: أيقونة + اسم مختصر تحتها
     ============================================================ */
  .services-orbit{ --node-w:92px; --node-h:98px; --node-icon:38px; --node-font:.64rem; }
  .services-orbit__node{
    width:var(--node-w); height:var(--node-h);
    border-radius:22px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
    padding:8px 5px 9px;
  }
  .services-orbit__node-icon{ display:grid; place-items:center; line-height:0; }
  .services-orbit__node svg{ width:var(--node-icon); height:var(--node-icon); }
  .services-orbit__node-label{
    display:block; width:100%;
    font-size:var(--node-font); font-weight:800; line-height:1.25;
    color:var(--navy); text-align:center;
    letter-spacing:0; overflow-wrap:break-word; white-space:normal;
  }

  @media (max-width:1024px){
    .services-orbit{ --node-w:84px; --node-h:90px; --node-icon:34px; --node-font:.60rem; }
    .services-orbit__node{ border-radius:20px; }
  }
  @media (max-width:640px){
    .services-orbit{ --node-w:74px; --node-h:80px; --node-icon:29px; --node-font:.55rem; }
    .services-orbit__node{ border-radius:18px; gap:4px; padding:7px 4px 8px; }
    .services-orbit__node::after{ top:6px; inset-inline-end:6px; width:4px; height:4px; }
    /* المربعات صارت أطول بعد إضافة الأسماء، فنوسّع قطر الدائرة ونباعد
       المربعات القُطرية حتى لا تتلامس على شاشات الجوال */
    .services-orbit{ width:318px; }
    .services-orbit__node--2, .services-orbit__node--8{ top:6%; }
    .services-orbit__node--4, .services-orbit__node--6{ bottom:6%; }
  }

  /* ============================================================
     أيقونات العجلة قابلة للنقر: تنقل لبطاقة الخدمة وتبرزها
     ============================================================ */
  .services-orbit__node{
    cursor:pointer; font-family:inherit; text-align:center;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .services-orbit__node:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 40px rgba(0,28,99,.20), inset 0 1px 0 rgba(255,255,255,.92);
  }
  .services-orbit__node--1:hover{ transform:translate(-50%,-4px); }
  .services-orbit__node--5:hover{ transform:translate(-50%,-4px); }
  .services-orbit__node--3:hover,
  .services-orbit__node--7:hover{ transform:translateY(calc(-50% - 4px)); }
  .services-orbit__node:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

  /* نفس مظهر التحويم يُطبَّق على البطاقة المقصودة بعد الانتقال إليها */
  .service-card.is-focus{
    transform:translateY(-5px);
    box-shadow:0 24px 54px rgba(0,28,99,.12);
    border-color:rgba(242,64,10,.25);
  }

  /* ============================================================
     شارات الهيرو: تتّسع لثلاث شارات بصف واحد بالإنجليزية أيضًا
     ============================================================ */
  .services-signal{ font-size:.74rem; padding:8px 10px; gap:7px; }
  .services-signal svg{ width:15px; height:15px; }
  .services-signals{ gap:8px; }

  /* ============================================================
     منع بقاء كلمة وحيدة بسطر جديد (الأيتام) بالعناوين والفقرات
     ============================================================ */
  h1, h2, h3, h4,
  .services-title, .services-section-title,
  .service-card__title, .services-final-cta__title,
  .home-social-footer__title{ text-wrap:balance; }
  p, .services-lead, .services-section-copy,
  .service-card__copy, .services-step__copy,
  .services-final-cta__text{ text-wrap:pretty; }

  /* ============================================================
     سهم زر "تصفح خدماتنا": اتجاهي ويتبع لغة الصفحة
     ============================================================ */
  .btn-goto-arrow{ transform:none; }
  body.lang-en .btn-goto-arrow{ transform:scaleX(-1); }

  /* ============================================================
     وضوح الوجهة عند الضغط على أيقونة حول الشعار:
     البطاقة المقصودة تومض بخلفية زرقاء ثم تعود لطبيعتها
     ============================================================ */
  .services-orbit__node:hover{ border-color:rgba(242,64,10,.40); }

  .service-card.is-focus{
    border-color:var(--navy);
    box-shadow:0 0 0 3px rgba(0,28,99,.30), 0 26px 56px rgba(0,28,99,.20);
    animation:belnix-card-flash 2s ease-out 1;
  }
  @keyframes belnix-card-flash{
    0%   { background:rgba(0,28,99,.26); transform:translateY(-7px); }
    55%  { background:rgba(0,28,99,.20); transform:translateY(-5px); }
    100% { background:rgba(255,255,255,.86); transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .service-card.is-focus{ animation:none; background:rgba(0,28,99,.10); }
  }

  /* ============================================================
     صفحات الخدمات المفردة (كاميرات المراقبة وما يليها)
     ============================================================ */
  .svc-block{ position:relative; z-index:1; padding:64px 0 0; }
  .svc-block--tight{ padding-top:52px; }

  .svc-scope-card{
    background:rgba(255,255,255,.88); border:1px solid rgba(0,28,99,.09);
    border-radius:26px; padding:30px 28px;
    box-shadow:0 22px 50px rgba(0,28,99,.09); max-width:430px; width:100%;
  }
  .svc-scope-card__icon{ display:grid; place-items:center; width:62px; height:62px;
    border-radius:18px; background:rgba(0,28,99,.05); margin-bottom:16px; }
  .svc-scope-card__icon svg{ width:36px; height:36px; }
  .svc-scope-card__title{ color:var(--navy); font-size:1.24rem; margin:0 0 14px; }
  .svc-scope-card__list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
  .svc-scope-card__list li{
    position:relative; padding-inline-start:22px;
    color:var(--navy-soft); font-size:.92rem; line-height:1.7;
  }
  .svc-scope-card__list li::before{
    content:''; position:absolute; inset-inline-start:0; top:.62em;
    width:7px; height:7px; border-radius:50%; background:var(--orange);
  }

  .svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .svc-item{
    position:relative; padding:26px 24px; border-radius:20px;
    background:rgba(255,255,255,.86); border:1px solid rgba(0,28,99,.08);
    box-shadow:0 14px 34px rgba(0,28,99,.06);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .svc-item:hover{ transform:translateY(-4px);
    box-shadow:0 22px 46px rgba(0,28,99,.11); border-color:rgba(242,64,10,.22); }
  .svc-item__num{ display:block; color:rgba(0,28,99,.30); font-size:.82rem;
    font-weight:800; letter-spacing:.08em; margin-bottom:9px; }
  .svc-item__title{ color:var(--navy); font-size:1.06rem; margin:0 0 9px; line-height:1.5; }
  .svc-item__copy{ color:var(--navy-soft); font-size:.92rem; line-height:1.8; margin:0; }

  .svc-chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .svc-chip{
    display:inline-flex; align-items:center; padding:11px 18px; border-radius:999px;
    background:rgba(255,255,255,.72); border:1px solid rgba(0,28,99,.10);
    color:var(--navy); font-size:.9rem; font-weight:600;
  }

  .svc-faq{ display:grid; gap:12px; }
  .svc-faq__item{
    background:rgba(255,255,255,.86); border:1px solid rgba(0,28,99,.08);
    border-radius:18px; padding:4px 22px; box-shadow:0 12px 30px rgba(0,28,99,.05);
  }
  .svc-faq__q{
    cursor:pointer; list-style:none; padding:18px 0;
    color:var(--navy); font-size:1rem; font-weight:700; line-height:1.6;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
  }
  .svc-faq__q::-webkit-details-marker{ display:none; }
  .svc-faq__q::after{
    content:'+'; color:var(--orange); font-size:1.4rem; font-weight:800;
    line-height:1; flex-shrink:0; transition:transform .2s ease;
  }
  .svc-faq__item[open] .svc-faq__q::after{ content:'\2013'; }
  .svc-faq__a{ margin:0; padding:0 0 20px; color:var(--navy-soft);
    font-size:.94rem; line-height:1.9; }

  .svc-related{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .svc-related__card{
    display:flex; align-items:center; gap:14px; padding:20px 22px; border-radius:18px;
    background:rgba(255,255,255,.86); border:1px solid rgba(0,28,99,.08);
    box-shadow:0 12px 30px rgba(0,28,99,.06);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .svc-related__card:hover{ transform:translateY(-4px);
    box-shadow:0 20px 42px rgba(0,28,99,.11); border-color:rgba(242,64,10,.22); }
  .svc-related__icon{ display:grid; place-items:center; width:46px; height:46px;
    border-radius:14px; background:rgba(0,28,99,.05); flex-shrink:0; }
  .svc-related__icon svg{ width:27px; height:27px; }
  .svc-related__label{ color:var(--navy); font-size:.96rem; font-weight:700; line-height:1.5; }

  @media (max-width:1024px){
    .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .svc-related{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .svc-scope-card{ max-width:none; }
  }
  @media (max-width:640px){
    .svc-block{ padding-top:46px; }
    .svc-grid,.svc-related{ grid-template-columns:1fr; }
    .svc-item{ padding:22px 20px; }
    .svc-scope-card{ padding:24px 20px; border-radius:22px; }
    .svc-chip{ font-size:.84rem; padding:10px 15px; }
    .svc-faq__item{ padding:2px 18px; }
    .svc-faq__q{ font-size:.94rem; padding:16px 0; }
  }

  /* رأس بطاقة نطاق المشروع: العنوان أولًا والأيقونة تُغلق السطر في طرفه المقابل
     (يسار العنوان بالعربي، ويمينه بالإنجليزي - تنعكس تلقائيًا) */
  .svc-scope-card__head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .svc-scope-card__icon{
    margin-bottom:0; width:52px; height:52px; flex-shrink:0;
    order:2; margin-inline-start:auto;
  }
  .svc-scope-card__icon svg{ width:31px; height:31px; }
  .svc-scope-card__title{ margin:0; order:1; }

  /* شارات القطاعات: صفّان متوازنان في المنتصف بكلتا اللغتين */
  .svc-chips{
    display:flex; flex-wrap:wrap; justify-content:center;
    align-items:stretch; gap:12px;
    margin-inline:auto;
  }
  .svc-chip{ justify-content:center; text-align:center; }

  @media (max-width:640px){
    /* قطاعان بكل سطر على الجوال بدل واحد، بعرض متساوٍ ليبقى الصف مرتبًا */
    .svc-chips{ max-width:none; gap:10px; }
    .svc-chip{ padding:10px 12px; font-size:.8rem; line-height:1.45; }
  }

  /* سطر توضيحي أسفل شارات القطاعات */
  .svc-chips-note{
    margin:16px auto 0; max-width:640px; text-align:center;
    color:var(--navy-soft); font-size:.88rem; line-height:1.8;
  }
  @media (max-width:640px){ .svc-chips-note{ font-size:.82rem; margin-top:14px; } }

  @media (max-width:640px){
    /* الشارات: اثنتان بالأعلى وواحدة تحتهما في المنتصف */
    .services-signals{ justify-content:center; gap:8px; }
    .services-signal{ font-size:.7rem; padding:8px 11px; }
    /* على الجوال يلتفّ نص العنوان الصغير على سطرين، فيبقى الخط الزخرفي بعيدًا
       عنه بمسافة غير متناسقة؛ لذلك نخفيه ونُبقي النص وحده في المنتصف. */
    .services-eyebrow{ gap:0; justify-content:center; text-align:center; }
    .services-eyebrow::before{ display:none; }
  }
  /* زر فتح القوائم المنسدلة: مساحة ضغط أوسع على الجوال */
  @media (max-width:640px){
    .nav__parent .nav__chevron{
      padding:14px; margin:-14px; position:relative; z-index:2;
      min-width:44px; min-height:44px;
      display:inline-flex; align-items:center; justify-content:center;
    }
    .nav__parent{ padding-block:12px; }
  }

  .nav__chevron-hit{ display:inline-flex; align-items:center; justify-content:center; }
  @media (max-width:640px){
    .nav__chevron-hit{
      min-width:46px; min-height:46px;
      padding:12px; margin-inline-start:2px; margin-block:-12px;
      position:relative; z-index:2;
    }
    /* الشارات الإنجليزية أطول، فنصغّرها قليلًا لتبقى صفّين لا ثلاثة */
    .services-signal{ font-size:.66rem; padding:7px 9px; }
  }
  @media (max-width:400px){
    .services-signal{ font-size:.62rem; padding:6px 8px; }
  }

  /* بعد اختيار عنصر من القائمة المنسدلة تُغلق فورًا، ولا تُعاد فتحها
     لمجرد بقاء المؤشر فوقها، حتى يبتعد المؤشر عن العنصر. */
  .nav__item.is-suppressed .nav__submenu,
  .nav__item.is-suppressed:hover .nav__submenu{
    display:none !important;
  }

  /* البطاقة التاسعة وحدها في صفّها، فنوسّطها أسفل البطاقتين قبلها */
  .service-card--solo{ grid-column:1 / -1; justify-self:center; width:100%; max-width:calc(50% - 9px); }
  @media (max-width:900px){ .service-card--solo{ max-width:none; } }

  /* أيقونة مؤقتة فارغة إلى أن تجهز بطاقة الكتالوج لهذه الخدمة */
  .svc-icon--pending{
    display:inline-block; border:1px dashed rgba(0,28,99,.22);
    background:rgba(0,28,99,.03);
  }

  /* بطاقة الخدمة المصوّرة: خلاصة بصرية للزائر المستعجل، بعد المقدمة مباشرة */
  .svc-poster{
    position:relative; z-index:1;
    display:flex; justify-content:center;
    padding:56px 0 0;
  }
  .svc-poster__img{
    display:block; width:100%; max-width:520px; height:auto;
    border-radius:22px;
    box-shadow:0 22px 54px rgba(0,28,99,.14);
    border:1px solid rgba(0,28,99,.07);
  }
  @media (max-width:640px){
    .svc-poster{ padding-top:40px; }
    .svc-poster__img{ max-width:100%; border-radius:18px; }
  }

  /* تسعة مواضع موزّعة بانتظام على المحيط. نصف القطر ومقاس المربعات
     محسوبان لكل مقاس شاشة بحيث لا يتلامس أي مربعين ولا يخرج أي منها
     عن حدود الدائرة. */
  .services-orbit__node--1,.services-orbit__node--2,.services-orbit__node--3,
  .services-orbit__node--4,.services-orbit__node--5,.services-orbit__node--6,
  .services-orbit__node--7,.services-orbit__node--8,.services-orbit__node--9{
    right:auto; bottom:auto; transform:translate(-50%,-50%);
  }
  .services-orbit__node--1:hover,.services-orbit__node--2:hover,.services-orbit__node--3:hover,
  .services-orbit__node--4:hover,.services-orbit__node--5:hover,.services-orbit__node--6:hover,
  .services-orbit__node--7:hover,.services-orbit__node--8:hover,.services-orbit__node--9:hover{
    transform:translate(-50%,-50%) translateY(-4px);
  }
  .services-orbit__node--1{ top:12.000%; left:50.000%; }
  .services-orbit__node--2{ top:20.890%; left:74.426%; }
  .services-orbit__node--3{ top:43.401%; left:87.423%; }
  .services-orbit__node--4{ top:69.000%; left:82.909%; }
  .services-orbit__node--5{ top:85.708%; left:62.997%; }
  .services-orbit__node--6{ top:85.708%; left:37.003%; }
  .services-orbit__node--7{ top:69.000%; left:17.091%; }
  .services-orbit__node--8{ top:43.401%; left:12.577%; }
  .services-orbit__node--9{ top:20.890%; left:25.574%; }

  @media (max-width:1024px){
    .services-orbit{ --node-w:78px; --node-h:84px; --node-icon:33px; --node-font:.56rem; }
    .services-orbit__node--1{ top:11.250%; left:50.000%; }
    .services-orbit__node--2{ top:20.316%; left:74.908%; }
    .services-orbit__node--3{ top:43.271%; left:88.161%; }
    .services-orbit__node--4{ top:69.375%; left:83.558%; }
    .services-orbit__node--5{ top:86.413%; left:63.253%; }
    .services-orbit__node--6{ top:86.413%; left:36.747%; }
    .services-orbit__node--7{ top:69.375%; left:16.442%; }
    .services-orbit__node--8{ top:43.271%; left:11.839%; }
    .services-orbit__node--9{ top:20.316%; left:25.092%; }
  }
  @media (max-width:640px){
    .services-orbit{ width:330px; --node-w:66px; --node-h:72px; --node-icon:26px; --node-font:.5rem; }
    .services-orbit__node--1{ top:12.250%; left:50.000%; }
    .services-orbit__node--2{ top:21.082%; left:74.265%; }
    .services-orbit__node--3{ top:43.445%; left:87.176%; }
    .services-orbit__node--4{ top:68.875%; left:82.692%; }
    .services-orbit__node--5{ top:85.473%; left:62.911%; }
    .services-orbit__node--6{ top:85.473%; left:37.089%; }
    .services-orbit__node--7{ top:68.875%; left:17.308%; }
    .services-orbit__node--8{ top:43.445%; left:12.824%; }
    .services-orbit__node--9{ top:21.082%; left:25.735%; }
  }

  /* البطاقة المصوّرة قابلة للضغط لعرضها بالحجم الكامل */
  .svc-poster__btn{
    position:relative; display:block; padding:0; border:0; background:none;
    cursor:zoom-in; width:100%; max-width:520px; border-radius:22px;
    transition:transform .22s ease, box-shadow .22s ease;
  }
  .svc-poster__btn:hover{ transform:translateY(-4px); }
  .svc-poster__btn:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }
  .svc-poster__btn .svc-poster__img{ max-width:100%; }
  .svc-poster__zoom{
    position:absolute; inset-block-end:14px; inset-inline-end:14px;
    width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(0,28,99,.86); color:#fff;
    box-shadow:0 8px 20px rgba(0,28,99,.28);
    opacity:0; transform:scale(.9); transition:.22s ease;
  }
  .svc-poster__zoom svg{ width:20px; height:20px; }
  .svc-poster__btn:hover .svc-poster__zoom,
  .svc-poster__btn:focus-visible .svc-poster__zoom{ opacity:1; transform:scale(1); }
  @media (hover:none){ .svc-poster__zoom{ opacity:1; transform:scale(1); } }

  /* عرض الصف محسوب لكل عدد شارات بحيث ينقسم الصفّان بنفس الطريقة
     في العربية والإنجليزية معًا، رغم اختلاف طول الكلمات بينهما. */
  /* كل صف حاوية مستقلة لا تنكسر، فالتقسيم مثبّت في بنية الصفحة نفسها
     ولا يتأثر بعرض الخط ولا بتكبير المتصفح: النتيجة واحدة في العربية
     والإنجليزية دائمًا. */
  .svc-chips{
    display:flex; flex-direction:column; align-items:center;
    gap:12px; max-width:none;
  }
  .svc-chips__row{
    display:flex; flex-wrap:nowrap; justify-content:center;
    align-items:stretch; gap:12px; max-width:100%;
  }
  .svc-chips .svc-chip{ flex:0 1 auto; min-width:0; }
  @media (max-width:1024px){
    /* على الشاشات الأصغر: عمودان متساويان، وهو تقسيم ثابت أيضًا */
    .svc-chips{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .svc-chips__row{ display:contents; }
    /* الشارتان في الصف الواحد بارتفاع واحد، فلا تبدو إحداهما منخفضة */
    .svc-chips .svc-chip{ align-self:stretch; }
  }
  @media (max-width:640px){
    /* على الجوال: شارتان بكل سطر بعرض متساوٍ في اللغتين معًا */
  }

  /* ============================================================
     توسيع عجلة الأيقونات بعد إضافة الخدمة التاسعة.
     بثمانٍ من الأيقونات كانت المسافة بين المراكز 137px على دائرة 458px.
     وبتسع أيقونات على نفس القطر تنزل إلى 119px فتبدو مزدحمة، فنوسّع
     عمود الرسمة والدائرة معًا لاستعادة المسافة نفسها تقريبًا.
     ============================================================ */
  /* نوسّع الحاوية نفسها على الشاشات الكبيرة بدل اقتطاع المساحة من عمود
     النص، فتتسع الدائرة ويبقى النص بعرضه المريح دون التفاف جديد. */
  @media (min-width:1200px){
    .services-page__inner{ max-width:1290px; }
    .services-hero{ grid-template-columns:minmax(0,1fr) 530px; gap:52px; }
    .services-hero__visual{ min-height:560px; }
    .services-orbit{ width:530px; }
  }
  @media (min-width:981px) and (max-width:1199px){
    .services-hero{ grid-template-columns:minmax(0,1fr) 430px; gap:40px; }
    .services-hero__visual{ min-height:470px; }
    /* الدائرة أصغر في هذا النطاق، فتصغر المربعات معها لتبقى متباعدة */
    .services-orbit{ width:430px; --node-w:78px; --node-h:84px; --node-icon:33px; --node-font:.56rem; }
  }
  @media (max-width:980px){
    .services-hero__visual{ min-height:470px; }
    .services-orbit{ width:min(440px,100%); }
  }
  @media (max-width:640px){
    .services-hero__visual{ min-height:380px; padding-bottom:52px; }
    .services-orbit{ width:min(352px,100%); }
  }
  /* أضيق الشاشات: الدائرة تُحدّها المساحة، فنصغّر المربعات قليلًا
     حتى تبقى المسافة بينها كافية دون تلامس */
  @media (max-width:400px){
    .services-orbit{ --node-w:62px; --node-h:68px; --node-icon:25px; --node-font:.47rem; }
  }
  /* أصغر الشاشات المتداولة (320px): مساحة الدائرة تضيق أكثر،
     فنصغّر المربعات درجة إضافية لتبقى متباعدة */
  @media (max-width:340px){
    .services-orbit{ --node-w:56px; --node-h:62px; --node-icon:22px; --node-font:.44rem; }
  }

  /* صفحة لماذا بلنكس */
  .why-hero{ position:relative; z-index:1; text-align:center; padding:26px 0 6px; max-width:820px; margin-inline:auto; }
  /* عنوان الصفحة الصغير أكبر من نظيره في صفحات الخدمات، لأنه هنا اسم
     الصفحة نفسها لا مجرد تسمية قسم */
  .why-hero .services-eyebrow{ font-size:1.42rem; letter-spacing:.02em; margin-bottom:14px; }
  .why-hero .services-eyebrow::before{ width:34px; }
  @media (max-width:640px){
    .why-hero .services-eyebrow{ font-size:1.2rem; margin-bottom:10px; }
  }
  .why-grid{ position:relative; z-index:1; display:grid; gap:18px; padding:34px 0 0;
    grid-template-columns:repeat(2,minmax(0,1fr)); }
  .why-card{ position:relative; padding:30px 28px; border-radius:22px;
    background:rgba(255,255,255,.88); border:1px solid rgba(0,28,99,.08);
    box-shadow:0 16px 38px rgba(0,28,99,.07);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  .why-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px rgba(0,28,99,.12);
    border-color:rgba(242,64,10,.22); }
  .why-card:first-child{ grid-column:1 / -1; }
  .why-card__num{ display:block; color:var(--orange); font-size:.95rem; font-weight:800;
    letter-spacing:.08em; margin-bottom:10px; }
  .why-card__title{ color:var(--navy); font-size:1.2rem; line-height:1.5; margin:0 0 10px; }
  .why-card__copy{ color:var(--navy-soft); font-size:.96rem; line-height:1.9; margin:0; }
  @media (max-width:820px){
    .why-grid{ grid-template-columns:1fr; }
    .why-card{ padding:24px 20px; }
    .why-card__title{ font-size:1.08rem; }
  }
  /* مؤشر التمرير صار زرًا بيضاويًا معنونًا يقود إلى صفحة لماذا بلنكس،
     فيبدو قابلًا للضغط بوضوح بدل أن يكون سهمًا زخرفيًا */
  .scroll-hint--link{
    flex-direction:row; align-items:center; gap:10px;
    padding:13px 24px; border-radius:999px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(0,28,99,.10);
    box-shadow:0 12px 28px rgba(0,28,99,.10);
    text-decoration:none; cursor:pointer; opacity:1;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .scroll-hint--link:hover{
    transform:translateX(-50%) translateY(-3px);
    box-shadow:0 18px 38px rgba(0,28,99,.16);
    border-color:rgba(242,64,10,.35);
  }
  .scroll-hint--link:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
  .scroll-hint__label{ font-size:1.02rem; font-weight:800; color:var(--navy); white-space:nowrap; }
  .scroll-hint--link svg{ width:17px; height:17px; }
  @media (max-width:640px){
    /* على الجوال يخرج من التموضع المطلق ويتدفّق أسفل المحتوى، فلا يتصادم
       مع سطر القطاعات فوقه ولا مع الأزرار العائمة أسفله */
    .scroll-hint--link{
      position:static; transform:none; margin:26px auto 4px;
      padding:11px 19px; gap:9px;
    }
    .scroll-hint--link:hover{ transform:translateY(-3px); }
    .scroll-hint__label{ font-size:.94rem; }
  }

  /* إبراز منصة بعينها بعد الوصول إليها من البحث.
     داخل التذييل الكحلي نستخدم حلقة كريمية بدل البرتقالي حتى لا تضيع
     وسط الأيقونات والخط البرتقالي الموجودين أصلًا. */
  .social-link.is-focus{
    box-shadow:0 0 0 4px var(--cream), 0 12px 28px rgba(0,28,99,.32);
    transform:translateY(-3px);
    border-radius:999px;
  }
  .social-link{ transition:transform .22s ease, box-shadow .22s ease; }
  @media (prefers-reduced-motion: reduce){ .social-link.is-focus{ transform:none; } }

  /* العنوان الصغير في تذييل التواصل: الخط الإنجليزي لا يحوي حروفًا عربية،
     فنضبط للنص العربي خطه المناسب وتباعده */
  .home-social-footer__eyebrow [data-ar-only]{
    font-family:'IBM Plex Sans Arabic', sans-serif;
    letter-spacing:0; font-size:.86rem;
  }

  /* إبراز مربع التواصل كاملًا عند الوصول إليه من البحث.
     لأن التذييل بعرض الشاشة كاملًا، فإن الحلقة الخارجية قد تختفي خارج
     حدود الـ viewport؛ لذلك الإشارة هنا داخلية (inset) وواضحة بصريًا. */
  .home-social-footer.is-social-focus{
    box-shadow:
      inset 0 0 0 5px var(--cream),
      inset 0 0 0 9px rgba(255,255,255,.10),
      0 18px 40px rgba(0,28,99,.30);
    animation:belnix-social-found-dark 3.8s ease-out 1;
  }
  .contact-social-card.is-social-focus{
    position:relative;
    box-shadow:
      inset 0 0 0 4px var(--navy),
      inset 0 0 0 8px rgba(0,28,99,.10),
      0 18px 40px rgba(0,28,99,.22);
    animation:belnix-social-found-light 3.8s ease-out 1;
  }
  @keyframes belnix-social-found-dark{
    0%   { box-shadow:inset 0 0 0 0 rgba(243,239,230,0), inset 0 0 0 0 rgba(255,255,255,0), 0 18px 40px rgba(0,28,99,.10); }
    14%  { box-shadow:inset 0 0 0 7px var(--cream), inset 0 0 0 12px rgba(255,255,255,.12), 0 22px 48px rgba(0,28,99,.34); }
    30%  { box-shadow:inset 0 0 0 4px var(--cream), inset 0 0 0 8px rgba(255,255,255,.08), 0 18px 40px rgba(0,28,99,.28); }
    46%  { box-shadow:inset 0 0 0 7px var(--cream), inset 0 0 0 12px rgba(255,255,255,.12), 0 22px 48px rgba(0,28,99,.34); }
    100% { box-shadow:inset 0 0 0 5px var(--cream), inset 0 0 0 9px rgba(255,255,255,.10), 0 18px 40px rgba(0,28,99,.30); }
  }
  @keyframes belnix-social-found-light{
    0%   { box-shadow:inset 0 0 0 0 rgba(0,28,99,0), inset 0 0 0 0 rgba(0,28,99,0), 0 12px 30px rgba(0,28,99,.06); }
    14%  { box-shadow:inset 0 0 0 6px var(--navy), inset 0 0 0 11px rgba(0,28,99,.11), 0 20px 44px rgba(0,28,99,.24); }
    30%  { box-shadow:inset 0 0 0 3px var(--navy), inset 0 0 0 7px rgba(0,28,99,.08), 0 16px 36px rgba(0,28,99,.18); }
    46%  { box-shadow:inset 0 0 0 6px var(--navy), inset 0 0 0 11px rgba(0,28,99,.11), 0 20px 44px rgba(0,28,99,.24); }
    100% { box-shadow:inset 0 0 0 4px var(--navy), inset 0 0 0 8px rgba(0,28,99,.10), 0 18px 40px rgba(0,28,99,.22); }
  }
  .home-social-footer, .contact-social-card{ transition:box-shadow .25s ease; }
  .contact-social-link{ transition:transform .22s ease, box-shadow .22s ease; }
  .contact-social-link.is-focus{
    box-shadow:0 0 0 3px var(--navy), 0 12px 28px rgba(0,28,99,.22);
    transform:translateY(-3px); border-radius:14px;
  }
  @media (prefers-reduced-motion: reduce){
    .home-social-footer.is-social-focus,
    .contact-social-card.is-social-focus{ animation:none; }
  }


  /* إطار وصول مؤقت يُنشأ برمجيًا عند الانتقال من البحث إلى مربع التواصل.
     الإطار داخل العنصر نفسه، لذلك يبقى مرئيًا حتى عندما يكون التذييل بعرض الشاشة كاملًا. */
  .belnix-search-arrival-marker{
    position:absolute;
    inset:8px;
    z-index:12;
    pointer-events:none;
    border:4px solid var(--cream);
    border-radius:14px;
    opacity:0;
    box-shadow:inset 0 0 18px rgba(243,239,230,.18), 0 0 18px rgba(243,239,230,.20);
    animation:belnix-search-arrival-pulse 4s ease-out 1 forwards;
  }
  .contact-social-card .belnix-search-arrival-marker{
    border-color:var(--navy);
    box-shadow:inset 0 0 18px rgba(0,28,99,.10), 0 0 18px rgba(0,28,99,.14);
  }
  @keyframes belnix-search-arrival-pulse{
    0%   { opacity:0; transform:scale(.985); }
    10%  { opacity:1; transform:scale(1); }
    24%  { opacity:.38; }
    38%  { opacity:1; }
    55%  { opacity:.48; }
    72%  { opacity:1; }
    100% { opacity:.92; transform:scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .belnix-search-arrival-marker{ animation:none; opacity:1; }
  }
  /* سطر توضيح القطاعات: كل جملة في سطر مستقل */
  .svc-chips-note__line{ display:block; }
  .svc-chips-note__line + .svc-chips-note__line{ margin-top:6px; }
  a.contact-request{ text-decoration:none; }

  /* ============================================================
     زر المساعدة: أيقونة متمركزة تمامًا، ولون برتقالي ثابت يظهر بوضوح
     على الخلفية الكريمية والكحلية معًا، وتمدد بلا ارتجاج.
     الارتجاج السابق سببه تغيّر العرض مع تكبير الزر عند التحويم، فتتحرك
     حافته تحت المؤشر فيتبدّل التحويم تكرارًا؛ فأزلنا التكبير وجعلنا
     العرض يتبع النص لا العكس.
     ============================================================ */
  .float-help{
    width:auto; min-width:58px; height:58px;
    padding:0; gap:0; border-radius:999px;
    justify-content:center; align-items:center; overflow:hidden;
    background:var(--orange); color:#fff;
    transition:padding .25s ease, box-shadow .22s ease;
    transform:none;
  }
  .float-help:hover, .float-help:focus-visible{
    width:auto; padding:0 20px; border-radius:999px;
    background:var(--orange); transform:none;
  }
  .float-help svg{ flex:0 0 auto; display:block; }
  .float-help__text{
    display:inline-block; overflow:hidden;
    max-width:0; opacity:0; margin-inline-start:0; white-space:nowrap;
    transition:max-width .25s ease, opacity .2s ease, margin-inline-start .25s ease;
  }
  .float-help:hover .float-help__text,
  .float-help:focus-visible .float-help__text{
    max-width:190px; opacity:1; margin-inline-start:9px;
  }
  @media (max-width:640px){
    .float-help{ min-width:52px; height:52px; }
    .float-help:hover, .float-help:focus-visible{ padding:0 16px; }
  }
  /* Targeted line-balance helpers: no wording, colour, size, or layout changes outside marked text. */
  .belnix-keep-all{ white-space:nowrap; }
  .belnix-break-desktop{ display:none; }
  @media (min-width:901px){
    .belnix-keep-desktop{ white-space:nowrap; }
    br.belnix-break-desktop{ display:block; }
  }
  @media (max-width:640px){
    .belnix-keep-mobile{ white-space:nowrap; }
  }

  /* Seven-sector service pages on phones: 3 + 3 + centered final item. */
  @media (max-width:640px){
    #page-service-cctv .svc-chips--7,
    #page-service-networks .svc-chips--7,
    #page-service-computers .svc-chips--7,
    #page-service-pbx .svc-chips--7,
    #page-service-maintenance .svc-chips--7{
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:10px;
    }
    #page-service-cctv .svc-chips--7 .svc-chip,
    #page-service-networks .svc-chips--7 .svc-chip,
    #page-service-computers .svc-chips--7 .svc-chip,
    #page-service-pbx .svc-chips--7 .svc-chip,
    #page-service-maintenance .svc-chips--7 .svc-chip{
      grid-column:span 2;
    }
    #page-service-cctv .svc-chips--7 .svc-chips__row:last-child .svc-chip:last-child,
    #page-service-networks .svc-chips--7 .svc-chips__row:last-child .svc-chip:last-child,
    #page-service-computers .svc-chips--7 .svc-chips__row:last-child .svc-chip:last-child,
    #page-service-pbx .svc-chips--7 .svc-chips__row:last-child .svc-chip:last-child,
    #page-service-maintenance .svc-chips--7 .svc-chips__row:last-child .svc-chip:last-child{
      grid-column:3 / span 2;
    }

    /* Website Design sectors on phones: 2 + 2 + centered final item. */
    #page-service-web .svc-chips--5{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:10px;
    }
    #page-service-web .svc-chips--5 .svc-chip{ grid-column:span 2; }
    #page-service-web .svc-chips--5 .svc-chips__row:last-child .svc-chip:last-child{ grid-column:2 / span 2; }
  }

  /* Our Work: bilingual tags and only the requested line-balance adjustments. */
  .work-project__tag [data-ar-only]{ font-family:var(--font-ar); }
  @media (min-width:701px){
    .work-proof__value--setup{ white-space:nowrap; font-size:1rem; }
  }
  @media (max-width:700px){
    #page-work .work-mobile-one-line{
      white-space:nowrap;
      font-size:clamp(.68rem,3.15vw,.82rem) !important;
    }
  }

  /* Tablet-width navigation only: prevent the English menu from overflowing at 641–820px. */
  @media (min-width:641px) and (max-width:820px){
    .site-nav{ padding:14px 16px; gap:10px; }
    .nav__right{ gap:8px; }
    .nav__links{
      display:none;
      position:absolute;
      top:calc(100% + 10px);
      inset-inline-end:16px;
      min-width:250px;
      max-width:82vw;
      max-height:70vh;
      overflow-y:auto;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:var(--white);
      border:1px solid rgba(0,28,99,0.08);
      border-radius:14px;
      box-shadow:0 16px 32px rgba(0,28,99,0.18);
      padding:8px;
      z-index:200;
    }
    .nav__links.is-open{ display:flex; }
    .nav__link{
      padding:13px 10px;
      border-bottom:1px solid rgba(0,28,99,0.06);
      justify-content:space-between;
      width:100%;
      text-align:start;
      border-radius:8px;
    }
    .nav__link:last-child{ border-bottom:none; }
    .nav__link.is-active::after{ display:none; }
    .nav__submenu{ position:static; padding-top:0; }
    .nav__submenu-inner{
      background:rgba(0,28,99,0.03);
      border:none;
      box-shadow:none;
      border-radius:8px;
      padding:2px 0 6px 14px;
      margin-bottom:2px;
    }
    .nav__submenu a{ padding:11px 6px; font-size:.85rem; }
    .hamburger{ display:flex; }
    .nav__chevron-hit{
      min-width:46px;
      min-height:46px;
      padding:12px;
      margin-inline-start:2px;
      margin-block:-12px;
      position:relative;
      z-index:2;
    }
  }
  /* إشارة لغة دائمة بجانب أيقونة الكرة الأرضية؛ النص الكامل الحالي يبقى كما هو عند التحويم. */
  .lang-switch-btn{ max-width:72px; }
  .lang-switch-code{
    display:inline-block;
    flex:0 0 auto;
    color:var(--navy);
    font-family:'Inter',sans-serif;
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.04em;
  }
  .lang-switch:hover .lang-switch-btn,
  .lang-switch:focus-within .lang-switch-btn{ max-width:240px; }

  @media (max-width:640px){
    .lang-switch-btn,
    .lang-switch:hover .lang-switch-btn,
    .lang-switch:focus-within .lang-switch-btn{
      width:64px;
      min-width:64px;
      max-width:64px;
      padding:9px 10px;
      gap:7px;
      justify-content:center;
    }
  }
/* v122 — تعديلات ما قبل الفصل فقط: التحقق، حياد تبويبات الشركة، وتحديد نصوص الخدمات */
#captchaStage .captcha-gate{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--cream);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#captchaStage #captchaBox{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease;
}
#captchaStage.is-ready .captcha-gate,
#captchaStage .captcha-gate.is-ready{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#captchaStage.is-ready #captchaBox{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* عند الرجوع لبداية صفحة الشركة لا يبقى أثر بصري من العنصر الذي نُقر سابقًا. */
#page-company .company-anchor-nav.belnix-neutralized .company-anchor-link:hover,
#page-company .company-anchor-nav.belnix-neutralized .company-anchor-link:focus,
#page-company .company-anchor-nav.belnix-neutralized .company-anchor-link:focus-visible{
  color:var(--navy);
  background:transparent;
  outline:none;
}

/* نصوص بطاقات صفحة الخدمات قابلة للتحديد فعلًا، مع منع سحب الرابط نفسه بدل النص. */
#page-services .service-card{
  -webkit-user-drag:none;
}
#page-services .service-card__title,
#page-services .service-card__copy,
#page-services .service-card__list,
#page-services .service-card__list li,
#page-services .service-card__title *,
#page-services .service-card__copy *,
#page-services .service-card__list li *{
  user-select:text !important;
  -webkit-user-select:text !important;
  cursor:text;
  -webkit-user-drag:none;
}