/* ============================================================
   BRAIN SKILL — HOME
   الاتجاه الفنّي للصفحة الرئيسية وحدها.

   تُحمَّل من ‎Pages/Index.cshtml‎ فقط (قسم ‎Head‎)، فلا تدفع بقيّة
   الصفحات ثمن أنماط لا تستعملها. الرموز المشتركة — الألوان والحاوية
   والأزرار والشريط والتذييل — تبقى في ‎studio.css‎ ولا تتكرّر هنا.

   اللغة البصرية واحدة: مربّعات شعار Brain Skill تتحوّل إلى وحدات
   طافية وعُقد ضوئية وخطوط ربط، على كحليّ عميق.
   ============================================================ */

:root {
    /* ارتفاع مسرح الأجهزة — يُقاس على الشاشة لا على عرض الصورة وحده */
    --hm-stage-h: min(80svh, 800px);

    /* منحنى الطفو للأجهزة والوحدات */
    --hm-float: cubic-bezier(.45, .05, .55, .95);
}

/* ============================================================
   1. المسرح (Hero)
   نصّ عمودي عند الحافة البادئة، ومنظومة الأجهزة تنزف إلى حافة
   الشاشة المقابلة. الصورة هي البطل، والنصّ لا يقف فوقها أبداً.
   ============================================================ */
.st-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    /* svh لا vh: يمنع قفزة الارتفاع عند ظهور شريط المتصفّح على الجوّال.
       الحدّ الأدنى ‎85vh‎ مضمون حتى على الشاشات القصيرة جدّاً، والحدّ
       الأقصى ‎100svh‎ فلا يتجاوز المسرح ارتفاع الشاشة الواحدة. */
    min-height: clamp(85vh, calc(100svh - var(--st-nav-h)), 100svh);
    padding-block: clamp(1.5rem, 5vh, 3.5rem) clamp(3rem, 8vh, 5rem);
    background:
        radial-gradient(ellipse 55% 60% at 78% 30%, rgba(23, 162, 232, .34), transparent 68%),
        radial-gradient(ellipse 70% 55% at 22% 4%, rgba(6, 36, 90, .8), transparent 74%),
        linear-gradient(165deg, #06245A 0%, #04132E 46%, #020712 100%);
}

/* احتياط للمتصفّحات التي لا تعرف ‎svh‎ */
@supports not (min-height: 100svh) {
    .st-hero { min-height: clamp(85vh, calc(100vh - var(--st-nav-h)), 100vh); }
}

.st-hero__inner {
    position: relative;
    z-index: 3;
    display: grid;
    /* عمود النصّ محدود بمقاس قراءة، والباقي كلّه للأجهزة. */
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.2rem, 3vw, 3.5rem);
    width: 100%;
}

/* ---------- نصّ المسرح ---------- */
.st-hero__copy { position: relative; z-index: 4; }

/* الكلمات على أسطر مستقلّة: هذا ما يعطي العنوان طابع الملصق بدل
   الفقرة. كلمات قصيرة فلا تنكسر حتى على أضيق شاشة. */
.st-hero__title {
    margin: 1.1rem 0 0;
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    line-height: 1.08;
    color: var(--st-ink);
}

.st-hero__line { display: block; }

/* الكلمة الأخيرة تأخذ تدرّج العلامة */
.st-hero__line--lit {
    background: linear-gradient(100deg, #7FD8FF, var(--st-cyan) 40%, var(--st-electric));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.st-hero__sub {
    margin: 1.4rem 0 0;
    max-width: 34ch;
    font-size: clamp(.95rem, 1.25vw, 1.06rem);
    line-height: 1.85;
    color: var(--st-ink-70);
}

.st-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem;
}

/* الزرّ الثانوي في المسرح وحده يأخذ لمسة زجاجية — بقيّة الأزرار الشبحية
   في الصفحة (المنتجات، دعوة التواصل) تبقى على النمط العام في ‎studio.css‎. */
.st-hero__actions .st-ghost {
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, .2);
    transition: color 250ms var(--st-ease), border-color 250ms var(--st-ease),
                background 250ms var(--st-ease), transform 250ms var(--st-ease);
}

.st-hero__actions .st-ghost:hover {
    background: rgba(255, 255, 255, .11);
    transform: translateY(-2px);
}

.st-hero__actions .st-cta:hover { transform: translateY(-3px); }

/* ---------- منظومة الأجهزة ---------- */
.st-hero__stage {
    position: relative;
    /* المسرح أوسع من عموده في الشبكة من الجهتين:
       ‎end‎ (يسار الشاشة) ينزف إلى ما بعد حافّتها فتُقصّ الزيادة بـ‎overflow‎؛
       ‎start‎ (يمين الشاشة) يمتدّ تحت عمود النصّ ثم يذوب فيه بتدرّج طويل.
       بلا هذا الامتداد تنتهي الصورة بحافّة مستقيمة ظاهرة إلى جانب النصّ. */
    margin-inline-end: calc(-1 * var(--st-gutter) - 2vw);
    /* امتداد أعمق تحت عمود النصّ من التصميم السابق — هذا ما يكسر تكوين
       «نصّ يسار / صورة يمين» التقليدي: المنظومة تتداخل مع النصّ فعلياً
       بدل أن تقف بجانبه، ويتولّى التدرّج الطويل على القناع إذابتها هناك. */
    margin-inline-start: calc(-1 * clamp(2rem, 9vw, 10rem));
    /* الارتفاع يُشتقّ من نسبة الصورة الحقيقية (1672×940) لا من رقم ثابت.
       أي فارق بين نسبة الصندوق ونسبة الصورة كان يجبر ‎cover‎ على قصّ
       الحافّة اليمنى من المشهد — وهي موضع الساعة الذكية تحديداً، فتختفي
       كاملة من العرض. مطابقة النسبة هنا تضمن ظهور كل الأجهزة دون اقتطاع. */
    aspect-ratio: 1672 / 940;
    height: auto;
    max-height: var(--hm-stage-h);
    /* الإزاحة تُحدَّث من JS بقيمة صغيرة جدّاً — عمق لا حركة. */
    transform: translate3d(var(--hm-x, 0px), var(--hm-y, 0px), 0);
    will-change: transform;
}

/* الصورة مشهد ثلاثي الأبعاد على خلفية كحلية خاصّة به، فلو تُركت بلا قناع
   لظهر مستطيلها كصندوق ملصوق على القسم.

   التدرّج الأفقي طويل عمداً على جهة النصّ — يبدأ من منتصف الصورة تقريباً
   ولا ينتهي إلّا عند حافّتها — فتذوب هناك في خلفية المسرح تحت النصّ بدل
   أن تُقطع بخطّ مستقيم. وعلى الجهة المقابلة (حافّة الشاشة) تدرّج أقصر
   لنفس السبب: خلفية الصورة الداكنة الخاصّة بها لا تطابق تدرّج خلفية
   القسم تماماً، فبلا هذا الذوبان يظهر خطّ فاصل صلب حيث تبدأ الصورة —
   وهو ما لا يُخفيه ‎overflow:hidden‎ إذا وقعت حافّة الصندوق داخل حدود
   الشاشة لا خارجها. والتدرّج العمودي يذيب أعلاها وأرضيّتها.

   ‎cover‎ لا ‎contain‎: مع ‎contain‎ لا تملأ الصورة صندوقها، فينتهي المشهد
   بحافّة مستقيمة قبل أن يبلغها التدرّج، ويبقى القناع يعمل في فراغ. مع
   ‎cover‎ تملأ الصورة الإطار كاملاً فيقع التدرّج على بكسلات حقيقية.
   وأبعاد المسرح محسوبة لتقارب نسبة الصورة، فالاقتطاع العمودي يسير. */
.st-hero__image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    mask-image:
        linear-gradient(to bottom, transparent 0%, #000 10%, #000 86%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 16%, #000 55%, rgba(0, 0, 0, .65) 88%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 10%, #000 86%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 16%, #000 55%, rgba(0, 0, 0, .65) 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    /* طفو خفيف جدّاً ومستقلّ عن عمق JS المرتبط بالفأرة والتمرير —
       العنصران يجتمعان لأنّهما على مستويين مختلفين من الشجرة. */
    animation: hm-image-float 6.5s var(--hm-float) infinite;
}

@keyframes hm-image-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* هالة زرقاء تحت الأجهزة — مصدر الضوء في المشهد */
.st-hero__halo {
    position: absolute;
    z-index: 1;
    inset-inline: 6%;
    bottom: 2%;
    height: 52%;
    background: radial-gradient(ellipse at center, rgba(23, 162, 232, .5), transparent 66%);
    filter: blur(46px);
    pointer-events: none;
}

/* عقدة ضوئية صغيرة تنبض عند أطراف المنظومة */
.st-node {
    position: absolute;
    z-index: 3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st-cyan);
    box-shadow: 0 0 14px 4px rgba(79, 195, 247, .55);
    animation: hm-pulse 3.6s var(--hm-float) infinite;
    pointer-events: none;
}

@keyframes hm-pulse {
    0%, 100% { opacity: .28; transform: scale(.7); }
    50%      { opacity: 1;   transform: scale(1); }
}

/* نبض خافت جدّاً على خطوط الضوء — ‎filter‎ لا ‎opacity‎ عمداً، حتى لا
   يصطدم بالتفاوت المضبوط سطرياً بين الخطّين (‎style="opacity:.24"‎). */
.st-trail { animation: hm-trail-pulse 5.5s ease-in-out infinite; }

@keyframes hm-trail-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.7); }
}

/* مربّعات الخلفية في المسرح تحديداً أخفّ من بقيّة الصفحة — «قليلة ومدروسة» */
.st-hero > .st-modules { opacity: .55; }

/* ---------- مؤشّر التمرير ---------- */
.st-scroll {
    position: absolute;
    z-index: 4;
    bottom: clamp(1rem, 3vh, 2rem);
    inset-inline: 0;
    display: grid;
    justify-items: center;
    gap: .7rem;
    font-size: .74rem;
    color: var(--st-ink-45);
    pointer-events: none;
}

.st-scroll__mouse {
    position: relative;
    width: 22px;
    height: 34px;
    border: 1px solid var(--st-line);
    border-radius: 999px;
}

.st-scroll__mouse::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 7px;
    margin-inline: auto;
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: var(--st-cyan);
    animation: hm-wheel 1.9s var(--hm-float) infinite;
}

@keyframes hm-wheel {
    0%       { opacity: 0; transform: translateY(0); }
    35%      { opacity: 1; }
    100%     { opacity: 0; transform: translateY(11px); }
}

/* شاشة قصيرة: كل بكسل للأجهزة. */
@media (max-height: 720px) {
    .st-scroll { display: none; }
}

/* ============================================================
   2. أقسام الصفحة
   ============================================================ */
.st-section {
    position: relative;
    padding-block: clamp(3rem, 5vw, 4rem);
}

/* قسم المنتجات مباشرة تحت المسرح — كان أسود مسطّحاً بلا أي توهّج ولا حركة،
   فيبدو ميتاً كلّما طال التمرير مهما طال عدد الأنظمة المعروضة. الشبكة
   والمربّعات الطافية (نفس لغة الهوية في المسرح وقسم «من نحن») تمتدّ مع طول
   القسم أياً كان — نسب الوضع تُحسب من صندوق العنصر نفسه لا من الشاشة —
   فتبقى هناك حياة خفيفة مهما نزل الزائر، لا توهّج يخفت بعد أول شاشة فقط. */
#products {
    /* يبقى قسم المنتجات بمسافته الأصلية: ارتفاع الـHub وتموّجه وشعاره
       مرتبطون بهذه المساحة البصرية ولا يجب أن يتحرّكوا عند تقليل بقية الأقسام. */
    padding-block: clamp(4.5rem, 11vw, 9rem);
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(11, 58, 143, .3), transparent 70%),
        radial-gradient(ellipse 55% 40% at 12% 50%, rgba(23, 162, 232, .12), transparent 68%),
        radial-gradient(ellipse 55% 40% at 88% 100%, rgba(11, 58, 143, .22), transparent 68%),
        var(--st-void);
}

.st-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.st-section__title {
    margin: .8rem 0 0;
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    color: var(--st-ink);
}

.st-section__more {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* خطوط ضوئية أفقية تعبر القسم ببطء */
.st-trail {
    position: absolute;
    height: 1px;
    inset-inline: 0;
    background: linear-gradient(90deg, transparent, var(--st-cyan), transparent);
    opacity: .5;
    pointer-events: none;
}

/* ============================================================
   3. عرض المنتجات — مركز شعاعي (Hub) بخمسة مواضع ثابتة
   شعار الشركة الفعلي في المركز (لا رمز نصّي)، وخمسة مواضع بصرية ثابتة
   حول المركز (لا تتغيّر أبداً هندسياً) — فقط محتوى كل موضع يتبدّل بين
   "مجموعات" من خمسة أنظمة. أي عدد أنظمة مستقبلاً (عشرين، خمسون...)
   يُقسَّم تلقائياً من الخادم إلى مجموعات من خمسة (‎Index.cshtml‎)،
   وJS (‎products-hub.js‎) يبدّل أيّ مجموعة ظاهرة تلقائياً كل بضع ثوانٍ
   أو عبر نقاط التحكّم اليدوية — بلا أي تعديل هندسي هنا مهما كبر العدد.
   ============================================================ */
.st-hub {
    position: relative;
    width: 100%;
    max-width: 1220px;
    /* عطل حقيقي على الموقع الحيّ: القسم الأب (‎#products‎) يملك
       ‎overflow: hidden‎ (يقيّد عناصر الخلفية الزخرفية داخل حدوده)، فكانت
       لوحة الكشف المنبثقة عند تمرير المؤشر على الموضع السفلي (--4) —
       التي تمتدّ فعلياً 290px تقريباً أسفل البطاقة الساكنة — تُقصّ عند
       الحافة لأن ارتفاع ‎.st-hub‎ الثابت (640px) لم يكن يحتسب هذه
       المساحة الإضافية إطلاقاً. الارتفاع هنا الآن يتّسع لأقصى حالة ممكنة
       (موضع سفلي مُفعَّل بكامل لوحة كشفه)، بينما يبقى مركز الكوكبة
       والخطوط مثبَّتين بإحداثيات مطلقة أدناه (لا ‎top:50%‎) حتى لا يتزحزحا
       مع نمو هذا الارتفاع. */
    height: 1080px;
    margin: clamp(2rem, 6vw, 4rem) auto 0;
}

.st-hub__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    /* ثابت لا ‎100%‎ عمداً — يقيس مساحة الخطوط المرئية فقط (لا مساحة لوحات
       الكشف الإضافية أسفل ‎.st-hub‎)، فيتوافق مع إحداثيات ‎viewBox‎ الثابتة
       في الترميز مهما كبر ارتفاع الحاوية الكلّي. */
    height: 700px;
    pointer-events: none;
}

.st-hub__line { stroke: rgba(120, 180, 255, .38); }

/* ---------- مركز الكوكبة: الشعار الفعلي + نبض واضح حوله ----------
   عطل حقيقي على الموقع الحيّ: كان المركز أقرب بكثير من الصفّ الأوسط
   (--2/--3) منه من الصفّ العلوي (--0/--1) — بلا تناظر. إحداثي ‎258px‎
   هنا هو منتصف المسافة الفعلية بين أسفل الصفّ العلوي وأعلى الصفّ الأوسط
   بالضبط (لا نقطة عشوائية)، فيتساوى الهامش الحرّ حول المركز من الجهتين.
   ثابت بالبكسل (لا ‎50%‎) عمداً — يبقى في مكانه بصرف النظر عن ارتفاع
   ‎.st-hub‎ الكلّي (الذي يتّسع أسفله ليتيح مساحة لوحات الكشف). */
.st-hub__core {
    position: absolute;
    top: 258px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #0B1330;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .5), 0 0 0 10px rgba(79, 195, 247, .08), inset 0 0 0 1px rgba(79, 195, 247, .35);
}

.st-hub__logo {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 74px;
    object-fit: contain;
    animation: hm-hub-logo-glow 2.6s ease-in-out infinite;
}

@keyframes hm-hub-logo-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(79, 195, 247, .55)) drop-shadow(0 0 2px rgba(255, 255, 255, .5)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 26px rgba(79, 195, 247, .95)) drop-shadow(0 0 10px rgba(255, 255, 255, .8)); transform: scale(1.045); }
}

/* عطل حقيقي: خطأ نسخ-لصق — ‎.st-hub__halo‎ ابن مباشر لـ‎.st-hub__core‎
   (132×132px فقط، لا ‎.st-hub‎ الكبيرة)، فوعاء التموضع الفعلي لها هو صندوق
   الأب الصغير هذا (بما أن ‎.st-hub__core‎ ذاتها ‎position:absolute‎ تُنشئ
   وعاء تموضع لأبنائها). القيمة ‎258px‎ كانت مأخوذة خطأً من قاعدة
   ‎.st-hub__core‎ نفسها (حيث تُحسب بالنسبة لحاوية أكبر بكثير)، فكان التموّج
   يظهر منزلقاً 192px تقريباً أسفل الشعار الفعلي بدل التمركز حوله —
   ‎top:50%‎ صحيح هنا لأن ‎transform:translate(-50%,-50%)‎ في keyframes
   ‎hm-hub-halo‎ يُكمل التمركز بالفعل. */
.st-hub__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 195, 247, .55), transparent 70%);
    filter: blur(4px);
    pointer-events: none;
    animation: hm-hub-halo 2.6s ease-in-out infinite;
}

@keyframes hm-hub-halo {
    0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.9); }
    50%      { opacity: .85; transform: translate(-50%, -50%) scale(1.15); }
}

/* نفس عطل ‎.st-hub__halo‎ أعلاه بالضبط — ‎.st-hub__ring‎ ابن مباشر
   لـ‎.st-hub__core‎ أيضاً، وكانت حلقات النبض الثلاث تنزلق 192px أسفل
   الشعار الفعلي لنفس السبب. */
.st-hub__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 2px solid rgba(79, 195, 247, .85);
    box-shadow: 0 0 16px rgba(79, 195, 247, .6);
    pointer-events: none;
    animation: hm-hub-ring 2.8s ease-out infinite;
}

@keyframes hm-hub-ring {
    0%   { transform: translate(-50%, -50%) scale(.86); opacity: .85; }
    100% { transform: translate(-50%, -50%) scale(2.15); opacity: 0; }
}

.st-hub__ring.r2 { animation-delay: 1.4s; }
.st-hub__ring.r3 { width: 100px; height: 100px; border-width: 1.5px; animation-duration: 1.9s; animation-delay: .7s; }

/* ---------- خمسة مواضع ثابتة (لا تتغيّر أبداً هندسياً) ---------- */
.st-hub__node {
    position: absolute;
    z-index: 3;
    width: 380px;
}

/* عطل حقيقي على الموقع الحيّ: لوحة الكشف المنبثقة (‎.st-hub__reveal‎)
   تمتدّ فعلياً إلى مساحة الصفّ المجاور، وبما أن كل المواضع الخمسة تشترك
   ‎z-index:3‎ نفسه، كان يفوز الموضع اللاحق في ترتيب DOM (كـCarWash أسفل
   المركز) بالرسم فوق لوحة الكشف مهما ارتفع ‎z-index‎ الداخلي لها — لأن
   المقارنة تحدث بين الموضعين كصندوقين كاملين لا بين عناصرهما الداخلية.
   رفع ‎z-index‎ الموضع بأكمله عند تفعيل أيٍّ من بطاقاته يحلّها جذرياً. */
.st-hub__node:has(.st-hub__slot:hover),
.st-hub__node:has(.st-hub__slot:focus-visible) {
    z-index: 10;
}

/* البطاقات مدمجة الآن (اسم + وصف فقط في حالة السكون، بلا شارة حرف ولا
   معاينة) فأصبحت المواضع الخمسة أقرب بكثير للمركز — المسافة الفعلية عن
   الشعار هي ما لاحظه صاحب الشركة أنها كانت متباعدة جدّاً في التصميم
   السابق (حين كانت البطاقات تشغل مساحة رأسية أكبر بكثير بسبب المعاينة
   الظاهرة دائماً).

   عطل حقيقي لاحق على الموقع الحيّ: بعد ضبط هذه المواضع، بدا المركز
   "منزلقاً" بصرياً نحو الصفّ الأوسط (--2/--3) — كان أقرب إليه بكثير من
   الصفّ العلوي. القيم هنا الآن متناظرة فعلياً حول مركز الكوكبة (258px):
   الصفّ العلوي ينتهي عند ~146px والأوسط يبدأ عند 380px، فالفرق متساوٍ
   تقريباً على الجهتين (112px). */
.st-hub__node--0 { top: 20px;  right: 0; }
.st-hub__node--1 { top: 20px;  left: 0; }
.st-hub__node--2 { top: 380px; right: -20px; }
.st-hub__node--3 { top: 380px; left: -20px; }
.st-hub__node--4 { top: 640px; left: 50%; transform: translateX(-50%); text-align: center; }

/* كل موضع يحمل بطاقة واحدة لكل "مجموعة" (Data من الخادم)، وJS يُظهر
   واحدة فقط عبر ‎is-active‎ — التبديل ذاته حركة بحتة عبر CSS، JS فقط
   يبدّل الصنف. */
.st-hub__slot {
    position: relative;
    display: none;
    flex-direction: column;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
    transition: transform 380ms cubic-bezier(.2, .8, .3, 1);
}

.st-hub__node--4 .st-hub__slot { align-items: center; }

.st-hub__slot.is-active {
    display: flex;
    animation: hm-hub-fade 480ms var(--st-ease);
}

@keyframes hm-hub-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.st-hub__name { font-size: 1.1rem; font-weight: 800; color: var(--st-ink); }
.st-hub__cat { display: block; margin-top: -.35rem; font-size: .76rem; font-weight: 700; color: var(--st-ink-70); }

/* الوصف الكامل قد يمتدّ فقرة كاملة في بيانات حقيقية — سطران كحد أقصى مع
   حذف الزائد (…) بدل عرضه كاملاً، إذ ينقل الزائر لصفحة تفاصيل النظام
   نفسها (بالضغط على البطاقة) ليقرأ الوصف كاملاً هناك. بلا هذا التحديد
   كانت الأوصاف الطويلة تُطيل البطاقة فتتصادم فعلياً مع الصفّ المجاور. */
.st-hub__desc {
    margin: 0;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--st-ink-45);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* تلميح ساكن يظهر بدل الصورة والزر — يختفي عند التمرير/التوجيه لصالح
   ‎.st-hub__reveal‎ أدناه. */
.st-hub__hint {
    font-size: .72rem;
    font-weight: 600;
    color: var(--st-ink-45);
    opacity: .7;
    transition: opacity 300ms var(--st-ease);
}

.st-hub__slot:hover .st-hub__hint,
.st-hub__slot:focus-visible .st-hub__hint {
    opacity: 0;
}

/* لوحة الكشف عند التمرير: صورة النظام + زرّ التفاصيل — ‎position:absolute‎
   عمداً فلا تُحسب ضمن ارتفاع البطاقة الساكنة (تبقى مدمجة، والمواضع الخمسة
   قريبة من المركز)، وتظهر فوق أي شيء أسفلها بفضل ‎z-index‎ الأعلى عند
   التفعيل فقط.

   عطل حقيقي على الموقع الحيّ: رغم صحّة ترتيب الطبقات (رفع ‎z-index‎ الموضع
   بأكمله عند التفعيل، إصلاح 1.60.0)، كان نصّ البطاقة المجاورة (كـMobilePos
   أسفل SuperMarket) لا يزال يظهر مرئياً عبر الفراغات الشفّافة *داخل* هذه
   اللوحة نفسها — الفجوة (‎gap‎) بين الصورة والزرّ، والهامش حولهما، كلّها
   بلا خلفية، فترتيب الطبقات الصحيح لا يمنع الرؤية عبر منطقة شفّافة فعلياً؛
   يمنع فقط رسم عنصر آخر فوقها. الحلّ: خلفية معتمة صريحة (بطاقة حقيقية
   بحشوة وزوايا مدوّرة) تغطّي صندوق اللوحة بالكامل، فلا يبقى أي فراغ شفّاف
   يمكن أن يظهر خلفه محتوى بطاقة أخرى مهما كان ترتيب الطبقات. */
.st-hub__reveal {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    width: 100%;
    margin-top: .6rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem;
    border-radius: 18px;
    background: #0B1330;
    box-shadow: 0 26px 54px rgba(0, 0, 0, .55), 0 0 0 1px rgba(79, 195, 247, .16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 300ms var(--st-ease), transform 300ms var(--st-ease);
    z-index: 1;
}

.st-hub__node--4 .st-hub__reveal { align-items: center; }

.st-hub__slot:hover .st-hub__reveal,
.st-hub__slot:focus-visible .st-hub__reveal {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 6;
}

.st-hub__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(79, 195, 247, .16);
    border: 1px solid rgba(79, 195, 247, .4);
}

.st-hub__mock {
    display: block;
    width: 100%;
    height: 230px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(79, 195, 247, .28), rgba(79, 195, 247, .05));
    /* الظلّ الرئيسي أصبح على ‎.st-hub__reveal‎ الأب (بطاقة كاملة معتمة) —
       هنا فقط حدّ خفيف يفصل الصورة عن خلفية اللوحة، لا ظلّ مضاعف ثقيل. */
    box-shadow: 0 0 0 1px rgba(79, 195, 247, .14);
}

.st-hub__mock img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ست درجات دورية من عائلة لون الهوية (سيان/أزرق) — لا لون ثابت مخصَّص
   لأي نظام بعينه، فتبقى الألوان متّسقة أيّاً كان عدد الأنظمة أو ترتيبها. */
.st-hub__accent-0 .st-hub__mock { background: linear-gradient(160deg, rgba(79, 195, 247, .32), rgba(79, 195, 247, .06)); }
.st-hub__accent-1 .st-hub__mock { background: linear-gradient(160deg, rgba(22, 133, 218, .34), rgba(22, 133, 218, .06)); }
.st-hub__accent-2 .st-hub__mock { background: linear-gradient(160deg, rgba(62, 95, 224, .32), rgba(62, 95, 224, .06)); }
.st-hub__accent-3 .st-hub__mock { background: linear-gradient(160deg, rgba(34, 184, 176, .32), rgba(34, 184, 176, .06)); }
.st-hub__accent-4 .st-hub__mock { background: linear-gradient(160deg, rgba(18, 102, 200, .34), rgba(18, 102, 200, .06)); }
.st-hub__accent-5 .st-hub__mock { background: linear-gradient(160deg, rgba(111, 168, 255, .32), rgba(111, 168, 255, .06)); }

.st-hub__accent-0 .st-hub__link { color: #4FC3F7; }
.st-hub__accent-1 .st-hub__link { color: #4E9EF2; }
.st-hub__accent-2 .st-hub__link { color: #6E85FF; }
.st-hub__accent-3 .st-hub__link { color: #3FD6CB; }
.st-hub__accent-4 .st-hub__link { color: #5B9DFF; }
.st-hub__accent-5 .st-hub__link { color: #8FC1FF; }

/* ---------- تفاعل التمرير: زوم واضح، بلا اقتراب من نبضات المركز ----------
   المسافة الفعلية بين أقرب بطاقة والمركز (~350px فأكثر) أكبر بكثير من نصف
   قطر حلقات النبض القصوى (~142px)، فسقف 1.08 هنا واضح للعين بلا أي خطر
   اقتراب بصري من الشعار مهما كبرت البطاقة. */
.st-hub__slot:hover,
.st-hub__slot:focus-visible {
    transform: translateY(-8px) scale(1.08);
}

.st-hub__node--4 .st-hub__slot:hover,
.st-hub__node--4 .st-hub__slot:focus-visible {
    transform: translateY(-8px) scale(1.08);
}

.st-hub__slot:hover .st-hub__mock,
.st-hub__slot:focus-visible .st-hub__mock {
    box-shadow: 0 0 0 1px rgba(79, 195, 247, .4);
}

/* ---------- نقاط التحكّم اليدوية ---------- */
.st-hub__nav {
    position: absolute;
    bottom: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .9rem;
}

.st-hub__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--st-line);
    background: transparent;
    color: var(--st-ink-70);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 250ms var(--st-ease), color 250ms var(--st-ease);
}

.st-hub__arrow:hover { border-color: rgba(79, 195, 247, .5); color: var(--st-cyan); }

.st-hub__dots { display: flex; align-items: center; gap: .5rem; }

.st-hub__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--st-line);
    cursor: pointer;
    transition: background 250ms var(--st-ease), transform 250ms var(--st-ease);
}

.st-hub__dot.is-active { background: var(--st-cyan); transform: scale(1.3); }

/* الحالة الفارغة */
.st-empty {
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px dashed var(--st-line);
    border-radius: 24px;
    text-align: center;
    color: var(--st-ink-70);
    line-height: 1.9;
}

/* ============================================================
   4. بيان الشركة + الأرقام
   ============================================================ */
.st-statement {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3rem, 5vw, 4rem);
    background:
        radial-gradient(ellipse 60% 55% at 50% 45%, rgba(11, 58, 143, .35), transparent 72%),
        var(--st-void);
    text-align: center;
}

/* الشبكة الرقمية المجرّدة: مرسومة بـ SVG داخلي لا بصورة خارجية */
.st-net {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: .5;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 76%);
}

.st-net svg {
    width: min(1200px, 118%);
    height: auto;
}

.st-statement__inner { position: relative; z-index: 2; }

.st-statement__text {
    margin: 1.2rem auto 0;
    max-width: 18ch;
    font-size: clamp(2.1rem, 6.4vw, 4.8rem);
    color: var(--st-ink);
}

.st-statement__text em {
    font-style: normal;
    background: linear-gradient(100deg, #7FD8FF, var(--st-cyan) 45%, var(--st-electric));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.st-statement__body {
    margin: 1.7rem auto 0;
    max-width: 60ch;
    line-height: 1.95;
    color: var(--st-ink-70);
}

/* ---------- الأرقام ---------- */
/* كل رقم هنا محسوب من قاعدة البيانات لحظة عرض الصفحة. لا أرقام ثابتة. */
.st-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: 52rem;
    margin: clamp(3rem, 7vw, 4.5rem) auto 0;
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--st-line-soft);
}

.st-fact__num {
    display: block;
    font-size: clamp(2.6rem, 7vw, 4.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(150deg, #FFFFFF, var(--st-cyan) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.st-fact__label {
    display: block;
    margin-top: .7rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--st-ink-45);
}

/* ============================================================
   5. القدرات — قائمة تحريرية تفاعلية
   ============================================================ */
.st-caps { border-top: 1px solid var(--st-line-soft); }

.st-cap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 22rem);
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(.6rem, 1.5vw, 1.4rem);
    border-bottom: 1px solid var(--st-line-soft);
    transition: padding-inline-start 450ms var(--st-ease);
}

/* غسلة ضوئية تدخل من الحافة البادئة عند التوجيه */
.st-cap::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(to left, rgba(23, 162, 232, .14), transparent 62%);
    opacity: 0;
    transform: translateX(-6%);
    transition: opacity 450ms var(--st-ease), transform 450ms var(--st-ease);
}

.st-cap:hover,
.st-cap:focus-within { padding-inline-start: clamp(1.2rem, 2.5vw, 2.2rem); }

.st-cap:hover::before,
.st-cap:focus-within::before { opacity: 1; transform: none; }

.st-cap__num {
    font-size: clamp(.85rem, 1.5vw, 1rem);
    font-weight: 800;
    color: var(--st-cyan);
}

.st-cap__head { min-width: 0; }

.st-cap__title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.28;
    color: var(--st-ink-45);
    transition: color 400ms var(--st-ease);
}

.st-cap:hover .st-cap__title,
.st-cap:focus-within .st-cap__title { color: var(--st-ink); }

.st-cap__latin {
    display: block;
    margin-top: .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--st-ink-45);
}

.st-cap__note {
    font-size: .92rem;
    line-height: 1.8;
    color: var(--st-ink-45);
    transition: color 400ms var(--st-ease);
}

.st-cap:hover .st-cap__note { color: var(--st-ink-70); }

/* شريط مربّعات الشعار يظهر مع التوجيه */
.st-cap__mods {
    display: flex;
    gap: .35rem;
    justify-content: flex-end;
    margin-top: .8rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 450ms var(--st-ease), transform 450ms var(--st-ease);
}

.st-cap:hover .st-cap__mods,
.st-cap:focus-within .st-cap__mods { opacity: 1; transform: none; }

.st-cap__mods i {
    width: 14px;
    height: 14px;
    border-radius: 26%;
    border: 1px solid rgba(79, 195, 247, .45);
    background: linear-gradient(140deg, rgba(79, 195, 247, .3), transparent 65%);
}

/* ============================================================
   6. التجاوب
   ============================================================ */

/* لابتوب صغير: النصّ يضيق قبل أن تضيق الأجهزة */
@media (max-width: 1200px) {
    .st-hero__inner { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
    .st-cap { grid-template-columns: auto minmax(0, 1fr) minmax(0, 16rem); }
}

@media (max-width: 1024px) {
    /* النصّ يصبح طبقة فوق منظومة الأجهزة — كما في الديسكتوب حيث يتداخل
       العمودان — بدل تكديسهما في طابقين منفصلين. ‎grid-template-areas‎
       بمنطقة واحدة تجعل العنصرين يشغلان نفس الخلية فيتراكبان، وارتفاع
       الصفّ يُحسب من أطولهما (النصّ عادة) فلا يُقصّ شيء مهما قصُرت الصورة
       نسبةً إلى طول النصّ. */
    .st-hero {
        min-height: auto;
        padding-bottom: clamp(2.5rem, 7vh, 4rem);
    }

    .st-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "stack";
        text-align: center;
    }

    .st-hero__copy,
    .st-hero__stage { grid-area: stack; }

    .st-hero__copy {
        z-index: 4;
        padding-block: clamp(2.2rem, 9vh, 4rem) clamp(1.5rem, 5vh, 2.5rem);
    }

    /* غسلة داكنة خلف النصّ فقط — الصورة خلفها مباشرة الآن لا بجانبها،
       وبلا هذه الغسلة تضيع قراءة النصّ فوق شاشات الأجهزة المضيئة. تلاشى
       أسفلها فلا يُغطّى إلا القسم العلوي الذي يشغله النصّ فعلاً. */
    .st-hero__copy::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: -8% -10%;
        background: radial-gradient(ellipse 95% 80% at 50% 42%, rgba(2, 7, 18, .86) 0%, rgba(2, 7, 18, .62) 55%, transparent 84%);
        pointer-events: none;
    }

    .st-hero__sub { max-width: 46ch; margin-inline: auto; }
    .st-hero__actions { justify-content: center; }

    .st-hero__stage {
        /* ينزف إلى الحافتين معاً على العرض العمودي */
        margin-inline: calc(-1 * var(--st-gutter));
        z-index: 1;
    }

    /* الصورة تنزف إلى الحافتين هنا، فلا حاجة لتنعيم جانبيها — يكفي
       أعلاها وأسفلها، وإلّا قُضم من الأجهزة على الأطراف. */
    .st-hero__image {
        mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%);
    }

    /* مواضع أضيق على الأجهزة اللوحية — نفس الهندسة الخماسية، فقط بطاقات
       أنحف وأقرب لحافّتي الشاشة حتى لا تصطدم بها. الارتفاع يبقى مطابقاً
       لقيمة الحاسوب (900px) لنفس سبب مساحة لوحة الكشف السفلية. */
    .st-hub__node { width: 260px; }
    .st-hub__node--2 { right: -10px; }
    .st-hub__node--3 { left: -10px; }

    /* عطل حقيقي على الموقع الحيّ: الوصف (‎.st-cap__note‎) والزخرفة
       (‎.st-cap__mods‎) كانا يُخفيان بالكامل هنا سابقاً لأنهما مبنيّان
       أصلاً على الكشف عند التمرير (‎:hover‎)، وهذا لا يعمل إطلاقاً على
       اللمس — فيبقى الزائر على الجوّال أمام رقم وعنوان وسطر لاتيني صغير
       بلا أي شرح. الإصلاح: إعادة تخطيط الصفّ بثلاث مناطق (‎grid-area‎)
       صريحة — الرقم والزخرفة معاً أعلى الصفّ، فالعنوان، فالوصف الكامل
       ظاهراً دائماً تحته، لا خلف تفاعل لا وجود له على اللمس. */
    .st-cap {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "num  mods"
            "head head"
            "note note";
        row-gap: .6rem;
        align-items: start;
    }

    .st-cap__num { grid-area: num; }
    .st-cap__head { grid-area: head; }

    /* نفس منطق الوصف والزخرفة أعلاه: اللون الفاتح كان مشروطاً بالتمرير
       (‎:hover‎)، فيبقى العنوان باهتاً دائماً على اللمس. يظهر هنا بلونه
       الكامل مباشرة — لا حالة "غير مفعَّل" لعنصر لا تفاعل تمرير له أصلاً. */
    .st-cap__title { color: var(--st-ink); }

    /* لا أثر بصري للغلاف نفسه على الجوّال — أبناؤه يُوضَعان مباشرة عبر
       ‎grid-area‎ كلٌّ في مكانه، لا معاً كعمود ثالث واحد كما على سطح المكتب. */
    .st-cap__extra { display: contents; }

    .st-cap__mods {
        grid-area: mods;
        align-self: center;
        opacity: 1;
        transform: none;
        margin-top: 0;
    }

    .st-cap__note {
        grid-area: note;
        display: block;
        font-size: .88rem;
    }
}

@media (max-width: 640px) {
    .st-hero__title { font-size: clamp(2.4rem, 13vw, 3.4rem); }
    .st-hero__actions .st-cta,
    .st-hero__actions .st-ghost { flex: 1 1 100%; justify-content: center; }

    .st-scroll { display: none; }

    .st-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* التوزيع الشعاعي يفترض عرضاً كافياً حول محيط — على الجوّال يتخلّى
       التصميم عن المواضع الثابتة كلّياً لقائمة صفوف رأسية: الشعار
       ونبضاته أعلى القائمة، ثم كل بطاقة صفّاً كامل العرض (شارة، اسم،
       مجال، وصف، معاينة) — نفس المجموعة النشطة من الخادم بالضبط، فقط
       تركيبة مختلفة لا حلقة أو خطوط شعاعية يصعب تمييزها بلمس الإصبع. */
    .st-hub {
        height: auto;
        max-width: 26rem;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-bottom: 3.5rem;
    }

    .st-hub__lines { display: none; }

    .st-hub__core { position: static; transform: none; width: 56px; height: 56px; margin-bottom: 2rem; }
    .st-hub__ring,
    .st-hub__halo { display: none; }
    .st-hub__logo { width: 56px; height: 56px; }

    .st-hub__node {
        position: static;
        transform: none;
        width: 100%;
        border-top: 1px solid var(--st-line-soft);
        padding-block: 1.2rem;
    }

    .st-hub__node--0 { border-top: none; padding-top: 0; }
    .st-hub__node--4 { text-align: start; }

    .st-hub__slot { flex-direction: column; gap: .7rem; }
    .st-hub__node--4 .st-hub__slot { align-items: stretch; text-align: start; }

    .st-hub__name { font-size: 1rem; }

    /* لا مفهوم "تمرير" حقيقياً على شاشة لمس — الصورة وزرّ التفاصيل تظهر
       دائماً بدل انتظار تفاعل لا وجود له، والتلميح النصّي المقابل يختفي. */
    .st-hub__hint { display: none; }
    .st-hub__reveal {
        position: static;
        margin-top: .2rem;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .st-hub__node--4 .st-hub__reveal { align-items: stretch; }
    .st-hub__mock { height: 170px; }

    .st-hub__nav { position: static; transform: none; justify-content: center; margin-top: 1rem; }
}

/* شاشات كبيرة جدّاً: يكبر المشهد ولا يتمدّد سطر القراءة بلا حدّ */
@media (min-width: 1700px) {
    .st-hero__inner { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); }
    :root { --hm-stage-h: min(74svh, 820px); }
}

/* ============================================================
   7. تفضيل تقليل الحركة
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .st-node,
    .st-scroll__mouse::after,
    .st-hero__image,
    .st-trail { animation: none; }

    .st-hero__stage { transform: none; }

    .st-hub__logo,
    .st-hub__halo,
    .st-hub__ring,
    .st-hub__slot { animation: none; }

    .st-hub__slot,
    .st-hub__hint,
    .st-hub__reveal,
    .st-hub__mock { transition: none; }
}

/* Developer entry — تقليل الفراغ بعد قسم القدرات فقط */
.st-section--developers {
    padding-top: 1rem;
}