/* ===================================================================
   NAFORI — نظام التصميم للموقع (الإصدار 3.0)
   مبني على دليل الهوية البصرية الإصدار 2.0
   القاعدة اللونية: 60 سطح / 30 غرافيت / 10 برتقالي
   -------------------------------------------------------------------
   ما الجديد في 3.0:
   · حواف منحنية موحّدة (رموز --r-*)، مع إبقاء الرمز والعقدة مربّعين
     لأنهما جزء من الشعار.
   · شريط تنقّل زجاجي عائم فوق الواجهة.
   · أقسام «ألواح» (slabs) بحواف دائرية بدل الشرائط الممتدّة.
   · بطاقات منفصلة بظلال ناعمة وحركة خفيفة عند المرور.
   =================================================================== */

:root{
  /* اللوحة الأساسية */
  --orange:        #C2410C;   /* البرتقالي المحروق — على الفاتح فقط */
  --orange-vivid:  #F26522;   /* البرتقالي الفاقع — على الداكن فقط */
  --orange-deep:   #9A3412;   /* حالات المرور والضغط */
  --graphite:      #1F2328;
  --graphite-2:    #2C3238;
  --graphite-0:    #181B1F;   /* عمق التدرّجات فقط */

  /* الحياديات */
  --surface:       #F4F2EF;
  --surface-deep:  #E3DFD9;
  --hairline:      #D5D0C9;
  --slate:         #5C6168;
  --mist:          #B4B9BF;
  --dim:           #7A7F86;
  --white:         #FFFFFF;

  /* الخطوط الشفّافة */
  --line:          rgba(31,35,40,.09);
  --line-2:        rgba(31,35,40,.16);
  --line-d:        rgba(255,255,255,.08);
  --line-d2:       rgba(255,255,255,.14);

  /* الألوان الوظيفية — للبيانات والواجهات فقط */
  --fn-ok:    #1B7F4B;
  --fn-warn:  #B58900;
  --fn-fault: #B3261E;
  --fn-info:  #31607F;

  /* الخطوط */
  --f-head: 'Cairo', 'IBM Plex Sans', system-ui, sans-serif;
  --f-body: 'Noto Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* القياسات */
  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 56px);
  --slab: clamp(8px, 1.3vw, 18px);     /* هامش الألواح عن حافة الشاشة */
  --gap: clamp(16px, 1.8vw, 24px);     /* الفراغ بين البطاقات */

  /* الاستدارة */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: clamp(20px, 2.6vw, 32px);
  --r-pill: 999px;

  /* الظلال */
  --sh-1: 0 1px 2px rgba(31,35,40,.04), 0 2px 10px -2px rgba(31,35,40,.05);
  --sh-2: 0 2px 4px rgba(31,35,40,.04), 0 14px 34px -12px rgba(31,35,40,.16);
  --sh-3: 0 4px 10px rgba(31,35,40,.05), 0 28px 60px -18px rgba(31,35,40,.26);
  --sh-d: 0 30px 60px -24px rgba(0,0,0,.55);

  --hdr-h: 68px;
  --hdr-top: 12px;
  --hdr-space: calc(var(--hdr-h) + var(--hdr-top));
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-space) + 28px);
  overflow-x:hidden;
  overflow-x:clip;
}

body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 100% 0%, rgba(194,65,12,.035), transparent 60%),
    var(--surface);
  color:var(--graphite);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  font-weight:600;
  line-height:1.4;
  margin:0;
  letter-spacing:0;
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--orange); color:#fff; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:var(--r-xs); }
.sec--dark :focus-visible, .hero :focus-visible, .phero :focus-visible,
.cta :focus-visible, .ftr :focus-visible, .hdr :focus-visible{ outline-color:var(--orange-vivid); }

/* ---------- عناصر مشتركة ---------- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* الرقم/التسمية أحادية العرض — ‎+0.12em بأحرف كبيرة حسب §4.1 */
.mono{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.6;
  font-feature-settings:"tnum" 1;
}

.num{ font-family:var(--f-mono); font-feature-settings:"tnum" 1; letter-spacing:-.01em; }

/* العقدة — المربع البرتقالي من الرمز. تبقى مربّعة عمداً: هي جزء من الشعار */
.node{
  display:inline-block;
  width:8px; height:8px;
  background:var(--orange);
  flex:0 0 8px;
}
.sec--dark .node, .hero .node, .phero .node, .cta .node, .ftr .node,
.bento__head .node{ background:var(--orange-vivid); }

/* كِكر القسم: عقدة + تسمية + خط يتلاشى */
.kicker{
  display:flex; align-items:center; gap:12px;
  color:var(--slate);
  margin-bottom:22px;
}
.kicker::after{
  content:''; flex:1 1 auto; height:1px;
  background:linear-gradient(to left, var(--hairline), transparent);
  min-width:24px;
}
.sec--dark .kicker, .cta .kicker, .phero .kicker, .bento__head .kicker{ color:var(--mist); }
.sec--dark .kicker::after, .cta .kicker::after, .phero .kicker::after,
.bento__head .kicker::after{ background:linear-gradient(to left, var(--line-d2), transparent); }

/* أدوات مساعدة */
.u-mt{ margin-top:28px; }
.u-mb{ margin-bottom:32px; }

.lede{ color:var(--slate); margin-top:22px; line-height:2; }
.lede--lg{ font-size:17px; margin-top:0; }

/* ---------- الأزرار ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-head); font-weight:600; font-size:15px;
  padding:13px 28px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  transition:
    transform .3s var(--ease-out),
    box-shadow .3s var(--ease),
    background-color .2s var(--ease),
    color .2s var(--ease),
    border-color .2s var(--ease);
  cursor:pointer;
  line-height:1.4;
  will-change:transform;
}
.btn svg{ width:16px; height:16px; flex:0 0 16px; transition:transform .3s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover svg{ transform:translateX(-4px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--block{ width:100%; }

/* زرّ إجراء واحد برتقالي لكل سطح — §3.4 */
.btn--primary{
  background:var(--orange); color:#fff;
  box-shadow:0 8px 20px -8px rgba(194,65,12,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover{
  background:var(--orange-deep);
  box-shadow:0 14px 28px -10px rgba(194,65,12,.65), inset 0 1px 0 rgba(255,255,255,.14);
}
.sec--dark .btn--primary,
.hero .btn--primary,
.phero .btn--primary,
.cta .btn--primary,
.hdr .btn--primary{
  background:var(--orange-vivid); color:var(--graphite);
  box-shadow:0 8px 24px -8px rgba(242,101,34,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.sec--dark .btn--primary:hover,
.hero .btn--primary:hover,
.phero .btn--primary:hover,
.cta .btn--primary:hover,
.hdr .btn--primary:hover{
  background:#FF7A3D;
  box-shadow:0 16px 34px -10px rgba(242,101,34,.6), inset 0 1px 0 rgba(255,255,255,.35);
}

.btn--ghost{
  border-color:var(--line-2); color:var(--graphite);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:var(--graphite); border-color:var(--graphite); color:var(--surface); box-shadow:var(--sh-2); }
.sec--dark .btn--ghost,
.hero .btn--ghost,
.phero .btn--ghost,
.cta .btn--ghost{
  border-color:var(--line-d2); color:var(--surface);
  background:rgba(255,255,255,.04);
}
.sec--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.phero .btn--ghost:hover,
.cta .btn--ghost:hover{ background:var(--surface); border-color:var(--surface); color:var(--graphite); }

.lnk{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:600; font-size:15px;
  color:var(--orange);
  padding:6px 0 4px;
  background:linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1.5px;
  transition:background-size .35s var(--ease-out);
}
.lnk:hover{ background-size:100% 1.5px; }
.lnk .ar-arrow{ transition:transform .3s var(--ease-out); }
.lnk:hover .ar-arrow{ transform:translateX(-5px); }
.sec--dark .lnk,
.hero .lnk,
.phero .lnk,
.cta .lnk{ color:var(--orange-vivid); }

/* ---------- الشريط العلوي ---------- */

.util{
  background:var(--graphite-0);
  color:var(--mist);
  position:relative; z-index:61;
}
.util .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:40px; flex-wrap:wrap;
}
.util__items{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.util__i{ display:flex; align-items:center; gap:8px; transition:color .2s var(--ease); }
.util a:hover{ color:#fff; }
.util__i svg{ width:13px; height:13px; opacity:.65; }

/* ---------- الرأس: شريط زجاجي عائم ---------- */

.hdr{
  position:sticky; top:0; z-index:60;
  padding-top:var(--hdr-top);
  /* الرأس يطفو فوق الواجهة بدل أن يدفعها للأسفل */
  margin-bottom:calc(-1 * var(--hdr-space));
  pointer-events:none;
}
.hdr > .wrap{
  pointer-events:auto;
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:var(--hdr-h);
  width:calc(100% - 2 * clamp(10px, 2.4vw, 28px));
  max-width:calc(var(--wrap) - 2 * var(--gut) + 44px);
  padding-inline:24px 10px;
  border-radius:var(--r-pill);
  background:rgba(24,27,31,.52);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line-d);
  box-shadow:0 12px 32px -14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.hdr.is-scrolled > .wrap{
  background:rgba(24,27,31,.8);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}

.brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto; }
.brand__mark{ width:30px; height:30px; flex:0 0 30px; transition:transform .5s var(--ease-out); }
.brand:hover .brand__mark{ transform:rotate(-90deg); }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__ar{ font-family:var(--f-head); font-weight:600; font-size:20px; letter-spacing:-.01em; }
.brand__en{ font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; color:var(--slate); margin-top:4px; }

.hdr .brand{ color:var(--surface); }
.hdr .brand__mark rect{ fill:var(--orange-vivid); }
.hdr .brand__en{ color:var(--dim); }

.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  font-family:var(--f-head); font-weight:500; font-size:15px;
  padding:8px 16px; color:rgba(244,242,239,.74);
  border-radius:var(--r-pill);
  position:relative;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.09); }
.nav a[aria-current="page"]::after{
  content:''; position:absolute; bottom:3px; left:50%;
  width:4px; height:4px; margin-left:-2px;
  background:var(--orange-vivid);
}
.hdr__cta{ flex:0 0 auto; padding:10px 22px; font-size:14.5px; }
.nav > .btn{ display:none; }   /* زرّ القائمة يظهر على الجوّال فقط */

.burger{
  display:none; width:44px; height:44px;
  border:1px solid var(--line-d2); background:rgba(255,255,255,.04);
  border-radius:var(--r-pill);
  cursor:pointer; padding:0; place-items:center; align-content:center;
  transition:background-color .2s var(--ease);
}
.burger:hover{ background:rgba(255,255,255,.1); }
.burger span{ display:block; width:18px; height:1.5px; background:var(--surface); margin:3.5px auto; border-radius:2px; transition:.25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }

/* ---------- الأقسام ---------- */

.sec{ padding-block:clamp(80px, 9.5vw, 136px); position:relative; }
.sec--tight{ padding-block:clamp(56px, 6.5vw, 92px); }

/* الألواح: أقسام بحواف دائرية تفصلها مسافة عن حافة الشاشة */
.sec--deep,
.sec--dark{
  margin:var(--slab);
  border-radius:var(--r-xl);
  overflow:hidden;
  isolation:isolate;
}
.sec--deep{
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(255,255,255,.55), transparent 65%),
    linear-gradient(180deg, #E9E5E0 0%, var(--surface-deep) 100%);
}
.sec--dark{
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(242,101,34,.09), transparent 60%),
    radial-gradient(700px 480px at 0% 100%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(180deg, var(--graphite) 0%, var(--graphite-0) 100%);
  color:var(--surface);
}
/* شبكة تقنية خافتة في الألواح الداكنة */
.sec--dark::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 80% 10%, #000 20%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 80% 10%, #000 20%, transparent 75%);
}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{ color:var(--surface); }
.sec--dark p{ color:var(--mist); }
.sec--line{ padding-top:clamp(56px, 6.5vw, 92px); }
.sec--line::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(calc(var(--wrap) - 2 * var(--gut)), calc(100% - 2 * var(--gut)));
  height:1px;
  background:linear-gradient(to left, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
}

.sec--deep + .sec--line::before{ display:none; }

.sec__head{ max-width:760px; margin-bottom:clamp(44px,5vw,72px); }
.sec__title{ font-size:clamp(26px,3.4vw,40px); line-height:1.34; letter-spacing:-.005em; }
.sec__title--md{ font-size:clamp(22px,2.7vw,32px); }
.sec__sub{ margin-top:18px; color:var(--slate); font-size:17px; line-height:1.95; }
.sec--dark .sec__sub{ color:var(--mist); }

.sec__head--row{
  max-width:none; display:flex; align-items:flex-end;
  justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.sec__head--row > div:first-child{ max-width:680px; }

/* تخطيط عمودين عام — الأعمدة تُمرَّر بالمتغيّر ‎--cols */
.split{
  display:grid;
  grid-template-columns:var(--cols, 1fr 1fr);
  gap:clamp(40px, 6vw, 96px);
  align-items:var(--align, start);
}

/* ---------- الواجهة الرئيسية ---------- */

.hero{
  position:relative;
  background:
    radial-gradient(900px 560px at 90% -10%, rgba(242,101,34,.16), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, var(--graphite-0) 0%, var(--graphite) 55%, #1B1F23 100%);
  color:var(--surface);
  overflow:hidden;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  isolation:isolate;
}
/* شبكة تقنية — ليست نقش الهوية، لذا مسموحة خلف النص */
.hero__grid{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 70% 25%, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse 75% 65% at 70% 25%, #000 25%, transparent 78%);
  pointer-events:none;
}
.hero__glow{
  position:absolute; z-index:-1; inset-inline-start:-12%; top:-35%;
  width:72%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(242,101,34,.13) 0%, transparent 62%);
  pointer-events:none;
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-4%,6%,0) scale(1.08); }
}
.hero__in{
  position:relative;
  padding-block:calc(var(--hdr-space) + clamp(64px, 9vw, 124px)) clamp(44px, 5vw, 72px);
}
.hero__in--page{ padding-block:calc(var(--hdr-space) + clamp(52px, 6.5vw, 88px)) clamp(60px, 7vw, 96px); }
.hero__in--msg{ padding-block:calc(var(--hdr-space) + clamp(64px, 8vw, 112px)) clamp(72px, 9vw, 120px); }

.hero__kick{
  display:inline-flex; align-items:center; gap:11px;
  color:var(--orange-vivid);
  border:1px solid var(--line-d2);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-pill);
  padding:8px 18px 8px 16px;
  margin-bottom:32px;
}
.hero__kick .node{ box-shadow:0 0 0 4px rgba(242,101,34,.18); animation:beacon 2.8s ease-in-out infinite; }
@keyframes beacon{ 0%,100%{ box-shadow:0 0 0 3px rgba(242,101,34,.22); } 50%{ box-shadow:0 0 0 7px rgba(242,101,34,0); } }

.hero h1{
  font-size:clamp(32px, 5.4vw, 64px);
  line-height:1.24;
  max-width:16ch;
  letter-spacing:-.015em;
}
.hero h1 em{ font-style:normal; color:var(--orange-vivid); }
.hero__lead{
  margin-top:28px; max-width:56ch;
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.95; color:var(--mist);
}
.hero__acts{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }
.hero__en{
  margin-top:44px; padding-top:22px;
  border-top:1px solid var(--line-d);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--dim); text-transform:uppercase; direction:ltr; text-align:start;
}

/* شعار الشركة اللفظي — عربي بـ Cairo ولاتيني بـ Mono */
.hero__tag{
  margin-top:48px; padding-top:24px;
  display:flex; flex-direction:column; gap:9px;
  position:relative;
}
.hero__tag::before{
  content:''; position:absolute; top:0; inset-inline:0; height:1px;
  background:linear-gradient(to left, var(--line-d2), transparent 80%);
}
.hero__tag-ar{
  font-family:var(--f-head); font-weight:500;
  font-size:clamp(15px,1.5vw,18px); line-height:1.6;
  color:var(--surface); letter-spacing:0;
}
.hero__tag-en{
  font-size:10.5px; color:var(--dim);
  direction:ltr; text-align:start; text-transform:uppercase;
}

/* ---------- الواجهة الرئيسية: منصّة الصور ----------
   صور حقيقية من مواقع العمل داخل إطار «عدسة معاينة»:
   تبدأ كمخطّط رمادي بشبكة هندسية ثم تتلوّن — من المخطّط إلى الموقع. */

/* خلفية محيطة: نسخة صغيرة جداً من الصورة الحالية مكبّرة ومموّهة */
.hero__ambient{ position:absolute; inset:-60px; z-index:-2; pointer-events:none; }
.hero__amb{
  position:absolute; inset:0;
  background-position:center; background-size:cover;
  filter:blur(28px) saturate(.75);
  opacity:0; transition:opacity 1.6s var(--ease);
}
.hero__amb.is-on{ opacity:.3; }
.hero--home::after{
  /* ظلّ يحمي النصّ في جهة البداية */
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to left, rgba(24,27,31,.92) 0%, rgba(24,27,31,.55) 45%, rgba(24,27,31,.25) 100%),
    linear-gradient(to top, rgba(24,27,31,.9) 0%, transparent 40%);
}

.hero__layout{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  gap:clamp(36px, 5vw, 80px);
  align-items:center;
}
.hero--home h1{ font-size:clamp(32px, 4.5vw, 58px); }

.stage{ position:relative; perspective:1400px; animation:stage-in 1.1s var(--ease-out) .15s both; }
@keyframes stage-in{ from{ opacity:0; transform:translateY(28px) scale(.97); } }

.stage__frame{
  position:relative; isolation:isolate;
  aspect-ratio:1 / 1;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--graphite-2);
  border:1px solid var(--line-d2);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.8), 0 0 0 6px rgba(255,255,255,.025), inset 0 1px 0 rgba(255,255,255,.08);
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .7s var(--ease-out);
  touch-action:pan-y;
  cursor:grab;
}
.stage__frame:active{ cursor:grabbing; }

.stage__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease); }
.stage__slide.is-on{ opacity:1; z-index:1; }
.stage__slide.is-prev{ z-index:0; }
.stage__slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.14);
  transition:filter 1.8s var(--ease);
}
/* «كين بيرنز»: تصغير بطيء طوال مدّة الشريحة */
.stage__slide.is-on img{ transform:scale(1.02); transition:transform 7.5s linear, filter 1.8s var(--ease); }
.stage__slide.is-prev img{ transform:scale(1.02); }

/* تظليل علوي وسفلي لقراءة المؤشّرات */
.stage__frame::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(24,27,31,.62) 0%, transparent 26%, transparent 64%, rgba(24,27,31,.55) 100%);
}

/* حالة المخطّط عند الفتح */
.stage__blueprint{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(242,101,34,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,101,34,.35) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position:-1px -1px;
  opacity:0; transition:opacity 1.6s var(--ease);
}
.stage.is-draft .stage__blueprint{ opacity:1; }
.stage.is-draft .stage__slide img{ filter:grayscale(1) contrast(1.3) brightness(.5); }

/* خطّ المسح عند تبديل الصورة */
.stage__scan{
  position:absolute; inset-inline:0; top:0; height:34%; z-index:3; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(242,101,34,.1) 80%, rgba(242,101,34,.55) 99%, var(--orange-vivid));
  transform:translateY(-100%); opacity:0;
}
.stage.is-scanning .stage__scan{ animation:scan 1.3s var(--ease) both; }
@keyframes scan{
  0%{ transform:translateY(-100%); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translateY(300%); opacity:0; }
}

/* زوايا الإطار: مثل عدسة معاينة */
.stage__hud{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.stage__corner{
  position:absolute; width:22px; height:22px;
  border:2px solid var(--orange-vivid);
  animation:corner-in .9s var(--ease-out) .5s both;
}
.stage__corner--a{ top:14px; right:14px; border-left:0; border-bottom:0; border-top-right-radius:7px; }
.stage__corner--b{ top:14px; left:14px; border-right:0; border-bottom:0; border-top-left-radius:7px; }
.stage__corner--c{ bottom:14px; right:14px; border-left:0; border-top:0; border-bottom-right-radius:7px; }
.stage__corner--d{ bottom:14px; left:14px; border-right:0; border-top:0; border-bottom-left-radius:7px; }
@keyframes corner-in{ from{ opacity:0; transform:scale(1.8); } }

.stage__bar{
  position:absolute; top:18px; inset-inline:48px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:#fff;
}
.stage__chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(24,27,31,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  direction:ltr;
}
.stage__tag{ transition:opacity .3s var(--ease); }
.stage__count{ direction:ltr; color:var(--mist); }
.stage__count b{ color:#fff; font-weight:500; }

/* لمعة تتبع المؤشّر */
.stage__glare{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.13), transparent 45%);
  opacity:0; transition:opacity .4s var(--ease);
}
.stage__frame:hover .stage__glare{ opacity:1; }

/* المصغّرات وشريط التقدّم */
.stage__thumbs{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;
  margin-top:14px;
}
.stage__thumb{
  position:relative; padding:0; cursor:pointer;
  aspect-ratio:4 / 3;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--line-d2);
  background:var(--graphite-2);
  opacity:.45; filter:grayscale(.7);
  transition:opacity .3s var(--ease), filter .3s var(--ease), transform .35s var(--ease-out), border-color .3s var(--ease);
}
.stage__thumb img{ width:100%; height:100%; object-fit:cover; }
.stage__thumb:hover{ opacity:.85; filter:none; transform:translateY(-2px); }
.stage__thumb[aria-selected="true"]{ opacity:1; filter:none; border-color:rgba(242,101,34,.7); }
.stage__prog{
  position:absolute; inset-inline:0; bottom:0; height:3px;
  background:var(--orange-vivid);
  transform:scaleX(0); transform-origin:right;
}
.stage__thumb[aria-selected="true"] .stage__prog{ animation:prog var(--dur, 6s) linear forwards; }
.stage.is-draft .stage__prog,
.stage.is-paused .stage__prog{ animation-play-state:paused; }
@keyframes prog{ to{ transform:scaleX(1); } }

/* شريط البيانات — لوح زجاجي */
.specbar{
  position:relative;
  margin-top:clamp(48px,6vw,76px);
  display:grid; grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  border:1px solid var(--line-d);
  border-radius:var(--r-lg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--sh-d);
  overflow:hidden;
}
.specbar__c{
  padding:28px clamp(20px,2.4vw,32px) 30px;
  border-inline-start:1px solid var(--line-d);
  position:relative;
  transition:background-color .3s var(--ease);
}
.specbar__c:first-child{ border-inline-start:0; }
.specbar__c:hover{ background:rgba(255,255,255,.035); }
.specbar__c::after{
  content:''; position:absolute; bottom:0; inset-inline-start:clamp(20px,2.4vw,32px);
  width:0; height:2px; background:var(--orange-vivid);
  transition:width .45s var(--ease-out);
}
.specbar__c:hover::after{ width:48px; }
.specbar__v{
  font-family:var(--f-mono); font-weight:500;
  font-size:clamp(24px,2.9vw,36px);
  line-height:1.1; color:#fff; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:5px; direction:ltr;
}
.specbar__v--ar{
  font-family:var(--f-head); font-weight:600;
  font-size:19px; line-height:1.45; letter-spacing:0;
  direction:rtl; display:block;
}
.specbar__v small{ font-size:.44em; color:var(--orange-vivid); font-weight:400; letter-spacing:.06em; }
.specbar__l{ margin-top:12px; color:var(--mist); font-size:13.5px; line-height:1.6; }

/* ---------- البطاقات: الأساس المشترك ---------- */

.grid{ display:grid; gap:var(--gap); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card,
.pcard,
.stat,
.bento__card,
.flow__s{
  --tx: transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease);
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  isolation:isolate;
  transition:var(--tx);
}
/* ضوء يتبع المؤشّر — يُضبط موضعه من main.js */
.card::after,
.pcard::after,
.stat::after,
.bento__card::after{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(194,65,12,.07), transparent 45%);
  opacity:0; transition:opacity .4s var(--ease);
}
.card:hover::after,
.pcard:hover::after,
.stat:hover::after,
.bento__card:hover::after{ opacity:1; }

.card:hover,
.pcard:hover,
.stat:hover,
.bento__card:hover,
.flow__s:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-3);
  border-color:rgba(194,65,12,.2);
}

/* النسخة الداكنة: زجاج خفيف */
.sec--dark .card,
.sec--dark .pcard,
.sec--dark .stat,
.sec--dark .flow__s{
  background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 100%);
  border-color:var(--line-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.sec--dark .card::after,
.sec--dark .pcard::after,
.sec--dark .stat::after{
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(242,101,34,.12), transparent 45%);
}
.sec--dark .card:hover,
.sec--dark .pcard:hover,
.sec--dark .stat:hover,
.sec--dark .flow__s:hover{
  border-color:rgba(242,101,34,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--sh-d);
}

/* ---------- بطاقات الخدمات ---------- */

.card{
  padding:clamp(28px,2.8vw,40px);
  display:flex; flex-direction:column;
  overflow:hidden;
}
/* خط برتقالي ينمو أعلى البطاقة عند المرور */
.card::before{
  content:''; position:absolute; top:0; inset-inline:0; height:2px;
  background:linear-gradient(to left, var(--orange), rgba(194,65,12,0) 75%);
  transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease-out);
}
.card:hover::before{ transform:scaleX(1); }
.sec--dark .card::before{ background:linear-gradient(to left, var(--orange-vivid), rgba(242,101,34,0) 75%); }

.card__idx{ display:flex; align-items:center; gap:10px; color:var(--slate); margin-bottom:26px; }
.sec--dark .card__idx{ color:var(--mist); }
.card__ic{
  width:56px; height:56px; margin-bottom:24px;
  padding:13px;
  color:var(--orange);
  background:linear-gradient(145deg, rgba(194,65,12,.1), rgba(194,65,12,.04));
  border:1px solid rgba(194,65,12,.12);
  border-radius:var(--r-sm);
  transition:transform .5s var(--ease-out), background-color .3s var(--ease);
}
.card:hover .card__ic{ transform:translateY(-2px) rotate(-4deg) scale(1.05); }
.sec--dark .card__ic{ color:var(--orange-vivid); background:rgba(242,101,34,.08); border-color:rgba(242,101,34,.18); }
.card__ic svg{ width:100%; height:100%; }
.card h3{ font-size:20px; line-height:1.45; }
.card__en{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); margin-top:8px; direction:ltr;
}
.card__en--lead{ margin-top:12px; font-size:11px; }
.sec--dark .card__en{ color:var(--dim); }
.card p{ margin-top:16px; color:var(--slate); font-size:15px; line-height:1.9; }
.sec--dark .card p{ color:var(--mist); }

.card--mini{ padding:22px 20px; }
.card--mini .card__idx{ margin-bottom:10px; }
.card--mini p{ font-size:14px; margin-top:0; }

.card__list{ list-style:none; margin:22px 0 0; padding:0; }
.card__list--flush{ margin-top:0; }
.card__list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; color:var(--slate); line-height:1.75;
  padding:9px 0; border-top:1px solid var(--line);
  transition:color .2s var(--ease);
}
.card__list li:hover{ color:var(--graphite); }
.sec--dark .card__list li{ border-color:var(--line-d); color:var(--mist); }
.sec--dark .card__list li:hover{ color:var(--surface); }
.card__list li::before{
  content:''; width:6px; height:6px; background:var(--orange);
  flex:0 0 6px; margin-top:10px; border-radius:1.5px;
}
.sec--dark .card__list li::before{ background:var(--orange-vivid); }

/* ---------- بطاقات القصّة (التأسيس والإرث) ---------- */

.bento{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:var(--gap);
  align-items:stretch;
}
.bento__head{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg);
  padding:clamp(30px,3.2vw,46px);
  min-height:340px;
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  color:var(--surface);
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(242,101,34,.2), transparent 62%),
    linear-gradient(160deg, var(--graphite-2) 0%, var(--graphite) 45%, var(--graphite-0) 100%);
  box-shadow:var(--sh-3);
}
/* نقش الهوية: خفيف، ومقصور على الزاوية البعيدة عن النصّ — §5.2 */
.bento__head::after{
  content:''; position:absolute; z-index:-1;
  inset-inline-end:-40px; bottom:-40px; width:260px; height:260px;
  background:url('../img/pattern/nafori-pattern-tile-reversed-subtle.svg') 0 0 / 130px 130px;
  opacity:.3;
  -webkit-mask-image:radial-gradient(circle at 20% 80%, #000 10%, transparent 70%);
  mask-image:radial-gradient(circle at 20% 80%, #000 10%, transparent 70%);
  pointer-events:none;
}
.bento__head .kicker{ margin-bottom:0; }
.bento__head .sec__title{ color:var(--surface); font-size:clamp(22px,2.4vw,31px); line-height:1.45; }
.bento__card{
  padding:clamp(28px,2.8vw,40px);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:22px;
}
.bento__card p{ color:var(--slate); font-size:16.5px; line-height:2.05; margin:0; }
.bento__ic{
  width:52px; height:52px; padding:12px;
  color:var(--orange);
  background:linear-gradient(145deg, rgba(194,65,12,.1), rgba(194,65,12,.04));
  border:1px solid rgba(194,65,12,.12);
  border-radius:var(--r-sm);
  transition:transform .5s var(--ease-out);
}
.bento__card:hover .bento__ic{ transform:rotate(-4deg) scale(1.06); }
.bento__ic svg{ width:100%; height:100%; }
.bento__foot{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }

/* ---------- شريط الإحصاءات ---------- */

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.stats--spaced{ margin-bottom:clamp(40px,4.5vw,60px); }
.stat{ padding:30px 28px; }
.stat__v{
  font-family:var(--f-mono); font-size:clamp(28px,3.4vw,42px);
  line-height:1.05; letter-spacing:-.025em; direction:ltr;
  display:flex; align-items:baseline; gap:6px;
}
.stat__v small{ font-size:.42em; color:var(--orange); letter-spacing:.06em; }
.stat__l{ margin-top:14px; color:var(--slate); font-size:14px; line-height:1.7; }
.stat__n{ margin-bottom:20px; color:var(--slate); }
.sec--dark .stat__n{ color:var(--dim); }
.sec--dark .stat__v{ color:#fff; }
.sec--dark .stat__v small{ color:var(--orange-vivid); }
.sec--dark .stat__l{ color:var(--mist); }

/* ---------- خط التغذية: مراحل العمل ---------- */

.flow{ position:relative; margin-top:16px; }
.flow__line{
  position:absolute; inset-inline:0; top:15px; height:2px; border-radius:2px;
  background:linear-gradient(to left, var(--orange) 0%, var(--hairline) 45%, var(--hairline) 100%);
}
.sec--dark .flow__line{ background:linear-gradient(to left, var(--orange-vivid), var(--line-d2) 45%); }
.flow__steps{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:var(--gap); position:relative;
  padding-top:52px;
}
.flow__steps--4{ grid-template-columns:repeat(4,1fr); }
.flow__s{ padding:24px 22px 26px; }
/* وصلة عمودية من الخط إلى البطاقة */
.flow__s::before{
  content:''; position:absolute; top:-29px; inset-inline-start:29px;
  width:2px; height:28px; background:var(--hairline);
}
.flow__node{
  position:absolute; top:-45px; inset-inline-start:22px;
  width:16px; height:16px; background:var(--graphite);
  box-shadow:0 0 0 6px var(--surface);
  transition:transform .5s var(--ease-out);
}
.sec--deep .flow__node{ box-shadow:0 0 0 6px #E7E3DD; }
.sec--dark .flow__node{ background:var(--surface); box-shadow:0 0 0 6px var(--graphite); }
.flow__s:nth-child(odd) .flow__node{ background:var(--orange); }
.sec--dark .flow__s:nth-child(odd) .flow__node{ background:var(--orange-vivid); }
.flow__s:hover .flow__node{ transform:rotate(45deg) scale(1.15); }
.flow__n{ color:var(--slate); display:block; margin-bottom:10px; }
.sec--dark .flow__n{ color:var(--dim); }
.flow__s h4{ font-size:16.5px; line-height:1.5; }
.flow__s p{ margin-top:10px; font-size:13.5px; color:var(--slate); line-height:1.8; }
.sec--dark .flow__s p{ color:var(--mist); }

/* ---------- بطاقات المشاريع ---------- */

.pcard{
  display:flex; flex-direction:column;
  overflow:hidden;
  padding:8px;
}
.pcard__fig{
  position:relative;
  aspect-ratio:16/10;
  background:var(--surface-deep);
  border-radius:calc(var(--r-md) - 6px);
  overflow:hidden;
}
.sec--dark .pcard__fig{ background:var(--graphite-2); }
.pcard__fig img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.pcard:hover .pcard__fig img{ transform:scale(1.06); }
.pcard__fig--cover{
  aspect-ratio:21/9;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
}

.pcard__cap{
  position:absolute; inset-inline-start:12px; bottom:12px;
  background:rgba(24,27,31,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill);
  color:#fff;
  padding:6px 14px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em;
  display:flex; align-items:center; gap:9px; direction:ltr;
  z-index:2;
}
.pcard__cap b{ color:var(--orange-vivid); font-weight:500; }

.pcard__body{ padding:22px 20px 20px; display:flex; flex-direction:column; flex:1; }
.pcard__meta{ display:flex; gap:8px; color:var(--slate); margin-bottom:14px; flex-wrap:wrap; }
.pcard__meta span:not(:empty){
  padding:2px 10px; border-radius:var(--r-pill);
  background:rgba(31,35,40,.045); border:1px solid var(--line);
}
.sec--dark .pcard__meta{ color:var(--dim); }
.sec--dark .pcard__meta span:not(:empty){ background:rgba(255,255,255,.04); border-color:var(--line-d); }
.pcard h3{ font-size:19px; line-height:1.5; }
.pcard h3 a{ transition:color .2s var(--ease); }
.pcard h3 a:hover{ color:var(--orange); }
.pcard p{ margin-top:12px; color:var(--slate); font-size:14.5px; line-height:1.85; flex:1; }
.sec--dark .pcard p{ color:var(--mist); }
.pcard__foot{ margin-top:22px; padding-top:14px; border-top:1px solid var(--line); }
.sec--dark .pcard__foot{ border-color:var(--line-d); }

/* صورة نائبة عند غياب الملف */
.ph{
  position:absolute; inset:0;
  display:grid; place-items:center; align-content:center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.5), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(31,35,40,.035) 11px 22px),
    var(--surface-deep);
  color:var(--slate);
  text-align:center; padding:22px;
}
.sec--dark .ph, .ph--dark{
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,.03) 11px 22px),
    var(--graphite-2);
  color:var(--mist);
}
.ph__ic{ width:34px; height:34px; opacity:.4; margin:0 auto 12px; }
.ph__t{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; }
.ph__s{ font-size:12px; margin-top:7px; opacity:.8; line-height:1.6; }

/* شارة "تجريبي" */
.badge-demo{
  position:absolute; inset-block-start:12px; inset-inline-end:12px;
  background:var(--orange); color:#fff;
  border-radius:var(--r-pill);
  box-shadow:0 6px 16px -6px rgba(194,65,12,.6);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em;
  padding:5px 12px; text-transform:uppercase; z-index:2;
}

/* ---------- المرشّحات ---------- */

.filters{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:40px;
  padding:6px; width:fit-content; max-width:100%;
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.filters:empty{ display:none; }
.filters button{
  font-family:var(--f-head); font-weight:500; font-size:14px;
  padding:9px 20px; cursor:pointer;
  background:transparent; color:var(--slate);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  transition:background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.filters button:hover{ color:var(--graphite); background:rgba(31,35,40,.05); }
.filters button[aria-pressed="true"]{
  background:var(--graphite); color:var(--surface);
  box-shadow:0 6px 16px -8px rgba(31,35,40,.6);
}

/* ---------- لوحة المراقبة ---------- */

.scada{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(242,101,34,.1), transparent 60%),
    linear-gradient(160deg, var(--graphite-2) 0%, var(--graphite) 55%, var(--graphite-0) 100%);
  padding:clamp(22px,2.6vw,32px);
  box-shadow:0 40px 80px -32px rgba(31,35,40,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.scada__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; margin-bottom:22px;
  border-bottom:1px solid var(--line-d); flex-wrap:wrap;
}
.scada__live{ display:flex; align-items:center; gap:9px; color:var(--mist); }
.scada__proto{
  color:var(--dim);
  padding:3px 10px; border-radius:var(--r-pill);
  border:1px solid var(--line-d);
}
.scada__cap{ color:var(--dim); margin-top:12px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--fn-ok); flex:0 0 8px; }
.dot--warn{ background:var(--fn-warn); }
.dot--fault{ background:var(--fn-fault); }
.dot--info{ background:var(--fn-info); }
.dot--pulse{ animation:pulse 2.4s ease-in-out infinite; box-shadow:0 0 0 0 rgba(27,127,75,.5); }
@keyframes pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(27,127,75,.5)} 50%{opacity:.55; box-shadow:0 0 0 6px rgba(27,127,75,0)} }

.scada__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.scada__cell{
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-sm);
  padding:18px 16px;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .4s var(--ease-out);
}
.scada__cell:hover{ border-color:rgba(242,101,34,.3); background:rgba(255,255,255,.03); transform:translateY(-2px); }
.scada__cell .mono{ color:var(--dim); }
.scada__v{
  font-family:var(--f-mono); font-size:clamp(20px,2.3vw,27px); color:#fff;
  margin-top:10px; letter-spacing:-.02em; direction:ltr;
  display:flex; align-items:baseline; gap:4px; white-space:nowrap;
}
.scada__v small{ font-size:.46em; color:var(--mist); letter-spacing:.06em; }
.scada__st{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; color:var(--mist); }

.scada__bars{
  display:flex; align-items:flex-end; gap:4px; height:72px; margin-top:22px;
  padding:10px 12px 0;
  border-radius:var(--r-sm);
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.04);
}
.scada__bars i{
  flex:1; display:block;
  background:rgba(255,255,255,.1);
  border-radius:3px 3px 0 0;
  transform-origin:bottom;
  animation:grow 1.1s var(--ease-out) both;
  animation-play-state:paused;
}
.scada.in .scada__bars i,
.scada:not(.rv) .scada__bars i{ animation-play-state:running; }
.scada__bars i.hi{ background:linear-gradient(to top, rgba(242,101,34,.45), var(--orange-vivid)); }
@keyframes grow{ from{ transform:scaleY(0); } }

/* ---------- تفاصيل المشروع ---------- */

.phero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(900px 520px at 90% -10%, rgba(242,101,34,.14), transparent 60%),
    linear-gradient(180deg, var(--graphite-0) 0%, var(--graphite) 100%);
  color:var(--surface);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  padding-block:calc(var(--hdr-space) + clamp(40px,5vw,64px)) clamp(48px,6vw,80px);
}
.phero h1{ font-size:clamp(26px,3.8vw,44px); line-height:1.32; max-width:20ch; margin-top:20px; }
.phero__lead{ margin-top:22px; max-width:62ch; color:var(--mist); font-size:17px; line-height:1.95; }

.crumbs{
  display:inline-flex; align-items:center; gap:10px; color:var(--dim); flex-wrap:wrap;
  padding:6px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line-d); background:rgba(255,255,255,.03);
}
.crumbs a{ transition:color .2s var(--ease); }
.crumbs a:hover{ color:var(--orange-vivid); }
.crumbs span{ opacity:.45; }

/* جدول المواصفات: لوح واحد بفواصل رفيعة */
.specs{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--sh-2);
}
.specs--1{ grid-template-columns:1fr; }
.spec{ background:var(--white); padding:18px 22px; transition:background-color .25s var(--ease); }
.spec:hover{ background:#FBFAF8; }
.spec__l{ color:var(--slate); }
.spec__v{ font-family:var(--f-head); font-weight:600; font-size:16px; margin-top:7px; line-height:1.5; }

.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.gal__i{
  position:relative; aspect-ratio:4/3; background:var(--surface-deep);
  overflow:hidden; border-radius:var(--r-md);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transition:box-shadow .4s var(--ease), transform .45s var(--ease-out);
}
.gal__i:hover{ box-shadow:var(--sh-3); transform:translateY(-4px); }
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.gal__i:hover img{ transform:scale(1.06); }

.prose h2{ font-size:clamp(21px,2.4vw,27px); margin-top:48px; margin-bottom:16px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--slate); font-size:16px; line-height:2; }
.prose ul{ margin:16px 0; padding:0; list-style:none; }
.prose ul li{
  display:flex; gap:12px; align-items:flex-start;
  color:var(--slate); font-size:15.5px; line-height:1.85;
  padding:11px 0; border-top:1px solid var(--line);
}
.prose ul li::before{ content:''; width:7px; height:7px; background:var(--orange); flex:0 0 7px; margin-top:11px; border-radius:1.5px; }

/* قائمة التحقّق — لوح أبيض بعلامات صحّ */
.checklist{
  list-style:none; margin:0;
  padding:clamp(10px,1.4vw,16px) clamp(22px,2.6vw,34px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.checklist li{
  display:flex; gap:14px; align-items:flex-start;
  color:var(--slate); font-size:15.5px; line-height:1.85;
  padding:14px 0; border-top:1px solid var(--line);
  transition:color .2s var(--ease);
}
.checklist li:first-child{ border-top:0; }
.checklist li:hover{ color:var(--graphite); }
.checklist li::before{
  content:''; flex:0 0 20px; height:20px; margin-top:4px;
  border-radius:6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    rgba(194,65,12,.1);
  transition:transform .3s var(--ease-out);
}
.checklist li:hover::before{ transform:scale(1.12); }

/* لوح عام لحاويات النصوص والنماذج */
.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,44px);
  box-shadow:var(--sh-2);
}

.panel--dark{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border-color:var(--line-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.panel--dark .card__list li:first-child{ border-top:0; padding-top:0; }

/* ---------- نداء الإجراء: لوح داكن عائم ---------- */

.cta{
  background:
    radial-gradient(700px 420px at 0% 100%, rgba(242,101,34,.18), transparent 60%),
    radial-gradient(600px 400px at 100% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(135deg, var(--graphite-2) 0%, var(--graphite) 50%, var(--graphite-0) 100%);
  color:var(--surface);
  position:relative; overflow:hidden; isolation:isolate;
  margin:clamp(24px,3vw,48px) var(--slab) var(--slab);
  border-radius:var(--r-xl);
}
/* النقش: خفيف فقط — أقلّ من 10 % مقابل أرضيته حسب §5.2،
   ومقصور على الطرف البعيد عن النصّ */
.cta__pat{
  position:absolute; inset-block:0; inset-inline-end:0; width:34%; z-index:-1;
  background-image:url('../img/pattern/nafori-pattern-tile-reversed-subtle.svg');
  background-size:160px 160px;
  opacity:.28; pointer-events:none;
  -webkit-mask-image:linear-gradient(to left, #000 0%, #000 45%, transparent 100%);
  mask-image:linear-gradient(to left, #000 0%, #000 45%, transparent 100%);
}
[dir="rtl"] .cta__pat{
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
  mask-image:linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
}
.cta .wrap{ position:relative; }
.cta h2{ font-size:clamp(24px,3.2vw,40px); line-height:1.36; max-width:18ch; }
.cta p{ margin-top:18px; max-width:52ch; color:var(--mist); font-size:17px; line-height:1.95; }
.cta__acts{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- النموذج ---------- */

.form{ display:grid; gap:22px; }
.fld{ display:flex; flex-direction:column; gap:9px; }
.fld label{ font-family:var(--f-head); font-weight:500; font-size:14.5px; }
.fld label span{ color:var(--orange); }
.fld input,.fld select,.fld textarea{
  font-family:var(--f-body); font-size:15px;
  padding:13px 16px;
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  background:#FBFAF8; color:var(--graphite);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  width:100%;
}
.fld input::placeholder,.fld textarea::placeholder{ color:#9A9EA4; }
.fld input:hover,.fld textarea:hover{ border-color:var(--line-2); background:#fff; }
.fld textarea{ min-height:150px; resize:vertical; line-height:1.8; }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--orange); background:#fff;
  box-shadow:0 0 0 4px rgba(194,65,12,.12);
}
.fld small{ color:var(--slate); font-size:12.5px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.note{
  padding:18px 20px;
  border:1px solid rgba(194,65,12,.14);
  border-inline-start:3px solid var(--orange);
  border-radius:var(--r-sm);
  background:linear-gradient(to left, rgba(194,65,12,.07), rgba(194,65,12,.02));
  font-size:14.5px; color:var(--slate); line-height:1.85;
}
.note--dark{
  background:linear-gradient(to left, rgba(242,101,34,.08), rgba(255,255,255,.02));
  border-color:var(--line-d);
  border-inline-start-color:var(--orange-vivid);
  color:var(--mist);
}
.note--dark b{ color:var(--surface); }

/* ---------- التذييل ---------- */

.ftr{
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(242,101,34,.06), transparent 60%),
    linear-gradient(180deg, var(--graphite) 0%, var(--graphite-0) 100%);
  color:var(--mist);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  overflow:hidden;
  margin-top:var(--slab);
}
.ftr__strip{
  height:4px;
  background:
    repeating-linear-gradient(to right,
      var(--orange-vivid) 0 16px, transparent 16px 160px),
    #2E3338;
}
.ftr__main{ padding-block:clamp(56px,6.5vw,88px); display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); }
.ftr h4{ font-family:var(--f-head); font-weight:600; font-size:15px; color:var(--surface); margin-bottom:18px; }
.ftr a{
  color:var(--mist); font-size:14.5px; line-height:2.15; display:block;
  width:fit-content;
  transition:color .2s var(--ease), transform .3s var(--ease-out);
}
.ftr a:hover{ color:var(--orange-vivid); transform:translateX(-4px); }
.ftr__about p{ font-size:14.5px; line-height:1.95; margin-top:18px; max-width:38ch; color:var(--mist); }
.ftr__brand{ display:flex; align-items:center; gap:13px; color:var(--surface); }
.ftr__brand .brand__ar{ color:var(--surface); }
.ftr__brand .brand__en{ color:var(--dim); }
.ftr__ct{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.85; margin-bottom:14px; }
.ftr__ct svg{ width:15px; height:15px; flex:0 0 15px; margin-top:6px; opacity:.55; }
.ftr__bot{
  border-top:1px solid var(--line-d); padding-block:24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; color:var(--dim);
}
.ftr__bot .mono{ font-size:10.5px; }

.social{ display:flex; gap:10px; margin-top:22px; }
.social a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line-d2);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease-out);
}
.social a:hover{ border-color:var(--orange-vivid); background:var(--orange-vivid); color:var(--graphite); transform:translateY(-3px); }
.social svg{ width:16px; height:16px; }

/* ---------- الحركة عند الظهور ----------
   تستخدم خاصيّة translate المستقلّة كي لا تتعارض مع transform
   المستخدمة في تأثيرات المرور. التأخير يأتي من المتغيّر ‎--d */

.rv{
  opacity:0; translate:0 26px;
  transition:
    opacity .8s var(--ease-out) var(--d, 0ms),
    translate .8s var(--ease-out) var(--d, 0ms),
    var(--tx, visibility 0s);
}
.rv.in{ opacity:1; translate:0 0; }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; translate:none; transition:none; }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; }
  .stage__slide img{ transform:none !important; }
  .stage__frame{ transform:none !important; }
  .card:hover,.pcard:hover,.stat:hover,.bento__card:hover,.flow__s:hover,
  .btn:hover,.gal__i:hover,.scada__cell:hover{ transform:none; }
}

/* ===================================================================
   الاستجابة
   =================================================================== */

@media (max-width:1080px){
  .ftr__main{ grid-template-columns:1fr 1fr; }
  .flow__steps,
  .flow__steps--4{ grid-template-columns:repeat(3,1fr); padding-top:0; }
  .flow__line, .flow__s::before{ display:none; }
  .flow__node{ position:static; margin-bottom:18px; box-shadow:none !important; }
  .bento{ grid-template-columns:1fr 1fr; }
  .bento__head{ grid-column:1 / -1; min-height:0; }
}

@media (max-width:900px){
  :root{ --hdr-h:60px; --hdr-top:10px; }
  .hero__layout{ grid-template-columns:1fr; }
  .hero__layout{ gap:28px; }
  .stage{ order:-1; max-width:600px; width:100%; }
  .stage__frame{ aspect-ratio:16 / 11; }
  .hero--home::after{ background:linear-gradient(180deg, rgba(24,27,31,.7), rgba(24,27,31,.85)); }
  .burger{ display:grid; }
  .hdr__cta{ display:none; }
  .hdr > .wrap{ padding-inline:18px 8px; }
  .nav{
    position:absolute; top:calc(100% + 10px); inset-inline:0;
    background:linear-gradient(180deg, #23282D, #1B1E22);
    border:1px solid var(--line-d);
    border-radius:var(--r-lg);
    box-shadow:0 24px 48px -20px rgba(0,0,0,.6);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:10px;
    transform:translateY(-8px) scale(.98); transform-origin:top center;
    opacity:0; pointer-events:none; visibility:hidden;
    transition:transform .3s var(--ease-out), opacity .25s var(--ease), visibility 0s .3s;
    max-height:calc(100vh - var(--hdr-space) - 60px); overflow-y:auto;
  }
  .nav.open{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition:transform .3s var(--ease-out), opacity .25s var(--ease), visibility 0s; }
  .nav a{ padding:13px 16px; font-size:16px; border-radius:var(--r-sm); }
  .nav a[aria-current="page"]::after{ left:auto; inset-inline-end:16px; top:50%; margin:-2px 0 0; }
  .nav > .btn{ display:flex; margin-top:8px; justify-content:center; }

  .split{ grid-template-columns:1fr; }
  .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); }
  .stats,.scada__grid,.specbar{ grid-template-columns:repeat(2,1fr); }
  .specbar__c:nth-child(odd){ border-inline-start:0; }
  .specbar__c:nth-child(n+3){ border-top:1px solid var(--line-d); }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .util__items .u-hide{ display:none; }
}

@media (max-width:620px){
  body{ font-size:15.5px; }
  .stage__thumbs{ gap:6px; }
  .stage__thumb{ border-radius:8px; }
  .stage__bar{ inset-inline:40px; top:15px; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .stats,.specs,.bento{ grid-template-columns:1fr; }
  .scada__grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .flow__steps,
  .flow__steps--4{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .hero__acts .btn{ width:100%; }
  .cta__acts .btn{ flex:1 1 auto; }
  .ftr__main{ grid-template-columns:1fr; }
  .sec__head--row{ align-items:flex-start; }
  .filters{ border-radius:var(--r-md); }
  .pcard__fig--cover{ aspect-ratio:4/3; }
}

@media (max-width:420px){
  .specbar{ grid-template-columns:1fr; }
  .specbar__c{ border-inline-start:0 !important; }
  .specbar__c:nth-child(n+2){ border-top:1px solid var(--line-d); }
}

/* ---------- الطباعة ---------- */
@media print{
  .hdr,.util,.cta,.ftr,.burger,.filters{ display:none; }
  body{ background:#fff; }
  .rv{ opacity:1; translate:none; }
  .hero,.phero{ padding-top:32px; }
}