/* ============================================================================
   site.css - تنسيقات الموقع التعريفي لنظام AI-ENG CO لإدارة الشراكات والتعاون: هوية "الوثيقة والختم" بالعاجي والأسود والذهبي
   EN: Styles of the AI-ENG CO partnerships & collaboration website: a "document and seal" identity in ivory, black and gold
   ----------------------------------------------------------------------------
   - الرموز اللونية على :root للمظهرين (data-theme="light|dark")، ولكل مظهر خلفية صريحة.
   - الأخضر والأحمر دلالة حالة لا زينة (سارية/مكتمل = أخضر، تقترب/جزئي = ذهبي، متأخر/انتهت صامتاً = أحمر)،
     والرمادي لما أُغلق بقرار. لا تدرّج لوني للتنسيق: الضوء توهّج بظل، والأنماط خطوط SVG رفيعة.
   - الأقسام بالترتيب: الأساس، الأزرار، الهيدر، الواجهة والشبكة الحية، الأرقام، رأس القسم والإعلان، الرحلة، الوحدات، اللوحة،
     التقييم، البوابة، الاستباقية، المنظومة، المنصة، المقارنة، المراحل، الأسئلة، التواصل، التذييل، القارئ، الحركة، الشاشات الصغيرة، الطباعة.
   ============================================================================ */

/* ---------------------------------------------------------------- 1) الأساس */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F4EC; --bg-alt: #EFEADC; --surface: #FFFFFF; --surface-2: #FAF7EF; --sunk: #F2EDE1;
  --ink: #15130F; --ink-2: #2E2A22; --muted: #625D51; --faint: #8C8574;
  --line: #E3DBC9; --line-2: #D2C6AC;
  --gold: #C9A227; --gold-l: #E6C75A; --gold-d: #A3821B; --gold-ink: #7F640C; --gold-soft: rgba(201, 162, 39, .14);
  --green: #1D8048; --green-soft: rgba(29, 128, 72, .12);
  --red: #C23838; --red-soft: rgba(194, 56, 56, .11);
  --grey: #8E887A; --grey-soft: rgba(142, 136, 122, .14);
  --wa: #25D366; --wa-d: #128C7E;
  --pattern: rgba(127, 100, 12, .10);
  --shadow: 0 1px 2px rgba(21, 19, 15, .05), 0 16px 36px -18px rgba(21, 19, 15, .24);
  --shadow-lg: 0 2px 4px rgba(21, 19, 15, .05), 0 30px 60px -28px rgba(21, 19, 15, .34);
  --radius: 18px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D0C09; --bg-alt: #131109; --surface: #1A1813; --surface-2: #201D17; --sunk: #12100C;
  --ink: #F3F0E6; --ink-2: #DCD6C7; --muted: #ADA697; --faint: #847E70;
  --line: #2D2920; --line-2: #3D372B;
  --gold-ink: #E6C75A; --gold-soft: rgba(230, 199, 90, .13);
  --green: #3DB872; --green-soft: rgba(61, 184, 114, .14);
  --red: #EC5F5F; --red-soft: rgba(236, 95, 95, .14);
  --grey: #8D877A; --grey-soft: rgba(141, 135, 122, .16);
  --pattern: rgba(230, 199, 90, .075);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .8);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 34px 70px -30px rgba(0, 0, 0, .9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D0C09; --bg-alt: #131109; --surface: #1A1813; --surface-2: #201D17; --sunk: #12100C;
    --ink: #F3F0E6; --ink-2: #DCD6C7; --muted: #ADA697; --faint: #847E70;
    --line: #2D2920; --line-2: #3D372B;
    --gold-ink: #E6C75A; --gold-soft: rgba(230, 199, 90, .13);
    --green: #3DB872; --green-soft: rgba(61, 184, 114, .14);
    --red: #EC5F5F; --red-soft: rgba(236, 95, 95, .14);
    --grey: #8D877A; --grey-soft: rgba(141, 135, 122, .16);
    --pattern: rgba(230, 199, 90, .075);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .8);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 34px 70px -30px rgba(0, 0, 0, .9);
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* السمة hidden تغلب أي display مكتوب للمكوّن (الشارات .sem وغيرها inline-flex) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
       font-size: 1rem; line-height: 1.8; overflow-x: hidden; text-rendering: optimizeLegibility; transition: background-color .3s, color .3s; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 900; letter-spacing: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.mono, .code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; direction: ltr; unicode-bidi: isolate; letter-spacing: .02em; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--gold); color: #15130F; padding: .5rem 1rem; border-radius: 10px; font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* النمط الهندسي: شبكة مخطط رفيعة (SVG) - خطوط لا تدرّج */
.blueprint { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%23000' stroke-opacity='.06'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .blueprint { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%23E6C75A' stroke-opacity='.05'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- 2) الأزرار والرقائق والبطاقات */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1.3rem; border-radius: 12px;
       border: 1px solid transparent; font-weight: 800; font-size: .98rem; line-height: 1.3; text-decoration: none; cursor: pointer;
       transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .45rem .85rem; font-size: .88rem; border-radius: 10px; }
.btn-gold { background: var(--gold); color: #15130F; box-shadow: 0 8px 22px -10px rgba(201, 162, 39, .8); }
.btn-gold:hover { background: var(--gold-l); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-ink); }
.btn-ghost[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.btn-wa { background: var(--wa); color: #07301A; }
.btn-wa:hover { background: #3BE07A; }
.icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-2); background: transparent; display: inline-grid; place-items: center;
            cursor: pointer; font-size: 1.05rem; font-weight: 800; color: var(--ink); transition: border-color .2s, color .2s, background-color .2s; flex-shrink: 0; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold-ink); }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .65rem; border-radius: 999px; border: 1px solid var(--line-2);
        background: var(--surface); font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; line-height: 1.6; }
.chip i { color: var(--gold-d); }
.chip.code { color: var(--ink-2); font-size: .76rem; }
/* الحالات الدلالية (قاعدة الثلاثية): مكتمل/سارية ← أخضر، جزئي/تقترب ← ذهبي، متأخر/صفر ← أحمر، أُغلق بقرار ← رمادي */
.sem { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; line-height: 1.7; }
.sem::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sem-full { color: var(--green); background: var(--green-soft); }
.sem-partial { color: var(--gold-ink); background: var(--gold-soft); }
.sem-none { color: var(--red); background: var(--red-soft); }
.sem-off { color: var(--grey); background: var(--grey-soft); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem; }
/* أركان الوثيقة: زاويتان ذهبيتان متقابلتان (توقيع الهوية) */
.frame { position: relative; }
.frame::before, .frame::after { content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--gold); pointer-events: none; }
.frame::before { top: -1px; inset-inline-start: -1px; border-inline-end: 0; border-bottom: 0; border-start-start-radius: var(--radius); }
.frame::after { bottom: -1px; inset-inline-end: -1px; border-inline-start: 0; border-top: 0; border-end-end-radius: var(--radius); }
.bar { --p: 0; position: relative; height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--p) * 1%); border-radius: inherit; background: var(--gold); transition: width .8s var(--ease); }
.bar.full > i { background: var(--green); } .bar.partial > i { background: var(--gold); } .bar.none > i { background: var(--red); } .bar.off > i { background: var(--grey); }

/* ---------------------------------------------------------------- 3) الهيدر */
.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.2) blur(12px);
          -webkit-backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, background-color .3s; }
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar-in { display: flex; align-items: center; gap: 1rem; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.logo-img { display: inline-flex; align-items: center; gap: .5rem; line-height: 0; direction: ltr; }
.logo-img picture { display: block; }
.logo-img img { height: 30px; width: auto; display: block; }
.logo-img .logo-dark { display: none; }
:root[data-theme="dark"] .logo-img .logo-light { display: none; }
:root[data-theme="dark"] .logo-img .logo-dark { display: block; }
.logo-img.on-dark .logo-light { display: none; } .logo-img.on-dark .logo-dark { display: block; }
.co-mark { display: inline-grid; place-items: center; height: 26px; padding: 0 .55rem; border-radius: 7px; background: var(--gold); color: #15130F;
           font: 900 .92rem/1 "Cairo", sans-serif; letter-spacing: .06em; }
.brand-tag { color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap; border-inline-start: 1px solid var(--line-2); padding-inline-start: .65rem; line-height: 1.3; }
.nav { display: flex; gap: 0; flex: 1; justify-content: center; flex-wrap: wrap; }
.nav a { padding: .38rem .5rem; border-radius: 9px; text-decoration: none; font-weight: 700; font-size: .87rem; color: var(--muted); position: relative; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--gold-soft); }
.nav a.active { color: var(--ink); }
.nav a.active::after { content: ""; position: absolute; inset-inline: .5rem; bottom: .1rem; height: 2px; border-radius: 2px; background: var(--gold); }
.tools { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.burger { display: none; }
.scroll-prog { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scroll-prog i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--gold); }

/* ---------------------------------------------------------------- 4) الواجهة (Hero) والشبكة الحية */
.hero { position: relative; overflow: hidden; padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--line); isolation: isolate; }
.hero > .bg-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero .rosette { position: absolute; width: min(900px, 120vw); aspect-ratio: 1; inset-inline-start: -260px; top: -240px; opacity: .9; color: var(--gold); }
.hero .rosette g { transform-origin: 450px 450px; animation: spin 240s linear infinite; }
.hero .rosette g.rev { animation-direction: reverse; animation-duration: 320s; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
/* الشعار الأساسي بمقاسه الإعلاني أعلى الواجهة: صورة الشعار نفسها (870 للكثافة العالية) وشارة CO متناسبة معها */
.hero-lockup { margin-bottom: 1.1rem; }
.logo-img.big { gap: .75rem; }
.logo-img.big img { height: clamp(46px, 6.2vw, 78px); }
.logo-img.big .co-mark { height: clamp(32px, 4.3vw, 54px); padding: 0 clamp(.6rem, 1.2vw, 1rem); font-size: clamp(1.15rem, 2.5vw, 1.95rem); border-radius: clamp(8px, 1vw, 12px); }
/* كلمة AI-ENG داخل العناوين: الشعار صورةً بارتفاع السطر (لا خط مكتوب) */
.logo-img.wm { display: inline-flex; vertical-align: -0.17em; margin-inline: .14em; }
.logo-img.wm img { height: .92em; }
.hero-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .32rem .85rem; border-radius: 999px; border: 1px solid var(--line-2);
             background: var(--surface); font-weight: 800; font-size: .86rem; color: var(--ink-2); box-shadow: var(--shadow); }
.hero-chip i { color: var(--gold-d); }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); margin: 1.1rem 0 1rem; line-height: 1.22; }
/* الكلمات المبرزة بين نجمتين: ذهبي وخط سفلي ذهبي يلتف مع السطر */
.hero h1 b, .sec-head h2 b { color: var(--gold-ink); font-weight: 900; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
                             text-decoration-thickness: .1em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.hero h1 .sub { display: block; font-size: .42em; font-weight: 800; color: var(--muted); margin-top: .7rem; line-height: 1.6; max-width: 34em; }
.hero .lead { font-size: clamp(1rem, 1.25vw, 1.12rem); color: var(--ink-2); max-width: 60ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0 1.3rem; }
.hero .cta-row .btn-wa::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--wa); opacity: 0; animation: ring 2.8s ease-out 2s infinite; }
.hero-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.hero-badges li { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--muted); padding: .25rem .7rem; border-radius: 999px; border: 1px dashed var(--line-2); }
.hero-badges i { color: var(--gold-d); }

.net-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 1rem 1rem .9rem; }
.net-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.net-head h2 { font-size: 1rem; font-weight: 900; display: flex; align-items: center; gap: .45rem; }
.net-head h2 .live { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 var(--red); animation: live 1.8s infinite; }
.net-head .sp { flex: 1; }
.net-date { font-weight: 800; font-size: .82rem; color: var(--gold-ink); padding: .1rem .55rem; border-radius: 8px; background: var(--gold-soft); white-space: nowrap; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--sunk); border: 1px solid var(--line); gap: 2px; }
.seg button { border: 0; background: transparent; padding: .3rem .7rem; border-radius: 8px; font-size: .8rem; font-weight: 800; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.seg button.bad[aria-pressed="true"] { color: var(--red); }
.seg button.good[aria-pressed="true"] { color: var(--green); }
.net-stage { position: relative; aspect-ratio: 680 / 516; margin-inline: auto; max-width: 620px; }
.net-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net-ring { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 7; }
.net-sector { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.net-sector-label { font: 800 13px "Cairo", sans-serif; fill: var(--muted); }
.net-link { fill: none; stroke-width: 2.4; stroke-linecap: round; transition: stroke .5s, opacity .8s, stroke-width .4s; }
.net-link.active { stroke: var(--green); opacity: .85; }
.net-link.warn { stroke: var(--gold); stroke-width: 3.6; animation: warn 1.2s ease-in-out infinite; }
.net-link.draft { stroke: var(--gold); stroke-dasharray: 5 6; opacity: .8; animation: march 1s linear infinite; }
.net-link.silent { stroke: var(--red); stroke-width: 3.2; stroke-dasharray: 2 5; }
.net-link.closed { stroke: var(--grey); stroke-dasharray: 2 6; opacity: .55; }
.net-link.lost { stroke: var(--red); opacity: 0; }
.net-pulse { fill: var(--gold-l); }
.net-spin { transform-origin: 340px 258px; animation: spin 40s linear infinite; }
.net-node { position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
            background: var(--surface); border: 2px solid var(--line-2); color: var(--gold-d); font-size: 1.05rem; cursor: default; transition: border-color .4s, opacity .8s, transform .3s var(--ease), box-shadow .4s; }
.net-node:hover, .net-node:focus-visible { transform: translate(-50%, -50%) scale(1.12); z-index: 3; }
.net-node.active { border-color: var(--green); }
.net-node.warn { border-color: var(--gold); box-shadow: 0 0 0 6px var(--gold-soft); }
.net-node.draft { border-style: dashed; border-color: var(--gold); }
.net-node.silent { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 6px var(--red-soft); }
.net-node.closed, .net-node.lost { opacity: .45; border-color: var(--grey); color: var(--grey); }
.net-node .tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); min-width: 190px; background: var(--ink); color: var(--bg);
                 border-radius: 10px; padding: .45rem .65rem; font-size: .76rem; line-height: 1.6; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: start; z-index: 5; }
.net-node:hover .tip, .net-node:focus-visible .tip { opacity: 1; transform: translateX(-50%); }
.net-node .tip b { color: var(--gold-l); display: block; }
.net-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26%; aspect-ratio: 1; }
.net-core svg { width: 100%; height: 100%; overflow: visible; }
.net-feed { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; min-height: 6.6rem; }
.net-feed li { display: flex; align-items: flex-start; gap: .5rem; padding: .38rem .6rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
               font-size: .8rem; font-weight: 700; line-height: 1.55; color: var(--ink-2); animation: feed-in .45s var(--ease) both; }
.net-feed li i { font-size: .95rem; margin-top: .05rem; }
.net-feed li.warn i { color: var(--gold-d); } .net-feed li.ok i { color: var(--green); } .net-feed li.bad i { color: var(--red); } .net-feed li.info i { color: var(--muted); }
.net-feed li .code { color: var(--gold-ink); font-weight: 800; }
.net-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .6rem; }
.net-counters div { text-align: center; padding: .4rem .2rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.net-counters b { display: block; font-size: 1.35rem; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.net-counters span { font-size: .72rem; font-weight: 700; color: var(--muted); line-height: 1.35; display: block; }
.net-counters .c-ok b { color: var(--green); } .net-counters .c-warn b { color: var(--gold-ink); } .net-counters .c-renew b { color: var(--ink); } .net-counters .c-bad b { color: var(--red); }
.net-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .55rem; font-size: .74rem; color: var(--muted); font-weight: 700; justify-content: center; }
.net-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.net-legend i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.net-legend .l-ok { background: var(--green); } .net-legend .l-warn { background: var(--gold); } .net-legend .l-draft { background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 7px); }
.net-legend .l-bad { background: var(--red); } .net-legend .l-off { background: var(--grey); }
.net-note { font-size: .74rem; color: var(--faint); text-align: center; margin-top: .35rem; }
.net-play { position: absolute; top: .9rem; inset-inline-end: 1rem; }

/* ---------------------------------------------------------------- 5) شريط الأرقام */
.stats-band { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .stats-band { background: #15130E; color: var(--ink); border-bottom: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat { padding: 1.5rem .8rem; text-align: center; border-inline-start: 1px solid rgba(201, 162, 39, .18); }
.stat:first-child { border-inline-start: 0; }
.stat b { display: block; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 900; color: var(--gold-l); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat span { font-size: .84rem; font-weight: 700; opacity: .82; line-height: 1.5; display: block; margin-top: .25rem; }

/* ---------------------------------------------------------------- 6) الأقسام ورأسها */
.sec { position: relative; padding: clamp(3.2rem, 7vw, 5.6rem) 0; isolation: isolate; }
.sec.alt { background: var(--bg-alt); }
.sec > .bg-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sec-head { max-width: 780px; margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); text-align: center; position: relative; }
.kicker { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: .82rem; color: var(--gold-ink); letter-spacing: .02em; }
.kicker::before, .kicker::after { content: ""; width: 28px; height: 1.5px; background: var(--gold); opacity: .8; }
.sec-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.65rem); margin: .55rem 0 .7rem; }
.sec-head p { color: var(--muted); font-size: 1.05rem; }
.lazy-ph { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: .7rem; color: var(--faint); font-weight: 700; }
.lazy-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--gold); animation: spin 1s linear infinite; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.note { color: var(--faint); font-size: .8rem; text-align: center; margin-top: .9rem; }

/* الإعلان */
.film-sec { background: var(--bg-alt); }

/* ---------------------------------------------------------------- 7) رحلة الاتفاقية */
.j-rail { display: flex; gap: 0; margin: 0 auto 1.6rem; max-width: 1060px; position: relative; overflow-x: auto; scrollbar-width: none; padding: .3rem .2rem 1rem; }
.j-rail::-webkit-scrollbar { display: none; }
.j-step { flex: 1 0 104px; display: flex; flex-direction: column; align-items: center; gap: .45rem; border: 0; background: none; cursor: pointer; padding: 0 .2rem; position: relative; color: var(--muted); }
.j-step::before { content: ""; position: absolute; top: 19px; inset-inline-start: calc(-50% + 22px); width: calc(100% - 44px); height: 2px; background: var(--line-2); }
.j-step:first-child::before { display: none; }
.j-step.done::before, .j-step.on::before { background: var(--gold); }
.j-step .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); background: var(--surface); font-size: 1rem; position: relative; z-index: 1; transition: all .35s var(--ease); }
.j-step.done .dot { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.j-step.on .dot { border-color: var(--gold); background: var(--gold); color: #15130F; transform: scale(1.12); box-shadow: 0 0 0 6px var(--gold-soft); }
.j-step .lbl { font-size: .8rem; font-weight: 800; text-align: center; line-height: 1.35; }
.j-step.on .lbl { color: var(--ink); }
.j-step.branch .dot { border-style: dashed; }
.j-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.4rem; max-width: 1100px; margin-inline: auto; align-items: start; }
.doc { position: relative; padding: 1.5rem 1.6rem 1.4rem; overflow: hidden; }
.doc .guil { position: absolute; inset-inline-end: -110px; top: -110px; width: 320px; height: 320px; color: var(--gold); opacity: .55; pointer-events: none; }
.doc-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; position: relative; }
.doc-top .code { font-weight: 800; color: var(--gold-ink); font-size: .9rem; }
.doc-top .sp { flex: 1; }
.doc h3 { font-size: 1.35rem; margin: .8rem 0 .2rem; position: relative; }
.doc .doc-sub { color: var(--muted); font-size: .9rem; font-weight: 700; position: relative; }
.ladder { display: flex; gap: .3rem; margin: 1rem 0; flex-wrap: wrap; position: relative; }
.ladder span { font-size: .74rem; font-weight: 800; padding: .2rem .55rem; border-radius: 7px; border: 1px solid var(--line); color: var(--faint); background: var(--surface-2); }
.ladder span.on { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); }
.ladder i { align-self: center; color: var(--line-2); font-size: .7rem; }
.parties { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; position: relative; }
.parties li { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 700; font-size: .9rem; }
.parties li i { color: var(--gold-d); font-size: 1.1rem; }
.parties li .role { margin-inline-start: auto; font-size: .74rem; color: var(--muted); }
.parties li.lead { border-color: var(--gold); }
.parties li.lead .role { color: var(--gold-ink); }
/* التذييل أعلى من محتواه ليستقر الختم فيه لا فوق صفوف الأطراف */
.doc-foot { display: flex; align-items: flex-end; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; position: relative; min-height: 104px; padding-inline-end: 130px; }
.doc-foot .meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .8rem; margin: 0; }
.doc-foot .meta div { display: grid; }
.doc-foot .meta dt { color: var(--faint); font-weight: 700; }
.doc-foot .meta dd { margin: 0; font-weight: 800; }
/* ختم الاعتماد: أخضر لأنه حالة (اعتُمدت) لا زينة */
.seal { position: absolute; inset-inline-end: 1.3rem; bottom: .7rem; width: 116px; height: 116px; pointer-events: none; opacity: 0; transform: scale(1.7) rotate(-26deg); color: var(--green); }
.seal.stamped { animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.seal.kept { opacity: .92; transform: scale(1) rotate(-12deg); animation: none; }
.seal svg { width: 100%; height: 100%; }
.seal text { font: 900 11px "Cairo", sans-serif; letter-spacing: .12em; }
.j-side { display: grid; gap: .9rem; }
.j-now { padding: 1.1rem 1.2rem; }
.j-now .who { display: flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--gold-ink); font-size: .86rem; }
.j-now h4 { font-size: 1.15rem; margin: .35rem 0 .3rem; }
.j-now p { color: var(--ink-2); font-size: .94rem; }
.j-log { padding: 1rem 1.2rem; }
.j-log h4, .j-notes h4 { font-size: .86rem; color: var(--muted); display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; }
.j-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-height: 196px; overflow: hidden; }
.j-log li { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; font-size: .82rem; font-weight: 700; padding: .3rem .5rem; border-radius: 9px; background: var(--surface-2); animation: feed-in .4s var(--ease) both; }
.j-log li i { color: var(--gold-d); }
.j-log li time { color: var(--faint); font-size: .74rem; }
.j-notes { padding: 1rem 1.2rem; }
.j-notes div { display: flex; flex-wrap: wrap; gap: .4rem; }
.j-ctrl { display: flex; justify-content: center; gap: .5rem; margin-top: 1.3rem; }

/* ---------------------------------------------------------------- 8) الوحدات */
.mods { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.mod-tabs { display: grid; gap: .45rem; position: sticky; top: 90px; }
.mod-tab { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: start; transition: all .25s var(--ease); }
.mod-tab .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--sunk); color: var(--gold-d); font-size: 1.15rem; flex-shrink: 0; transition: all .25s; }
.mod-tab b { display: block; font-size: .96rem; line-height: 1.35; }
.mod-tab small { display: block; color: var(--muted); font-size: .76rem; font-weight: 700; line-height: 1.45; }
.mod-tab:hover { border-color: var(--line-2); }
.mod-tab[aria-selected="true"] { border-color: var(--gold); box-shadow: var(--shadow); }
.mod-tab[aria-selected="true"] .ico { background: var(--gold); color: #15130F; }
.mod-panel { padding: 1.6rem 1.7rem; min-height: 100%; }
.mod-panel .phase { font-size: .78rem; }
.mod-panel h3 { font-size: 1.5rem; margin: .5rem 0 .4rem; }
.mod-panel > p { color: var(--ink-2); }
.mod-points { list-style: none; padding: 0; margin: 1.1rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; }
.mod-points li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; font-weight: 600; line-height: 1.65; }
.mod-points li i { color: var(--green); margin-top: .2rem; }
.mod-codes { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .9rem; border-top: 1px dashed var(--line-2); }
.mod-screens { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

/* ---------------------------------------------------------------- 9) لوحة الشراكات (نموذج الواجهة) */
.app { max-width: 1120px; margin-inline: auto; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); background: var(--surface); }
.app-chrome { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; background: var(--sunk); border-bottom: 1px solid var(--line); }
.app-chrome .dots { display: flex; gap: 6px; direction: ltr; }
.app-chrome .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.app-chrome .url { flex: 1; max-width: 420px; margin-inline: auto; text-align: center; font-size: .78rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .12rem .6rem; }
.app-chrome .demo { font-size: .72rem; }
.app-body { display: grid; grid-template-columns: 62px minmax(0, 1fr); min-height: 560px; }
.app-side { background: #15130F; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem 0; }
.app-side .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #8D877A; font-size: 1.05rem; }
.app-side .ico.on { background: rgba(201, 162, 39, .18); color: var(--gold-l); }
.app-side img { width: 34px; height: 34px; border-radius: 9px; margin-bottom: .4rem; }
.app-main { padding: 1.1rem 1.2rem 1.3rem; background: var(--bg); min-width: 0; }
.app-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.app-top h3 { font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.app-top h3 i { color: var(--gold-d); }
.app-top .sp { flex: 1; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .8rem; }
.kpi .k-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); font-size: .9rem; margin-bottom: .35rem; }
.kpi b { display: block; font-size: 1.5rem; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .76rem; color: var(--muted); font-weight: 700; }
.app-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .8rem; }
.w { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .85rem .95rem; min-width: 0; }
.w h4 { font-size: .86rem; display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; }
.w h4 i { color: var(--gold-d); }
.w h4 .cnt { margin-inline-start: auto; }
.w-6 { grid-column: span 6; } .w-4 { grid-column: span 4; } .w-3 { grid-column: span 3; } .w-8 { grid-column: span 8; } .w-12 { grid-column: span 12; } .w-5 { grid-column: span 5; } .w-7 { grid-column: span 7; }
.acts { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.acts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .42rem .55rem; border-radius: 10px; background: var(--surface-2); font-size: .82rem; font-weight: 700; }
.acts li .mono { color: var(--gold-ink); font-size: .74rem; }
.acts li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acts li small { color: var(--faint); font-weight: 700; font-size: .72rem; display: block; }
.dist { display: grid; gap: .5rem; }
.dist .row { display: grid; grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) 2.2rem; gap: .5rem; align-items: center; font-size: .8rem; font-weight: 700; }
.dist .row b { text-align: end; font-variant-numeric: tabular-nums; }
/* عمود ضيق: الاسم سطر مستقل فوق الشريط ورقمه */
.dist.stack { gap: .35rem; }
.dist.stack .row { grid-template-columns: minmax(0, 1fr) 2.2rem; gap: .1rem .5rem; }
.dist.stack .row > span { grid-column: 1 / -1; line-height: 1.4; }
.buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.bucket { border-radius: 12px; padding: .6rem .5rem; text-align: center; border: 1px solid var(--line); }
.bucket b { display: block; font-size: 1.55rem; font-weight: 900; line-height: 1.2; }
.bucket span { font-size: .74rem; font-weight: 700; color: var(--muted); }
.bucket.none { background: var(--red-soft); border-color: transparent; } .bucket.none b { color: var(--red); }
.bucket.partial { background: var(--gold-soft); border-color: transparent; } .bucket.partial b { color: var(--gold-ink); }
.bucket.full { background: var(--green-soft); border-color: transparent; } .bucket.full b { color: var(--green); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.feed li { display: flex; gap: .55rem; font-size: .8rem; font-weight: 700; align-items: flex-start; line-height: 1.55; }
.feed li i { color: var(--gold-d); margin-top: .1rem; }
.feed li time { margin-inline-start: auto; color: var(--faint); font-size: .72rem; white-space: nowrap; }
.months { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding-top: .3rem; }
.months div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; height: 100%; justify-content: flex-end; }
.months i { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: var(--gold); height: calc(var(--h) * 1%); transition: height .8s var(--ease); }
.months span { font-size: .66rem; color: var(--faint); font-weight: 700; }
.ring-stat { display: flex; align-items: center; gap: .9rem; }
.ring-stat svg { width: 92px; height: 92px; flex-shrink: 0; }
.ring-stat .trk { fill: none; stroke: var(--sunk); stroke-width: 10; }
.ring-stat .val { fill: none; stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s var(--ease); }
.ring-stat .num { font: 900 20px "Cairo", sans-serif; fill: var(--ink); }
.ring-stat p { font-size: .8rem; color: var(--muted); font-weight: 700; }
.strip { display: flex; flex-wrap: wrap; gap: .5rem; }
.strip .sys { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: .78rem; font-weight: 800; }
.tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tbl th { text-align: start; color: var(--faint); font-weight: 800; font-size: .72rem; padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
.tbl td { padding: .42rem .4rem; border-bottom: 1px solid var(--line); font-weight: 700; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.stars { color: var(--gold); letter-spacing: .05em; white-space: nowrap; }

/* ---------------------------------------------------------------- 10) التقييم الموزون */
.eval { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.4rem; max-width: 1080px; margin-inline: auto; align-items: stretch; }
.crit { display: grid; gap: .7rem; padding: 1.4rem; }
.crit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center; padding: .7rem .85rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.crit-row label { font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.crit-row label i { color: var(--gold-d); }
.crit-row .w8 { font-size: .74rem; }
.crit-row .rng { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: .7rem; align-items: center; }
.crit-row input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; }
.crit-row output { font-weight: 900; font-size: 1.05rem; text-align: center; font-variant-numeric: tabular-nums; }
.result { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.6rem 1.4rem; gap: .7rem; }
.dial { width: min(240px, 70vw); aspect-ratio: 1; position: relative; }
.dial svg { width: 100%; height: 100%; }
.dial .trk { fill: none; stroke: var(--sunk); stroke-width: 14; }
.dial .val { fill: none; stroke-width: 14; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .5s var(--ease), stroke .3s; }
.dial .tick { stroke: var(--line-2); stroke-width: 2; }
.dial .center { position: absolute; inset: 0; display: grid; place-content: center; }
.dial .center b { font-size: 3rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.dial .center span { font-size: .8rem; color: var(--muted); font-weight: 700; }
.formula { font-size: .82rem; color: var(--muted); font-weight: 700; background: var(--sunk); padding: .5rem .8rem; border-radius: 10px; line-height: 1.7; }
.result .why { font-size: .86rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- 11) بوابة الشريك */
.portal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.3rem; max-width: 1140px; margin-inline: auto; }
.pv { padding: 1.2rem; }
.pv-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pv-head .who { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; }
.pv-head .who .av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }
.pv-head .sp { flex: 1; }
.pv .tbl td { transition: filter .45s, opacity .45s; }
.pv tr.hidden-row td { filter: blur(5px); opacity: .45; user-select: none; }
.pv tr.hidden-row td:first-child { filter: none; opacity: 1; }
.lockcell { display: inline-flex; align-items: center; gap: .35rem; color: var(--red); font-weight: 800; font-size: .74rem; }
.scope-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem; padding: .7rem .85rem; border-radius: 12px; background: var(--sunk); font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.scope-note i { color: var(--gold-d); font-size: 1.1rem; }
.scope-chain { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; font-size: .76rem; font-weight: 800; color: var(--muted); }
.scope-chain span { padding: .15rem .5rem; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface); }
.thread { display: grid; gap: .55rem; }
.msg { max-width: 88%; padding: .6rem .8rem; border-radius: 14px; font-size: .86rem; font-weight: 600; line-height: 1.65; border: 1px solid var(--line); background: var(--surface-2); animation: feed-in .5s var(--ease) both; }
.msg .meta { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--faint); font-weight: 800; margin-bottom: .2rem; }
.msg.out { justify-self: start; border-start-start-radius: 4px; }
.msg.in { justify-self: end; border-start-end-radius: 4px; background: var(--gold-soft); border-color: transparent; }
.msg .att { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .76rem; font-weight: 800; color: var(--gold-ink); }

/* ---------------------------------------------------------------- 12) الخدمات الاستباقية */
.pro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.3rem; align-items: start; }
.radar-card { padding: 1.2rem; display: grid; gap: .8rem; justify-items: center; }
.radar { width: min(380px, 100%); aspect-ratio: 1; position: relative; }
.radar svg { width: 100%; height: 100%; overflow: visible; }
.radar .rr { fill: none; stroke: var(--line-2); stroke-width: 1; }
.radar .ax { stroke: var(--line); stroke-width: 1; }
.radar .sweep line { stroke: var(--gold); stroke-linecap: round; }
.radar .sweep { transform-origin: 200px 200px; animation: spin 6s linear infinite; }
.radar .blip { transform-box: fill-box; transform-origin: center; }
.radar .blip circle.b { fill: var(--gold); }
.radar .blip circle.halo { fill: none; stroke: var(--gold); stroke-width: 1.5; animation: halo 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.radar .blip.bad circle.b { fill: var(--red); } .radar .blip.bad circle.halo { stroke: var(--red); }
.radar .blip text { font: 800 11px "Cairo", sans-serif; fill: var(--ink-2); }
.radar .blip circle.b { transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease); }
.radar .blip.on circle.b { transform: scale(1.8); stroke: var(--ink); stroke-width: 1.5; }
.radar .blip.on text { fill: var(--ink); font-weight: 900; }
.radar .core { fill: var(--surface); stroke: var(--gold); stroke-width: 2; }
.rules { display: grid; gap: .6rem; }
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .85rem; padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); transition: border-color .25s, transform .25s var(--ease); }
.rule:hover, .rule.on { border-color: var(--gold); transform: translateX(0) translateY(-2px); }
.rule .ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); font-size: 1.2rem; }
.rule b { font-size: 1rem; }
.rule p { font-size: .86rem; color: var(--muted); font-weight: 600; line-height: 1.65; }
.rule .th { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; grid-column: 2; }
.pro-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; margin-top: 1.3rem; }
.sugg { padding: 1.2rem; }
.sugg h3, .gaps h3 { font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.sugg h3 i, .gaps h3 i { color: var(--gold-d); }
.sugg > p, .gaps > p { color: var(--muted); font-size: .86rem; font-weight: 600; margin-bottom: .8rem; }
.cand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; padding: .6rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); margin-bottom: .45rem; }
.cand b { font-size: .9rem; }
.cand .score { font-weight: 900; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.cand .bar { grid-column: 1 / -1; height: 6px; }
.cand .why { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem; }
.cand .why .chip { font-size: .7rem; padding: .05rem .5rem; }
.cand.excl { opacity: .7; }
.cand.excl b { text-decoration: line-through; text-decoration-color: var(--red); }
.gaps { padding: 1.2rem; overflow-x: auto; }
/* خريطة الفجوات: كثافة الذهبي = عدد الساري (معنى رقمي، لا زينة)، والصفر فجوة بإطار أحمر متقطع */
.gap-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.gap-cell { border-radius: 12px; border: 1px solid var(--line); padding: .55rem .35rem; text-align: center; display: grid; gap: .1rem; align-content: start;
            background: color-mix(in srgb, var(--gold) calc(var(--v) * 1%), var(--surface)); }
.gap-cell b { font-size: 1.3rem; font-weight: 900; line-height: 1.2; }
.gap-cell span { font-size: .72rem; font-weight: 800; line-height: 1.35; }
.gap-cell small { font-size: .66rem; color: var(--muted); font-weight: 700; }
.gap-cell.zero { background: var(--surface); border: 1.5px dashed var(--red); }
.gap-cell.zero b { color: var(--red); font-size: 1rem; }
.gap-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--muted); font-weight: 700; margin-top: .6rem; }
.gap-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.gap-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- 13) المنظومة والتكامل */
.eco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.eco-stage { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto; }
.eco-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco-path { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 6; }
.eco-path.on { stroke: var(--gold); stroke-dasharray: none; }
.eco-pkt { fill: var(--gold); }
.eco-pkt-label { font: 800 12px "Cairo", sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
/* العقدة تتمركز بقرصها على نهاية المسار (لا بكتلتها مع النص تحتها) */
.eco-node { position: absolute; transform: translate(-50%, -43px); display: grid; justify-items: center; gap: .3rem; text-align: center; cursor: pointer; border: 0; background: none; padding: 0; color: var(--ink); }
.eco-node.core { transform: translate(-50%, -64px); cursor: default; }
.eco-node .disc { width: 86px; height: 86px; border-radius: 24px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); box-shadow: var(--shadow); font-size: 1.6rem; color: var(--gold-d); transition: all .3s var(--ease); }
.eco-node b { font-size: .95rem; }
.eco-node .eco-logo { margin-top: .15rem; }
.eco-node .eco-logo img { height: 20px; }
.eco-node small { font-size: .72rem; color: var(--muted); font-weight: 700; max-width: 130px; line-height: 1.4; }
.eco-node.core .disc { width: 128px; height: 128px; border-radius: 34px; background: var(--ink); border-color: var(--gold); color: var(--gold-l); }
:root[data-theme="dark"] .eco-node.core .disc { background: #15130E; }
.eco-node.core .disc .co-mark { height: 34px; font-size: 1.3rem; }
.eco-node[aria-pressed="true"] .disc, .eco-node:hover .disc { border-color: var(--gold); transform: translateY(-3px); }
.eco-cards { display: grid; gap: .7rem; }
.eco-card { padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); transition: border-color .3s, box-shadow .3s; }
.eco-card.on { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft), var(--shadow); }
.eco-card .top { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.eco-card .top i.main { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); font-size: 1.1rem; }
.eco-card .top b { font-size: 1.02rem; }
.eco-card .top .sp { flex: 1; }
.eco-card p { color: var(--muted); font-size: .88rem; font-weight: 600; margin-top: .45rem; }
.eco-card .flow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; font-size: .78rem; font-weight: 800; }
.eco-card .flow span { padding: .12rem .5rem; border-radius: 7px; background: var(--sunk); }
.eco-card .flow i { color: var(--gold-d); }
.eco-foot { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.4rem; }

/* ---------------------------------------------------------------- 14) المنصة الموروثة */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tile { position: relative; padding: 1.2rem 1.25rem; transition: transform .25s var(--ease), border-color .25s; }
.tile > .tts { position: absolute; top: 1rem; inset-inline-end: 1rem; }
.tile:hover { transform: translateY(-3px); border-color: var(--line-2); }
.tile .ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--ink); color: var(--gold-l); font-size: 1.25rem; margin-bottom: .75rem; }
:root[data-theme="dark"] .tile .ico { background: var(--gold-soft); }
.tile h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.tile p { color: var(--muted); font-size: .9rem; font-weight: 600; }

/* ---------------------------------------------------------------- 15) المقارنة */
.cmp-wrap { max-width: 1060px; margin-inline: auto; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td { padding: .95rem 1.1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); font-size: .93rem; line-height: 1.65; }
.cmp thead th { background: var(--sunk); font-size: .86rem; color: var(--muted); }
.cmp thead th.us { color: var(--gold-ink); }
.cmp tbody th { font-weight: 800; width: 22%; }
.cmp td.us { font-weight: 700; background: color-mix(in srgb, var(--gold) 6%, transparent); }
.cmp td.us i { color: var(--green); margin-inline-end: .35rem; }
.cmp td.old { color: var(--muted); }
.cmp td.old i { color: var(--red); margin-inline-end: .35rem; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- 16) المراحل */
.road { position: relative; max-width: 980px; margin-inline: auto; display: grid; gap: 1rem; }
.road::before { content: ""; position: absolute; top: 12px; bottom: 12px; inset-inline-start: 23px; width: 2px; background: var(--line-2); }
.ms { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ms .dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); font-weight: 900; font-size: 1.05rem; z-index: 1; }
.ms.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.ms.soon .dot { border-style: dashed; color: var(--muted); }
.ms .body { padding: 1rem 1.2rem; }
.ms .body .top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ms .body h3 { font-size: 1.08rem; }
.ms .body p { color: var(--muted); font-size: .9rem; font-weight: 600; margin-top: .35rem; }
.ms .body ul { list-style: none; padding: 0; margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------------------------------------------------------------- 17) الأسئلة الشائعة */
.faq { max-width: 880px; margin-inline: auto; display: grid; gap: .6rem; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: border-color .25s; }
.faq details[open] { border-color: var(--gold); }
.faq summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; font-weight: 800; display: flex; align-items: center; gap: .7rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); flex-shrink: 0; font-size: .95rem; }
.faq summary .chev { margin-inline-start: auto; transition: transform .3s var(--ease); color: var(--muted); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .ans { padding: 0 1.2rem 1.1rem 1.2rem; padding-inline-start: 3.15rem; color: var(--ink-2); position: relative; }

/* ---------------------------------------------------------------- 18) التواصل */
.contact { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .contact { background: #15130E; color: var(--ink); }
.contact .sec-head p, .contact .kicker { color: color-mix(in srgb, currentColor 72%, transparent); }
.contact .kicker { color: var(--gold-l); }
.contact-rosette { position: absolute; width: 820px; aspect-ratio: 1; inset-inline-end: -300px; bottom: -340px; color: var(--gold); opacity: .55; }
.contact-rosette g { transform-origin: 450px 450px; animation: spin 300s linear infinite; }
.contact-rosette g.rev { animation-direction: reverse; }
.contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; max-width: 1060px; margin-inline: auto; align-items: start; }
.intents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.intent { display: flex; align-items: flex-start; gap: .65rem; text-align: start; padding: .85rem .95rem; border-radius: 14px; border: 1px solid rgba(201, 162, 39, .28); background: rgba(255, 255, 255, .04); color: inherit; cursor: pointer; transition: all .2s; }
.intent i { color: var(--gold-l); font-size: 1.2rem; margin-top: .1rem; }
.intent b { display: block; font-size: .95rem; }
.intent small { display: block; opacity: .72; font-size: .78rem; font-weight: 600; line-height: 1.5; }
.intent:hover { border-color: var(--gold); }
.intent[aria-pressed="true"] { border-color: var(--wa); box-shadow: 0 0 0 3px rgba(37, 211, 102, .2); background: rgba(37, 211, 102, .06); }
.wa-card { border-radius: 20px; border: 1px solid rgba(201, 162, 39, .3); background: rgba(255, 255, 255, .04); padding: 1.3rem; display: grid; gap: .9rem; }
.wa-card .lbl { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .86rem; opacity: .85; }
.wa-card .lbl i { color: var(--wa); font-size: 1.2rem; }
.wa-card .preview { white-space: pre-wrap; background: rgba(255, 255, 255, .06); border-radius: 14px; border-start-start-radius: 4px; padding: .85rem 1rem; font-size: .9rem; line-height: 1.75; min-height: 6rem; }
.wa-card .row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.wa-card .num { font-weight: 900; font-size: 1.15rem; letter-spacing: .03em; }
.contact .btn-ghost { color: inherit; border-color: rgba(201, 162, 39, .4); }

/* ---------------------------------------------------------------- 19) التذييل والزر العائم */
.footer { background: #0B0A08; color: #CFC9BA; padding: 2.2rem 0 2.4rem; font-size: .88rem; }
.footer-in { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.footer-in > div { display: grid; gap: .45rem; }
.footer a { color: var(--gold-l); text-decoration: none; font-weight: 700; }
.footer a:hover { text-decoration: underline; }
.footer .fam { display: flex; flex-wrap: wrap; gap: .35rem; }
.footer .fam span { padding: .1rem .5rem; border-radius: 7px; border: 1px solid #3A342A; font-size: .74rem; font-weight: 800; color: #B3AEA2; }
.footer .fam span.me { border-color: var(--gold); color: var(--gold-l); }
.wa-float { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
            background: var(--wa); color: #fff; font-size: 1.8rem; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); transition: transform .2s var(--ease), background-color .2s; }
.wa-float:hover { transform: scale(1.07); background: var(--wa-d); }
.wa-float .tip { position: absolute; inset-inline-end: 68px; white-space: nowrap; background: var(--ink); color: var(--bg); font-size: .85rem; font-weight: 700;
                 padding: .35rem .7rem; border-radius: 9px; opacity: 0; transform: translateX(6px); transition: all .2s; pointer-events: none; }
[dir="rtl"] .wa-float .tip { transform: translateX(-6px); }
.wa-float:hover .tip, .wa-float:focus-visible .tip { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 20) القارئ الصوتي */
.tts { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--gold-ink); display: inline-grid; place-items: center;
       cursor: pointer; font-size: .95rem; flex-shrink: 0; transition: all .2s; vertical-align: middle; }
.tts:hover { border-color: var(--gold); }
.tts.playing { background: var(--gold); color: #15130F; border-color: var(--gold); animation: pulse-tts 1.4s infinite; }
.kicker .tts { margin-inline-start: .3rem; }
.contact .tts { background: transparent; color: var(--gold-l); border-color: rgba(201, 162, 39, .4); }
[data-tts].reading, section.reading .sec-head { box-shadow: 0 0 0 3px var(--gold-soft); border-radius: 14px; }
.faq .ans .tts { position: absolute; inset-inline-start: 1.05rem; top: 0; width: 28px; height: 28px; font-size: .85rem; }

/* ---------------------------------------------------------------- 21) الحركة */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes warn { 50% { stroke-opacity: .35; } }
@keyframes march { to { stroke-dashoffset: -22; } }
@keyframes feed-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-26deg); } 60% { opacity: 1; transform: scale(.94) rotate(-10deg); } 100% { opacity: .92; transform: scale(1) rotate(-12deg); } }
@keyframes halo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes pulse-tts { 50% { box-shadow: 0 0 0 6px var(--gold-soft); } }
/* الحركة الزخرفية للقسم الظاهر وحده (watchFx يضع fx-live) */
.hero:not(.fx-live) *, .sec:not(.fx-live) .radar *, .sec:not(.fx-live) .rosette * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- 22) الشاشات الصغيرة */
/* الهيدر المضغوط: يضعه fitNav حين لا تتسع روابط الأقسام في سطر واحد (عرضها يختلف باللغة) - فتصير قائمة منسدلة بزر */
.topbar.compact .nav { position: absolute; top: 100%; inset-inline: 0; flex-direction: column; flex-wrap: nowrap; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line);
                       box-shadow: var(--shadow); padding: .5rem 16px 1rem; display: none; max-height: calc(100vh - 68px); overflow-y: auto; }
.topbar.compact .nav.open { display: flex; }
.topbar.compact .nav a { padding: .65rem .8rem; font-size: 1rem; }
.topbar.compact .nav a.active::after { inset-inline: .8rem auto; width: 28px; }
.topbar.compact .burger { display: inline-grid; }
.topbar.compact .brand { margin-inline-end: auto; }
@media (max-width: 980px) {
  .hero-in, .j-body, .mods, .eval, .portal, .pro, .eco, .contact-in { grid-template-columns: minmax(0, 1fr); }
  .mod-tabs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-inline-start: 0; }
  .stat { border-top: 1px solid rgba(201, 162, 39, .14); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-3, .w-4, .w-5, .w-6, .w-7, .w-8 { grid-column: span 12; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pro-more { grid-template-columns: minmax(0, 1fr); }
  .hero .rosette { inset-inline-start: auto; inset-inline-end: -300px; opacity: .55; }
}
@media (max-width: 640px) {
  .brand-tag { display: none; }
  .logo-img img { height: 24px; }
  .co-mark { height: 22px; font-size: .8rem; padding: 0 .45rem; }
  .topbar-in { gap: .5rem; }
  .tools .btn-wa span { display: none; }
  .tools .btn-wa { padding: .45rem .7rem; }
  .tools { gap: .3rem; }
  .icon-btn { width: 36px; height: 36px; }
  .mod-tabs { grid-template-columns: minmax(0, 1fr); }
  .mod-points { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-inline-start: 0; }
  .stat:nth-child(4) { border-inline-start: 1px solid rgba(201, 162, 39, .18); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
  .tiles, .intents { grid-template-columns: minmax(0, 1fr); }
  .gap-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-counters { grid-template-columns: repeat(2, 1fr); }
  .net-node { width: 38px; height: 38px; font-size: .9rem; }
  .net-head .seg { order: 3; width: 100%; } .net-head .seg button { flex: 1; }
  .doc-foot .meta { grid-template-columns: repeat(2, auto); }
  .seal { width: 96px; height: 96px; }
  .doc-foot { padding-inline-end: 104px; min-height: 92px; }
  .faq .ans { padding-inline-start: 1.2rem; padding-top: 2.2rem; }
  .faq .ans .tts { top: 0; }
  .cta-row .btn { flex: 1 1 auto; }
}

/* أضيق الهواتف: زر المؤثرات الصوتية (كمالي) يُخفى ليتسع الهيدر للشعار واللغة والمظهر وواتساب والقائمة */
@media (max-width: 420px) {
  #sfxBtn { display: none; }
  .icon-btn { width: 34px; height: 34px; }
  .tools { gap: .25rem; }
}

/* ---------------------------------------------------------------- 23) تقليل الحركة والطباعة */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .seal.stamped { opacity: .92; transform: scale(1) rotate(-12deg); }
}
@media print {
  .topbar, .wa-float, .cta-row, .intents, .wa-card .row, .tts, .net-play, .j-ctrl, .film-sec { display: none !important; }
  .reveal { opacity: 1; transform: none; }
  .sec { padding: 1.5rem 0; break-inside: avoid; }
}