/* ═══════════════════════════════════════════════════════════════════════════
 *  css/landing-kids.css — هوية الصفحة الرئيسية لطلاب المرحلة الابتدائية
 *
 *  ═══ ليه ملف لوحده ═══
 *
 *  index.html بتحمّل css/custom.min.css — وده ملف مبني بالإيد تاريخه
 *  7 مايو، بينما css/custom.css اتعدّل بعده كتير ومفيش سكريبت minify في
 *  المشروع يبني الاتنين من مصدر واحد. يعني أي تنسيق يتحط في custom.css
 *  **ميوصلش** للصفحة الرئيسية.
 *
 *  فالملف ده منفصل ومربوط بالصفحة مباشرة: مايعتمدش على البناء المكسور،
 *  ومايشحنش تنسيقات الصفحة الرئيسية على الداشبوردات (اللي بتحمّل
 *  custom.css الكامل).
 *
 *  ⚠️ بيتحمّل **بعد** custom.min.css عشان يكسب في تعارض الأولوية.
 *
 *  ═══ اللي اتغيّر واللي اتساب ═══
 *
 *  الأزرق #1a56db متسيب زي ما هو — ده لون هوية المنصة والمدرّس. اللي
 *  بيتغيّر هو اللي حواليه: سماء ملوّنة، أشكال مستديرة، ألوان مساعدة
 *  مبهجة. فالطفل يحس إن الصفحة بتكلّمه، والأب اللي بيدفع لسه شايف منصة
 *  محترمة مش لعبة.
 *
 *  الرموز القديمة في الهيرو (∫ و E=mc² و sin θ) اتشالت من الـHTML: دي
 *  رموز ثانوي، وطالب رابعة ابتدائي مايعرفهاش ولا المفروض يشوفها.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1) التوكنز
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --k-brand:      #1a56db;
  --k-brand-dark: #1e429f;

  --k-sun:   #ffc93c;
  --k-mint:  #34d399;
  --k-coral: #ff7a7a;
  --k-grape: #8b7cf8;
  --k-sky:   #38bdf8;

  --k-ink:   #14284a;
  --k-ink-2: #4a5b7a;

  --k-card:    #ffffff;
  --k-card-bd: #e6eefc;

  /* السماء: أزرق فاتح فوق ودافي عند الأفق */
  --k-sky-1: #d9f0ff;
  --k-sky-2: #eaf4ff;
  --k-sky-3: #fff8ea;

  --k-hill-1: #bfe8c9;
  --k-hill-2: #9adcae;

  --k-star-op: 0;      /* النجوم بتبان بالليل بس */
  --k-cloud-op: .95;
}

html.dark {
  --k-ink:   #e8eefb;
  --k-ink-2: #94a7c7;

  --k-card:    #16203a;
  --k-card-bd: #25335c;

  --k-sky-1: #0a1020;
  --k-sky-2: #101a33;
  --k-sky-3: #16203c;

  --k-hill-1: #143a2a;
  --k-hill-2: #0f2d21;

  --k-star-op: 1;
  --k-cloud-op: .18;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2) خلفية الصفحة — طبقة واحدة لكل الأقسام
   ═══════════════════════════════════════════════════════════════════════════ */

/* لون احتياطي ورا الطبقة — لو الطبقة ما رسمتش لأي سبب، الصفحة تفضل
   بلون سما مش أبيض فاقع. */
body { background: var(--k-sky-2) !important; transition: background .4s ease; }

#hero {
  background: transparent !important;
  padding-bottom: 220px !important;   /* مساحة للتلال تحت */
}

/* الأقسام بقت شفافة عشان السما تبان من ورا — البطاقات جواها هي اللي
   بتفضل صلبة، فالنص يفضل مقروء. */
#features, #courses, #gallery, #platform-videos, #stats-strip, #trust-strip {
  background: transparent !important;
}

/* ── طبقة الخلفية ──
   position: fixed مش absolute: العنصر بيفضل مثبّت على الشاشة والمحتوى
   بيتحرك فوقه، فالسما باينة في كل الأقسام والإحساس بالعمق بييجي من
   الفرق ده لوحده.

   aria-hidden و pointer-events:none: ديكور مايتقراش لقارئ الشاشة
   ومايمنعش أي ضغطة على المحتوى اللي فوقه.

   ⚠️ z-index: 0 والمحتوى فوقه بـz-index أعلى — لازم المحتوى يبقى معرّف
      صريح (شوف قسم 2.5)، وإلا العناصر اللي مالهاش z-index بتتحط ورا
      الطبقة دي وتختفي. */
.k-bg {
  position: fixed;
  /* الطبقة أطول من الشاشة بـ120 بكسل من كل ناحية.
     السبب إنها بتتحرك مع التمرير، ومن غير الهامش ده كان طرفها بيدخل
     في الكادر ويبان شريط بلون الـbody فوق أو تحت. */
  top: -120px;
  left: 0;
  right: 0;
  height: calc(100vh + 240px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;

  /* التدرّج على الطبقة نفسها مش على الـbody.
     background-attachment: fixed كان بيعمل نفس الشكل، بس iOS بيتجاهله
     خالص وبيرجع للتمرير العادي — فالتدرّج كان بيتمدد مع طول الصفحة على
     الآيفون. الطبقة الثابتة بتشتغل في كل مكان. */
  background: linear-gradient(180deg,
    var(--k-sky-1) 0%, var(--k-sky-2) 52%, var(--k-sky-3) 100%);
  transition: background .4s ease;

  /* الحركة مع التمرير — القيمة بتتحدّث من الجافاسكريبت ومحدودة هناك */
  transform: translate3d(0, calc(var(--k-sy, 0) * 1px), 0);
  will-change: transform;
}

/* الهالات الملوّنة */
.k-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .5;
  animation: k-breathe 14s ease-in-out infinite;
}
.k-blob.b1 { width: 30rem; height: 30rem; top: -6rem;  inset-inline-end: -6rem; background: #7cc5ff; }
.k-blob.b2 { width: 26rem; height: 26rem; bottom: 6rem; inset-inline-start: -7rem; background: #b9a8ff; animation-delay: -5s; }
.k-blob.b3 { width: 20rem; height: 20rem; top: 34%; inset-inline-start: 40%; background: #ffd98a; opacity: .34; animation-delay: -9s; }
html.dark .k-blob { opacity: .2; }

@keyframes k-breathe {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
  50%      { transform: scale(1.14) translate3d(0, -18px, 0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2.5) ⚠️ ترتيب الطبقات

   طبقة الخلفية fixed بـz-index: 0. أي عنصر على مستوى الصفحة من غير
   z-index بيتحط في نفس المستوى وترتيبه بيبقى بترتيبه في الماركب — يعني
   الهيدر والمحتوى اللي بعد الطبقة بيبقوا فوقها بالحظ مش بقرار.

   بنعرّفهم صريح. المعرّفات دي كلها موجودة في index.html.
   ═══════════════════════════════════════════════════════════════════════════ */
#main-content { position: relative; z-index: 1; }
.top-header    { z-index: 60 !important; }
#mobile-menu   { z-index: 100 !important; }

/* ── العمق ──
   الطبقة كلها بتتحرك مع التمرير (فوق)، والنجوم بتتحرك بنسبة تانية —
   فالسما بتحس إنها بعيدة والنجوم أبعد.

   ⚠️ ليه النجوم بس؟
      السحاب والأجسام والصاروخ **عندهم أنيميشن على transform** أصلاً
      (drift و bob و fly). لو ضفنا حركة تمرير على نفس الخاصية، الأنيميشن
      بيكسبها وبتضيع — أو أسوأ، بتتخانق وترمش. النجوم حاويتها مالهاش
      أنيميشن (اللمعة على الأبناء)، فهي المكان الوحيد اللي ينفع يزيد
      عمق من غير تعارض. */
.k-stars {
  transform: translate3d(0, calc(var(--k-sy, 0) * -0.45px), 0);
  will-change: transform;
}

/* ⚠️ كل الحركة هنا transform/opacity **بس**.
   دول الخاصيتين اللي المتصفح بيحرّكهم على كارت الرسوميات. أي حركة على
   width أو top بتخلّي المتصفح يعيد حساب التخطيط كل فريم، وعلى موبايل
   رخيص — وده جهاز أغلب الأطفال — بتبقى متهيّجة وبتسخّن البطارية. */

/* النجوم — ليل بس */
.k-stars {
  position: absolute; inset: 0;
  opacity: var(--k-star-op);
  transition: opacity .5s;
}
.k-star {
  position: absolute;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8);
  animation: k-twinkle 3.2s ease-in-out infinite;
}
@keyframes k-twinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* السحاب — سرعات مختلفة بتدي إحساس العمق */
.k-cloud {
  position: absolute;
  opacity: var(--k-cloud-op);
  animation: k-drift linear infinite;
  will-change: transform;
}
@keyframes k-drift {
  from { transform: translate3d(-30vw, 0, 0); }
  to   { transform: translate3d(130vw, 0, 0); }
}

/* الفقاعات — بتطلع من تحت لفوق */
.k-bubble {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(120,190,255,.35));
  border: 1px solid rgba(255, 255, 255, .7);
  animation: k-rise linear infinite;
  will-change: transform, opacity;
}
@keyframes k-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .85; }
  88%  { opacity: .7; }
  100% { transform: translate3d(26px, -108vh, 0) scale(1.15); opacity: 0; }
}

/* الأجسام الطايرة — بتترجرج في مكانها */
.k-float {
  position: absolute;
  z-index: 1;
  animation: k-bob ease-in-out infinite;
  will-change: transform;
}
@keyframes k-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  50%      { transform: translate3d(0, -22px, 0) rotate(calc(var(--r, 0deg) + 7deg)); }
}

/* ⚠️ الأجسام في الهوامش الجانبية بس.
   أول نسخة كانت محوّطة بنِسب من الشاشة كلها، فعلى شاشة 1000 بكسل النص
   بياخد العرض كله والأجسام بتقع جواه: قطرة الماء ظهرت جوه العنوان والقلم
   اتقصّ ورا البطاقات. اللي مالوش هامش كفاية بيختفي. */
@media (max-width: 1180px) { .k-float.k-wide { display: none; } }
@media (max-width: 900px)  { .k-float.k-mid  { display: none; } }

/* الصاروخ — بيعدّي الشاشة كل 22 ثانية */
.k-rocket {
  position: absolute;
  top: 16%;
  inset-inline-start: -14%;
  z-index: 1;
  animation: k-fly 22s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes k-fly {
  0%        { transform: translate3d(0, 0, 0) rotate(-14deg); opacity: 0; }
  6%        { opacity: 1; }
  40%       { opacity: 1; }
  46%, 100% { transform: translate3d(128vw, -34vh, 0) rotate(-14deg); opacity: 0; }
}

.k-spin { animation: k-spin 26s linear infinite; transform-origin: 50% 50%; }
@keyframes k-spin { to { transform: rotate(360deg); } }

.k-glow { animation: k-glow 5s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes k-glow {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* شمس بالنهار وقمر بالليل — شمس في سماء ليل حاجة غريبة */
.k-day   { display: block; }
.k-night { display: none; }
html.dark .k-day   { display: none; }
html.dark .k-night { display: block; }

/* ── التلال ──
   بتقفل المشهد من تحت وبتدي إحساس «مكان» مش خلفية مجردة — ده اللي بيخلي
   الطفل يحس إنه في عالم مش على صفحة. */
.k-hills {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.k-hills svg { width: 100%; height: 190px; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   3) نص الهيرو
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ الكلاس ده لازم يبقى صريح على عمودَي المحتوى في الماركب.

   أول نسخة كانت `#hero > div { position: relative; z-index: 5 }` عشان
   ترفع المحتوى فوق المشهد. المحدِّد ده وقع على **كل** div جوه الهيرو —
   يعني على .k-scene والهالات كمان، فحوّلهم من absolute لـrelative.

   ولما بقوا relative دخلوا في مسار التخطيط: المشهد ارتفاعه بقى صفر
   (inset:0 مالوش معنى على relative) والتلال اترسمت في نص الصفحة، والهالات
   زودت 670 بكسل فراغ في طول الهيرو. قِستها: ارتفاع الهيرو 2107 بكسل
   والمحتوى بيخلص عند 1183.

   نفس الغلطة اللي حصلت قبل كده في شاشة اختبار الطالب: محدِّد موضعي على
   ماركب مش إنت اللي كتبته. */
#hero > .k-content { position: relative; z-index: 5; }

#hero-title { letter-spacing: -1px; }

/* خط الفرشاة الأصفر تحت السطر التاني — بيترسم لوحده مرة واحدة */
.k-brush {
  position: absolute;
  inset-inline: -3%;
  bottom: -.26em;
  width: 106%;
  height: .38em;
  color: var(--k-sun);
  z-index: -1;
}
.k-brush path {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: k-draw 1.1s ease-out .8s forwards;
}
@keyframes k-draw { to { stroke-dashoffset: 0; } }

/* ── الأزرار ──
   الظل السفلي الصلب بيدي الزرار سماكة، والضغطة بتنزّله فوق ظله — الطفل
   بيحس إنه زرار حقيقي بينضغط مش مستطيل ملوّن. */
#hero-btn1 {
  border-radius: 20px !important;
  box-shadow: 0 7px 0 var(--k-brand-dark), 0 16px 28px rgba(26, 86, 219, .3) !important;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s !important;
}
#hero-btn1:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 0 var(--k-brand-dark), 0 22px 34px rgba(26, 86, 219, .34) !important;
}
#hero-btn1:active {
  transform: translateY(4px) !important;
  box-shadow: 0 3px 0 var(--k-brand-dark), 0 8px 16px rgba(26, 86, 219, .28) !important;
}

#hero-whatsapp-btn {
  border-radius: 20px !important;
  box-shadow: 0 7px 0 #12924a, 0 16px 28px rgba(37, 211, 102, .3) !important;
}
#hero-whatsapp-btn:hover { transform: translateY(-3px) !important; }
#hero-whatsapp-btn:active { transform: translateY(4px) !important; box-shadow: 0 3px 0 #12924a !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   3.5) ⚠️ استرجاع الشبكات — تجاوز لباج قديم

   css/custom.min.css فيه قاعدة عامة:

       .grid.grid-cols-2 { grid-template-columns: 1fr !important }

   القاعدة دي بتضرب **كل** شبكة بعمودين في أي صفحة بتحمّل الملف ده. على
   الصفحة الرئيسية دي كانت بتخلي شريط المميزات تحت الهيرو (أربع بطاقات)
   وشريط الأرقام (أربع أرقام) عمود واحد طويل على الموبايل بدل عمودين.
   قِستها في المتصفح: grid-template-columns رجعت "350.508px" — عمود واحد.

   القاعدة دي شكلها مقصودة لموديول معيّن في لوحة الأدمن وسايبة عامة
   بالغلط. مشيلهاش من الملف المصغّر لسببين:
     • الملف ده مبني بالإيد ومفيش سكريبت بيبنيه، فأي لمسة فيه بتضيع لو
       حد بناه تاني
     • القاعدة عامة، ويمكن صفحة تانية اعتمدت عليها من غير ما نعرف

   فالتجاوز هنا محصور بالصفحة الرئيسية بالمعرّف — أضيق نطاق ممكن.
   ═══════════════════════════════════════════════════════════════════════════ */
#hero .grid.grid-cols-2,
#stats-strip .grid.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
  #stats-strip .grid.grid-cols-2 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  #hero .grid.grid-cols-2 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4) شريط المميزات تحت الهيرو
   ═══════════════════════════════════════════════════════════════════════════ */
#hero .grid.grid-cols-2 {
  border-radius: 26px !important;
  border-width: 2px !important;
  border-color: var(--k-card-bd) !important;
  box-shadow: 0 14px 34px rgba(20, 40, 74, .1) !important;
}
html.dark #hero .grid.grid-cols-2 { border-color: var(--k-card-bd) !important; }

#hero .grid.grid-cols-2 > div {
  border-radius: 18px;
  padding: 6px 4px;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
#hero .grid.grid-cols-2 > div:hover { transform: translateY(-6px) rotate(-1.4deg); }

/* الأيقونات المستديرة بتبقى مربعات مستديرة أكبر — أوضح لعين الطفل */
#hero .grid.grid-cols-2 > div > div:first-child {
  width: 54px !important;
  height: 54px !important;
  border-radius: 17px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5) الأقسام
   ═══════════════════════════════════════════════════════════════════════════ */
.section-block { padding: 84px 5% !important; }

/* الخلفيات: من الرمادي/الأبيض للسماء الدافية */
/* ⚠️ هنا كان فيه تناقض مع نفسي:
     القسم ٢ فوق بيقول `#features, #courses, #gallery … { background:
     transparent }` — عشان السما المتحركة تبان من ورا كل الأقسام، ودي
     كانت فكرة التصميم من الأول. وبعدين هنا كنت راجع مثبّت لون صلب لكل
     واحد فيهم، فالقاعدة دي كانت بتغلب اللي فوق (نفس الأولوية، والأخير
     بيكسب) والسما كانت مقطوعة عند أول قسم.

     النتيجة كانت إن الخلفية المتحركة بتختفي بمجرد ما تنزل تحت الهيرو،
     وده بالظبط اللي كان مطلوب منها متعملهوش.

     الأقسام رجعت شفافة. النص فيها مقروء لأن البطاقات نفسها صلبة
     (--k-card)، وعناوين الأقسام بتقع على سما فاتحة في الوضع النهاري
     وسما ليلي في الوضع الليلي — والتوكنز بتقلب مع الاتنين.

     قسم #resources مقصود إنه يفضل غامق — ده «قسم الليل» بنجومه. */

/* العنوان الصغير فوق كل قسم بقى شارة ملوّنة */
.section-block > div > h2:first-child,
#stats-strip ~ section h2.text-blue-600 {
  display: inline-block;
  background: #fff4d6;
  color: #a1690b !important;
  border-radius: 999px;
  padding: 6px 18px;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  margin-bottom: 14px !important;
}
html.dark .section-block > div > h2:first-child { background: #3a2f12; color: #fbbf24 !important; }

/* ── البطاقات ──
   الجافاسكريبت بيولّد البطاقات دي (js/landing.js) بكلاسات Tailwind فيها
   bg-white و border-slate-100. المحدِّد هنا أقوى منهم فبيكسب من غير
   !important على كل خاصية.

   ⚠️ بطاقات المميزات مبقتش هنا — ليها قسم خاص (5.5) بكلاسات صريحة.
      الحكاية إن التنسيق القديم كان بيمسك الأيقونة بـ`> div:first-child`،
      يعني بيعتمد على ترتيب العناصر جوه البطاقة. ده بيكسر من غير أي خطأ
      أول ما الترتيب يتغيّر. */
#landing-courses-grid > *,
#gallery-grid > *,
#landing-videos-preview > *,
#books-grid > *,
#models-grid > * {
  border-radius: 26px !important;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s !important;
}

#landing-courses-grid > * {
  background: var(--k-card) !important;
  border: 2px solid var(--k-card-bd) !important;
  box-shadow: 0 10px 26px rgba(20, 40, 74, .08) !important;
}

#landing-courses-grid > *:hover,
#gallery-grid > *:hover,
#landing-videos-preview > *:hover {
  transform: translateY(-9px) !important;
  box-shadow: 0 20px 42px rgba(20, 40, 74, .16) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5.5) قسم المميزات

   كان 12 بطاقة بيضا متشابهة، كل واحدة إيموجي كبير سايب في الهوا. البطاقة
   ما كانش فيها حاجة تفرّقها عن اللي جنبها، ولا حاجة تقول للعين تبدأ منين.

   بقى لكل بطاقة: شريط لون فوق بيتمد مع الـhover، ورقم باهت في الركن،
   والأيقونة جوه مربّع مستدير بلون بيتبدّل على 5 ألوان. كل الكلاسات صريحة.
   ═══════════════════════════════════════════════════════════════════════════ */
.k-sec-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }

.k-sec-title {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 900;
  color: var(--k-ink);
  line-height: 1.4;
  margin: 0;
}

.k-sec-lead {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.95;
  color: var(--k-ink-2);
}

.k-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 26px;
}
.k-feat-loading { grid-column: 1 / -1; display: flex; justify-content: center; padding: 32px 0; }

.k-feat {
  position: relative;
  overflow: hidden;
  background: var(--k-card);
  border: 2px solid var(--k-card-bd);
  border-radius: 28px;
  padding: 30px 24px 26px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(20, 40, 74, .08);
  transition: transform .24s cubic-bezier(.34, 1.56, .64, 1), box-shadow .24s, border-color .24s;
  /* بتدخل ورا بعض — القسم بيتحمّل لما توصله بالسكرول، فالدخول بيحصل وقتها */
  animation: k-feat-in .55s ease-out both;
  animation-delay: calc(var(--k-feat-i, 0) * 55ms);
}
.k-feat:hover {
  transform: translateY(-9px);
  border-color: var(--k-feat-c, var(--k-brand));
  box-shadow: 0 22px 44px rgba(20, 40, 74, .17);
}
html.dark .k-feat { box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
html.dark .k-feat:hover { box-shadow: 0 22px 44px rgba(0, 0, 0, .5); }

@keyframes k-feat-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

/* شريط اللون فوق — خيط رفيع ساكت، بيتمد على عرض البطاقة مع الـhover */
.k-feat-bar {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 54px;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: var(--k-feat-c, var(--k-brand));
  transition: width .28s cubic-bezier(.34, 1.56, .64, 1);
}
.k-feat:hover .k-feat-bar { width: 100%; }

/* الرقم — علامة مكان، مش معلومة. باهت عشان يتقرا آخر حاجة */
.k-feat-num {
  position: absolute;
  top: 14px;
  inset-inline-end: 18px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--k-ink);
  opacity: .07;
  pointer-events: none;
}
/* النص فاتح على بطاقة غامقة — 7% بيختفي خالص، فبنرفعها شوية */
html.dark .k-feat-num { opacity: .13; }

.k-feat-ico {
  width: 76px;
  height: 76px;
  margin: 6px auto 18px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 36px;
  line-height: 1;
  background: var(--k-feat-bg, #fff4d6);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.k-feat:hover .k-feat-ico { transform: translateY(-3px) rotate(-6deg) scale(1.07); }

.k-feat-t {
  margin: 0 0 10px;
  font-size: 1.16rem;
  font-weight: 900;
  color: var(--k-ink);
  line-height: 1.5;
}

.k-feat-d {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.95;
  color: var(--k-ink-2);
}

/* ── تدوير الألوان على خمسة ──
   الرتابة أسوأ حاجة لعين الطفل. خمسة مش أربعة عشان مايبقاش فيه عمود
   كامل بنفس اللون في شبكة من تلات أعمدة. */
.k-feat:nth-child(5n+1) { --k-feat-c: var(--k-sun);   --k-feat-bg: #fff4d6; }
.k-feat:nth-child(5n+2) { --k-feat-c: var(--k-mint);  --k-feat-bg: #dcfce9; }
.k-feat:nth-child(5n+3) { --k-feat-c: var(--k-brand); --k-feat-bg: #e6ecff; }
.k-feat:nth-child(5n+4) { --k-feat-c: var(--k-coral); --k-feat-bg: #ffe6e6; }
.k-feat:nth-child(5n+5) { --k-feat-c: var(--k-grape); --k-feat-bg: #ece9ff; }

html.dark .k-feat:nth-child(5n+1) { --k-feat-bg: #3a2f12; }
html.dark .k-feat:nth-child(5n+2) { --k-feat-bg: #102f22; }
html.dark .k-feat:nth-child(5n+3) { --k-feat-bg: #1a2547; }
html.dark .k-feat:nth-child(5n+4) { --k-feat-bg: #3a1c1c; }
html.dark .k-feat:nth-child(5n+5) { --k-feat-bg: #251f45; }

@media (max-width: 720px) {
  .k-feat-grid { grid-template-columns: 1fr; gap: 18px; }
  .k-sec-head { margin-bottom: 34px; }
  .k-feat { padding: 26px 20px 22px; border-radius: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6) شريط الأرقام
   ═══════════════════════════════════════════════════════════════════════════ */
#stats-strip {
  background: transparent !important;
  border: none !important;
  padding: 10px 5% 60px !important;
  margin-top: -60px;
  position: relative;
  z-index: 20;
}

#stats-strip > div > div {
  background: var(--k-card);
  border: 2px solid var(--k-card-bd);
  border-radius: 28px;
  padding: 24px 18px;
  box-shadow: 0 14px 34px rgba(20, 40, 74, .1);
  /* الفواصل الرأسية بين الأرقام مش محتاجينها جوه بطاقة واحدة */
  border-inline-start-width: 2px !important;
}
#stats-strip > div > div > div { border: none !important; }

#stats-strip .p-4 { border-radius: 18px; transition: transform .2s; }
#stats-strip .p-4:hover { transform: translateY(-5px); }

/* ═══════════════════════════════════════════════════════════════════════════
   7) قسم المكتبة الغامق — كان أسود شبه رسمي، بقى ليل بنجوم
   ═══════════════════════════════════════════════════════════════════════════ */
#resources {
  background: linear-gradient(165deg, #10214a 0%, #0b1533 100%) !important;
  /* بطاقة بحواف مستديرة وهامش زي شريط التسجيل — القسم الغامق الممتد من
     الطرف للطرف كان بيقطع سما الصفحة بحد مستقيم حاد */
  margin: 0 auto;
  max-width: 1180px;
  width: calc(100% - 32px);
  border-radius: 36px !important;
  padding: 66px 26px !important;
  box-shadow: 0 22px 50px rgba(20, 40, 74, .22);
}
html.dark #resources {
  background: linear-gradient(165deg, #0a1020 0%, #070c18 100%) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}

@media (max-width: 720px) {
  #resources {
    width: calc(100% - 20px);
    border-radius: 28px !important;
    padding: 46px 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8) ⚠️ احترام إعداد «تقليل الحركة»

   في أطفال عندهم حساسية للحركة، وفي أهل بيقفلوا الحركة من إعدادات الجهاز.
   الإعداد ده مش رفاهية — تجاهله معناه إن الصفحة تعمل دوخة لطفل. كل الحركة
   بتتوقف والصفحة تفضل كاملة ومقروءة.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .k-scene *,
  #hero .blob,
  #hero-btn1,
  .k-feat,
  .k-feat-ico,
  .k-cta-orbit,
  .k-stage-ring,
  .k-stage-mark,
  .k-stage-chip,
  .k-teacher-img,
  .gate-card,
  .gate-card > *,
  #landing-courses-grid > * {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  /* الصورة بتتحط بـopacity:0 ومستنية الحركة تظهّرها — من غير السطر ده
     الطفل اللي قافل الحركة مش هيشوف المدرّس خالص */
  .k-teacher-img.on { opacity: 1 !important; }
  .k-rocket, .k-bubble { display: none !important; }
  .k-brush path { stroke-dashoffset: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9) الموبايل — أغلب الأطفال بيفتحوا من موبايل الأهل
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  #hero { padding-bottom: 170px !important; }
  .k-hills svg { height: 120px; }
  .section-block { padding: 56px 5% !important; }
  #stats-strip { margin-top: -40px; padding-bottom: 40px !important; }
  #stats-strip > div > div { border-radius: 24px; padding: 18px 10px; }
  /* الضبابية أغلى حاجة على كارت الموبايل — بنقللها */
  #hero .blob { filter: blur(46px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10) مسرح صورة المدرّس

   كان مستطيلين كحلي مايلين ورا بعض بلون ثابت (#00103b) في الوضعين —
   يعني على الوضع النهاري بلوك أسود وسط سما فاتحة. والشكل نفسه «شركاتي»
   أكتر منه تعليمي لطفل.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── الحلقات ──
   اتنين بيلفّوا في اتجاهين متضادين بسرعات مختلفة. الحلقة الواحدة كانت
   بتبان زي إطار ساكن؛ الاتنين بيدوا إحساس مدار. وخفّفنا السُمك والوضوح
   عشان الحلقة تفضل خلفية مش عنصر بينافس الصورة. */
.k-stage-ring {
  position: absolute;
  width: min(96%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed var(--k-sun);
  opacity: .38;
  animation: k-spin 52s linear infinite;
}

.k-stage-ring-2 {
  width: min(108%, 428px);
  border-style: dotted;
  border-color: var(--k-sky);
  opacity: .24;
  animation: k-spin 76s linear infinite reverse;
}

html.dark .k-stage-ring { opacity: .22; }
html.dark .k-stage-ring-2 { opacity: .16; }

/* ── نمط جزيئي داخل المسرح ──
   نقط متصلة بشبكة خفيفة جدًا. الغرض منه يدّي الخلفية «ملمس» من غير ما
   تبقى عنصر تاني تشوفه — لو لاحظته يبقى قوي زيادة. */
.k-stage-pattern {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    radial-gradient(circle at 14px 14px, #fff 2.2px, transparent 2.4px),
    linear-gradient(115deg, transparent 47%, rgba(255,255,255,.5) 47.6%, transparent 48.2%),
    linear-gradient(65deg,  transparent 47%, rgba(255,255,255,.4) 47.6%, transparent 48.2%);
  background-size: 46px 46px, 46px 46px, 46px 46px;
  pointer-events: none;
}

/* ── بقعة الضوء ──
   المدرّس واقف في النص، فالضوء ورا منه بيرفعه عن الخلفية ويخلي عين
   الزائر تروح عليه أول حاجة. */
.k-spotlight {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 86%;
  height: 72%;
  transform: translateX(-50%);
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(ellipse at 50% 78%,
    rgba(255, 255, 255, .34) 0%,
    rgba(255, 255, 255, .12) 42%,
    rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
html.dark .k-spotlight {
  background: radial-gradient(ellipse at 50% 78%,
    rgba(125, 180, 255, .2) 0%,
    rgba(125, 180, 255, .07) 44%,
    rgba(125, 180, 255, 0) 70%);
}

/* علامة واحدة في الركن — بدل ستة عناصر مبعثرة */
.k-stage-mark {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  width: 62px;
  color: #fff;
  opacity: .17;
  animation: k-spin 60s linear infinite;
  pointer-events: none;
}

.k-stage {
  position: absolute;
  width: 90%;
  max-width: 340px;
  height: 100%;
  border-radius: 44px 44px 40px 40px;
  overflow: hidden;
  background: linear-gradient(165deg, #1e5fe0 0%, #1a56db 46%, #123f9f 100%);
  box-shadow:
    0 24px 60px rgba(20, 40, 74, .3),
    inset 0 2px 0 rgba(255, 255, 255, .22);
  /* ميل بسيط بيدي حياة من غير ما يبان مكسور زي الميل القديم */
  transform: rotate(-2deg);
}
html.dark .k-stage {
  background: linear-gradient(165deg, #16295c 0%, #101f47 46%, #0a1530 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .1);
}

/* ظل الأرض تحت المدرّس */
.k-ground {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 66%;
  max-width: 260px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 40, 74, .34), rgba(20, 40, 74, 0) 72%);
  z-index: 19;   /* تحت الصورة (z-20) وفوق المسرح */
  pointer-events: none;
}
html.dark .k-ground {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 72%);
}

/* ── البطاقات العائمة ── */
.k-badge {
  position: absolute;
  border-radius: 20px;
  padding: 14px 22px;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(20, 40, 74, .28);
  animation: k-bob 5s ease-in-out infinite;
}

.k-badge-1 {
  top: 52px;
  /* موجبة على الموبايل: القيمة السالبة كانت بتخرج البطاقة بره الشاشة
     وتتقص. على الشاشة الكبيرة فيه هامش فبتطلع بره المسرح عادي. */
  inset-inline-end: 6px;
  background: var(--k-brand);
  --r: -5deg;
  border: 2.5px solid rgba(255, 255, 255, .28);
}

.k-badge-2 {
  bottom: 30px;
  inset-inline-end: 2px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  background: #0d1b3e;
  border: 2.5px solid rgba(255, 255, 255, .14);
  --r: 3deg;
  animation-duration: 6.5s;
}
html.dark .k-badge-2 { background: #0a1226; }

.k-badge-1 p { margin: 0; font-size: clamp(.86rem, 2.5vw, 1.14rem); }
.k-badge-2 p { margin: 0; }

@media (min-width: 640px) {
  .k-badge-1 { top: 82px; inset-inline-end: -28px; }
  .k-badge-2 { bottom: 58px; inset-inline-end: -18px; }
}
@media (min-width: 1024px) {
  .k-badge-1 { inset-inline-end: -52px; }
  .k-badge-2 { inset-inline-end: -36px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11) شريط التنقّل

   كان شريط ممتد على عرض الشاشة بخلفية بيضا شبه شفافة وبلا حدود — على
   السما الملوّنة الجديدة بقى بيبان كأنه شريط أبيض مقطوع فوق الصفحة.
   وكان بلون واحد في الوضعين: خلفية بيضا ونص غامق، فعلى الوضع الليلي
   بيبقى شريط أبيض ناصع فوق صفحة ليل.

   بقى «حبّة» عايمة بهامش من الأطراف: بتحس إنها فوق الصفحة مش ملزوقة
   فيها، وبتسيب السما تبان من حواليها.
   ═══════════════════════════════════════════════════════════════════════════ */
.top-header {
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  height: 62px !important;
  border-radius: 22px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, .82) !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  box-shadow: 0 10px 30px rgba(20, 40, 74, .12) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: background .3s, border-color .3s, box-shadow .3s;
}

html.dark .top-header {
  background: rgba(19, 26, 38, .84) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}

@media (min-width: 1024px) {
  .top-header { top: 16px !important; left: 24px !important; right: 24px !important; height: 68px !important; }
}

/* اسم المنصة */
.top-header #logo-text-wrap span { color: var(--k-ink) !important; }
.top-header #logo-text-wrap p { color: var(--k-brand) !important; }
html.dark .top-header #logo-text-wrap p { color: #7fb0ff !important; }

/* ── الروابط ── */
.top-header .nav-link {
  border-radius: 14px !important;
  font-weight: 800 !important;
  color: var(--k-ink-2) !important;
  transition: background .18s, color .18s, transform .18s !important;
}
.top-header .nav-link:hover {
  color: var(--k-brand) !important;
  background: rgba(26, 86, 219, .09) !important;
  transform: translateY(-2px);
}
html.dark .top-header .nav-link { color: #b6c6e0 !important; }
html.dark .top-header .nav-link:hover { color: #9ec5ff !important; background: rgba(96, 165, 250, .14) !important; }

/* قايمة «المزيد» المنسدلة */
html.dark .nav-more-panel {
  background: #16203a !important;
  border-color: #25335c !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5) !important;
}
html.dark .nav-more-panel a { color: #b6c6e0 !important; }
html.dark .nav-more-panel a:hover { background: rgba(96, 165, 250, .14) !important; color: #9ec5ff !important; }

/* الأزرار المستديرة (المظهر، اللغة، القايمة) */
.top-header button,
.top-header #theme-toggle {
  border-radius: 14px !important;
}
html.dark .top-header #theme-toggle,
html.dark .top-header .lang-switch,
html.dark .top-header #menu-toggle {
  background: rgba(255, 255, 255, .08) !important;
  color: #e8eefb !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/* زرار الدخول */
.top-header #auth-cta a:last-child,
.top-header #my-account-cta {
  border-radius: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 0 var(--k-brand-dark), 0 10px 20px rgba(26, 86, 219, .26) !important;
  transition: transform .18s, box-shadow .18s !important;
}
.top-header #auth-cta a:last-child:hover,
.top-header #my-account-cta:hover { transform: translateY(-2px); }
.top-header #auth-cta a:last-child:active,
.top-header #my-account-cta:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--k-brand-dark) !important;
}

/* الهيرو لازم ينزل تحت الشريط العايم */
#hero { padding-top: 108px !important; }
@media (min-width: 1024px) { #hero { padding-top: 124px !important; } }

/* ── قايمة الموبايل ── */
#mobile-menu {
  background: var(--k-sky-2) !important;
  padding-top: 96px !important;
}
html.dark #mobile-menu { background: #0d1526 !important; }

#mobile-menu a {
  border-radius: 16px !important;
  font-weight: 900 !important;
  color: var(--k-ink) !important;
}
#mobile-menu a:hover { background: rgba(26, 86, 219, .09) !important; }
html.dark #mobile-menu a { color: #e8eefb !important; }
html.dark #mobile-menu a:hover { background: rgba(96, 165, 250, .14) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   12) الفوتر

   كان بلوك رمادي غامق (bg-slate-900) بلون ثابت في الوضعين وكل حاجة جواه
   في عمود واحد في النص. على السما الملوّنة الجديدة كان بيقطع الصفحة
   بحد مستقيم حاد.

   بقى بيبدأ بموجة بتوصله بالقسم اللي فوقه، وبحواف مستديرة من فوق،
   وبتلات أعمدة على الشاشة الكبيرة.
   ═══════════════════════════════════════════════════════════════════════════ */
#site-footer {
  position: relative;
  margin-top: 80px;
  padding: 76px 5% 34px !important;
  border: none !important;
  border-radius: 40px 40px 0 0 !important;
  background: linear-gradient(170deg, #12245180 0%, #0b1533 62%) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #b8c6e0 !important;
  overflow: visible !important;
}
html.dark #site-footer {
  background: linear-gradient(170deg, #0a1020cc 0%, #070c18 62%) !important;
}

/* ⚠️ كان فيه ::before بيرسم «موجة» فوق الفوتر توصله بالقسم اللي فوقه.
   الفكرة كانت زي تلال الهيرو، بس التنفيذ طلع نتوّة: عنصر بعرض الشاشة
   وارتفاع 48 بكسل بـborder-radius بيضاوي، وفوقه الحواف المستديرة بتاعة
   الفوتر نفسه — فالنتيجة كانت شكل مستطيل مستدير غامق طالع من نص الفوتر
   كأنه عنصر تاني منفصل.

   الحواف المستديرة بتاعة الفوتر لوحدها بتعمل نفس الغرض وأنضف. */

#site-footer #footer-title { color: #fff !important; font-weight: 900 !important; }
#site-footer #footer-desc { color: #93a6c8 !important; }

/* الروابط */
#site-footer a { border-radius: 12px; transition: color .18s, background .18s; }
#site-footer .flex.justify-center.gap-6 a {
  padding: 7px 15px;
  font-weight: 800;
  color: #b8c6e0 !important;
}
#site-footer .flex.justify-center.gap-6 a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .09);
}

#site-footer #footer-copyright { color: #7286aa !important; }

/* الفاصل تحت */
#site-footer .border-t { border-color: rgba(255, 255, 255, .1) !important; }
#site-footer .text-slate-500 { color: #7286aa !important; }

/* نجوم صغيرة في الفوتر — بتربطه بسما الصفحة */
#site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px 40px 0 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 24%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 32% 62%, rgba(255,255,255,.36), transparent),
    radial-gradient(2px 2px at 58% 18%, rgba(255,255,255,.44), transparent),
    radial-gradient(2px 2px at 78% 52%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 90% 30%, rgba(255,255,255,.42), transparent);
}

@media (max-width: 720px) {
  #site-footer {
    margin-top: 54px;
    padding: 54px 5% 28px !important;
    border-radius: 30px 30px 0 0 !important;
  }
  #site-footer::after { border-radius: 30px 30px 0 0; }
  .k-badge-1 { padding: 10px 15px; }
  .k-badge-2 { padding: 11px 14px; gap: 10px; }
  .k-badge-2 .w-12 { width: 40px !important; height: 40px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13) شريط الدعوة للتسجيل

   ═══ اللي اتغيّر ═══

   الأول: كان شريط ممتد بحد مستقيم من الطرف للطرف — على السما الملوّنة
   كان بيقطع الصفحة نصين. بقى بطاقة بحواف مستديرة وهامش.

   ودلوقتي: كان لسه بلوك تدرّج أزرق فيه عنوان وسطر وزرار واحد — شكل
   «بانر إعلان»، ومفيش فيه حاجة تخص العلوم ولا الصفحة اللي هو جواها.
   بقى فيه مدارات بتلف ورا الكلام، وشارة فوق العنوان،
   وزرارين (تسجيل + اعرف مستواك) عشان اللي لسه متردّد يلاقي خطوة أصغر
   من إنه يسجّل على طول، وتحتهم تلات جمل بتردّ على اعتراضات التسجيل.

   ⚠️ الألوان هنا مكتوبة صريح مش من التوكنز: الشريط غامق في الوضعين
      بالتصميم، فالنص جواه أبيض في الحالتين. التوكنز بتقلب مع الوضع
      وكانت هتخلي النص غامق على خلفية غامقة.
   ═══════════════════════════════════════════════════════════════════════════ */
#cta-band {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1180px;
  width: calc(100% - 32px);
  border-radius: 36px;
  padding: 66px 26px 60px;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(to bottom right, #1e429f, #14245c);
  box-shadow: 0 22px 50px rgba(20, 40, 74, .22);
}
html.dark #cta-band {
  background-image: linear-gradient(to bottom right, #16295c, #101f47);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}

/* نجوم خفيفة — بتربط الشريط بسما الصفحة */
#cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 14% 26%, rgba(255,255,255,.45), transparent),
    radial-gradient(2px 2px at 38% 68%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 66% 22%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 86% 58%, rgba(255,255,255,.28), transparent);
}

/* ── المدارات ──
   تلات حلقات بتلف بسرعات مختلفة. مقصود إنها باهتة جدًا: لو العين
   لاحظتها تبقى بتنافس الكلام. */
.k-cta-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.k-cta-orbit {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border: 2px dashed rgba(255, 255, 255, .16);
  border-radius: 50%;
  animation: k-spin 44s linear infinite;
}
.k-cta-orbit-2 {
  width: 620px; height: 620px; margin: -310px 0 0 -310px;
  border-style: dotted;
  border-color: rgba(255, 255, 255, .11);
  animation-duration: 66s;
  animation-direction: reverse;
}
.k-cta-orbit-3 {
  width: 840px; height: 840px; margin: -420px 0 0 -420px;
  border-color: rgba(255, 255, 255, .07);
  animation-duration: 92s;
}

.k-cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

.k-cta-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .24);
  font-size: .86rem;
  font-weight: 900;
  color: #fff;
}

.k-cta-title {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 900;
  line-height: 1.35;
  color: #fff;
}

.k-cta-lead {
  margin: 0 auto 32px;
  max-width: 540px;
  font-size: clamp(.98rem, 2.6vw, 1.14rem);
  font-weight: 700;
  line-height: 2;
  color: #c7d9ff;
}

.k-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* نفس لغة أزرار الهيرو: ظل صلب تحت الزرار بيتضغط لما تدوس */
.k-cta-btn {
  display: inline-block;
  padding: 18px 34px;
  border-radius: 20px;
  background: #fff;
  color: #14245c;
  font-size: clamp(.95rem, 2.4vw, 1.1rem);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .22), 0 14px 26px rgba(0, 0, 0, .24);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
.k-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 9px 0 rgba(0, 0, 0, .22), 0 20px 32px rgba(0, 0, 0, .28); }
.k-cta-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .22); }

/* الزرار التاني «شبح» — لازم يبان إنه الخيار الأخف مش نفس وزن الأول */
.k-cta-btn-2 {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .32);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .16);
}
.k-cta-btn-2:hover { background: rgba(255, 255, 255, .17); box-shadow: 0 9px 0 rgba(0, 0, 0, .16); }
.k-cta-btn-2:active { box-shadow: 0 2px 0 rgba(0, 0, 0, .16); }

.k-cta-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.k-cta-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 800;
  color: #c7d9ff;
}

@media (max-width: 720px) {
  #cta-band {
    width: calc(100% - 20px);
    border-radius: 28px;
    padding: 48px 18px 42px;
  }
  .k-cta-btn { padding: 16px 24px; }
  .k-cta-actions { flex-direction: column; align-items: stretch; }
  .k-cta-points { flex-direction: column; align-items: center; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14) صفحة «اعرف مستواك» — بوابة الدخول

   ═══ ليه كل حاجة هنا ═══

   الصفحة كان عندها تصميم كامل خاص بيها جوه <style> بتاعها: ألوان في
   :root، وخلفية صورة ثابتة، وكل نص بلون أبيض مثبّت — لأنها كانت
   مصمّمة على خلفية غامقة واحدة.

   لما ربطناها بهوية الصفحة الرئيسية بقى فيه مصدرين للتنسيق، والنتيجة
   كانت نصوص بيضا على بطاقة بيضا في الوضع النهاري:

     • أسماء الاختبارات (.exam-opt .t) اختفت خالص
     • مربع المعلومات (.g-infobox) نصّه أبيض على تدرّج فاتح
     • .exam-opt .m نفس الحكاية

   فكل التنسيق البصري للبوابة اتجمّع هنا — مكان واحد عنده توكنز
   للوضعين. الـstyle اللي في placement.html فيه بنية بس.

   ⚠️ الكلاسات g-* والمعرّفات كلها زي ما هي — js/placement.js بيمسكها
      بالاسم، وأي تغيير فيها بيوقف الاختبار من غير خطأ واضح.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── التخطيط ──────────────────────────────────────────────────────────── */
#gate {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 78px 16px 40px;
  background: transparent !important;
}

/* الغلاف: الفورم يمين والمدرّس شمال — **فيزيائي في اللغتين**.
   لو استخدمنا inset-inline أو ترتيب الشبكة كان هيقلب مع الإنجليزي
   ويقع المدرّس فوق الفورم. نفس سبب #lang-bar بالظبط. */
.g-shell {
  position: relative;
  width: 100%;
  max-width: 1180px;
}

.g-stage-col {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 48%;
  max-width: 560px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}

/* غلاف المسرح — قطع المسرح كلها absolute ومحتاجة أب بمقاس صريح.
   في الصفحة الرئيسية المقاس جاي من كلاسات Tailwind؛ هنا بنديه صريح
   عشان نفس القطع تشتغل في الصفحتين. */
.k-stage-wrap {
  position: relative;
  width: min(100%, 400px);
  height: min(64vh, 470px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* طبقة توسيط قطع المسرح.
   ⚠️ قطع المسرح (.k-stage و .k-stage-ring) كلها absolute من غير
   top/left — يعني مكانها بيتحدّد من «الموضع الساكن» جوه الأب، وده
   بيتحكم فيه توسيط الأب. الغلاف فوق بيرصّ الصورة على flex-end، فلو
   القطع قعدت فيه مباشرة كانت هتقع تحت. الصفحة الرئيسية عندها نفس
   الطبقة بكلاسات Tailwind (absolute inset-0 flex items-center
   justify-center). */
.k-stage-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

/* صورة المدرّس — بتطفو ببطء.
   بتبان بعد ما تتحمّل بس (.on بيضيفها السكريبت)، فلو مفيش صورة
   متسجّلة المسرح يفضل نضيف من غير مربع فاضي. */
.k-teacher-img {
  position: relative;
  z-index: 20;
  width: 118%;
  max-width: none;
  /* ⚠️ الصورة بتيجي من لوحة الأدمن، يعني مقاسها مش مضمون. 118% مظبوطة
     لصورة مفرّغة طولية زي اللي في الصفحة الرئيسية؛ لو الأدمن رفع صورة
     عرضية من غير السقف ده بتطلع بره المسرح وتغطي نص الصفحة. */
  max-height: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom;
  margin-bottom: -6px;
  opacity: 0;
  transition: opacity .5s ease-out;
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .38));
  animation: k-teacher-float 6.5s ease-in-out infinite;
}
.k-teacher-img.on { opacity: 1; }

@keyframes k-teacher-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* شارة واحدة على المسرح — الصفحة دي فورم، مش محتاجة زحمة شارات الهيرو */
.k-stage-chip {
  position: absolute;
  bottom: 14px;
  left: -10px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--k-card);
  border: 2px solid var(--k-card-bd);
  border-radius: 18px;
  padding: 11px 16px;
  box-shadow: 0 14px 30px rgba(20, 40, 74, .18);
  animation: k-bob 5.5s ease-in-out infinite;
}
.k-stage-chip span { font-size: 1.15rem; line-height: 1; }
.k-stage-chip b { font-size: .84rem; font-weight: 900; color: var(--k-ink); white-space: nowrap; }
html.dark .k-stage-chip { box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }

/* ── البطاقة ──────────────────────────────────────────────────────────── */
/* margin-left:auto فيزيائي — بيثبّت البطاقة يمين في اللغتين */
.gate-card {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  margin-left: auto;
  margin-right: 0;
  background: var(--k-card) !important;
  border: 2px solid var(--k-card-bd) !important;
  border-radius: 30px !important;
  padding: 30px 26px 26px !important;
  box-shadow: 0 22px 54px rgba(20, 40, 74, .14) !important;
  animation: k-page-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
html.dark .gate-card { box-shadow: 0 22px 54px rgba(0, 0, 0, .5) !important; }

@keyframes k-page-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

/* العناصر بتدخل ورا بعض — بتدي إحساس إن الصفحة بتتبني قدامك */
.gate-card > * { animation: k-page-in .6s ease-out both; }
.gate-card > *:nth-child(1) { animation-delay: .05s; }
.gate-card > *:nth-child(2) { animation-delay: .12s; }
.gate-card > *:nth-child(3) { animation-delay: .19s; }
.gate-card > *:nth-child(4) { animation-delay: .26s; }
.gate-card > *:nth-child(n+5) { animation-delay: .32s; }

.brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.brand-mark {
  width: 48px; height: 48px;
  border-radius: 16px;
  background: var(--k-brand);
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-name { font-size: 1.05rem; font-weight: 900; color: var(--k-ink); line-height: 1.3; }
.brand-sub { font-size: .78rem; font-weight: 800; color: var(--k-brand); }
html.dark .brand-sub { color: #7fb0ff; }

.g-badge {
  display: inline-block;
  background: #fff4d6;
  color: #a1690b;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: .84rem;
  font-weight: 900;
  margin-bottom: 14px;
}
html.dark .g-badge { background: #3a2f12; color: #fbbf24; }

.g-title {
  font-size: clamp(1.7rem, 6vw, 2.3rem) !important;
  font-weight: 900 !important;
  color: var(--k-ink) !important;
  margin: 0 0 10px !important;
  line-height: 1.3;
}
.g-title span { color: var(--k-brand); }
html.dark .g-title span { color: #7fb0ff; }

.g-sub {
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.9 !important;
  color: var(--k-ink-2) !important;
  margin: 0 0 20px !important;
}

/* ── الخانات ──────────────────────────────────────────────────────────── */
.g-field { margin-bottom: 14px; }

.g-label {
  display: block;
  font-size: .87rem !important;
  font-weight: 900 !important;
  color: var(--k-ink) !important;
  margin-bottom: 7px;
}

.g-input {
  width: 100%;
  border: 2px solid var(--k-card-bd) !important;
  border-radius: 16px !important;
  padding: 14px 15px !important;
  background: var(--k-card) !important;
  color: var(--k-ink) !important;
  font-family: inherit !important;
  font-size: 1rem;
  font-weight: 700 !important;
  outline: none;
  transition: border-color .18s, box-shadow .18s !important;
}
.g-input:focus {
  outline: none !important;
  border-color: var(--k-brand) !important;
  box-shadow: 0 0 0 4px rgba(26, 86, 219, .14) !important;
}
.g-input::placeholder { color: #9aa8c0; font-weight: 600; }
html.dark .g-input::placeholder { color: #5d6b84; }
.g-input.err { border-color: #ef4444 !important; }

.g-note {
  text-align: center;
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: var(--k-ink-2) !important;
  margin-top: 10px;
}

.g-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 16px;
  cursor: pointer;
  font-size: .85rem !important;
  font-weight: 700 !important;
  line-height: 1.8;
  color: var(--k-ink-2) !important;
}
.g-consent input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--k-brand);
  cursor: pointer;
}

/* ── مربع المعلومات والرسايل ──────────────────────────────────────────── */
/* 🐛 ده كان مصدر «النص الباهت» في الوضع النهاري: اللون كان
   rgba(255,255,255,.86) مثبّت من تصميم الصفحة القديم الغامق. */
.g-infobox {
  background: var(--k-sky-2) !important;
  border: 2px solid var(--k-card-bd) !important;
  border-radius: 16px !important;
  padding: 14px 17px !important;
  margin-bottom: 16px;
  font-size: .86rem !important;
  font-weight: 800 !important;
  line-height: 2 !important;
  color: var(--k-ink) !important;
}
.g-infobox strong { color: var(--k-brand) !important; font-weight: 900; }
html.dark .g-infobox { background: #0f1419 !important; border-color: #25335c !important; }
html.dark .g-infobox strong { color: #7fb0ff !important; }

.g-msg {
  border-radius: 16px !important;
  padding: 12px 15px !important;
  margin-bottom: 14px;
  font-size: .85rem !important;
  font-weight: 800 !important;
  line-height: 1.8 !important;
  border: 1.5px solid;
}
.g-msg.warn  { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.g-msg.error { background: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important; }
.g-msg.ok    { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; }
html.dark .g-msg.warn  { background: #2a2315 !important; border-color: #5a4a1f !important; color: #fbbf24 !important; }
html.dark .g-msg.error { background: #2a1717 !important; border-color: #5a2020 !important; color: #fca5a5 !important; }
html.dark .g-msg.ok    { background: #10241a !important; border-color: #1f5a37 !important; color: #86efac !important; }

/* ── الزرار — نفس لغة أزرار الصفحة الرئيسية ───────────────────────────── */
.g-btn {
  width: 100%;
  border-radius: 20px !important;
  padding: 17px !important;
  background: var(--k-brand) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 900 !important;
  font-size: 1.06rem !important;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 7px 0 var(--k-brand-dark), 0 16px 28px rgba(26, 86, 219, .3) !important;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s !important;
}
.g-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 0 var(--k-brand-dark) !important; }
.g-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 var(--k-brand-dark) !important; }
.g-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: 0 4px 0 var(--k-brand-dark) !important; }

/* ── شريط اللغة — شمال دايمًا (فيزيائي) ───────────────────────────────── */
#lang-bar {
  position: fixed !important;
  top: 14px;
  left: 14px;
  z-index: 40;
  display: flex;
  gap: 8px;
}
#lang-bar a, #lang-bar button {
  background: var(--k-card) !important;
  border: 2px solid var(--k-card-bd) !important;
  color: var(--k-ink) !important;
  border-radius: 14px !important;
  padding: 9px 15px !important;
  font-family: inherit !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s, border-color .18s;
}
#lang-bar a:hover, #lang-bar button:hover { transform: translateY(-2px); border-color: var(--k-brand) !important; }

/* ── بطاقات اختيار الاختبار (بيولّدها js/placement.js) ────────────────── */
.exam-pick { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }

.exam-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 18px !important;
  border: 2px solid var(--k-card-bd) !important;
  background: var(--k-card) !important;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), border-color .2s, background .2s !important;
}
.exam-opt:hover { transform: translateY(-3px); border-color: var(--k-brand) !important; }
.exam-opt.on { border-color: var(--k-brand) !important; background: var(--k-sky-2) !important; }
html.dark .exam-opt.on { background: #101a33 !important; }

.exam-opt input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--k-brand);
  cursor: pointer;
}

/* 🐛 دول الاتنين كانوا #fff مثبّت — يعني أبيض على بطاقة بيضا في الوضع
   النهاري، فالبطاقة كانت بتبان فاضية تمامًا. */
.exam-opt .t { font-size: .92rem; font-weight: 900; color: var(--k-ink) !important; }
.exam-opt .m { font-size: .78rem; font-weight: 700; color: var(--k-ink-2) !important; margin-top: 3px; }

/* ── الموبايل ─────────────────────────────────────────────────────────── */
/* المسرح بيختفي: مفيش «شمال» على شاشة ضيقة، ولو حطّيناه فوق البطاقة
   كان هيدفع الفورم تحت الطيّة. خلفية العلوم بتفضل ظاهرة. */
@media (max-width: 980px) {
  .g-stage-col { display: none; }
  .gate-card { margin-inline: auto; width: 100%; max-width: 560px; }
}

@media (max-width: 520px) {
  #gate { padding: 70px 12px 30px; }
  .gate-card { padding: 24px 18px 22px !important; border-radius: 24px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15) صفحة متابعة أولياء الأمور

   الصفحة Tailwind بألوان فاتحة مثبتة (bg-white و bg-slate-50 …). القواعد
   هنا بتوصّلها بنفس الهوية من غير ما تلمس الماركب — المعرّفات pp-* كلها
   بيمسكها الجافاسكريبت.
   ═══════════════════════════════════════════════════════════════════════════ */

body.pp-page { background: var(--k-sky-2) !important; }

/* الشريط العلوي: حبّة عايمة زي الصفحة الرئيسية */
.pp-page > header {
  position: sticky !important;
  top: 12px !important;
  z-index: 40 !important;
  margin: 12px 12px 0 !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 10px 30px rgba(20, 40, 74, .12) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
html.dark .pp-page > header {
  background: rgba(19, 26, 38, .84) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}
.pp-page > header p { color: var(--k-ink) !important; }
.pp-page > header .text-xs { color: var(--k-brand) !important; }
html.dark .pp-page > header .text-xs { color: #7fb0ff !important; }
.pp-page > header a[href="/"],
.pp-page > header button {
  border-radius: 14px !important;
  border-width: 2px !important;
  font-weight: 900 !important;
}

/* المحتوى فوق طبقة الخلفية */
.pp-page > main,
.pp-page > section,
#pp-login, #pp-dash { position: relative; z-index: 1; }

/* ── البطاقات ──
   الصفحة مبنية على bg-white و rounded-* من Tailwind. المحدِّدات دي
   بتلفّها كلها من غير ما نعدّل كلاس واحد في الماركب. */
.pp-page .bg-white,
.pp-page .bg-slate-50 {
  background: var(--k-card) !important;
  border-color: var(--k-card-bd) !important;
  color: var(--k-ink) !important;
}

.pp-page .rounded-2xl,
.pp-page .rounded-xl { border-radius: 22px !important; }

.pp-page .shadow,
.pp-page .shadow-sm,
.pp-page .shadow-md,
.pp-page .shadow-lg {
  box-shadow: 0 10px 26px rgba(20, 40, 74, .1) !important;
}
html.dark .pp-page .shadow,
html.dark .pp-page .shadow-sm,
html.dark .pp-page .shadow-md,
html.dark .pp-page .shadow-lg {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .42) !important;
}

.pp-page .text-slate-800, .pp-page .text-slate-700 { color: var(--k-ink) !important; }
.pp-page .text-slate-500, .pp-page .text-slate-600, .pp-page .text-slate-400 { color: var(--k-ink-2) !important; }
.pp-page .border-slate-200, .pp-page .border-slate-100 { border-color: var(--k-card-bd) !important; }

/* الخانات والأزرار */
.pp-page input[type="text"],
.pp-page input[type="tel"],
.pp-page input[type="password"],
.pp-page select {
  border: 2px solid var(--k-card-bd) !important;
  border-radius: 16px !important;
  background: var(--k-card) !important;
  color: var(--k-ink) !important;
  font-weight: 700 !important;
}
.pp-page input:focus, .pp-page select:focus {
  outline: none !important;
  border-color: var(--k-brand) !important;
  box-shadow: 0 0 0 4px rgba(26, 86, 219, .14) !important;
}

#pp-submit {
  border-radius: 20px !important;
  font-weight: 900 !important;
  box-shadow: 0 7px 0 var(--k-brand-dark), 0 16px 28px rgba(26, 86, 219, .3) !important;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s !important;
}
#pp-submit:hover:not(:disabled) { transform: translateY(-3px); }
#pp-submit:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 var(--k-brand-dark) !important; }

/* بطاقات الأرقام بتترجرج شوية عند المرور */
#pp-dash .bg-white { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
#pp-dash .bg-white:hover { transform: translateY(-5px); }

/* دخول الأقسام ورا بعض */
#pp-login, #pp-dash > * { animation: k-page-in .6s ease-out both; }
#pp-dash > *:nth-child(2) { animation-delay: .07s; }
#pp-dash > *:nth-child(3) { animation-delay: .14s; }
#pp-dash > *:nth-child(n+4) { animation-delay: .2s; }

/* ⚠️ احترام «تقليل الحركة» في الصفحتين */
@media (prefers-reduced-motion: reduce) {
  .gate-card, .gate-card > *, #pp-login, #pp-dash > * {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
  }
  #pp-dash .bg-white:hover, #exam-pick > *:hover { transform: none; }
}