/* ═══════════════════════════════════════════════════════════════════════
   تطبيقي — أسلوب الموقع

   يُحرَّر بيدٍ ولا يمرّ بالمولّد (بخلاف صفحات HTML، فهي من `tools/`).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#ffffff; --surface:#f2f5f7; --ink:#0f1b24; --muted:#5b6b78;
  --line:#dde5ea; --brand:#14536b; --brand-dark:#0b2f3f; --accent:#c08a2e;
  /* الذهبيُّ نفسه لكن أغمق: للنصّ الصغير على الخلفيّة الفاتحة، إذ
     ‎--accent‎ عليها ٣٫٠٤:١ ولا يبلغ ٤٫٥ التي يقتضيها النصّ الصغير. */
  --accent-text:#8f6317;
  --radius:14px; --wrap:1080px; --head-h:67px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.85}
h1,h2,h3{font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;line-height:1.35;margin:0 0 .6rem}
h1{font-size:clamp(2rem,4.6vw,3.05rem);font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:600}
h3{font-size:1.1rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--brand);text-underline-offset:3px}
ul{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ─── الترويسة الصغيرة ─────────────────────────────────────────────────
   العربيّةُ لا تُباعَد حروفُها ولا تُرفع إلى الكبير — وكلاهما من طباعة
   اللاتينيّة. والموقعُ يقول في صفحته إنّه لا يترجم تصاميم إنجليزيّة، فلا
   يليق أن تكذّبه ترويسته. فالخطُّ عربيٌّ ووزنُه ثقيل، وأمامه شَرطة.
   والمعاملةُ اللاتينيّةُ تعود في الصفحات الإنجليزيّة وحدها. */
.eyebrow{display:flex;align-items:center;gap:.6rem;
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  font-size:.8rem;font-weight:600;color:var(--accent-text);margin:0 0 .9rem}
.eyebrow::before{content:"";inline-size:22px;block-size:2px;
  background:var(--accent);flex:none;border-radius:2px}
html[lang="en"] .eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase}

/* ─── الترويسة ───────────────────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:0;z-index:20}
.head-row{display:flex;align-items:center;gap:18px;min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:10px;font-family:"Readex Pro",sans-serif;
  font-weight:600;font-size:1.1rem;color:var(--ink);text-decoration:none;flex:none}
.brand svg{width:26px;height:26px;flex:none}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:18px;min-width:0}
.nav ul{display:flex;align-items:center;gap:20px;list-style:none;padding:0;
  margin:0;overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav a{color:var(--muted);text-decoration:none;font-size:.95rem;white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--brand)}
.nav a.on{font-weight:600}
.lang{border:1px solid var(--line);border-radius:999px;padding:2px 13px;flex:none;
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink);
  text-decoration:none}
.lang:hover{border-color:var(--brand);color:var(--brand)}

/* ─── شريط التطبيقات ─────────────────────────────────────────────────── */
.subnav{background:var(--surface);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;padding:11px 14px;font-size:.9rem;color:var(--muted);
  text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--brand)}
.subnav a.on{color:var(--brand);font-weight:600;border-bottom-color:var(--accent)}

/* ─── مسار الصفحة ────────────────────────────────────────────────────── */
.crumbs{border-bottom:1px solid var(--line)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  list-style:none;margin:0;padding:10px 0;font-size:.82rem;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"/";color:var(--line);font-size:.9em}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ─── الصدر ──────────────────────────────────────────────────────────── */
.hero{background:var(--brand-dark);color:#eaf2f6;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding:76px 22px;max-width:860px;
  margin-inline:auto;margin-inline-start:auto}
.hero .eyebrow{color:#d9a445}
.hero .eyebrow::before{background:var(--accent)}
.hero h1{color:#fff}
.hero-lede{color:#b7ccd8;font-size:1.05rem;max-width:56ch}
.hero-art{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:.5}
/* شبكةُ الحروف: سلسلةٌ متّصلةٌ من أعلاها إلى أسفلها — شرطُ فوز الأخضر */
.lattice text{fill:#1b3f52}
.lattice .ll-on{fill:var(--accent);opacity:.9}

.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;padding:11px 22px;border-radius:999px;text-decoration:none;
  font-size:.95rem;font-weight:500;border:1px solid transparent}
.btn-main{background:var(--accent);color:#17222b}
.btn-main:hover{background:#d29a3c}
.btn-ghost{border-color:#3c5c6e;color:#dbe8ef}
.btn-ghost:hover{border-color:#7196a8}

.herometa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0}
.herometa .tag{margin:0;background:rgba(255,255,255,.13);color:#dbe8ef}
.herometa .tag-rc{background:rgba(126,214,160,.18);color:#a9e3c0}
.herometa .tag-early{background:rgba(224,181,92,.18);color:#e6c98a}
.herometa .vers{font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:#8fb0c1}

/* ─── الأقسام ────────────────────────────────────────────────────────── */
.section{padding:64px 0;border-bottom:1px solid var(--line)}
.section.alt{background:var(--surface)}
.lede{color:var(--muted);max-width:62ch}
.grid{display:grid;gap:18px;margin-top:30px}
.g2{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}

/* بطاقاتُ «لماذا نحن» — لا إطارَ لها، فهي دعاوى لا منتجات */
.tile{border-inline-start:2px solid var(--line);padding-inline-start:18px}
.tile h3{margin-bottom:.35rem}
.tile p{color:var(--muted);margin-bottom:0;font-size:.95rem}

/* ─── عرض المنتجات ───────────────────────────────────────────────────── */
.showcase{margin-top:30px}
/* عمودان لا `auto-fit`: الباقي بعد المتصدّرة أربعٌ، و`auto-fit` يسعُ ثلاثاً
   عند 1080px فيُخرج صفَّ ثلاثةٍ وصفَّ واحدة. والعمودان يعطيان ٢×٢ مستوية. */
.showcase .grid{margin-top:18px;grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.card h3{margin-bottom:.4rem;font-size:1.15rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--brand)}
.card-body{color:var(--muted);margin-bottom:0;font-size:.95rem}
.card-go{margin:14px 0 0}
.more{font-size:.92rem;text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:2px}
.cardver{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted)}
.cardmeta{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted);
  margin:14px 0 0;line-height:1.7;padding-top:12px;border-top:1px solid var(--line)}

/* الأنضجُ يتصدّر — والصدارةُ تقول ما لا تقوله بطاقةٌ مساويةٌ لأخواتها */
.card-featured{background:var(--brand-dark);border-color:var(--brand-dark);
  padding:34px}
.card-featured h3{font-size:clamp(1.5rem,3vw,2rem)}
.card-featured h3 a{color:#fff}
.card-featured h3 a:hover{color:var(--accent)}
.card-featured .card-body{color:#c5d8e2;font-size:1.02rem;max-width:62ch}
.card-featured .cardmeta{color:#8fb0c1;border-top-color:#25495c}
.card-featured .cardver{color:#8fb0c1}
.card-featured .tag{background:rgba(126,214,160,.18);color:#a9e3c0}
.card-featured .more{color:#e6c98a;border-bottom-color:var(--accent)}

.tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.67rem;
  color:var(--brand);background:#e4eef3;border-radius:999px;padding:3px 11px}
html[lang="en"] .tag{letter-spacing:.1em;text-transform:uppercase}
.tag-rc{color:#1d5c33;background:#dcefe2}
.tag-early{color:#6b4a12;background:#f3e9d5}
.note{margin-top:30px;font-size:.88rem;color:var(--muted);max-width:70ch;
  border-top:1px solid var(--line);padding-top:16px}

/* ─── الوثائق ────────────────────────────────────────────────────────── */
.doc{max-width:74ch}
.doc h2{margin-top:2.3rem;scroll-margin-top:calc(var(--head-h) + 22px)}
.doc h3{margin-top:1.6rem;color:var(--brand)}
.doc ul{padding-inline-start:1.15rem;color:var(--muted)}
.doc li{margin-bottom:.5rem}
.updated{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--muted)}
.callout{border-inline-start:3px solid var(--accent);background:var(--surface);
  padding:16px 20px;border-radius:8px;margin:22px 0}
.callout p{margin:0;font-size:.95rem}

/* فهرسُ الوثيقة — يُبنى من عناوينها هي */
.toc{border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin:26px 0 34px;background:var(--surface)}
.toc-h{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:.8rem;
  font-weight:600;color:var(--muted);margin:0 0 .7rem}
html[lang="en"] .toc-h{font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase}
.toc ul{list-style:none;padding:0;margin:0;columns:2;column-gap:28px}
.toc li{margin-bottom:.38rem;break-inside:avoid}
.toc a{font-size:.9rem;color:var(--brand);text-decoration:none}
.toc a:hover{text-decoration:underline}

/* قائمةُ الخصائص — بلا ترقيم: ليست تسلسلاً، والترقيمُ يزعم ترتيباً لا وجود له */
.flist{list-style:none;padding:0;margin:26px 0 0}
.flist li{border-top:1px solid var(--line);padding:15px 0}
.flist b{display:block;font-weight:600;margin-bottom:.15rem}
.flist .d{color:var(--muted);font-size:.95rem}

/* جدولُ ما يطلبه كلّ تطبيق — يمرّر أفقيّاً في الشاشات الضيّقة ولا يمدّ الصفحة */
.tablewrap{overflow-x:auto;margin:26px 0;border:1px solid var(--line);
  border-radius:var(--radius)}
.matrix{border-collapse:collapse;width:100%;min-width:640px;font-size:.88rem}
.matrix caption{caption-side:top;text-align:start;padding:14px 16px 12px;
  color:var(--muted);font-size:.84rem}
.matrix th,.matrix td{padding:11px 16px;text-align:start;
  border-top:1px solid var(--line);vertical-align:top}
.matrix thead th{background:var(--surface);color:var(--ink);font-weight:600;
  font-size:.8rem;border-top:0}
.matrix tbody th{font-weight:600;white-space:nowrap}
.matrix tbody th a{text-decoration:none;border-bottom:1px solid var(--accent)}
.matrix td{color:var(--muted)}
.matrix .no{color:#1d5c33}
.matrix .yes{color:#8a4d12}

/* ─── رابط التخطّي ───────────────────────────────────────────────────────
   يُرفع فوق الشاشة لا يُزاح جانباً — فالإزاحة الجانبيّة تمدّ الصفحة في RTL. */
.skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:40;
  background:var(--brand);color:#fff;padding:10px 18px;border-radius:0 0 8px 8px;
  text-decoration:none;font-size:.9rem}
.skip:focus{top:0}

/* ─── التذييل ────────────────────────────────────────────────────────────
   خريطةُ موقعٍ لا سطرُ حقوق: ثلاثٌ وعشرون صفحةً تُبلَغ من أيّ صفحة. */
.site-foot{background:var(--surface);border-top:1px solid var(--line);
  padding:48px 0 34px;color:var(--muted);font-size:.9rem}
.sitemap{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sitemap-h{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:.8rem;
  font-weight:600;color:var(--ink);margin:0 0 .8rem}
html[lang="en"] .sitemap-h{font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase}
.sitemap ul{list-style:none;padding:0;margin:0}
.sitemap li{margin-bottom:.45rem}
.sitemap a{color:var(--muted);text-decoration:none;font-size:.9rem}
.sitemap a:hover{color:var(--brand);text-decoration:underline}
.foot-note{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:.85rem}
.foot-rights{margin:.4rem 0 0;font-size:.85rem}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap{animation:rise .55s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

@media (max-width:760px){
  /* الترويسةُ سطران: العلامةُ ثمّ شريطُ الأقسام — لا التفافٌ متعرّج.
     و`--head-h` يُرفع على `:root` أسفلَ الكتلة لا هنا: المتغيّرُ المعرَّف
     على `.head-row` لا يبلغ `.doc h2`، وعليه يُحسب `scroll-margin`. */
  .head-row{min-height:0;padding:12px 0;flex-wrap:wrap;gap:10px}
  .nav{width:100%;margin-inline-start:0;gap:12px}
  .nav ul{gap:16px;flex:1}
  .section{padding:48px 0}
  .hero .wrap{padding:56px 22px}
  .card-featured{padding:26px}
  .showcase .grid{grid-template-columns:1fr}
  .toc ul{columns:1}
  :root{--head-h:104px}
}

/* ================================================================
   تطبيقي — الترقية البصرية (visual upgrade)
   يُلحَق هذا الملف بآخر tools/style.css ثم يُبنى الموقع كالمعتاد.
   القواعد: لا JavaScript، لا أنماط سطرية (inline styles) لأن CSP يمنعها،
   العربية لا تُباعَد ولا تُرفع، وكل حركة تتوقف مع prefers-reduced-motion.
   ================================================================ */

/* ---------- 1. الرموز (design tokens) — بدّل القيم لا الأسماء ---------- */
:root {
  --paper: #F4F6FA;        /* خلفية الصفحة: أبيض بميل لازوردي */
  --card: #FFFFFF;
  --ink: #131A2E;          /* النص الأساسي */
  --ink-2: #4E5873;        /* النص الثانوي */
  --line: #D8DEEA;         /* الحدود الرفيعة */
  --lapis: #1C2F6E;        /* لون العلامة */
  --lapis-deep: #0E1B45;   /* خلفية الصدر (hero) */
  --gold: #C9A24A;         /* الذهب: السلسلة والشارات */
  --gold-2: #E8CC78;       /* توهّج الذهب */
  --radius-l: 24px;
  --radius-m: 16px;
  --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-draw: 2.6s;        /* زمن رسم السلسلة الذهبية */
  --measure: 74ch;         /* عرض عمود القراءة كما في .doc */
}
html[lang="en"] {
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

/* ---------- 2. الخط والأساس ---------- */
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}
html[lang="en"] body { line-height: 1.6; }

/* ---------- 3. الأزرار ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.45rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.btn--gold { background: var(--gold); color: var(--lapis-deep); }
.btn--gold:hover { background: var(--gold-2); }
.btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn--ghost:hover { border-color: var(--gold-2); color: var(--gold-2); }
.btn:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }

/* ---------- 4. الصدر الرئيسي (hero) ---------- */
.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--lapis-deep);
  color: #fff;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .58;
}
/* الفيديو فوق الصورة: إن لم يطابق أي مصدر (جوال أو حركة مقلّلة) بقيت الصورة وحدها */
.hero-media video { z-index: 1; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 82% 20%, rgba(14, 27, 69, 0) 0%, rgba(14, 27, 69, .55) 100%),
    linear-gradient(to left, rgba(14, 27, 69, .94) 0%, rgba(14, 27, 69, .62) 48%, rgba(14, 27, 69, .30) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 4.75rem) 1.5rem;
}
.hero-copy > * { margin: 0; }
.hero-copy h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.35;
  max-width: 20ch;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.hero-copy p {
  font-size: 1.125rem;
  max-width: 46ch;
  color: rgba(255, 255, 255, .84);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* دخول النص: لحظة واحدة منسّقة مع رسم السلسلة */
.hero-copy > * {
  opacity: 0;
  animation: rise .8s var(--ease-out) forwards;
}
.hero-copy > :nth-child(1) { animation-delay: .10s; }
.hero-copy > :nth-child(2) { animation-delay: .25s; }
.hero-copy > :nth-child(3) { animation-delay: .40s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 5. شبكة الحروف والسلسلة الذهبية (SVG) ---------- */
.hero-lattice { display: grid; place-items: center; }
.lat-svg { width: min(100%, 284px); height: auto; overflow: visible; }
.lat-svg--wide { display: none; width: min(100%, 640px); }

.lat-chain {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="1" في المسار يجعل الوحدة هنا = طول المسار كاملًا */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lat-draw var(--dur-draw) var(--ease-out) .3s forwards;
}
.lat-flow {
  fill: none;
  stroke: var(--gold-2);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: .012 .11;
  opacity: 0;
  mix-blend-mode: screen;
  animation:
    lat-flow 10s linear calc(var(--dur-draw) + .3s) infinite,
    lat-fade 1.2s ease calc(var(--dur-draw) + .3s) forwards;
}
.lat-row {
  opacity: 0;
  animation: lat-in .9s var(--ease-out) forwards;
}
.lat-row:nth-child(1)  { animation-delay: .40s; }
.lat-row:nth-child(2)  { animation-delay: .62s; }
.lat-row:nth-child(3)  { animation-delay: .84s; }
.lat-row:nth-child(4)  { animation-delay: 1.06s; }
.lat-row:nth-child(5)  { animation-delay: 1.28s; }
.lat-row:nth-child(6)  { animation-delay: 1.50s; }
.lat-row:nth-child(7)  { animation-delay: 1.72s; }
.lat-row:nth-child(8)  { animation-delay: 1.94s; }
.lat-row:nth-child(9)  { animation-delay: 2.16s; }
.lat-row:nth-child(10) { animation-delay: 2.38s; }
.lat-row:nth-child(11) { animation-delay: 2.60s; }
.lat-row text {
  font-family: var(--font-display);
  font-weight: 700;
  fill: #fff;
  fill-opacity: .92;
  text-anchor: middle;
  dominant-baseline: central;
}
.lat-node { fill: var(--lapis-deep); fill-opacity: .92; stroke: var(--gold); stroke-opacity: .55; stroke-width: 1; }
@keyframes lat-draw { to { stroke-dashoffset: 0; } }
@keyframes lat-flow { to { stroke-dashoffset: -1; } }
@keyframes lat-fade { to { opacity: .9; } }
@keyframes lat-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 6. شريط التطبيقات: مؤشر ذهبي يستجيب للمؤشر ---------- */
.subnav a { position: relative; }
.subnav a::after {
  content: "";
  position: absolute;
  inset-inline: .6rem;
  bottom: .25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}
html[lang="en"] .subnav a::after { transform-origin: left; }
.subnav a:hover::after,
.subnav a:focus-visible::after,
.subnav a[aria-current]::after { transform: scaleX(1); }

/* ---------- 7. قسم التطبيقات والبطاقات ---------- */
.apps {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
}
.apps > h2 { font-size: 1.75rem; margin: 0 0 .35rem; }
.apps > .apps-lead { margin: 0 0 1.5rem; color: var(--ink-2); max-width: var(--measure); }

.apps-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.app-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color .3s var(--ease-out);
}
.app-card:hover { border-color: var(--gold); }
.app-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.app-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  border-radius: var(--radius-l);
}
.app-card--featured .card-body { order: 1; }   /* النص في البداية (يمين) */
.app-card--featured .card-art  { order: 2; min-height: 300px; aspect-ratio: auto; }

.card-art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lapis);
}
.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-out);
}
.app-card:hover .card-art img,
.app-card:focus-visible .card-art img { transform: scale(1.04); }

/* بديل الصورة: علامة حرفية لكل تطبيق — تظهر إن لم تُولَّد صورة Midjourney بعد */
.card-art--glyph {
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 70% at 30% 20%, rgba(232, 204, 120, .22), transparent 70%),
    linear-gradient(160deg, var(--lapis) 0%, var(--lapis-deep) 100%);
}
.card-art--glyph span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 11vw, 8rem);
  line-height: 1;
  color: var(--gold-2);
  transition: transform .8s var(--ease-out);
}
.app-card:hover .card-art--glyph span { transform: scale(1.06); }

.card-body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.25rem 1.4rem 1.5rem;
}
.card-body h3 { font-size: 1.375rem; margin: .35rem 0 0; }
.app-card--featured .card-body { padding: 2rem 2rem 2.25rem; justify-content: center; }
.app-card--featured h3 { font-size: 2rem; }
.card-body p { margin: 0; }
.card-tagline { color: var(--ink-2); }
.card-meta { color: var(--ink-2); font-size: .9375rem; margin-top: auto; padding-top: .75rem; }

/* شارة الحالة: نقطة + نص، بلا أحرف كبيرة ولا تباعد */
.status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  align-self: flex-start;
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--card);
}
.status::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status--release { color: #7A5A12; border-color: #E9D9A8; background: #FBF5E3; }
.status--release::before {
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201, 162, 74, .55);
  animation: pulse 2.4s ease-out infinite;
}
.status--dev { color: var(--lapis); border-color: #C9D3F0; background: #EEF2FC; }
.status--early { color: var(--ink-2); }
@keyframes pulse { to { box-shadow: 0 0 0 .55rem rgba(201, 162, 74, 0); } }

/* ظهور البطاقات الصغيرة مع التمرير — CSS فقط، ويعمل حيث تُدعم animation-timeline */
@supports (animation-timeline: view()) {
  .apps-grid > .app-card:not(.app-card--featured) {
    animation: card-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- 8. صورة صفحة التطبيق ---------- */
.app-banner {
  margin: 1.5rem 0 2rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--lapis);
  aspect-ratio: 21 / 9;
}
.app-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 9. شريط الخصوصية ---------- */
.privacy-strip {
  background: var(--lapis);
  color: #fff;
}
.privacy-strip__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.privacy-strip h2 { font-size: 1.5rem; margin: 0 0 .25rem; }
.privacy-strip p { margin: 0; color: rgba(255, 255, 255, .84); max-width: 52ch; }

/* ---------- 10. الحركة المقلّلة: كل شيء يثبت ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .lat-row { animation: none; opacity: 1; }
  .lat-chain { animation: none; stroke-dashoffset: 0; }
  .lat-flow { display: none; }
  .status--release::before { animation: none; box-shadow: none; }
  .card-art img, .card-art--glyph span, .btn, .app-card, .subnav a::after { transition: none; }
  .hero-media video { display: none; }
  @supports (animation-timeline: view()) {
    .apps-grid > .app-card:not(.app-card--featured) { animation: none; }
  }
}

/* ---------- 11. الاستجابة ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-lattice { margin-top: .5rem; }
  .lat-svg--tall { display: none; }
  .lat-svg--wide { display: block; }
}
@media (max-width: 720px) {
  .apps-grid { grid-template-columns: 1fr; }
  .app-card--featured { grid-template-columns: 1fr; }
  .app-card--featured .card-art { order: 0; min-height: 0; aspect-ratio: 16 / 9; }
  .app-card--featured .card-body { padding: 1.25rem 1.4rem 1.5rem; }
  .app-card--featured h3 { font-size: 1.6rem; }
  .app-banner { aspect-ratio: 16 / 9; border-radius: var(--radius-m); }
}

/* ================================================================
   جسر الرموز — يُوحّد اللوحة القديمة بالجديدة

   يُدمج هذا الملف بعد style.css، فرموزه تغلب. لكنّ style.css يعرّف
   رموزًا لا تعرّفها الترقية (--brand و--accent و--surface و--muted
   و--brand-dark)، فتبقى على قيمها القديمة: أزرق مخضرّ #14536b وذهب
   #c08a2e. والنتيجة أزرقان وذهبان على موقع واحد — لازورد الترقية في
   الرئيسية، والقديم في الوثائق وقائمة التطبيقات والدعم.

   فتُسنَد هنا إلى نظائرها من لوحة المخطوط. ولا يُمسّ style.css.
   ================================================================ */
:root {
  --brand: var(--lapis);
  --brand-dark: var(--lapis-deep);
  --accent: var(--gold);
  --muted: var(--ink-2);
  --surface: #E8EDF7;      /* شريط الأقسام البديلة: لازورد فاتح يُقرأ فوق --paper */
  /* --accent-text يبقى ذهبًا داكنًا (#8f6317): النص الصغير على خلفية فاتحة
     يحتاج ٤٫٥:١، و--gold أفتح من أن يبلغها. */
}

/* ================================================================
   ① الشريط العريض في عمود الصدر نفسه

   كان `figure.app-banner` عنصرًا في `<main>` بلا حاوية، فامتدّ بعرض
   الشاشة كلها بينما نصُّ الصدر فوقه في عمودٍ عرضه 860px. فيأخذ الآن
   الصندوقَ نفسَه: `max-width` و`margin-inline:auto` وحشوٌ جانبيٌّ 22px
   — وهي قيم `.hero .wrap` حرفيًا.

   والنسبةُ والزوايا تنتقل من `figure` إلى `img`: لو بقيت على `figure`
   لحُسبت على صندوقٍ يشمل الحشو، فانفصل ارتفاع الإطار عن عرض الصورة.
   ================================================================ */
.app-banner {
  max-width: 860px;
  margin: 1.5rem auto 2rem;
  padding-inline: 22px;
  background: none;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
}
.app-banner picture { display: block; }
.app-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: var(--lapis);
}
/* تُعاد هنا لأن هذه القواعد تلي كتلة الـ720px في الملف فتغلبها */
@media (max-width: 720px) {
  .app-banner img { aspect-ratio: 16 / 9; border-radius: var(--radius-m); }
}

/* ================================================================
   ② الخط أحاديّ المسافة للاتينية والأرقام لا للعربية

   `IBM Plex Mono` لا يحمل حروفًا عربية، فيسقط كلُّ حرفٍ إلى بديلٍ من
   النظام على حدة — فتنفصل الحروف ولا تتّصل. وهذا هو «التباعد» بعينه
   الذي تمنعه قاعدة الموقع، وإن لم يُكتب `letter-spacing`.

   فما نصُّه عربيٌّ يعود إلى خط المتن، وما هو لاتينيٌّ أو أرقامٌ يبقى
   أحاديَّ المسافة. وصفحاتُ الإنجليزية تبقى كما هي.
   ================================================================ */
.tag,
.herometa .vers,
.updated {
  font-family: var(--font-body);
  letter-spacing: normal;
}
html[lang="en"] .tag,
html[lang="en"] .herometa .vers,
html[lang="en"] .updated {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
/* ومبدّلُ اللغة عكسُ ذلك: في الصفحة العربية نصُّه «EN» لاتينيٌّ فيبقى
   أحاديَّ المسافة، وفي الإنجليزية نصُّه «ع» عربيٌّ فيعود إلى خط المتن. */
html[lang="en"] .lang { font-family: var(--font-body); }