@charset "UTF-8";
/* ============================================================================
   site.css — الموقع العامّ لمجموعة رسالتي للغات والعلوم
   ----------------------------------------------------------------------------
   الاتّجاه: فاخرٌ لامع — نيليٌّ عميق، ذهبٌ معدنيّ، زجاجٌ مضيء، وحركة هادئة.

   ── وضعان، لا وضعٌ واحد ──
   نهاريٌّ وليليّ، والاختيار محفوظٌ في المتصفّح. لكلّ وضعٍ ذهبُه: ‎#F2B33D‎
   ليلاً يلمع على النيلي، و‎#A2620B‎ نهاراً لأنّ الذهب الفاتح يرسب عند
   ‎1.9:1‎ على الورق الأبيض ولا يُقرأ. اللون واحدٌ في العين، ورقمان في الشيفرة.

   وقسما الجهاز والمنصّة (‎.on-dark‎) يبقيان ليليّين في الوضعين: الأوّل يعرض
   عتاداً شاشته سوداء، والثاني لحظةُ الضوء الأخيرة قبل التذييل.

   ── الألوان من أين ──
   • ‎#2F358F‎ لون شعار المؤسّسة حرفياً، مقروءاً من ‎logo.svg‎. ومنه اشتُقّ
     ‎#5B63E8‎ نيلياً مضيئاً للتوهّج والحالات.
   • الذهبي ‎#F2B33D‎ هو برتقالي أشعّة الشعار، وهو نفسه لون هويّة جهاز
     الامتحان في وثائق المنظومة — اللونان التقيا فصار الذهب معدن الصفحة.
   • الزمرّدي ‎#34D399‎ إشارة حياةٍ فقط (اتّصال، حفظ) ولا يُستعمل زينة.

   ── الطباعة هي الفخامة ──
   التباين بين ‎Plex‎ وزن ٢٠٠ بحجمٍ هائل ومتنٍ ‎Tajawal‎ دافئ هو شخصية
   الصفحة. الألوان تُلبِسها، ولا تحلّ محلّها.

   ── RTL ──
   خصائص منطقية حصراً. الاستثناء الوحيد ‎.pad‎ — لوحة مفاتيح فيزيائية
   مطبوعة ‎1 2 3 A‎ من اليسار ولا تنعكس مع اتّجاه القراءة.
   ============================================================================ */

/* ═══════════════════════════ الخطوط — ذاتية الاستضافة ═══════════════════════
   لا اتّصال بـ‎fonts.gstatic.com‎، و‎unicode-range‎ يمنع تحميل المقطع اللاتيني
   على صفحةٍ عربية خالصة. الحمولة العربية ‎١٠٩‎ كيلوبايت.                  */

@font-face{font-family:"Plex AR";src:url("../fonts/site/plex-ar-200.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex AR";src:url("../fonts/site/plex-ar-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex AR";src:url("../fonts/site/plex-lat-200.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex AR";src:url("../fonts/site/plex-lat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Tajawal W";src:url("../fonts/site/tajawal-ar-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal W";src:url("../fonts/site/tajawal-ar-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal W";src:url("../fonts/site/tajawal-lat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal W";src:url("../fonts/site/tajawal-lat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ════════════════════════════════ الرموز ════════════════════════════════ */
/* ── الوضع النهاري هو الأساس، والليلي يُطبَّق بـ‎data-theme‎ على الجذر ──
   سكربتٌ سطريّ في ‎<head>‎ يثبّت الوسم قبل أوّل رسم، فلا يومض الوضع النهاري
   لحظةً في وجه من اختار الليلي. وبلا جافاسكربت يتكفّل ‎prefers-color-scheme‎. */
:root{
  color-scheme:light;

  /* الأرضيات */
  --void:#E6E9F5; --deep:#F6F7FC; --panel:#ECEEF8;
  --glass:rgb(47 53 143/.045); --glass-2:rgb(47 53 143/.085);

  /* العلامة — لون الشعار حرفياً */
  --brand:#2F358F; --brand-lit:#4A52C9; --brand-glow:rgb(47 53 143/.22);

  /* المعدن — الذهبي مُعتِمٌ نهاراً ليبلغ ‎5.1:1‎ على الورق */
  --gold:#A2620B; --gold-lit:#C97F14; --gold-dim:#7C4906; --gold-glow:rgb(162 98 11/.24);

  /* إشارة الحياة — لا تُستعمل زينة */
  --live:#0F8F5B;

  /* النصّ */
  --fg:#12142E; --fg-2:#4B5170; --fg-3:#6E7492;
  --line:rgb(47 53 143/.15); --line-2:rgb(47 53 143/.30);

  --head-grad:linear-gradient(178deg,#12142E 8%,#252B6B 55%,#2F358F 100%);
  /* أرقام اللوحة نهاراً: ذهبٌ كلّه مقروء — لا بياضَ في أعلى الحرف يبتلعه الورق */
  --num-grad:linear-gradient(180deg,var(--gold-lit),var(--gold) 52%,var(--gold-dim));
  --aura-a:rgb(47 53 143/.12); --aura-b:rgb(242 179 61/.14); --aura-c:rgb(91 99 232/.10);

  --sh-1:0 2px 10px rgb(18 20 46/.07);
  --sh-2:0 12px 34px rgb(18 20 46/.12);
  --sh-3:0 26px 60px rgb(18 20 46/.17);

  /* الشبكة والإيقاع */
  --gutter:clamp(1.25rem,4.5vw,4.5rem);
  --maxw:1440px;
  --col-gap:clamp(1rem,2.2vw,2rem);
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem;
  --sp-5:4rem;  --sp-6:6rem; --sp-7:9rem;
  --band:clamp(4.5rem,9vw,9rem);
  --r-s:8px; --r-m:14px; --r-l:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── الليل ── */
:root[data-theme="dark"]{
  color-scheme:dark;
  --void:#06070F; --deep:#0B0D1E; --panel:#111433;
  --glass:rgb(150 165 255/.05); --glass-2:rgb(150 165 255/.09);
  --brand:#5B63E8; --brand-lit:#8189F5; --brand-glow:rgb(91 99 232/.35);
  --gold:#F2B33D; --gold-lit:#FFD27A; --gold-dim:#C98A1E; --gold-glow:rgb(242 179 61/.30);
  --live:#34D399;
  --fg:#EEF0FB; --fg-2:#A3ABD4; --fg-3:#7A83AE;
  --line:rgb(160 175 255/.14); --line-2:rgb(160 175 255/.28);
  --head-grad:linear-gradient(178deg,#FFFFFF 12%,#C9CFF7 58%,#9AA3E4 100%);
  --num-grad:linear-gradient(180deg,#FFFFFF,var(--gold-lit) 58%,var(--gold));
  --aura-a:rgb(91 99 232/.22); --aura-b:rgb(242 179 61/.10); --aura-c:rgb(47 53 143/.30);
  --sh-1:0 2px 10px rgb(0 0 0/.35);
  --sh-2:0 10px 34px rgb(0 0 0/.45);
  --sh-3:0 26px 60px rgb(0 0 0/.55);
}
/* بلا جافاسكربت لا يوجد ‎data-theme‎ — فيتبع النظام */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --void:#06070F; --deep:#0B0D1E; --panel:#111433;
    --glass:rgb(150 165 255/.05); --glass-2:rgb(150 165 255/.09);
    --brand:#5B63E8; --brand-lit:#8189F5; --brand-glow:rgb(91 99 232/.35);
    --gold:#F2B33D; --gold-lit:#FFD27A; --gold-dim:#C98A1E; --gold-glow:rgb(242 179 61/.30);
    --live:#34D399;
    --fg:#EEF0FB; --fg-2:#A3ABD4; --fg-3:#7A83AE;
    --line:rgb(160 175 255/.14); --line-2:rgb(160 175 255/.28);
    --head-grad:linear-gradient(178deg,#FFFFFF 12%,#C9CFF7 58%,#9AA3E4 100%);
  --num-grad:linear-gradient(180deg,#FFFFFF,var(--gold-lit) 58%,var(--gold));
    --aura-a:rgb(91 99 232/.22); --aura-b:rgb(242 179 61/.10); --aura-c:rgb(47 53 143/.30);
    --sh-1:0 2px 10px rgb(0 0 0/.35);
    --sh-2:0 10px 34px rgb(0 0 0/.45);
    --sh-3:0 26px 60px rgb(0 0 0/.55);
  }
}

/* ── نطاقٌ داكن دائماً ──
   قسما الجهاز والمنصّة يبقيان ليليّين في الوضعين: الأوّل يعرض عتاداً
   وشاشته سوداء أصلاً، والثاني لحظةُ الضوء الأخيرة قبل التذييل. تثبيت
   رموزهما هنا أوضح من إعادة تلوين كلّ عنصرٍ داخلهما مرّتين.          */
.on-dark{
  color-scheme:dark;
  --glass:rgb(150 165 255/.05); --glass-2:rgb(150 165 255/.09);
  --gold:#F2B33D; --gold-lit:#FFD27A; --gold-dim:#C98A1E; --gold-glow:rgb(242 179 61/.30);
  --live:#34D399;
  --fg:#EEF0FB; --fg-2:#A3ABD4; --fg-3:#7A83AE;
  --line:rgb(160 175 255/.16); --line-2:rgb(160 175 255/.30);
  --head-grad:linear-gradient(178deg,#FFFFFF 12%,#C9CFF7 58%,#9AA3E4 100%);
  --num-grad:linear-gradient(180deg,#FFFFFF,var(--gold-lit) 58%,var(--gold));
  --sh-2:0 10px 34px rgb(0 0 0/.45);
  --sh-3:0 26px 60px rgb(0 0 0/.55);
  color:var(--fg);
}

/* ═══════════════════════════════ الأساس ═══════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--deep)}
body{
  margin:0;background:var(--deep);color:var(--fg);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.8 "Tajawal W","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-family:"Plex AR","Tajawal W",system-ui,sans-serif;font-weight:600;line-height:1.16;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-inline-size:100%;block-size:auto}
::selection{background:var(--gold);color:#FFF8EC}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;
}

.shell{max-inline-size:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:1}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}

/* ═════════════════ الهالة — ضوءٌ محيط يتنفّس خلف الصفحة ═════════════════
   ثابتةٌ خلف كل شيء (‎fixed‎) فتتحرّك الأقسام فوق ضوءٍ واحد بدل أن يحمل كلّ
   قسمٍ تدرّجه — أرخص في الرسم، وأقرب إلى إضاءة قاعةٍ واحدة.               */
.aura{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 42% at 82% 6%,  var(--aura-a), transparent 62%),
    radial-gradient(42% 34% at 12% 28%, var(--aura-b), transparent 64%),
    radial-gradient(58% 48% at 50% 96%, var(--aura-c), transparent 66%);
  animation:breathe 26s ease-in-out infinite alternate;
}
@keyframes breathe{
  from{transform:translate3d(0,0,0) scale(1);opacity:.85}
  to  {transform:translate3d(0,-2.5%,0) scale(1.08);opacity:1}
}

/* ── سلّم الطباعة ── */
.t-mega   {font-family:"Plex AR",sans-serif;font-weight:200;font-size:clamp(3.2rem,10.5vw,9rem);line-height:.95;letter-spacing:-.045em}
.t-display{font-family:"Plex AR",sans-serif;font-weight:200;font-size:clamp(2.3rem,6.2vw,4.9rem);line-height:1.06;letter-spacing:-.035em}
.t-h2     {font-size:clamp(1.7rem,3.4vw,2.9rem)}
.t-h3     {font-size:clamp(1.15rem,1.7vw,1.4rem)}
.t-lead   {font-size:clamp(1.06rem,1.35vw,1.32rem);line-height:1.75;color:var(--fg-2)}
.t-body   {color:var(--fg-2)}

/* عناوين بتدرّج — من الأبيض إلى نيليٍّ فاتح. التدرّج داخل نطاقٍ عالي
   الإضاءة كلّه، فلا يهبط التباين في أيّ نقطة منه. */
.t-display,.t-h2{
  background:var(--head-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .t-display,.t-h2{color:var(--fg);-webkit-text-fill-color:currentColor}
}
/* الكلمة المُذهَّبة — التوكيد الوحيد داخل العنوان */
.lit{
  background:linear-gradient(180deg,var(--gold-lit),var(--gold) 55%,var(--gold-dim));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  display:block;
}

/* الحاجب — يحمل معلومة (قسم، مسار) لا زخرفة */
.eyebrow{
  font-family:"Plex AR",sans-serif;font-weight:600;
  font-size:.7rem;letter-spacing:.22em;color:var(--gold);
  display:flex;align-items:center;gap:.75rem;margin-block-end:var(--sp-3);
}
.eyebrow::after{
  content:"";flex:1;block-size:1px;
  background:linear-gradient(to left,var(--line-2),transparent);
}

/* ═════════════════════ التوقيع: أشعّة الشعار ═════════════════════
   خطوط شعرية تُشعّ من زاوية بداية القراءة، مصدرها شمس الشعار. لا تظهر
   إلا في البطل — الجرأة تُنفَق مرّةً واحدة.                          */
.rays{
  position:absolute;z-index:0;pointer-events:none;
  inset-block-start:0;inset-inline-end:0;
  inline-size:min(1150px,124vw);aspect-ratio:1;
  transform:translate(30%,-44%);
  background:repeating-conic-gradient(from 0deg,
      var(--gold) 0deg .07deg, transparent .07deg 4.2deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 7%,rgba(0,0,0,.95) 30%,transparent 72%);
          mask-image:radial-gradient(closest-side,transparent 7%,rgba(0,0,0,.95) 30%,transparent 72%);
  opacity:.30;
}

/* ══════════════════════════ الشريط العلوي ══════════════════════════ */
.masthead{
  position:sticky;inset-block-start:0;z-index:60;
  background:color-mix(in srgb,var(--deep) 62%,transparent);
  backdrop-filter:saturate(1.7) blur(18px);-webkit-backdrop-filter:saturate(1.7) blur(18px);
  border-block-end:1px solid transparent;transition:border-color .35s var(--ease),background .35s var(--ease);
}
.masthead[data-stuck="1"]{border-block-end-color:var(--line);background:color-mix(in srgb,var(--deep) 88%,transparent)}
.masthead__in{display:flex;align-items:center;gap:var(--sp-3);min-block-size:78px}

.wordmark{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.wordmark img{
  inline-size:42px;block-size:42px;border-radius:11px;
  box-shadow:0 0 0 1px var(--line),0 6px 18px rgb(0 0 0/.5);
}
.wordmark b{font-family:"Plex AR",sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2;color:var(--fg)}
.wordmark small{display:block;font-family:"Tajawal W",sans-serif;font-weight:400;font-size:.68rem;color:var(--gold);letter-spacing:.05em}

.mainnav{display:flex;align-items:center;gap:.15rem;margin-inline-start:auto}
.mainnav a{
  font-size:.9rem;font-weight:500;color:var(--fg-2);
  padding:.6rem .85rem;border-radius:var(--r-s);position:relative;
  transition:color .25s var(--ease);
}
.mainnav a::after{
  content:"";position:absolute;inset-block-end:.32rem;inset-inline:.85rem;
  block-size:1px;background:var(--gold);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .35s var(--ease);
}
.mainnav a:hover{color:var(--fg)}
.mainnav a:hover::after{transform:scaleX(1)}
@media (max-width:1000px){ .mainnav a:not(.enter){display:none} }

.enter{
  font-family:"Plex AR",sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.02em;
  color:#FFF8EC!important;padding:.72rem 1.4rem!important;margin-inline-start:.6rem;
  border-radius:var(--r-s);
  background:linear-gradient(140deg,var(--gold-lit),var(--gold) 58%,var(--gold-dim));
  box-shadow:0 6px 20px var(--gold-glow);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.enter::after{display:none}
.enter:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--gold-glow)}

/* ══════════════════════════════ البطل ══════════════════════════════ */
.hero{position:relative;padding-block:clamp(3.5rem,7vw,7rem) var(--band);overflow:hidden}
.hero__in{position:relative;z-index:1;align-items:end}
.hero__say{grid-column:1/span 7}
.hero__pic{grid-column:8/span 5}
@media (max-width:900px){
  .hero__say{grid-column:1/-1}
  .hero__pic{grid-column:1/-1;margin-block-start:var(--sp-4)}
}
/* بلا صورةِ بطلٍ بعد: يتّسع النصّ ولا يبقى نصفُ الشبكة فارغاً */
.hero__in--solo .hero__say{grid-column:1/span 9}
.hero__in--solo h1{max-inline-size:18ch}
@media (max-width:900px){ .hero__in--solo .hero__say{grid-column:1/-1} }

.hero h1{max-inline-size:16ch}
.hero__lead{max-inline-size:46ch;margin-block:var(--sp-3) var(--sp-4)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem}
.hero__ph{aspect-ratio:3/4;inline-size:100%;object-fit:cover;border-radius:var(--r-l);
  box-shadow:var(--sh-3),0 0 0 1px var(--line)}

/* ── الأزرار ── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;position:relative;
  font-family:"Plex AR",sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em;
  padding:1rem 1.75rem;border:1px solid transparent;border-radius:var(--r-s);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn svg{inline-size:1.05em;block-size:1.05em;flex-shrink:0}
.btn--solid{
  background:linear-gradient(140deg,var(--gold-lit),var(--gold) 55%,var(--gold-dim));
  color:#FFF8EC;box-shadow:0 8px 26px var(--gold-glow);
}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 16px 40px var(--gold-glow)}
.btn--line{border-color:var(--line-2);color:var(--fg);background:var(--glass)}
.btn--line:hover{border-color:var(--gold);color:var(--gold);background:var(--glass-2);transform:translateY(-2px)}

/* ═════════════════ التوقيع الثاني: لوحة الطريقة ═════════════════
   ثلاثة أفعالٍ لا ثلاثة أرقام — الصفحة عامّة، وأعداد الطلاب والمعلّمين
   معلوماتُ عملٍ لا تُنشر.                                            */
.plate{
  position:relative;border-block:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),var(--deep));
}
.plate__in{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media (max-width:760px){ .plate__in{grid-template-columns:1fr} }
.cell{padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1rem,2.5vw,2rem);position:relative;transition:background .35s var(--ease)}
.cell:hover{background:var(--glass)}
.cell+.cell::before{
  content:"";position:absolute;inset-block:1.75rem;inset-inline-end:0;inline-size:1px;
  background:linear-gradient(to bottom,transparent,var(--line-2),transparent);
}
@media (max-width:760px){
  .cell+.cell::before{inset-block:auto;inset-block-start:0;inset-inline:1rem;inline-size:auto;block-size:1px;
    background:linear-gradient(to left,transparent,var(--line-2),transparent)}
}
.cell__n{
  font-family:"Plex AR",sans-serif;font-weight:200;
  font-size:clamp(2.5rem,5.4vw,4.1rem);line-height:1.05;letter-spacing:-.035em;display:block;
  background:var(--num-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.cell__k{display:block;margin-block-start:1rem;font-size:.95rem;color:var(--fg-2);max-inline-size:34ch}

/* ══════════════════════════════ الأقسام ══════════════════════════════ */
.band{padding-block:var(--band);position:relative}
.band--sand{
  background:linear-gradient(180deg,var(--panel),var(--deep));
  border-block:1px solid var(--line);
}
.band__head{grid-column:1/span 6;margin-block-end:var(--sp-4)}
.band__aside{grid-column:8/span 5;align-self:end;margin-block-end:var(--sp-4)}
@media (max-width:900px){ .band__head,.band__aside{grid-column:1/-1} .band__aside{margin-block-start:calc(var(--sp-3)*-1)} }
.band__foot{grid-column:1/-1;margin-block-start:var(--sp-5)}

/* ── البطاقة الزجاجية — الوحدة البنائية لكلّ ما يُرفع عن الأرضية ── */
.glass{
  background:var(--glass);
  border:1px solid var(--line);border-radius:var(--r-m);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .4s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.glass:hover{
  transform:translateY(-4px);background:var(--glass-2);
  border-color:var(--line-2);box-shadow:var(--sh-2);
}

/* ── من نحن ── */
.creed{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);
  border-block-start:1px solid var(--line);padding-block-start:var(--sp-4)}
.creed__q{grid-column:1/span 5;font-family:"Plex AR",sans-serif;font-weight:200;
  font-size:clamp(1.5rem,2.7vw,2.25rem);line-height:1.35;letter-spacing:-.02em;color:var(--fg)}
.creed__b{grid-column:7/span 6;display:grid;gap:var(--sp-3)}
@media (max-width:900px){ .creed__q,.creed__b{grid-column:1/-1} }

.pillars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);margin-block-start:var(--sp-5)}
@media (max-width:860px){ .pillars{grid-template-columns:1fr} }
.pillar{
  padding:var(--sp-4) clamp(1.25rem,2vw,1.75rem);position:relative;overflow:hidden;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);
  transition:transform .4s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
/* خيطٌ ذهبيّ يمتدّ على الحافّة العليا عند التحويم — لمعةُ معدنٍ لا إطار */
.pillar::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;
  background:linear-gradient(to left,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .5s var(--ease-out);
}
.pillar:hover{transform:translateY(-5px);background:var(--glass-2);border-color:var(--line-2);box-shadow:var(--sh-2)}
.pillar:hover::before{transform:scaleX(1)}
.pillar h3{margin-block:.9rem .6rem;color:var(--fg)}
.pillar__ix{font-family:"Plex AR",sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.2em;color:var(--gold)}

/* ══════════════════ البرامج — تبويبٌ تفاعلي ══════════════════ */
.tracks{grid-column:1/-1}
.tracks__tabs{display:flex;flex-wrap:wrap;gap:0;border-block-end:1px solid var(--line)}
.tab{
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:"Plex AR",sans-serif;font-weight:600;font-size:clamp(.92rem,1.5vw,1.1rem);
  color:var(--fg-3);padding:1.05rem 1.6rem 1.15rem;position:relative;
  transition:color .3s var(--ease);
}
.tab:first-child{padding-inline-start:0}
.tab::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:0;block-size:2px;
  background:linear-gradient(to left,var(--gold-dim),var(--gold-lit),var(--gold-dim));
  box-shadow:0 0 14px var(--gold-glow);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease-out);
}
.tab:hover{color:var(--fg-2)}
.tab[aria-selected="true"]{color:var(--fg)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab__n{font-weight:200;font-size:.82em;color:var(--gold);margin-inline-start:.45rem}

.panel{padding-block-start:var(--sp-4);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
.panel[hidden]{display:none}
.panel__say{grid-column:1/span 4}
.panel__say h3{color:var(--fg)}
.panel__blurb{margin-block-start:.75rem}
.panel__list{grid-column:6/span 7;display:grid;grid-template-columns:repeat(2,1fr);gap:0;align-content:start}
@media (max-width:900px){ .panel__say{grid-column:1/-1} .panel__list{grid-column:1/-1;margin-block-start:var(--sp-3)} }
@media (max-width:560px){ .panel__list{grid-template-columns:1fr} }
.course{
  display:flex;align-items:baseline;gap:.9rem;
  padding:1rem .9rem;border-block-start:1px solid var(--line);
  transition:background .3s var(--ease),padding-inline-start .3s var(--ease);
}
.course:hover{background:var(--glass);padding-inline-start:1.35rem}
.course__d{font-family:"Plex AR",sans-serif;font-weight:200;font-size:.82rem;color:var(--gold);flex-shrink:0}
.course__t{font-weight:500;color:var(--fg)}

/* ═══════════════ قسم جهاز الامتحان — الوحدة الحيّة ═══════════════
   هنا تُنفَق الجرأة القصوى: القسم الوحيد بأرضيةٍ خاصّة به، لأنّ موضوعه
   عتادٌ لا نصّ. والشاشة تُبنى بأبعاد ‎128×64‎ الحقيقية وبإطارٍ سميك وظلٍّ
   داخلي — لوحةٌ ناعمة كبيرة تُقرأ شاشةً لوحيّة، وهذه تُقرأ عتاداً صغيراً
   عالي التباين، وهو ما هي عليه.                                     */
.exam{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 80% at 88% 0%, rgb(91 99 232/.28), transparent 60%),
    radial-gradient(90% 70% at 6% 100%, rgb(242 179 61/.12), transparent 62%),
    linear-gradient(168deg,#080A18 0%,#141838 52%,#1B2154 100%);
  border-block:1px solid var(--line);
}
.rig{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media (max-width:960px){ .rig{grid-template-columns:1fr} }

.unit{position:sticky;inset-block-start:100px;max-inline-size:430px}
@media (max-width:960px){ .unit{position:static;margin-inline:auto;margin-block-end:var(--sp-4)} }
/* جسم الوحدة — عموديّ بنِسَب الجهاز الفعلي: الشاشة تشغل نحو خُمس الارتفاع
   لا نصفه، ولوحة المفاتيح تحتها، ثمّ زرّان دائريّان. البراغي الأربعة
   تدرّجاتٌ شعاعية في الخلفية لا عناصر — أرخص من أربعة عناصر لا وظيفة لها. */
.unit__body{
  max-inline-size:340px;margin-inline:auto;
  padding:clamp(.9rem,2.2vw,1.25rem);border-radius:20px;
  background:
    radial-gradient(circle at 15px 15px,           #939BB4 0 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 15px) 15px, #939BB4 0 2.4px, transparent 3px),
    radial-gradient(circle at 15px calc(100% - 15px), #939BB4 0 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #939BB4 0 2.4px, transparent 3px),
    linear-gradient(160deg,#3A4059,#232840 55%,#171B2E);
  border:1px solid rgb(190 202 255/.18);
  box-shadow:var(--sh-3),inset 0 1px 0 rgb(255 255 255/.12);
}

/* الشاشة — ‎128×64‎، وعرضها ثلاثة أرباع الجسم كما على الجهاز */
.scr{
  inline-size:76%;margin-inline:auto;margin-block:.35rem 1rem;
  aspect-ratio:128/64;
  background:#04060B;border-radius:4px;
  border:5px solid #12162A;
  box-shadow:inset 0 2px 12px rgb(0 0 0/.95),0 0 22px rgb(150 200 255/.14);
  padding:4.5% 5%;
  display:flex;flex-direction:column;
  font-family:"Plex AR",ui-monospace,monospace;
  container-type:inline-size;overflow:hidden;
}
.scr *{line-height:1.25}
.scr__bar{display:flex;align-items:center;gap:.5em;font-size:clamp(.55rem,3.4cqi,.8rem);color:#8FB6E4;font-weight:600}
.scr__ok{padding:.05em .5em;border-radius:2px;font-size:.92em;background:var(--live);color:#04060B;transition:background .3s,color .3s,box-shadow .3s}
.scr__ok[data-live="0"]{background:transparent;color:#6C7CA8;box-shadow:inset 0 0 0 1px #6C7CA8}
.scr__q{margin-inline-start:auto;color:#C9DBF2}
.scr__bat{display:inline-flex;align-items:center;gap:.3em;color:#C9DBF2}
.scr__bat i{inline-size:1.5em;block-size:.85em;border:1px solid currentColor;border-radius:1px;position:relative;display:inline-block}
.scr__bat i::after{content:"";position:absolute;inset:1px auto 1px 1px;inline-size:var(--lvl,70%);background:currentColor}
.scr__rule{block-size:1px;background:rgb(150 190 245/.3);margin-block:4% 3.5%}
.scr__ask{font-weight:600;color:#F2F7FF;font-size:clamp(.72rem,5.4cqi,1.15rem);min-block-size:1.25em}
.scr__opts{display:grid;grid-template-columns:1fr 1fr;gap:1% 6%;margin-block-start:3.5%}
.scr__opts li{display:flex;align-items:baseline;gap:.42em;color:#B9CEE8;font-size:clamp(.62rem,4.2cqi,.95rem);font-weight:200;transition:color .18s ease}
.scr__opts li b{font-weight:600;font-size:.8em;color:#6F9FD8;min-inline-size:1.3em;text-align:center;border:1px solid transparent;border-radius:2px;transition:all .18s ease}
.scr__opts li[data-on="1"]{color:#04060B}
.scr__opts li[data-on="1"] b{background:var(--gold);color:#04060B;border-color:var(--gold)}
.scr__opts li[data-on="1"] span{background:var(--gold);color:#04060B;padding-inline:.25em;border-radius:2px}
.scr__foot{margin-block-start:auto;display:flex;align-items:baseline;gap:.6em;font-size:clamp(.55rem,3.4cqi,.8rem);color:#8FB6E4}
.scr__timer{margin-inline-start:auto;color:#C9DBF2;font-variant-numeric:tabular-nums}

/* ‎direction:ltr‎ مقصودة: لوحةٌ فيزيائية مطبوعة ‎1 2 3 A‎ من اليسار، ولا
   تنعكس مع اتّجاه الصفحة. الشاشة فوقها عربية RTL — الجهاز نفسه هكذا. */
.pad{
  direction:ltr;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.3rem,1.2vw,.45rem);
  inline-size:88%;margin-inline:auto;
  padding:clamp(.5rem,1.5vw,.7rem);border-radius:10px;
  background:linear-gradient(#20263C,#151929);
  box-shadow:inset 0 2px 8px rgb(0 0 0/.55),0 1px 0 rgb(255 255 255/.06);
}
/* ألوان المفاتيح من الوحدة نفسها: أزرق للأرقام وأحمر لـ‎A–D‎ */
.key{
  appearance:none;cursor:pointer;aspect-ratio:1;display:grid;place-items:center;
  font-family:"Plex AR",sans-serif;font-weight:600;font-size:clamp(.78rem,2.3vw,1rem);
  color:#F4F7FF;background:linear-gradient(#3E7BEA,#2456C4);
  border:0;border-radius:6px;
  box-shadow:0 3px 0 #16337A,inset 0 1px 0 rgb(255 255 255/.35);
  transition:transform .07s ease,filter .15s ease,box-shadow .07s ease;
}
.key:hover{filter:brightness(1.15)}
.key--red{background:linear-gradient(#E4514E,#C22C29);box-shadow:0 3px 0 #7C1614,inset 0 1px 0 rgb(255 255 255/.32)}
.key[data-hit="1"],.key:active{transform:translateY(3px);box-shadow:0 0 0 rgb(0 0 0/.4),inset 0 1px 0 rgb(255 255 255/.3);filter:brightness(1.3)}

/* الزرّان الدائريان أسفل الجهاز: الأحمر للسابق والأخضر للتالي */
.navrow{display:flex;justify-content:center;gap:clamp(1.6rem,5vw,2.4rem);margin-block-start:clamp(.9rem,2.4vw,1.25rem);padding-block-end:.2rem}
.rnd{
  appearance:none;cursor:pointer;border:0;
  inline-size:clamp(36px,10vw,44px);block-size:clamp(36px,10vw,44px);border-radius:50%;
  box-shadow:0 4px 0 rgb(0 0 0/.45),inset 0 2px 3px rgb(255 255 255/.4),inset 0 -3px 6px rgb(0 0 0/.35);
  transition:transform .07s ease,filter .15s ease,box-shadow .07s ease;
}
.rnd:hover{filter:brightness(1.15)}
.rnd:active,.rnd[data-hit="1"]{transform:translateY(3px);box-shadow:0 0 0 rgb(0 0 0/.45),inset 0 2px 3px rgb(255 255 255/.35)}
.rnd--red{background:radial-gradient(circle at 34% 30%,#F27672,#C42B27 62%,#8E1B18)}
.rnd--grn{background:radial-gradient(circle at 34% 30%,#6EE39A,#1FA855 62%,#126E38)}

.unit__hint{margin-block-start:.9rem;padding-block-start:.9rem;border-block-start:1px solid var(--line);font-size:.82rem;color:var(--fg-2)}
.unit__hint b{color:var(--gold);font-weight:600}

.feats{display:grid;gap:0}
.feat{
  padding:var(--sp-3);border-block-start:1px solid var(--line);
  margin-inline:calc(var(--sp-3) * -1);border-radius:var(--r-s);
  transition:background .3s var(--ease);
}
.feat:first-child{border-block-start:0;padding-block-start:0}
.feat:hover{background:var(--glass)}
@media (max-width:960px){ .feat:first-child{border-block-start:1px solid var(--line);padding-block-start:var(--sp-3)} }
.feat h3{margin-block-end:.45rem;color:var(--fg)}
.feat__tag{display:block;font-family:"Plex AR",sans-serif;font-weight:600;font-size:.64rem;letter-spacing:.2em;color:var(--gold);margin-block-end:.4rem}
.feat em{font-style:normal;font-weight:700;color:var(--fg)}

/* ══════════════════════ هيئة التدريس ══════════════════════ */
.faculty{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--col-gap)}
@media (max-width:1000px){ .faculty{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .faculty{grid-template-columns:1fr} }
.person figure{margin:0}
.person__ph{
  aspect-ratio:4/5;inline-size:100%;object-fit:cover;border-radius:var(--r-m);
  filter:grayscale(1) contrast(1.06) brightness(.92);
  transition:filter .5s var(--ease),transform .5s var(--ease-out);
}
.person:hover .person__ph{filter:none;transform:translateY(-4px)}
.person figcaption{padding-block-start:.95rem;border-block-start:1px solid var(--line);margin-block-start:.95rem}
.person__n{font-family:"Plex AR",sans-serif;font-weight:600;font-size:1rem;color:var(--fg)}
.person__r{font-size:.85rem;color:var(--gold)}

/* ══════════════════ رحلة التسجيل — تسلسلٌ حقيقي ══════════════════
   الترقيم مبرَّر: الخطوات تقع بهذا الترتيب، والرقم معلومةٌ يحتاجها القارئ
   ليعرف أين هو من الطريق.                                            */
.journey{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--col-gap)}
@media (max-width:900px){ .journey{grid-template-columns:1fr} }
.step{
  padding:var(--sp-4) clamp(1.25rem,2vw,1.75rem);position:relative;overflow:hidden;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);
  transition:transform .4s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.step::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;
  background:linear-gradient(to left,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .5s var(--ease-out);
}
.step:hover{transform:translateY(-5px);background:var(--glass-2);border-color:var(--line-2);box-shadow:var(--sh-2)}
.step:hover::before{transform:scaleX(1)}
.step__n{
  font-family:"Plex AR",sans-serif;font-weight:200;font-size:3rem;line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--gold-lit),var(--gold) 55%,var(--gold-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.step h3{margin-block:.9rem .5rem;color:var(--fg)}

/* ══════════════════════════ الأخبار والقصص ══════════════════════════ */
.stories{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
@media (max-width:900px){ .stories{grid-template-columns:1fr} }
.story{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--sp-3);
  transition:transform .4s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.story:hover{transform:translateY(-5px);background:var(--glass-2);border-color:var(--line-2);box-shadow:var(--sh-2)}
.story__ph{aspect-ratio:16/10;inline-size:100%;object-fit:cover;border-radius:var(--r-s);margin-block-end:var(--sp-3)}
.story__meta{display:flex;gap:.75rem;align-items:center;font-family:"Plex AR",sans-serif;font-weight:600;
  font-size:.66rem;letter-spacing:.18em;color:var(--gold);margin-block-end:.9rem}
.story__meta time{color:var(--fg-3);letter-spacing:.08em}
.story h3{margin-block-end:.6rem;color:var(--fg);transition:color .3s var(--ease)}
.story:hover h3{color:var(--gold-lit)}

/* ════════════════════════ الحياة في المركز ════════════════════════ */
.campus{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--col-gap)}
@media (max-width:900px){ .campus{grid-template-columns:repeat(2,1fr)} }
.shot{position:relative;overflow:hidden;border-radius:var(--r-m);border:1px solid var(--line)}
.shot img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.shot:hover img{transform:scale(1.06)}
.shot--wide{grid-column:span 4;aspect-ratio:16/9}
.shot--tall{grid-column:span 2;aspect-ratio:3/4}
.shot--sq{grid-column:span 2;aspect-ratio:1}
@media (max-width:900px){ .shot--wide{grid-column:1/-1} .shot--tall,.shot--sq{grid-column:span 1} }
.shot figcaption{
  position:absolute;inset-block-end:0;inset-inline:0;padding:1rem 1.15rem;
  font-size:.85rem;color:#fff;font-weight:500;
  background:linear-gradient(to top,rgb(6 7 15/.88),transparent);
}

/* ══════════════ نظام إدارة التعلّم — لحظة الضوء الأخيرة ══════════════ */
.lms{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 100% at 50% 0%, rgb(242 179 61/.13), transparent 62%),
    linear-gradient(180deg,#0E1130,#080A18);
  border-block:1px solid var(--line);
}
.gates{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--col-gap);margin-block-start:var(--sp-4)}
@media (max-width:900px){ .gates{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .gates{grid-template-columns:1fr} }
.gate{
  display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;
  padding:var(--sp-4) clamp(1.25rem,2vw,1.6rem);
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);
  transition:transform .4s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.gate::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;
  background:linear-gradient(to left,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .5s var(--ease-out);
}
.gate:hover{transform:translateY(-5px);background:var(--glass-2);border-color:var(--gold);box-shadow:0 18px 44px rgb(0 0 0/.5),0 0 0 1px var(--gold-glow)}
.gate:hover::before{transform:scaleX(1)}
.gate svg{inline-size:24px;block-size:24px;color:var(--gold)}
.gate strong{font-family:"Plex AR",sans-serif;font-weight:600;font-size:1.06rem;margin-block-start:.4rem;color:var(--fg)}
.gate span{font-size:.87rem;color:var(--fg-2)}
.gate em{
  font-style:normal;margin-block-start:auto;padding-block-start:1.3rem;
  font-family:"Plex AR",sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.14em;
  color:var(--gold);display:flex;align-items:center;gap:.4rem;
}
.gate em svg{inline-size:13px;block-size:13px;transition:transform .35s var(--ease-out)}
.gate:hover em svg{transform:translateX(-6px)}

/* ══════════════════════════════ التذييل ══════════════════════════════ */
.foot{padding-block:var(--sp-5) var(--sp-4);border-block-start:1px solid var(--line);background:var(--void);position:relative}
.foot__brand{grid-column:1/span 4}
.foot__note{margin-block-start:var(--sp-3);max-inline-size:34ch;font-size:.9rem}
.foot__cols{grid-column:6/span 7;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
@media (max-width:900px){ .foot__brand{grid-column:1/-1;margin-block-end:var(--sp-4)} .foot__cols{grid-column:1/-1} }
@media (max-width:560px){ .foot__cols{grid-template-columns:1fr;gap:var(--sp-3)} }
.foot h4{font-family:"Plex AR",sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.2em;color:var(--gold);margin-block-end:.9rem}
.foot li{margin-block-end:.55rem}
.foot li a{font-size:.9rem;color:var(--fg-2);transition:color .25s var(--ease),padding-inline-start .25s var(--ease)}
.foot li a:hover{color:var(--gold)}
.foot__legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-block-start:var(--sp-5);padding-block-start:var(--sp-3);border-block-start:1px solid var(--line);
  font-size:.8rem;color:var(--fg-3)}

/* ══════════════════ مواضع الصور — لمن يجهّزها فقط ══════════════════
   لا تظهر للزائر إطلاقاً (‎?slots=1‎ وحده يكشفها). تعلن اسم الملفّ ومقاسه
   فيعرف من يملؤها ماذا يضع بالضبط.                                    */
.slot{
  display:grid;place-content:center;align-content:center;gap:.45rem;text-align:center;
  padding:1.5rem;min-inline-size:0;position:relative;border-radius:var(--r-m);
  background:var(--glass);border:1px solid var(--line);color:var(--fg-2);
}
.shot .slot{position:absolute;inset:0}
.slot::before{content:"";position:absolute;inset:.6rem;border:1px dashed var(--line-2);pointer-events:none;border-radius:calc(var(--r-m) - 6px)}
.slot b{font-family:"Plex AR",sans-serif;font-weight:600;font-size:.64rem;letter-spacing:.2em;color:var(--gold)}
.slot code{font-family:ui-monospace,"Cascadia Mono",Menlo,monospace;font-size:.7rem;color:var(--fg);opacity:.75;direction:ltr;word-break:break-all}
.slot small{font-size:.68rem;line-height:1.5;max-inline-size:26ch}

/* ══════════════════ الحركة — هادئة، وتُطفأ عند الطلب ══════════════════
   الإخفاء مشروطٌ بـ‎.js‎ التي يضعها سكربتٌ سطريّ في ‎<head>‎. فلو تعطّل
   الجافاسكربت بقي المحتوى ظاهراً — الظهور تحسينٌ فوق محتوىً قائم لا شرطٌ
   لوجوده.                                                             */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .rise.seen{opacity:1;transform:none}
.js .rise:nth-child(2){transition-delay:.08s}
.js .rise:nth-child(3){transition-delay:.16s}
.js .rise:nth-child(4){transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rise,.rise{opacity:1;transform:none}
  .aura{animation:none}
  .shot:hover img,.key[data-hit="1"],.pillar:hover,.step:hover,.story:hover,.gate:hover,.glass:hover,.person:hover .person__ph{transform:none}
}

/* تخطّي إلى المحتوى */
.skip{
  position:fixed;inset-block-start:-120px;inset-inline-start:var(--gutter);z-index:99;
  background:var(--gold);color:#FFF8EC;padding:.85rem 1.4rem;border-radius:0 0 var(--r-s) var(--r-s);
  font-family:"Plex AR",sans-serif;font-weight:600;font-size:.85rem;
  transition:inset-block-start .2s var(--ease);
}
.skip:focus{inset-block-start:0}

/* الطباعة الورقية — الموقع ليس للطباعة، لكن ألّا ينكسر أفضل من أن ينكسر */
@media print{
  .masthead,.rays,.aura,.lms,.skip,.unit{display:none!important}
  body{background:#fff;color:#000}
  .t-display,.t-h2,.lit,.cell__n,.step__n{-webkit-text-fill-color:#000;color:#000;background:none}
}

/* ══════════════════════ مبدّل الوضع (نهاري / ليلي) ══════════════════════
   زرّ واحد بحالتين: الأيقونتان متراكبتان وتتبادلان الدوران والتلاشي، فلا
   يقفز عرض الشريط عند التبديل. و‎aria-pressed‎ يحمل الحالة لقارئ الشاشة.  */
.themer{
  appearance:none;cursor:pointer;flex-shrink:0;
  inline-size:40px;block-size:40px;margin-inline-start:.35rem;
  display:grid;place-items:center;position:relative;
  background:var(--glass);color:var(--fg-2);
  border:1px solid var(--line);border-radius:50%;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.themer:hover{color:var(--gold);border-color:var(--gold);background:var(--glass-2);transform:rotate(-18deg)}
.themer svg{
  grid-area:1/1;inline-size:19px;block-size:19px;
  transition:opacity .35s var(--ease),transform .45s var(--ease-out);
}
.themer .i-sun{opacity:0;transform:rotate(-70deg) scale(.5)}
.themer .i-moon{opacity:1;transform:none}
:root[data-theme="dark"] .themer .i-sun{opacity:1;transform:none}
:root[data-theme="dark"] .themer .i-moon{opacity:0;transform:rotate(70deg) scale(.5)}

/* الشعار على ورقٍ فاتح يحتاج أرضيةً تحته — أيقونته نيليّة داكنة */
:root:not([data-theme="dark"]) .wordmark img{background:#fff}

/* ══════════════════ أيقونات الأقسام ══════════════════
   دائرةٌ زجاجية تحمل الأيقونة، وتتوهّج ذهباً عند تحويم البطاقة الحاضنة. */
.ico{
  inline-size:46px;block-size:46px;flex-shrink:0;
  display:grid;place-items:center;border-radius:13px;
  background:var(--glass-2);border:1px solid var(--line);
  color:var(--gold);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease-out);
}
.ico svg{inline-size:22px;block-size:22px}
.pillar:hover .ico,.step:hover .ico,.gate:hover .ico{
  border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-glow);transform:translateY(-2px);
}

/* ══════════════════ شريط التقدّم وزرّ العودة للأعلى ══════════════════
   الشريط يقول كم بقي من الصفحة — معلومةٌ للقارئ لا زينة. وزرّ العودة لا
   يظهر إلا بعد أن يصير الرجوع إلى الأعلى تمريراً طويلاً فعلاً.          */
.prog{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:70;pointer-events:none}
.prog i{
  display:block;block-size:100%;inline-size:0;
  background:linear-gradient(to left,var(--brand-lit),var(--gold));
  box-shadow:0 0 12px var(--gold-glow);
  border-start-start-radius:0;border-end-start-radius:3px;
}

.totop{
  position:fixed;inset-block-end:26px;inset-inline-start:26px;z-index:70;
  inline-size:46px;block-size:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-lit),var(--gold) 58%,var(--gold-dim));
  color:#FFF8EC;border:0;box-shadow:0 10px 26px var(--gold-glow);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease-out),visibility .35s;
}
.totop[data-on="1"]{opacity:1;visibility:visible;transform:none}
.totop:hover{transform:translateY(-3px);box-shadow:0 16px 36px var(--gold-glow)}
.totop svg{inline-size:19px;block-size:19px}
@media (max-width:560px){ .totop{inset-block-end:18px;inset-inline-start:16px;inline-size:42px;block-size:42px} }

/* ══════════════════════════ قسم التواصل ══════════════════════════ */
/* ‎auto-fit‎ لا عددٌ ثابت: بطاقات التواصل تُزاد أو تُنقص من مصفوفة PHP،
   وشبكةٌ بأربعة أعمدة ثابتة تترك فجوةً كلّما نقصت واحدة. */
.reach{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:var(--col-gap)}
.reach__card{
  display:flex;flex-direction:column;gap:.45rem;position:relative;overflow:hidden;
  padding:var(--sp-4) clamp(1.25rem,2vw,1.6rem);
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);
  transition:transform .4s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.reach__card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;
  background:linear-gradient(to left,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .5s var(--ease-out);
}
.reach__card:hover{transform:translateY(-5px);background:var(--glass-2);border-color:var(--line-2);box-shadow:var(--sh-2)}
.reach__card:hover::before{transform:scaleX(1)}
.reach__card:hover .ico{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-glow)}
.reach__card h3{margin-block:.85rem .5rem;color:var(--fg)}
.reach__card ul{display:grid;gap:.35rem}
.reach__card li a{
  font-size:.94rem;color:var(--fg-2);direction:ltr;display:inline-block;
  transition:color .25s var(--ease);
}
.reach__card li a:hover{color:var(--gold)}
.reach__card--map em{
  font-style:normal;margin-block-start:auto;padding-block-start:1.2rem;
  font-family:"Plex AR",sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.14em;
  color:var(--gold);display:flex;align-items:center;gap:.4rem;
}
.reach__card--map em svg{inline-size:13px;block-size:13px;transition:transform .35s var(--ease-out)}
.reach__card--map:hover em svg{transform:translateX(-6px)}

/* ══════════════════ حسابات التواصل في التذييل ══════════════════ */
.social{display:flex;gap:.6rem;margin-block-start:var(--sp-3)}
.social a{
  inline-size:38px;block-size:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);color:var(--fg-2);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease-out);
}
.social a:hover{color:var(--gold);border-color:var(--gold);background:var(--glass-2);transform:translateY(-3px)}
.social svg{inline-size:17px;block-size:17px}

@media (prefers-reduced-motion:reduce){
  .totop[data-on="1"],.totop:hover,.reach__card:hover,.social a:hover{transform:none}
}


/* خيطٌ يصل خطوات التسجيل — التسلسل معلومةٌ يجب أن تُرى، لا أربع بطاقاتٍ
   متجاورة يقرؤها الزائر كخيارات. يختفي على الجوال حيث تتكدّس عمودياً. */
@media (min-width:901px){
  .journey{position:relative}
  .journey::before{
    content:"";position:absolute;inset-block-start:calc(var(--sp-4) + 1.5rem);
    inset-inline:6%;block-size:1px;z-index:0;
    background:linear-gradient(to left,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);
  }
  .step{position:relative;z-index:1}
}