/* ============================================================
   إتقان · Active SOP — site.css v3
   الأساس التنفيذي المشترك + مواصفات الأقسام الـ12
   RTL دائم · Amiri للعناوين · IBM Plex Sans Arabic للمتن
   الخلفية الورقية الموحدة: #F6F5F2
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   نظام الرموز (Design Tokens)
   ───────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* الألوان الأساسية */
  --color-paper:      #F6F5F2;   /* الخلفية الورقية الموحدة */
  --color-ink:        #2B2A26;   /* الجرافيت / النص الأساسي */
  --color-ink-muted:  #625F58;   /* النص الثانوي */
  --color-surface:    #FCFCFA;   /* سطح البطاقة */
  --color-surface-2:  #ECEAE4;   /* سطح غائر / خلفية المخططات */
  --color-border:     #D8D4CB;   /* حدود زخرفية */
  --color-border-ui:  #77736B;   /* حدود عناصر الإدخال */
  --color-accent:     #405B50;   /* لون الأثر / Accent */
  --color-gap:        #8A5447;   /* لون الفجوة */

  /* الطباعة */
  --font-expressive: 'Amiri', 'Georgia', serif;
  --font-functional: 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;

  /* نظام المسافات */
  --s1:  0.25rem;   /* 4px */
  --s2:  0.5rem;    /* 8px */
  --s3:  0.75rem;   /* 12px */
  --s4:  1rem;      /* 16px */
  --s5:  1.25rem;   /* 20px */
  --s6:  1.5rem;    /* 24px */
  --s8:  2rem;      /* 32px */
  --s10: 2.5rem;    /* 40px */
  --s12: 3rem;      /* 48px */
  --s16: 4rem;      /* 64px */
  --section-compact:  6rem;      /* 96px */
  --section-standard: 7rem;      /* 112px */

  /* الحاوية */
  --container-max:  75rem;       /* 1200px */
  --container-gutter: 2rem;      /* 32px */

  /* الحركة */
  --ease-enter:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-state:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-result:  cubic-bezier(0.2, 0, 0, 1);
  --ease-linear:  cubic-bezier(0, 0, 1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  background: var(--ground); color: var(--ink);
  line-height: 1.7; font-size: 17px;
  -webkit-tap-highlight-color: transparent;
}
a, button { touch-action: manipulation; }
::selection { background: var(--ink); color: var(--ground); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: 'Amiri', serif; font-weight: 700; line-height: 1.45; text-wrap: balance; }
.mono { font-family: 'IBM Plex Mono', monospace; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* رابط «تجاوز إلى المحتوى» — مخفي حتى يتركز عليه لوحة المفاتيح */
.skip {
  position: absolute; inset-inline-start: 16px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--ground); padding: 10px 18px;
  border-radius: 0 0 10px 10px; text-decoration: none; font-size: 14px;
  transition: top .15s ease;
}
.skip:focus-visible { top: 0; }

/* ——— «ألف المعيار»: خمس نقاط معيّنة ——— */
.alif { display: inline-flex; flex-direction: column; gap: 5px; align-items: center; }
.alif i { width: 11px; height: 11px; background: var(--ink); transform: rotate(45deg); }
.alif i.off { background: transparent; border: 2px solid var(--ink); width: 9px; height: 9px; }
.alif.small { gap: 4px; }
.alif.small i { width: 8px; height: 8px; }
.alif.small i.off { width: 6px; height: 6px; }

/* ——— الشعار المركّب: النقاط داخل الكلمة ——— */
.wordmark { font-family: 'Amiri', serif; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.wordmark .alif-col { display: inline-flex; flex-direction: column; justify-content: center; gap: .05em; margin: 0 .045em; vertical-align: -0.02em; }
.wordmark .alif-col i { width: .115em; height: .115em; background: var(--ink); transform: rotate(45deg); }
.wordmark .alif-col i.off { background: transparent; border: .018em solid var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .wordmark .alif-col i { animation: alif-drop .55s cubic-bezier(.2,.7,.2,1) backwards; }
  .wordmark .alif-col i:nth-child(1) { animation-delay: .55s; }
  .wordmark .alif-col i:nth-child(2) { animation-delay: .66s; }
  .wordmark .alif-col i:nth-child(3) { animation-delay: .77s; }
  .wordmark .alif-col i:nth-child(4) { animation-delay: .88s; }
  .wordmark .alif-col i:nth-child(5) { animation-delay: .99s; }
}
@keyframes alif-drop {
  from { opacity: 0; transform: rotate(45deg) translateY(-.45em); }
  to   { opacity: 1; transform: rotate(45deg) translateY(0); }
}
.latin-lockup { font-family: 'IBM Plex Mono', monospace; direction: ltr; letter-spacing: .12em; font-size: 12.5px; color: var(--muted); }

/* ——— التنقل — ثابت مع تضييق عند التمرير ——— */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px; padding: 20px 48px;
  background: rgba(246,245,242,.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: padding .25s ease, border-color .25s ease;
}
.nav.scrolled { padding-block: 12px; border-bottom-color: var(--line); }
.nav .logo { display: flex; align-items: center; gap: 10px; margin-inline-end: auto; text-decoration: none; }
.nav .logo .wordmark { font-size: 26px; transition: font-size .25s ease; }
.nav.scrolled .logo .wordmark { font-size: 22px; }
.nav .logo .alif-col i { width: .1em; height: .1em; }
.nav a:not(.btn) {
  text-decoration: none; font-size: 15px; color: var(--muted);
  position: relative; transition: color .15s ease;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 1.5px;
  background: var(--ink); transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav a.active { color: var(--ink); font-weight: 600; }

/* ——— الأزرار: أساسي + شبح، برفع وظل وسهم يتحرك ——— */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--ground);
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 12px 30px;
  font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn .arr { transition: transform .2s ease; }
.btn:hover { background: #1E1D1A; border-color: #1E1D1A; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(43,42,38,.22); }
.btn:hover .arr { transform: translateX(-4px); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(43,42,38,.2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); box-shadow: 0 6px 16px rgba(43,42,38,.10); }
.btn-lg { padding: 15px 38px; font-size: 17px; }
.btn-sm { padding: 8px 22px; font-size: 14.5px; }

/* ——— أقسام عامة ——— */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 48px; }
.narrow { max-width: 760px; }
.hairline { border: none; border-top: 1px solid var(--line); margin: 0 auto; }
.kicker { color: var(--muted); font-size: 14.5px; margin-bottom: 14px; }
.proof-line { color: var(--muted); font-size: 15px; margin-top: 16px; }
.proof-line b { color: var(--ink); }
section { padding: 96px 0; }
section.quiet { padding: 64px 0; }
.doc-h { font-size: clamp(34px, 4.5vw, 46px); margin-bottom: 14px; }
.doc-p { color: var(--muted); max-width: 680px; font-size: 17.5px; }
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.sec-head h2 { font-size: clamp(26px,3.5vw,34px); margin-bottom: 10px; }
.sec-head p { color: var(--muted); }

/* ——— قسم المشكلة: الأعراض الستة ——— */
.pains { list-style: none; max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.pains li { border-top: 1px solid var(--line); padding: 16px 18px 16px 0; font-size: 16px; position: relative; }
.pains li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 24px; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); opacity: .7; }
.problem-close { text-align: center; font-family: 'Amiri', serif; font-weight: 700; font-size: clamp(21px, 2.6vw, 27px); max-width: 720px; margin: 44px auto 0; }

/* ——— شريط الثقة ——— */
.trustbar { text-align: center; padding: 48px 0; }
.tb-line { font-family: 'Amiri', serif; font-weight: 700; font-size: clamp(21px, 2.6vw, 27px); margin-bottom: 22px; }
.tb-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tb-chips span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 18px; background: var(--surface); font-size: 14.5px; font-weight: 500; }
.tb-chips span small { color: var(--muted); font-size: 11.5px; font-weight: 400; margin-inline-start: 6px; }
.vs-close { text-align: center; font-family: 'Amiri', serif; font-weight: 700; font-size: clamp(19px, 2.2vw, 24px); margin-top: 28px; }

/* ——— العائد ——— */
.roi { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.roi-q { font-family: 'Amiri', serif; font-weight: 700; font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
.roi-a { color: var(--muted); font-size: 16.5px; }
.roi-a b { color: var(--ink); }

/* ——— الرئيسية ——— */
.hero { text-align: center; padding: 96px 0 72px; }
.hero .static-line { font-size: 18px; color: var(--muted); letter-spacing: .01em; }
.hero .static-line b { color: var(--ink); font-weight: 600; }
.hero .wordmark { font-size: clamp(84px, 12vw, 148px); margin: 4px 0 0; }
.hero .category { font-size: 20px; margin-top: 14px; }
.hero .category b { font-weight: 700; }
.hero .latin-lockup { display: block; margin-top: 22px; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.statement { text-align: center; padding-top: 0; }
.statement h1 { font-size: clamp(38px, 5vw, 56px); margin-bottom: 18px; }
.statement p { max-width: 640px; margin: 0 auto 34px; font-size: 18px; }
.statement .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* فيلم الهيرو — بليسهولدر فاتح هادئ: ثلاث خانات داخل إطار ورقي */
.film { position: relative; max-width: 900px; margin: 0 auto; background: var(--surface2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 42px; }
.film-slots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.film .clip { border: 1.5px dashed var(--line); border-radius: 10px; aspect-ratio: 21 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 10px; }
.film .cnum { font-family: 'Amiri', serif; font-weight: 700; font-size: 20px; color: var(--ink); }
.film .clip b { font-size: 14px; font-weight: 600; }
.film .clip small { font-size: 11px; color: var(--muted); }
.film > small { position: absolute; bottom: 12px; inset-inline: 18px; font-size: 11.5px; color: var(--muted); text-align: center; }
.film-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }

/* ——— نموذج المنتج (CSS لا صور) — إطار دليل حقيقي ——— */
.mock {
  max-width: 900px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(43,42,38,.06), 0 16px 40px rgba(43,42,38,.08);
}
.mock-head {
  display: flex; align-items: center; gap: 14px; padding: 16px 24px;
  border-bottom: 1px solid var(--line); background: var(--surface2);
}
.mock-head .wordmark { font-size: 19px; }
.mock-head .alif-col i { width: .1em; height: .1em; }
.mock-title { font-weight: 600; font-size: 15px; }
.mock-crumb { color: var(--muted); font-size: 12.5px; margin-inline-start: auto; white-space: nowrap; }
.mock-step { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; }
.mock-visual {
  position: relative; background: var(--surface2); border-inline-end: 1px solid var(--line);
  min-height: 320px; padding: 28px;
}
/* شكل واجهة مجرّدة: نافذة نظام بحقول وأزرار — ترسم السياق لا تفاصيل */
.mock-window { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; height: 100%; min-height: 260px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.mock-window .bar { height: 10px; border-radius: 5px; background: var(--surface2); }
.mock-window .bar.w60 { width: 60%; } .mock-window .bar.w40 { width: 40%; } .mock-window .bar.w75 { width: 75%; }
.mock-window .row { display: flex; gap: 10px; }
.mock-window .fld { flex: 1; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
.mock-window .actions { margin-top: auto; display: flex; gap: 10px; justify-content: flex-end; }
.mock-window .chip { width: 84px; height: 28px; border-radius: 999px; background: var(--ink); }
.mock-window .chip.ghost { background: transparent; border: 1.5px solid var(--line); }
/* علامة الهدف على الزر المقصود — مربع بزوايا حادة كما في المنتج */
.mock-target { position: absolute; inset-inline-end: 46px; bottom: 46px; width: 96px; height: 36px; outline: 2px solid var(--ink); outline-offset: 3px; }
.mock-target::after { content: ""; position: absolute; top: -2px; inset-inline-start: -2px; width: 9px; height: 9px; background: var(--ink); }
.mock-copy { padding: 28px 30px; display: flex; flex-direction: column; }
.mock-stepnum { font-family: 'Amiri', serif; font-weight: 700; font-size: 44px; line-height: 1.1; }
.mock-stepnum small { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; font-weight: 400; color: var(--muted); display: block; letter-spacing: .02em; }
.mock-copy h3 { font-size: 21px; margin: 10px 0 8px; }
.mock-copy .desc { color: var(--muted); font-size: 15px; }
.mock-quote {
  margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px;
  font-size: 15px; line-height: 1.9;
}
.mock-quote::before { content: "◂"; margin-inline-end: 8px; color: var(--muted); }
.mock-quote small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.wer-badge { display: inline-block; opacity: 0; transform: translateY(3px); transition: opacity .3s ease, transform .3s ease; border: 1px solid var(--ink); border-radius: 999px; padding: 0 10px; font-size: 11.5px; margin-inline-start: 8px; white-space: nowrap; }
.wer-badge.show { opacity: 1; transform: none; }
.mock-foot { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface2); }
.mock-dots { display: flex; gap: 7px; }
.mock-dots i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--line); }
.mock-dots i.on { background: var(--ink); }
.mock-foot .cap { color: var(--muted); font-size: 12.5px; margin-inline-start: auto; }
.mock-caption { text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; }

/* ——— شريط الأفعال المتحرك ——— */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; background: var(--surface); }
.marquee-track { display: flex; gap: 0; width: max-content; direction: ltr; }
.marquee-seg { display: flex; align-items: center; white-space: nowrap; direction: rtl; }
.marquee-seg span { font-family: 'Amiri', serif; font-weight: 700; font-size: 21px; color: var(--ink); padding: 0 8px; }
.marquee-seg i { width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); margin: 0 24px; opacity: .35; flex: none; }
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee-x 46s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}

/* ——— بطاقات الاستخدام ——— */
.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
.use {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 26px; text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.use:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(43,42,38,.10); border-color: #CFCCC3; }
.use svg { display: block; margin-bottom: 16px; }
.use b { display: block; font-size: 16.5px; margin-bottom: 4px; }
.use span { color: var(--muted); font-size: 14px; line-height: 1.75; display: block; }

/* ——— الآلية — خط زمني تحريري + تقدّم تلقائي ——— */
.mech { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; max-width: 960px; margin: 0 auto; }
.mech .step { border-top: 2px solid var(--line); padding-top: 22px; position: relative; transition: border-color .3s ease, opacity .3s ease; }
.mech .step .track { position: absolute; top: -2px; inset-inline-start: 0; width: 100%; height: 2px; overflow: hidden; }
.mech .step .track::before {
  content: ""; display: block; height: 100%; width: 0; background: var(--ink);
}
.mech .step.is-live { border-top-color: var(--line); }
.mech .step.is-live .track::before { width: 100%; }
@keyframes mech-prog { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .mech .step.is-live .track::before { animation: mech-prog 4.2s linear forwards; }
  .mech .step:not(.is-live) { opacity: .55; }
}
.mech .num { font-family: 'Amiri', serif; font-weight: 700; font-size: 34px; line-height: 1.2; }
.mech h3 { font-size: 21px; margin: 6px 0 8px; }
.mech p { color: var(--muted); font-size: 15px; }
.mech-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 40px; }

/* ——— تشبيه الالتقاط: لوحة الإضافة فوق نافذة نظام — مأخوذ من واجهة الإضافة الحقيقية ——— */
.sim { position: relative; max-width: 900px; margin: 64px auto 0; background: var(--surface2); border: 1px solid var(--line); border-radius: 16px; padding: 26px; min-height: 340px; box-shadow: 0 2px 4px rgba(43,42,38,.06), 0 16px 40px rgba(43,42,38,.08); }
.sim-app { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-height: 288px; padding: 20px; display: flex; flex-direction: column; gap: 12px; margin-inline-end: 34%; }
.sim-app .bar { height: 10px; border-radius: 5px; background: var(--surface2); }
.sim-app .bar.w40 { width: 40%; } .sim-app .bar.w65 { width: 65%; } .sim-app .bar.w30 { width: 30%; }
.sim-app .row { display: flex; gap: 10px; }
.sim-app .fld { flex: 1; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
.sim-app .actions { margin-top: auto; display: flex; gap: 10px; justify-content: flex-start; }
.sim-app .chip { width: 92px; height: 30px; border-radius: 999px; background: var(--ink); position: relative; }
.sim-app .chip.ghost { background: transparent; border: 1.5px solid var(--line); }
/* علامة الهدف تنبض فوق زر «اعتماد» في النظام ثم تُختم على بطاقة الخطوة الجديدة */
.sim-target { position: absolute; inset-inline-start: 20px; bottom: 16px; width: 104px; height: 38px; outline: 2px solid var(--ink); outline-offset: 3px; }
.sim-target::after { content: ""; position: absolute; top: -2px; inset-inline-start: -2px; width: 9px; height: 9px; background: var(--ink); }
@keyframes sim-mark { 0%, 18% { opacity: 1; transform: scale(1); } 30%, 82% { opacity: 0; transform: scale(1.06); } 94%, 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .sim-target { animation: sim-mark 3.6s ease-in-out infinite; }
}
.sim-panel { position: absolute; inset-inline-end: 18px; top: 18px; bottom: 18px; width: 31%; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: -8px 0 24px rgba(43,42,38,.06); }
.sim-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sim-head .wordmark { font-size: 15px; }
.sim-head .alif-col i { width: .1em; height: .1em; }
.sim-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; color: #C4453D; border: 1px solid rgba(196,69,61,.28); background: rgba(196,69,61,.07); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.sim-rec i { width: 6px; height: 6px; border-radius: 50%; background: #C4453D; }
@keyframes sim-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: no-preference) {
  .sim-rec i { animation: sim-pulse 1.3s infinite; }
}
.sim-stop { display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--ground); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; }
.sim-stop b { width: 9px; height: 9px; background: var(--ground); border-radius: 2px; }
.sim-steps { display: flex; flex-direction: column; gap: 8px; }
.sim-step { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 8px; }
.sim-step .thumb { position: relative; width: 44px; height: 32px; background: var(--surface2); border: 1px solid var(--line); border-radius: 5px; flex: none; }
.sim-step .thumb::before { content: ""; position: absolute; inset: 7px 9px; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.sim-step .thumb .tmark { position: absolute; inset-inline-end: 6px; bottom: 5px; width: 13px; height: 9px; outline: 1.5px solid var(--ink); outline-offset: 1.5px; }
.sim-step .ln { flex: 1; height: 7px; border-radius: 4px; background: var(--surface2); }
.sim-step.new { border-style: dashed; }
.sim-step.new .thumb { background: transparent; }
.sim-step.new .ln { background: transparent; border: 1.5px dashed var(--line); }
@keyframes sim-stamp { 0%, 40% { opacity: 0; transform: scale(1.3); } 55%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .sim-step.new .tmark { animation: sim-stamp 3.6s ease-in-out infinite; }
}
.sim-cap { text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; }

/* لقطة المنتج — البحث الدلالي */
.shot { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; max-width: 860px; margin: 0 auto; box-shadow: 0 1px 2px rgba(15,29,40,.10); }
.shot-search { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 20px; margin-bottom: 18px; background: var(--ground); }
.shot-q { font-weight: 600; }
.shot-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.shot .card { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; gap: 16px; margin-bottom: 12px; background: var(--ground); transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease; }
.shot .card:hover { border-color: var(--muted); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(43,42,38,.07); }
.shot .card:last-child { margin-bottom: 0; }
.shot .card .t { font-weight: 600; }
.shot .card .s { color: var(--muted); font-size: 13.5px; }
.shot .card > div { flex: 1; }
.card-tag { font-size: 12px; font-weight: 600; border: 1px solid var(--ink); border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.card.is-stale { opacity: .62; }
.shot .card.hit { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(43,42,38,.09); }
.shot .card.hit .card-tag { background: var(--ink); color: var(--ground); }
.card-tag.pre { opacity: 0; transition: opacity .25s ease; }
.shot .card.hit .card-tag.pre { opacity: 1; }
.shot-q.typing::after { content: "▏"; margin-inline-start: 2px; color: var(--muted); animation: sim-pulse 1s infinite; }

/* الميت والحي */
.dead { text-align: center; }
.dead .two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 820px; margin: 34px auto 0; }
.dead .two h3 { font-size: 26px; margin-bottom: 8px; }
.dead .two p { color: var(--muted); font-size: 16px; }
.dead .rule { max-width: 820px; margin: 48px auto 0; position: relative; }
.dead .rule span { position: absolute; top: -11px; inset-inline-start: 50%; transform: translateX(50%); background: var(--ground); padding: 0 18px; color: var(--muted); font-size: 13px; }

/* الأرقام + مصدرها + عدّاد */
.numbers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); max-width: 960px; margin: 0 auto; }
.numbers div { background: var(--ground); text-align: center; padding: 40px 20px; }
.numbers .n { font-family: 'Amiri', serif; font-size: 52px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.numbers .l { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.numbers-src { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 14px; }

/* ——— شريط الأمن — خلفية ورقية موحّدة مع أنيميشن الشعار ——— */
.secure { background: var(--ground); color: var(--ink); }
.secure .sec-head h2 { color: var(--ink); }
.secure .sec-head p { color: var(--muted); }
.secure-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; max-width: 960px; margin: 0 auto; }
.secure-grid .col { border-top: 2px solid rgba(43,42,38,.3); padding-top: 20px; }
.secure-grid .col b { display: block; font-size: 17px; margin-bottom: 6px; }
.secure-grid .col p { color: var(--muted); font-size: 15px; }
.secure-grid .col .mono { color: var(--ink); }
.secure-badges { display: flex; gap: 12px; justify-content: center; margin-top: 52px; flex-wrap: wrap; }
.secure-badges .badge { border: 1px solid rgba(43,42,38,.35); border-radius: 999px; padding: 6px 18px; font-size: 13px; color: var(--muted); }
.secure .more { display: block; text-align: center; margin-top: 30px; color: var(--ink); font-weight: 600; }

/* ——— صفوف الأدوار ——— */
.roles-list { max-width: 860px; margin: 0 auto; }
.role-row { display: flex; align-items: baseline; gap: 14px; padding: 20px 6px; border-top: 1px solid var(--line); }
.role-row:last-child { border-bottom: 1px solid var(--line); }
.role-row .dia { width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg) translateY(-1px); flex: none; opacity: .8; }
.role-row b { font-size: 17px; white-space: nowrap; }
.role-row span { color: var(--muted); font-size: 15.5px; }

/* المعيار الخماسي */
.standard-row { text-align: center; max-width: 680px; margin: 0 auto; }
.standard-row .alif { margin-bottom: 22px; }
.standard-row h2 { font-size: clamp(26px, 3.5vw, 34px); margin-bottom: 12px; }
.standard-row p { color: var(--muted); margin-bottom: 22px; }
.standard-row a { font-weight: 600; }

/* معرفة تبقى */
.stay-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; max-width: 960px; margin: 0 auto; align-items: start; }
.stay blockquote { font-family: 'Amiri', serif; font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1.55; margin: 18px 0 0; }
.stay-note { border-top: 2px solid var(--ink); padding-top: 18px; margin-top: 46px; }
.stay-note p { color: var(--muted); font-size: 16px; }

/* الجاهزية المؤسسية */
.ent { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 960px; margin: 36px auto 0; }
.ent .item { background: var(--surface); padding: 30px 30px; transition: background .2s ease; }
.ent .item:hover { background: var(--surface2); }
.ent .item b { display: block; margin-bottom: 4px; font-size: 17px; }
.ent .item span { color: var(--muted); font-size: 15px; }

/* ——— الأسئلة الشائعة ——— */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 20px 6px; font-size: 17px; font-weight: 600;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: ""; width: 9px; height: 9px; background: var(--ink); flex: none;
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq-list details[open] summary::before { transform: rotate(135deg); }
.faq-list details p { color: var(--muted); padding: 0 31px 22px; font-size: 15.5px; }

/* ——— بطاقة CTA الختامية ——— */
.cta-band {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  max-width: 960px; margin: 0 auto; padding: 72px 64px;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center;
  box-shadow: 0 2px 4px rgba(43,42,38,.05), 0 20px 48px rgba(43,42,38,.07);
}
.cta-band h2 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 14px; }
.cta-band p { color: var(--muted); margin-bottom: 28px; }
.cta-art { display: flex; justify-content: center; }
.refuse { text-align: center; color: var(--muted); font-size: 15.5px; padding: 64px 0; }

/* جدول المعيار */
table.iso { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); margin-top: 40px; }
table.iso th, table.iso td { border-bottom: 1px solid var(--line); padding: 15px 18px; text-align: right; font-size: 15.5px; vertical-align: top; }
table.iso th { font-weight: 600; background: var(--surface2); font-size: 14px; color: var(--muted); }
table.iso td:first-child { font-family: 'Amiri', serif; font-weight: 700; font-size: 24px; width: 56px; text-align: center; }
table.iso .st { white-space: nowrap; font-size: 13.5px; color: var(--muted); }
.alif-para { display: flex; gap: 22px; align-items: flex-start; max-width: 760px; margin-top: 48px; }
.alif-para .alif { flex: none; margin-top: 8px; }
.alif-para p { font-size: 17px; }
.honest { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px 30px; max-width: 760px; margin-top: 44px; }
.honest h3 { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.lifetest { border-top: 1px solid var(--line); margin-top: 72px; padding-top: 56px; max-width: 760px; }
.lifetest h2 { font-size: clamp(26px, 3.5vw, 32px); margin-bottom: 14px; }

/* ——— مشهد «الألف تُضاء عند الاعتماد» — تشبيه تفاعلي في صفحة المعيار ——— */
.signdemo { margin-top: 56px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 38px 30px 30px; }
.sd-stage { display: flex; align-items: center; justify-content: center; gap: 40px; }
.sd-stage .alif { gap: 7px; }
.sd-stage .alif i { width: 14px; height: 14px; }
.sd-stage .alif i.off { width: 12px; height: 12px; }
.sd-fourth { transition: background .45s ease .1s; }
.sd-fourth.lit { background: var(--ink) !important; border-color: var(--ink) !important; animation: sd-pop .5s ease .12s; }
@keyframes sd-pop { 0%, 100% { transform: rotate(45deg) scale(1); } 45% { transform: rotate(45deg) scale(1.3); } }
.sd-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sd-signed { font-size: 14px; color: var(--muted); opacity: 0; transition: opacity .35s ease; display: flex; align-items: center; gap: 8px; }
.sd-signed::before { content: ""; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); flex: none; }
.signdemo.done .sd-signed { opacity: 1; }
.sd-cap { text-align: center; color: var(--muted); font-size: 13px; margin-top: 26px; }

/* ——— مشهد «الطمس قبل المغادرة» — صفحة الأمن ——— */
.redact { margin-top: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 34px 30px; }
.rd-grid { display: grid; grid-template-columns: 1.2fr auto .8fr; gap: 20px; align-items: center; }
.rd-shot { position: relative; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 18px; min-height: 118px; overflow: hidden; }
.rd-lbl { display: block; width: 34%; height: 8px; border-radius: 4px; background: var(--line); }
.rd-val { display: block; width: 52%; height: 16px; border-radius: 8px; background: var(--ink); opacity: .8; margin-top: 12px; filter: blur(4px); }
.rd-bar { display: block; width: 70%; height: 8px; border-radius: 4px; background: var(--line); margin-top: 14px; }
.rd-sweep { position: absolute; inset: 0; background: linear-gradient(to left, transparent, rgba(43,42,38,.16) 45%, transparent); transform: translateX(-120%); pointer-events: none; }
.rd-locked { position: absolute; inset-inline-end: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; border: 1px solid var(--ink); border-radius: 999px; padding: 2px 10px; background: var(--surface); }
.rd-locked svg { flex: none; }
.rd-arr { font-size: 22px; color: var(--muted); }
.rd-scope { border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px 14px 18px; text-align: center; font-size: 12px; color: var(--muted); }
.rd-server { display: block; width: 42px; height: 54px; border: 1.5px solid var(--ink); border-radius: 6px; margin: 10px auto 0; position: relative; background: var(--surface2); }
.rd-server::before, .rd-server::after { content: ""; position: absolute; inset-inline: 7px; height: 2px; background: var(--ink); opacity: .5; }
.rd-server::before { top: 12px; } .rd-server::after { top: 24px; }
.rd-cap { text-align: center; color: var(--muted); font-size: 13px; margin-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .rd-sweep { animation: rd-sweep 4.4s ease-in-out infinite; }
  .rd-locked { animation: rd-appear 4.4s ease-in-out infinite; }
  .rd-val { animation: rd-blur 4.4s ease-in-out infinite; }
}
@keyframes rd-sweep { 0%, 6% { transform: translateX(120%); opacity: 0; } 12% { opacity: 1; } 26%, 100% { transform: translateX(-120%); opacity: 0; } }
@keyframes rd-blur { 0%, 20% { filter: blur(0); } 34%, 92% { filter: blur(4px); } 100% { filter: blur(4px); } }
@keyframes rd-appear { 0%, 26% { opacity: 0; transform: scale(1.15); } 38%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* الأمن */
.controls { max-width: 760px; }
.controls li { list-style: none; border-bottom: 1px solid var(--line); padding: 20px 0; font-size: 17px; }
.controls li b { display: block; margin-bottom: 2px; }
.controls li span { color: var(--muted); font-size: 15px; }

/* SOP بالعربي */
.def-quote { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 40px 44px; margin-top: 36px; }
.def-quote p { font-size: 22px; line-height: 1.9; }
.def-quote b { font-weight: 700; }
table.vs { width: 100%; border-collapse: collapse; margin-top: 40px; background: var(--surface); border: 1px solid var(--line); }
table.vs th, table.vs td { border-bottom: 1px solid var(--line); padding: 14px 18px; text-align: right; font-size: 15.5px; }
table.vs th { background: var(--surface2); color: var(--muted); font-size: 14px; }
.faq { max-width: 760px; margin-top: 56px; }
.faq h3 { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 17px; margin: 26px 0 4px; }
.faq p { color: var(--muted); }

/* اطلب عرضًا */
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; max-width: 960px; margin-top: 48px; }
form.req label { display: block; font-size: 14px; font-weight: 600; margin: 20px 0 6px; }
form.req input, form.req select, form.req textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
form.req input:focus, form.req select:focus, form.req textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
form.req .btn { width: 100%; margin-top: 26px; text-align: center; justify-content: center; }
.req-note { color: var(--muted); font-size: 13.5px; margin-top: 12px; text-align: center; }
.form-msg { display: none; margin-top: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); font-size: 14.5px; }
.form-msg.show { display: block; }
.steps-ol { counter-reset: st; }
.steps-ol li { list-style: none; counter-increment: st; border-bottom: 1px solid var(--line); padding: 22px 0; }
.steps-ol li::before { content: counter(st, arabic-indic); font-family: 'Amiri', serif; font-weight: 700; font-size: 30px; display: block; line-height: 1.2; }
.steps-ol li b { display: block; margin-bottom: 2px; }
.steps-ol li span { color: var(--muted); font-size: 15px; }

/* ——— الذيل الغني ——— */
footer { border-top: 1px solid var(--line); background: var(--surface); padding: 64px 48px 32px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; max-width: 1080px; margin: 0 auto; }
.foot-brand .wordmark { font-size: 24px; }
.foot-brand .alif-col i { width: .1em; height: .1em; }
.foot-brand p { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 320px; }
.foot-brand .badge { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; background: var(--ground); font-size: 12px; color: var(--muted); margin-top: 18px; }
.foot-col b { display: block; font-size: 13.5px; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.foot-col a { display: block; text-decoration: none; color: var(--ink); font-size: 15px; padding: 5px 0; transition: color .15s ease; }
.foot-col a:hover { color: var(--muted); }
.foot-col .soon { display: inline-block; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; margin-inline-start: 8px; vertical-align: 1px; }
.foot-soon { display: block; color: var(--muted); font-size: 15px; padding: 5px 0; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1080px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* استجابة */
@media (max-width: 800px) {
  .wrap, .nav { padding-inline: 22px; }
  .nav { gap: 14px; flex-wrap: wrap; }
  .dead .two, .numbers, .req-grid, .mech, .ent, .stay-grid, .uses, .secure-grid, .cta-band { grid-template-columns: 1fr; }
  .pains { grid-template-columns: 1fr; }
  .film-slots { grid-template-columns: 1fr; }
  .film .clip { aspect-ratio: 16 / 7; }
  .sd-stage { flex-direction: column; gap: 24px; }
  .sd-side { align-items: center; }
  .rd-grid { grid-template-columns: 1fr; }
  .rd-arr { transform: rotate(90deg); text-align: center; }
  .numbers div, .ent .item { border-bottom: 1px solid var(--line); }
  .mech .step { margin-bottom: 32px; }
  .stay-note { margin-top: 0; }
  .shot-search { flex-direction: column; align-items: flex-start; border-radius: 14px; }
  section { padding: 64px 0; }
  .mock-step { grid-template-columns: 1fr; }
  .mock-visual { border-inline-end: none; border-bottom: 1px solid var(--line); min-height: 240px; }
  .sim { padding: 16px; }
  .sim-app { margin-inline-end: 0; min-height: 220px; }
  .sim-target { display: none; }
  .sim-panel { position: static; width: auto; margin-top: 12px; box-shadow: none; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-band { padding: 48px 28px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}