/* ============================================================================
   نعم — الطبقة المشتركة  ·  naam.css
   ----------------------------------------------------------------------------
   مصدرٌ واحد لرموز الهوية والأزرار والطباعة والحركة، تشترك فيه كل السطوح.
   قبل هذا الملف كان في المستودع: 7 كتل :root منفصلة · 256 لوناً فريداً ·
   19 نصف قطر · 33 مقاس خط · 48 شكل زر · 17 مدة انتقال · صفر زرٍّ له حالة تركيز.

   قاعدتان لا تُكسران:
   1) الوزن 600 ممنوع — لا يوجد له ملف خطٍّ في العائلتين (كان يُطلب 92 مرة فيُزوَّر).
   2) الوزن 800 ممنوع — ملفاته نسخةٌ مطابقة بايتاً ببايت لملفات 700.
   المتاح فعلاً: Alexandria 700 · IBM Plex Sans Arabic 400/500/700. لا شيء غيره.
   ============================================================================ */

:root{
  /* ---- الحبر: ستّ درجات، من العنوان إلى الهامش ---- */
  --ink-900:#0B221E;
  --ink-700:#173B36;
  --ink-500:#3D554F;
  --ink-300:#556762;
  --ink-200:#61736E;
  --ink-100:#A7B6B1;   /* زخرفيّ فقط — حدودٌ وأيقونات. لا يُكتب به نصّ */

  /* ---- الورق ---- */
  --paper:#FBFAF7;
  --paper-2:#F3F7F5;
  --paper-3:#EAF7F3;
  --card:#FFFFFF;
  --line:#E3ECE9;
  --line-2:#D3E2DD;

  /* ---- التيل: لونُ العلامة ومشتقّاته ---- */
  --teal:#0FA98E;
  --teal-d:#0B8F7C;
  --teal-l:#12B597;
  --teal-100:#D9F2EC;
  --teal-50:#EEF9F6;
  --teal-ink:#097A67;   /* أخضر النص — كان يُكتب حرفياً 65 مرة بلا رمز */
  --on-teal:#021711;    /* الحبر فوق التيل — كان يُكتب حرفياً 44 مرة */

  /* ---- الشرارة: نقطةٌ واحدة في الصفحة، لا أكثر ---- */
  --spark:#FFC94D;

  /* ---- الحالات: نظامٌ واحد للموقع والتطبيق وصفحة التتبّع ---- */
  --st-new:#E23A32;
  --st-wait:#E08A1E;
  --st-live:#0FA98E;
  --st-done:#1BA46A;
  --st-idle:#8A9A94;

  /* ---- أنصاف الأقطار: ثلاثة وكبسولة. لا رابع ---- */
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  --r-pill:999px;

  /* ---- سلّم الطباعة: ستّة مقاسات ---- */
  --fs-display:clamp(36px,6vw,60px);
  --fs-h1:clamp(25px,3.2vw,36px);
  --fs-h2:21px;
  --fs-body:16.5px;
  --fs-meta:13.5px;
  --fs-micro:12px;

  /* ---- الظلّ: اثنان ---- */
  --sh-1:0 1px 2px rgba(12,38,33,.04), 0 8px 20px -12px rgba(12,38,33,.16);
  --sh-2:0 2px 4px rgba(12,38,33,.05), 0 18px 40px -18px rgba(12,38,33,.24);

  /* ---- الحركة: مدّتان ومنحنيان ---- */
  --d-1:130ms;
  --d-2:240ms;
  --d-3:440ms;
  --e-out:cubic-bezier(.2,.8,.25,1);
  --e-in:cubic-bezier(.4,0,1,1);

  /* ---- الإيقاع ---- */
  --gut:clamp(18px,4vw,28px);
  --measure:63ch;

  --font-body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-display:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-mark:'Alexandria',system-ui,sans-serif;  /* الأرقام والعناوين الصغيرة فقط */
}

/* ============================================================================
   الأساس
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box}

/* الاتجاه من الصفحة نفسها لا من هيكلٍ خارجيّ.
   أيّ سياقٍ يستضيف الصفحة بلا dir="rtl" كان يقلب الفواصل والمحايدات إلى الجهة
   الخطأ: «أنت تُغلق،» تصير الفاصلةُ يمينَ «أنت» ومنفصلةً عن «تُغلق». */
html{direction:rtl;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-700);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* الأرقام تتراصف رأسياً في القوائم والجداول والعدّادات */
.n-num,.n-stat b,time{font-variant-numeric:tabular-nums}

img,svg,video{max-width:100%}
video{height:auto}

::selection{background:var(--teal-100);color:var(--ink-900)}

/* ============================================================================
   الطباعة — الرأي: عنوانٌ كبير خفيف، لا عريضٌ في كل مكان
   ----------------------------------------------------------------------------
   العناوين بوزن 400 عند المقاسات الكبيرة: الحرف العربي عند 48px+ لا يحتاج
   تسميكاً ليُقرأ، والتسميك عند هذا الحجم هو ما يجعل الصفحة تبدو قالباً.
   ============================================================================ */
.n-display{
  font-family:var(--font-display);
  font-size:var(--fs-display);
  font-weight:400;
  line-height:1.34;
  letter-spacing:0;   /* لا تباعد على العربية — يفكّ وصل الحروف */
  color:var(--ink-900);
  margin:0;
  text-wrap:balance;
}
.n-h1{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  font-weight:400;
  line-height:1.25;
  color:var(--ink-900);
  margin:0;
  text-wrap:balance;
}
.n-h2{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.45;
  color:var(--ink-900);
  margin:0;
}
.n-lead{
  font-size:17px;
  line-height:1.85;
  color:var(--ink-500);
  max-width:var(--measure);
  margin:0;
}
.n-body{color:var(--ink-500);max-width:var(--measure);margin:0}
.n-meta{font-size:var(--fs-meta);color:var(--ink-300);line-height:1.6}
.n-micro{font-size:var(--fs-micro);color:var(--ink-200);line-height:1.55}

/* الكلمة المُبرَزة: خطٌّ تحتها بلون العلامة، لا تظليل ولا تدرّج */
.n-mark{
  color:var(--ink-900);
  box-shadow:inset 0 -.34em 0 var(--teal-100);
}

/* العين الصغيرة فوق العنوان */
.n-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  color:var(--teal-ink);
  margin:0 0 14px;
}
.n-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--teal);flex:none;
}

/* ============================================================================
   الأزرار — عائلةٌ واحدة، ولكلٍّ حالةُ تركيزٍ مرئية
   ============================================================================ */
.n-btn{
  --btn-bg:var(--teal);
  --btn-fg:var(--on-teal);
  --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;
  border:1.5px solid var(--btn-bd);
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-body);
  font-size:15.5px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--d-1) var(--e-out),
             border-color var(--d-1) var(--e-out),
             transform var(--d-1) var(--e-out),
             box-shadow var(--d-1) var(--e-out);
}
.n-btn:hover{background:var(--teal-d);transform:translateY(-1px)}
.n-btn:active{transform:translateY(0) scale(.985)}
.n-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 5.5px var(--teal);
}
.n-btn[disabled],.n-btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none;
}

.n-btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--teal-ink);
  --btn-bd:var(--line-2);
}
.n-btn--ghost:hover{background:var(--teal-50);border-color:var(--teal);transform:translateY(-1px)}

.n-btn--quiet{
  --btn-bg:transparent;
  --btn-fg:var(--ink-500);
  --btn-bd:transparent;
  padding:10px 14px;
  font-weight:500;
}
.n-btn--quiet:hover{background:var(--paper-2);color:var(--ink-900);transform:none}

.n-btn--sm{padding:9px 18px;font-size:14px}
.n-btn--lg{padding:16px 32px;font-size:17px}

/* ============================================================================
   السطوح
   ============================================================================ */
.n-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:22px;
}
.n-card--quiet{background:var(--paper-2);border-color:transparent}
.n-card--raised{box-shadow:var(--sh-1);border-color:transparent}

.n-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--card);
  font-size:var(--fs-meta);
  color:var(--ink-500);
}

/* نقطةُ حالةٍ واحدة تخدم الموقع والتطبيق وصفحة التتبّع */
.n-dot{
  width:8px;height:8px;border-radius:var(--r-pill);flex:none;
  background:var(--st-idle);
}
.n-dot[data-st="new"]{background:var(--st-new)}
.n-dot[data-st="wait"]{background:var(--st-wait)}
.n-dot[data-st="live"]{background:var(--st-live)}
.n-dot[data-st="done"]{background:var(--st-done)}

/* ============================================================================
   الخيط  —  توقيع «نعم» البصري
   ----------------------------------------------------------------------------
   خطٌّ واحد لا ينقطع من أول الصفحة إلى آخرها، تتعلّق به الأقسام كعُقَد.
   ليس زينة: هو معنى المنتج نفسه — طلبٌ يدخل الخيط، ويُمسَك، ولا يسقط، حتى يُغلق.
   التقدّم يُضبط من JS بمتغيّر --p بين 0 و1 (سطران، بلا مكتبة).
   ============================================================================ */
.n-rail{
  position:absolute;
  inset-inline-start:0;
  top:0;bottom:0;
  width:2px;
  background:var(--line);
  border-radius:var(--r-pill);
  overflow:hidden;
}
.n-rail::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--teal),var(--teal-l));
  transform-origin:top;
  transform:scaleY(var(--p,0));
  transition:transform 90ms linear;
}

.n-node{
  position:relative;
  width:13px;height:13px;
  border-radius:var(--r-pill);
  background:var(--paper);
  border:2px solid var(--line-2);
  flex:none;
  transition:border-color var(--d-2) var(--e-out),
             background var(--d-2) var(--e-out),
             transform var(--d-2) var(--e-out);
}
.n-node.is-on{
  border-color:var(--teal);
  background:var(--teal);
  transform:scale(1.15);
}

/* ============================================================================
   الظهور عند التمرير — درجةٌ واحدة، لا قفزات
   ============================================================================ */
/* المحتوى ظاهرٌ افتراضاً. الإخفاءُ لا يبدأ إلا بعد أن تُثبت الجافاسكربت أنّها
   تقدر أن تُظهره ثانيةً (تضع .js-reveal على <html>). القاعدة القديمة كانت
   opacity:0 في الـCSS نفسه — فإن لم يعمل المراقب بقيت الصفحة بيضاء، وهذا ما
   حدث فعلاً على الموقع الحيّ في تبويبٍ غير مرئي. */
.n-rise{transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
.js-reveal .n-rise{opacity:0;transform:translateY(14px)}
.js-reveal .n-rise.is-in{opacity:1;transform:none}

/* ============================================================================
   البنية
   ============================================================================ */
.n-wrap{
  width:min(1120px,100% - var(--gut) * 2);
  margin-inline:auto;
}
.n-section{padding-block:clamp(56px,9vw,104px)}
.n-section--tight{padding-block:clamp(36px,6vw,64px)}

.n-stack{display:flex;flex-direction:column;gap:clamp(14px,2vw,20px)}

/* رابطٌ نصّي */
.n-link{
  color:var(--teal-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--d-1) var(--e-out);
}
.n-link:hover{border-bottom-color:var(--teal)}
.n-link:focus-visible{
  outline:none;
  border-radius:4px;
  box-shadow:0 0 0 3px var(--paper),0 0 0 5.5px var(--teal);
}

/* تخطّي إلى المحتوى — لم يكن موجوداً في أي صفحة */
.n-skip{
  position:absolute;inset-inline-start:-9999px;
  background:var(--ink-900);color:#fff;
  padding:12px 20px;border-radius:var(--r-s);
  z-index:999;
}
.n-skip:focus{inset-inline-start:16px;top:16px}

/* ============================================================================
   من أطفأ الحركة — يرى المشهد كاملاً ساكناً، لا شاشةً صمّاء
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .n-rise{opacity:1;transform:none}
  .n-rail::after{transform:scaleY(1)}
  .n-node{border-color:var(--teal);background:var(--teal)}
}