* §23  ULTRA SCI-FI POLISH (homepage — additive, fully scoped to .lp-* )
 * ────────────────────────────────────────────────────────────────────────────
 * طبقة "بوابة تعليمية مستقبلية" فوق التصميم الحالي:
 *   • إصلاح قص النقاط/الحروف العربية في "منصة حمدان" والعناوين المُدرَّجة
 *   • طبقات ambient أعمق (شبكة نجوم، شفق، تيار بيانات، Mesh)
 *   • Glassmorphism أعمق + Glow أقوى للنصوص الفاخرة
 *   • Holographic sweep على البطاقات + Border rotating glow على زر CTA
 *   • متغيرات --homepage-* لتسهيل تغيير الثيم لاحقاً
 *   • كل selectors تبدأ بـ .lp-  →  صفر تأثير على index.html / login / dashboard
 *   • يحترم prefers-reduced-motion
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── (a) Homepage tokens — scoped via اسم --homepage-* لتسهيل التخصيص ───── */
:root {
  --homepage-bg:           #050813;
  --homepage-bg-soft:      #07101e;
  --homepage-card:         rgba(14, 22, 38, 0.55);
  --homepage-card-bord:    rgba(150, 180, 230, 0.10);
  --homepage-card-bord-hi: rgba(150, 180, 230, 0.20);
  --homepage-primary:      var(--primary);
  --homepage-electric:     #38bdf8;        /* أزرق كهربائي */
  --homepage-violet:       #8b5cf6;        /* بنفسجي ناعم */
  --homepage-sky:          #c5d4f0;        /* سماوي/فضي */
  --homepage-glow:         color-mix(in oklab, var(--primary) 38%, transparent);
  --homepage-glow-soft:    color-mix(in oklab, var(--primary) 16%, transparent);
  --homepage-violet-glow:  color-mix(in oklab, #8b5cf6 26%, transparent);
}
:root[data-theme="light"] {
  --homepage-bg:           var(--bg-page);
  --homepage-bg-soft:      var(--bg-page-soft);
  --homepage-card:         #ffffff;
  --homepage-card-bord:    rgba(30,58,138,0.10);
  --homepage-card-bord-hi: rgba(30,58,138,0.22);
  --homepage-electric:     #2563eb;
  --homepage-violet:       #6d28d9;
  --homepage-sky:          #60a5fa;
  --homepage-glow:         color-mix(in oklab, var(--primary) 22%, transparent);
  --homepage-glow-soft:    color-mix(in oklab, var(--primary) 10%, transparent);
  --homepage-violet-glow:  color-mix(in oklab, #6d28d9 14%, transparent);
}


/* ─── (b) إصلاح الكتابة العربية: نقاط ن / ة / ج لم تعد تُقص ───────────── */
/*
 * السبب: line-height: 0.98 على .lp-h1 + display:inline-block على الـ spans
 * المُدرَّجة بـ background-clip:text → صندوق الـ inline-block يقص النقاط
 * العلوية. الحل: line-height مريح للعربية + padding-block للسماح بظهور
 * النقاط داخل صندوق الـ glyph، مع text-rendering للوضوح.
 */
.lp-h1 {
  line-height: 1.18 !important;
  letter-spacing: -0.022em !important;
  padding-block: 0.08em;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  word-spacing: 0.06em;
}
.lp-h1 .lp-h1-mark,
.lp-h1 .lp-h1-accent {
  display: inline-block;
  line-height: 1.18;
  padding-block: 0.10em;
  padding-inline: 0.02em;
  -webkit-text-stroke: 0.005em transparent;
  vertical-align: top;
}
/* underline بسيط أبقى الموضع لكن أبعده قليلاً عن النقاط السفلية */
.lp-h1 .lp-h1-accent::after {
  bottom: 0;
}

/* halo فاخر خلف العنوان الرئيسي */
.lp-h1 .lp-h1-accent {
  filter: drop-shadow(0 0 18px color-mix(in oklab, var(--homepage-primary) 28%, transparent));
}

/* اسم المنصة أعلى الـ nav: نفس مبدأ الإصلاح + لمسة فخمة */
.lp-logo > span {
  line-height: 1.55;
  padding-block: 2px;
  padding-inline-start: 2px;
  letter-spacing: -0.018em;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  text-shadow: 0 0 14px color-mix(in oklab, var(--homepage-primary) 18%, transparent);
}

/* اسم المنصة أسفل الـ footer */
.lp-footer-brand > span {
  line-height: 1.5;
  padding-block: 2px;
  letter-spacing: -0.012em;
}

/* "حمدان" المُدرَّج في الـ credits — كان يُقص لأنه gradient-clipped */
.lp-credits-text strong {
  display: inline-block;
  padding-block: 0.08em;
  line-height: 1.45;
}

/* عناوين h2 المُدرَّجة (calm + قسم تعلّم بدون تشتت) */
.lp-calm-h {
  display: inline-block;
  padding-block: 0.10em;
  line-height: 1.18 !important;
}

/* عداد الأرقام: تجنّب قص أرقام التابيولار */
.lp-count {
  padding-block: 0.04em;
}


/* ─── (c) Ambient sci-fi backdrop — شبكة بيانات + شفق + Scan خفيف ───── */

/* (c.1) شبكة هولوجرامية أوضح (تعزز التصميم الحالي بدون استبدال) */
.lp-bg::after {
  background-size: 56px 56px;
  opacity: 0.7;
  animation: lpGridDrift 60s linear infinite;
}
:root[data-theme="light"] .lp-bg::after { opacity: 0.5; animation-duration: 80s; }
@keyframes lpGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 56px 56px; }
}

/* (c.2) Aurora veil — شفق ضوئي يتحرك ببطء فوق الـ hero */
.lp-bg::before {
  background:
    radial-gradient(60% 50% at 50% 0%, var(--homepage-glow) 0%, transparent 65%),
    radial-gradient(40% 40% at 88% 14%, var(--homepage-violet-glow) 0%, transparent 70%),
    radial-gradient(50% 40% at 10% 80%, var(--homepage-glow-soft) 0%, transparent 70%),
    radial-gradient(28% 28% at 70% 60%, var(--homepage-violet-glow) 0%, transparent 70%);
}

/* (c.3) Scan line — يمر عبر الـ hero مرة كل 14 ثانية، خفيف جداً */
.lp-hero {
  isolation: isolate;
  position: relative;
}
.lp-hero > .lp-wrap::after {
  content: "";
  position: absolute;
  top: -10%; left: 0; right: 0;
  height: 110%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--homepage-electric) 14%, transparent) 48%,
    color-mix(in oklab, var(--homepage-electric) 20%, transparent) 50%,
    color-mix(in oklab, var(--homepage-electric) 14%, transparent) 52%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: lpHeroScan 14s ease-in-out infinite;
  animation-delay: 4s;
}
:root[data-theme="light"] .lp-hero > .lp-wrap::after { mix-blend-mode: multiply; opacity: 0; }
@keyframes lpHeroScan {
  0%, 100% { transform: translateY(-110%); opacity: 0; }
  6%       { opacity: 0.55; }
  10%      { transform: translateY(110%); opacity: 0; }
  11%, 100% { transform: translateY(110%); opacity: 0; }
}

/* (c.4) Edge data-streams — خطوط ضوئية على حواف الصفحة (Desktop فقط) */
.lp-bg .lp-particles::before,
.lp-bg .lp-particles::after {
  content: "";
  position: absolute;
  top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--homepage-electric) 35%, transparent) 30%,
    color-mix(in oklab, var(--homepage-primary)  35%, transparent) 70%,
    transparent 100%);
  opacity: 0.45;
  filter: blur(0.5px);
}
.lp-bg .lp-particles::before { left: 4%; animation: lpEdgeStream 14s ease-in-out 0s infinite; }
.lp-bg .lp-particles::after  { right: 4%; animation: lpEdgeStream 16s ease-in-out 2s infinite reverse; }
@keyframes lpEdgeStream {
  0%, 100% { transform: scaleY(0.6); opacity: 0.25; }
  50%      { transform: scaleY(1.0); opacity: 0.55; }
}

/* (c.5) Orb-4 — كرة بنفسجية إضافية للعمق */
.lp-bg .lp-orb-3::after {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--homepage-violet) 0%, transparent 65%);
  filter: blur(60px);
  opacity: 0.22;
  pointer-events: none;
  animation: lpOrb3 40s ease-in-out infinite reverse;
}
:root[data-theme="light"] .lp-bg .lp-orb-3::after { opacity: 0.10; }


/* ─── (d) Hero title — حلقة هالة فاخرة خلف "منصة حمدان" ───────────────── */
.lp-hero-text {
  position: relative;
  z-index: 2;
}
.lp-hero-text::before {
  content: "";
  position: absolute;
  top: 35%;
  inset-inline-start: -15%;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--homepage-primary) 22%, transparent) 0%,
    color-mix(in oklab, var(--homepage-violet)  14%, transparent) 40%,
    transparent 70%);
  filter: blur(60px);
  z-index: -1;
  opacity: 0.85;
  pointer-events: none;
  animation: lpTitleHalo 12s ease-in-out infinite;
}
:root[data-theme="light"] .lp-hero-text::before { opacity: 0.45; }
@keyframes lpTitleHalo {
  0%, 100% { transform: translate(0, 0)    scale(1);    opacity: 0.85; }
  50%      { transform: translate(20px, -10px) scale(1.08); opacity: 1; }
}


/* ─── (e) Nav glass — أعمق، مع توهج على الحافة السفلية ──────────────── */
.lp-nav {
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  background: color-mix(in oklab, var(--bg-page) 62%, transparent);
  box-shadow:
    0 1px 0 var(--homepage-card-bord-hi) inset,
    0 8px 32px -16px rgba(0,0,0,0.45);
  position: sticky; top: 0; z-index: 30;
}
.lp-nav::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--homepage-primary) 55%, transparent),
    transparent);
  opacity: 0.55;
  pointer-events: none;
}

/* أيقونة الشعار في nav: لمعة دوّارة خفيفة */
.lp-logo-mark {
  position: relative;
  overflow: hidden;
}
.lp-logo-mark::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,255,255,0.30) 40deg,
    transparent 80deg,
    transparent 360deg);
  animation: lpLogoSpin 6s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}
.lp-logo-mark > * { position: relative; z-index: 1; }
@keyframes lpLogoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ─── (f) Eyebrow badge — نبض ضوئي مزدوج "منصة ذكية" ─────────────────── */
.lp-eyebrow {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--homepage-primary) 14%, var(--surface-1)),
    var(--surface-1));
  border-color: color-mix(in oklab, var(--homepage-primary) 28%, var(--hairline-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 20px -10px var(--homepage-glow);
}
.lp-eyebrow-dot {
  background: var(--homepage-electric);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--homepage-electric) 22%, transparent),
    0 0 14px var(--homepage-electric);
}


/* ─── (g) Primary button — Rotating border + توهج طاقة ─────────────── */
.lp-btn-primary {
  background: linear-gradient(180deg,
    color-mix(in oklab, white 16%, var(--primary)) 0%,
    var(--primary) 50%,
    var(--primary-deep) 100%);
  background-size: 200% 200%;
  position: relative;
  z-index: 1;
}
.lp-btn-primary > * { position: relative; z-index: 2; }
.lp-btn-primary::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
    var(--homepage-primary),
    var(--homepage-electric),
    var(--homepage-violet),
    var(--homepage-primary));
  z-index: 0;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
  animation: lpBtnRing 6s linear infinite;
}
.lp-btn-primary:hover::after { opacity: 0.8; }
@keyframes lpBtnRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* داخل الزر يبقى نظيفاً: نضيف طبقة خلفية صلبة فوق الـ ring المضيء */
.lp-btn-primary {
  isolation: isolate;
}
.lp-btn-primary::before { z-index: 3; }   /* sheen يظل في القمة */


/* ─── (h) Ghost button — حدّ بنفسجي عند hover ──────────────────────── */
.lp-btn-ghost {
  position: relative;
}
.lp-btn-ghost::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--homepage-electric) 0%, transparent),
    color-mix(in oklab, var(--homepage-electric) 40%, transparent) 50%,
    color-mix(in oklab, var(--homepage-violet) 0%, transparent));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.lp-btn-ghost:hover::after { opacity: 1; }


/* ─── (i) Trust chips — Glow حول الـ check ────────────────────────── */
.lp-trust-chip {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--homepage-primary) 6%, var(--surface-1)),
    var(--surface-1));
  border-color: color-mix(in oklab, var(--homepage-primary) 20%, var(--hairline));
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s ease;
}
.lp-trust-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--homepage-primary) 42%, var(--hairline));
  box-shadow: 0 6px 18px -10px var(--homepage-glow);
}
.lp-trust-chip i {
  filter: drop-shadow(0 0 6px var(--homepage-primary));
}


/* ─── (j) Section kicker — توهج أوضح للعنوان الفرعي ────────────────── */
.lp-kicker {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--homepage-primary) 14%, transparent),
    color-mix(in oklab, var(--homepage-violet)  10%, transparent));
  border-color: color-mix(in oklab, var(--homepage-primary) 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 8%, transparent),
    0 4px 14px -8px var(--homepage-glow);
  text-shadow: 0 0 12px color-mix(in oklab, var(--homepage-primary) 18%, transparent);
}


/* ─── (k) Bento + Feature cards — Holographic sweep + Glass refinement */
.lp-bento-card,
.lp-feature {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--homepage-primary) 4%, var(--surface-2)),
      var(--surface-1)),
    var(--bg-card);
  border-color: var(--homepage-card-bord);
}
:root[data-theme="light"] .lp-bento-card,
:root[data-theme="light"] .lp-feature {
  background: #ffffff;
}

/* لمعة Holographic sweep تمر مرّة عند hover */
.lp-bento-card::before,
.lp-feature::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 50%;
  background: linear-gradient(110deg,
    transparent 0%,
    color-mix(in oklab, var(--homepage-electric) 12%, transparent) 45%,
    color-mix(in oklab, var(--homepage-violet)   10%, transparent) 55%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.9s var(--ease-soft);
  pointer-events: none;
  z-index: 1;
}
.lp-bento-card > *,
.lp-feature > * { position: relative; z-index: 2; }
.lp-bento-card:hover::before,
.lp-feature:hover::after { left: 130%; }

.lp-bento-card:hover,
.lp-feature:hover {
  border-color: color-mix(in oklab, var(--homepage-primary) 42%, var(--homepage-card-bord-hi));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 26px 60px -22px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in oklab, var(--homepage-primary) 24%, transparent),
    0 0 32px -8px var(--homepage-glow);
}

/* أيقونات Bento + Feature: gradient أعمق + توهج */
.lp-bento-icon,
.lp-feature-icon {
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--homepage-primary) 30%, transparent),
      color-mix(in oklab, var(--homepage-violet) 12%, transparent));
  border-color: color-mix(in oklab, var(--homepage-primary) 32%, transparent);
}


/* ─── (l) Portal core — أكثر حيوية وعمقاً ──────────────────────────── */
.lp-portal-core {
  background:
    radial-gradient(circle at 30% 28%,
      color-mix(in oklab, white 38%, var(--homepage-electric)) 0%,
      var(--homepage-primary) 45%,
      var(--homepage-violet) 100%);
  box-shadow:
    inset 0 4px 16px rgba(255,255,255,0.32),
    inset 0 -8px 22px rgba(0,0,0,0.22),
    0 0 80px var(--homepage-glow),
    0 0 160px var(--homepage-violet-glow);
}
:root[data-theme="light"] .lp-portal-core {
  background:
    radial-gradient(circle at 30% 28%,
      #ffffff 0%,
      #eaf2ff 55%,
      #cfdcff 100%);
}

/* Orbit pills — نقطة سماوية ساطعة */
.lp-orbit > .lp-pill {
  border-color: color-mix(in oklab, var(--homepage-primary) 32%, var(--homepage-card-bord-hi));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 30px -10px rgba(0,0,0,0.50),
    0 0 0 1px color-mix(in oklab, var(--homepage-primary) 22%, transparent),
    0 0 18px -6px var(--homepage-glow-soft);
}
.lp-orbit > .lp-pill .lp-pill-dot {
  background: var(--homepage-electric);
  box-shadow: 0 0 12px var(--homepage-electric);
}


/* ─── (m) Journey step number — لمعة Premium وحلقة طاقة أوضح ──────── */
.lp-step-num {
  background:
    radial-gradient(circle at 35% 30%,
      color-mix(in oklab, white 28%, var(--homepage-electric)),
      var(--homepage-primary) 50%,
      var(--primary-deep) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.30),
    inset 0 -3px 6px rgba(0,0,0,0.22),
    0 0 0 4px var(--bg-page),
    0 0 0 5px color-mix(in oklab, var(--homepage-primary) 26%, var(--hairline)),
    0 12px 32px -10px var(--homepage-glow);
}
.lp-step-num::after {
  border-color: color-mix(in oklab, var(--homepage-primary) 65%, transparent);
}


/* ─── (n) Mock dashboard — توهج خفيف على الـ chrome + URL pill ──── */
.lp-mock {
  background:
    radial-gradient(80% 60% at 50% 0%, var(--homepage-glow-soft), transparent 65%),
    radial-gradient(40% 40% at 100% 100%, var(--homepage-violet-glow), transparent 60%),
    color-mix(in oklab, var(--bg-card) 92%, var(--bg-page));
  border-color: var(--homepage-card-bord-hi);
}
:root[data-theme="light"] .lp-mock {
  background:
    radial-gradient(80% 60% at 50% 0%, var(--homepage-glow-soft), transparent 65%),
    #ffffff;
}
.lp-mock-url {
  border-color: color-mix(in oklab, var(--homepage-primary) 18%, var(--hairline));
}


/* ─── (o) Footer credits — توهج خفيف على "حمدان" + ornaments ─────── */
.lp-credits-spark {
  text-shadow: 0 0 12px var(--homepage-glow), 0 0 4px var(--homepage-primary);
}
.lp-credits-year {
  background: linear-gradient(135deg, var(--homepage-glow-soft), transparent);
  border-color: color-mix(in oklab, var(--homepage-primary) 30%, transparent);
}


/* ─── (p) Cert chips — توهج عند hover ─────────────────────────────── */
.lp-cert {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--homepage-primary) 4%, var(--surface-1)),
    var(--surface-1));
  border-color: var(--homepage-card-bord);
}
.lp-cert:hover {
  border-color: color-mix(in oklab, var(--homepage-primary) 38%, var(--homepage-card-bord-hi));
  box-shadow: 0 6px 18px -8px var(--homepage-glow);
}


/* ─── (q) Selection + scrollbar — لمسة سماوية ───────────────────── */
::selection {
  background: color-mix(in oklab, var(--homepage-electric) 30%, transparent);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--homepage-electric), var(--homepage-primary));
}


/* ─── (r) Reveal entrance — تنعيم متقدم مع stagger ────────────────── */
.lp-reveal {
  transition:
    opacity 0.85s cubic-bezier(.2,.8,.2,1),
    transform 0.85s cubic-bezier(.2,.8,.2,1),
    filter 0.85s cubic-bezier(.2,.8,.2,1);
}


/* ─── (s) Reduced-motion overrides لكل ما أُضيف هنا ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-bg::after { animation: none; }
  .lp-hero > .lp-wrap::after,
  .lp-bg .lp-particles::before,
  .lp-bg .lp-particles::after,
  .lp-bg .lp-orb-3::after,
  .lp-hero-text::before,
  .lp-logo-mark::after,
  .lp-btn-primary::after {
    animation: none !important;
  }
  .lp-hero > .lp-wrap::after { display: none; }
}


/* ─── (t) Mobile refinements — وضوح + تخفيف الحركة الزائدة ──────── */
@media (max-width: 760px) {
  .lp-h1 {
    line-height: 1.22 !important;
    letter-spacing: -0.012em !important;
    padding-block: 0.10em;
  }
  .lp-h1 .lp-h1-mark,
  .lp-h1 .lp-h1-accent {
    line-height: 1.22;
    padding-block: 0.12em;
  }
  /* تعطيل الـ scan + edge streams + title halo لتوفير الأداء */
  .lp-hero > .lp-wrap::after,
  .lp-bg .lp-particles::before,
  .lp-bg .lp-particles::after,
  .lp-bg .lp-orb-3::after,
  .lp-hero-text::before { display: none; }
  /* nav أبسط */
  .lp-nav { backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); }
}

@media (max-width: 480px) {
  /* logo mark spin أخف */
  .lp-logo-mark::after { animation-duration: 12s; opacity: 0.4; }
}

/* ═══ نهاية §23 — ULTRA SCI-FI POLISH ═══ */