/* ============================================================================
   تصميم بطاقة السيستم مطبقا على صفحة الواجهة كلها
   ----------------------------------------------------------------------------
   بامر صاحب المشروع 2026-09-10:
   «بطاقة انشاء العقد الدولي طبقت تصميمها على اكثر من موضع واكثر من تصميم
    بالسيستم، وهذا هو المطلوب: تطبيق طريقة تصميم هذه البطاقة على الصفحة هنا
    ككل بكل محتوياتها».

   والقيم هنا منقولة بالحرف من ورقتي السيستم لا مكتوبة من عندي:
     ثوب البطاقة ولمعتها وارتفاعها عند المرور ← public/css/zj-contract-forms.css
        (‏.zct-card و .zct-card::before و .zct-card:hover)
     الحقل والعنوان الصغير وعنوان القسم والزر ← public/css/zj-design-system.css
        (‏.zj-field و .zj-flab و .zj-sec-t و .zj-btn)

   وكل محدد مقيد بـ#zjLanding فلا يتسرب الى صفحات النظام.
   وورقة الواجهة المنقولة (zj-home.css) لم يزد فيها حرف - هذه ورقة فوقها.
   ============================================================================ */

/* ── ① محتوى بطاقة الدخول يتوسط راسيا ──
   «محتويات فورمة تسجيل الدخول مرفوعة لاعلى البطاقة، حركها لاسفل لتكون
    بالمنتصف».
   والسبب: البطاقة ارتفاعها الادنى 664px والمحتوى اقصر منه، فيقف في اعلاها.
   والعلاج ان تصير البطاقة عمودا مرنا ويتوسط محتواها في المتبقي. */
#zjLanding .login-card { display: flex; flex-direction: column; justify-content: center; }
#zjLanding .login-card .inside { width: 100%; }

/* ── ② ثوب البطاقة - منقول من .zct-card بالحرف ── */
#zjLanding .login-card,
#zjLanding .zl-duo .smart0,
#zjLanding .zl-duo .lgs,
#zjLanding .s0-feat,
#zjLanding .lgs-card {
    position: relative;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: rgba(41, 106, 170, 0.16) 0px 28px 70px,
                rgba(255, 255, 255, 0.96) 0px 1px 0px inset,
                rgba(255, 255, 255, 0.34) 0px -1px 0px inset;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    transition: 0.28s;
}

/* لمعة البطاقة - .zct-card::before حرفا */
#zjLanding .zl-duo .smart0::before,
#zjLanding .zl-duo .lgs::before,
#zjLanding .s0-feat::before,
#zjLanding .lgs-card::before {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.9), transparent 30%),
                radial-gradient(circle at 100% 100%, rgba(0, 145, 255, 0.13), transparent 38%);
    pointer-events: none;
}
#zjLanding .zl-duo .smart0 > *,
#zjLanding .zl-duo .lgs > *,
#zjLanding .s0-feat > *,
#zjLanding .lgs-card > * { position: relative; z-index: 2; }

/* والارتفاع عند المرور - .zct-card:hover حرفا.
   ⚠ ولا يوضع على البطاقتين الكبيرتين: قسم كامل يقفز سبعة بكسلات تحت
     المؤشر حركة مزعجة لا انيقة. فهو للبطاقات الصغيرة وحدها. */
#zjLanding .s0-feat:hover,
#zjLanding .lgs-card:hover {
    transform: translateY(-7px);
    box-shadow: rgba(41, 106, 170, 0.22) 0px 36px 85px,
                rgb(255, 255, 255) 0px 1px 0px inset;
}

/* حشو البطاقات - .zct-card { padding:34px 26px 26px } */
#zjLanding .zl-duo .smart0,
#zjLanding .zl-duo .lgs { padding: 34px 26px 26px; }
#zjLanding .s0-feat,
#zjLanding .lgs-card { padding: 18px 16px; border-radius: 22px; }

/* والقسمان يتباعدان كما تتباعد بطاقات السيستم - .zct-card{margin-bottom:28px} */
#zjLanding .zl-duo { gap: 28px; }
#zjLanding .zl-duo .container.w90 { padding-inline: 14px; }

/* ── ③ الحقول - .zj-field حرفا ──
   والبطاقة هنا كبيرة، فالارتفاع الادنى 44px يبقى كما هو في السيستم
   والتوسيط الراسي هو الذي يملا الفراغ لا تضخيم الحقول. */
#zjLanding .input-wrap {
    height: auto;
    /* +٢٠٪ بامره: «الحقلين زود ارتفاعاهم بنسبة ٢٠٪» ⇒ 44 × 1.2 = 52.8 */
    min-height: 52.8px;
    border-radius: 14px;
    padding: 0 14px;
    gap: 10px;
    margin-bottom: 16px;
    background: #fff;
    border: 1.6px solid #bcd8fb;
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
#zjLanding .input-wrap:focus-within { border-color: #0b5fe0; box-shadow: 0 0 0 3px rgba(8, 122, 240, .25); }
#zjLanding .input-wrap svg { width: 18px; height: 18px; color: #8aa4bd; }
#zjLanding .input-wrap input {
    min-height: 50.4px;
    font-size: 14.5px;
    font-weight: 700;
    color: #0a3b7d;
}
#zjLanding .input-wrap input::placeholder { color: #8aa4bd; font-weight: 700; }

/* العنوان الصغير فوق الحقل - .zj-flab حرفا.
   ⚠ **ومحاذاته تبدا من اليمين** - بامره 2026-09-10: «اكتب البريد الالكتروني
     او اسم المستخدم اجعل محاذاتها تبدا من اليمين، واكتب الرقم السري كذلك».
     و`start` لا `right`: الصفحة rtl فمبدا الكلام يمينها، ولو قُلب الاتجاه
     يوما تبع النصُّ اتجاهَه ولم يتخلف. */
#zjLanding .login-sub,
#zjLanding .field-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #5e7897;
    margin: 0 0 4px;
    text-align: start;
}
/* و«تذكرني» سطر اختيار لا عنوان حقل، فله مقاسه المقروء ومبدؤه يمينا */
#zjLanding .login-card .field-label:has(input[type="checkbox"]) {
    font-size: 12.5px;
    color: #0a3b7d;
    margin: 8px 0 16px;
    gap: 9px;
    justify-content: flex-start;
}

/* ── مربع «تذكرني» بتصميم السيستم ──
   «المربع تذكرني طبق عليه التصميم».
   والقواعد منقولة من zj-design-system.css حرفا: المربع الاصلي لا يقبل
   حدا ولا استدارة، فيُطفا مظهره ويُرسم - اطار #bcd8fb واستدارة 5 وخلفية
   بيضاء، والمختار يمتلئ #0b5fe0 وعلامة الصح svg مضمنة لا صورة تحمّل. */
#zjLanding .login-card input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #bcd8fb;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    accent-color: auto;
    transition: background .16s, border-color .16s;
}
#zjLanding .login-card input[type="checkbox"]:checked {
    background-color: #0b5fe0;
    border-color: #0b5fe0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.4l3.1 3.2 6.5-6.9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 74% 74%;
    background-position: center;
    background-repeat: no-repeat;
}
#zjLanding .login-card input[type="checkbox"]:hover:not(:disabled) { border-color: #0b5fe0; }
#zjLanding .login-card input[type="checkbox"]:focus-visible { outline: 2px solid #0b5fe0; outline-offset: 2px; }

/* ── ④ الازرار - .zj-btn حرفا ── */
#zjLanding .main-btn,
#zjLanding .s0-primary,
#zjLanding .lgs-primary {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #0b5fe0, #12a3f5);
    box-shadow: 0 8px 20px rgba(11, 95, 224, .24);
    transition: transform .18s, box-shadow .18s;
}
#zjLanding .main-btn:hover,
#zjLanding .s0-primary:hover,
#zjLanding .lgs-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(11, 95, 224, .32);
    filter: none;
}
/* +٢٠٪ لزر الدخول وحده: «زر تسجيل الدخول زود ارتفاعه بنسبة ٢٠٪»
   ⇒ 44 × 1.2 = 52.8. وازرار الاقسام تبقى على مقاس السيستم.
   ⚠ وموضعها **بعد** القاعدة المشتركة لا قبلها - والا غلبها مقاسها. */
#zjLanding .main-btn { width: 100%; min-height: 52.8px; font-size: 15.5px; }

/* ── ⑤ العناوين تتبع لغة السيستم ──
   .zj-sec-t { font-size:16px; font-weight:800; color:#082b68 }
   والحجم يبقى حجم الواجهة - المنقول هو **اللون والوزن** لا المقاس،
   فعنوان صفحة هبوط ليس عنوان قسم في استمارة. */
/* +٣٠٪ بامره: «كلمة تسجيل الدخول اجعلها بخط اكبر بمقدار ٣٠٪»
   ⇒ 26 × 1.3 = 33.8 */
#zjLanding .zl-login-title { color: #082b68; font-weight: 800; font-size: 33.8px; margin-bottom: 14px; }
#zjLanding .zl-duo .smart0 h2,
#zjLanding .zl-duo .lgs h2 { color: #082b68; font-weight: 800; }
#zjLanding .brand-title { color: #082b68; }
#zjLanding .s0-feat b,
#zjLanding .lgs-card b { color: #082b68; font-weight: 800; }

@media (max-width: 1024px) {
    #zjLanding .zl-duo .container.w90 { padding-inline: 0; }
}


/* ============================================================================
   ⑥ البطاقتان الكبيرتان على ارتفاع واحد
   ----------------------------------------------------------------------------
   «اجعل مقاس ارتفاع بطاقة توثيق نظامي وبطاقة خدمات موثوقة متساو، ويمكن نقل
    بعض محتويات هذه الى هذه، وظبط ذلك بالطريقة التي تراها مناسبة».

   وطريقتي: لا انقل محتوى من بطاقة الى اخرى - نقلُ فقرة من قسمها الى قسم
   لا يخصها يفسد المعنى، والمقصود تساوي الشكل لا خلط الكلام.
   بل تُشدّ البطاقتان الى ارتفاع واحد (stretch)، ثم يوزَّع ما في كل واحدة
   على طولها (space-between) فيمتلئ الفراغ من داخلها بدل ان يبقى فجوة
   تحت الاقصر. فتستويان بلا نقل حرف.
   ============================================================================ */
#zjLanding .zl-duo { align-items: stretch; }
#zjLanding .zl-duo > .section { display: flex; }
#zjLanding .zl-duo > .section > .container.w90 { display: flex; width: 100%; }
#zjLanding .zl-duo .smart0,
#zjLanding .zl-duo .lgs {
    width: 100%;
    align-content: space-between;
}

/* ============================================================================
   ⑦ حركات الصفحة
   ----------------------------------------------------------------------------
   «اريد عمل اشكال متحركة وايفكتات لهذه الصفحة، فانظر ما تراه مناسبا ونفذ».

   وقاعدتي فيها: حركة تخدم القراءة لا تشغل عنها. فلا شيء يومض ولا يدور
   بلا معنى، ولا حركة تبدا الا حين يصل اليها البصر.
     · الاقسام تصعد وتظهر عند بلوغها - وهو حارس reveal القائم في الصفحة.
     · وبطاقات المزايا والخدمات تصعد واحدة بعد اخرى لا دفعة واحدة.
     · واللوجو يطفو طفوا بطيئا، وحلقة تدور حوله دورة كاملة في عشرين ثانية.
     · وزر الدخول تمر عليه لمعة عند المرور فوقه.
     · والحقل المختار تتسع هالته.
   ⚠ ومن اطفا الحركة في نظامه اطفئت له كلها - prefers-reduced-motion.
   ============================================================================ */

/* الظهور عند الوصول - القسم يصعد ويتضح */
#zjLanding .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
#zjLanding .reveal.in { opacity: 1; transform: none; }

/* والبطاقات الصغيرة واحدة بعد اخرى - تاخير متدرج بلا سكربت */
#zjLanding .reveal .s0-feat,
#zjLanding .reveal .lgs-card { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
#zjLanding .reveal.in .s0-feat,
#zjLanding .reveal.in .lgs-card { opacity: 1; transform: none; }
#zjLanding .reveal.in .s0-feat:nth-child(1), #zjLanding .reveal.in .lgs-card:nth-child(1) { transition-delay: .06s; }
#zjLanding .reveal.in .s0-feat:nth-child(2), #zjLanding .reveal.in .lgs-card:nth-child(2) { transition-delay: .14s; }
#zjLanding .reveal.in .s0-feat:nth-child(3), #zjLanding .reveal.in .lgs-card:nth-child(3) { transition-delay: .22s; }
#zjLanding .reveal.in .s0-feat:nth-child(4), #zjLanding .reveal.in .lgs-card:nth-child(4) { transition-delay: .30s; }
#zjLanding .reveal.in .s0-feat:nth-child(5), #zjLanding .reveal.in .lgs-card:nth-child(5) { transition-delay: .38s; }

/* اللوجو يطفو - وحلقة تدور حوله */
@keyframes zlFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes zlSpin  { to { transform: rotate(360deg); } }
#zjLanding .logo-bubble { animation: zlFloat 6.5s ease-in-out infinite; }
#zjLanding .logo-bubble::after {
    content: "";
    position: absolute;
    inset: -13px;
    border-radius: 50%;
    border: 1.5px dashed rgba(11, 95, 224, .22);
    border-inline-end-color: transparent;
    animation: zlSpin 20s linear infinite;
    pointer-events: none;
}

/* لمعة تمر على زر الدخول عند المرور فوقه */
#zjLanding .main-btn { position: relative; overflow: hidden; }
#zjLanding .main-btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    inset-inline-start: -40%;
    width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    transform: skewX(-18deg);
    transition: inset-inline-start .55s ease;
    pointer-events: none;
}
#zjLanding .main-btn:hover::after { inset-inline-start: 120%; }

/* الحقل المختار تتسع هالته */
#zjLanding .input-wrap { transition: border-color .18s, box-shadow .28s cubic-bezier(.2,.7,.3,1); }

/* والبطاقتان الكبيرتان ترتفعان قليلا عند المرور - اهدا من الصغيرة */
#zjLanding .zl-duo .smart0,
#zjLanding .zl-duo .lgs { transition: box-shadow .3s ease, transform .3s ease; }
#zjLanding .zl-duo > .section:hover .smart0,
#zjLanding .zl-duo > .section:hover .lgs {
    transform: translateY(-3px);
    box-shadow: rgba(41, 106, 170, 0.22) 0px 34px 80px,
                rgba(255, 255, 255, 0.96) 0px 1px 0px inset;
}

@media (prefers-reduced-motion: reduce) {
    #zjLanding .reveal,
    #zjLanding .reveal .s0-feat,
    #zjLanding .reveal .lgs-card { opacity: 1 !important; transform: none !important; transition: none !important; }
    #zjLanding .logo-bubble,
    #zjLanding .logo-bubble::after { animation: none !important; }
    #zjLanding .main-btn::after { display: none; }
    #zjLanding .zl-duo > .section:hover .smart0,
    #zjLanding .zl-duo > .section:hover .lgs,
    #zjLanding .s0-feat:hover,
    #zjLanding .lgs-card:hover { transform: none; }
}


/* ============================================================================
   ⑧ محتوى لوح الدخول يُشدّ ٢٠٪ الى الاعلى والاسفل
   ----------------------------------------------------------------------------
   «اريد شد محتوياتها للاعلى وللاسفل بحيث تبدو ممطوطة، بنسبة ٢٠٪، محتويات
    البطاقة وليست البطاقة نفسها - يظل مقاس البطاقة كما هو».

   والحساب مقيس لا مقدر: ارتفاع المحتوى 302px، منها 235 عناصر و67 فجوات.
   والعناصر لا تُمَطّ - نص وحقل وزر لهم مقاسهم. فالزيادة كلها من الفجوات:
       302 × 1.2 = 362.4  ⇒  الفجوات 362.4 − 235 = 127.4  ⇒  67 × 1.9
   فكل فجوة تُضرب في 1.9، والبطاقة نفسها لا يتغير لها حرف - ارتفاعها
   الادنى 664 والمحتوى بعد الشد 362 فما زال يسع ويتوسط.
   ============================================================================ */
#zjLanding .login-card .zl-login-title { margin-bottom: 26.6px; }
#zjLanding .login-card .login-sub      { margin-bottom: 7.6px; }
#zjLanding .login-card .input-wrap     { margin-bottom: 30.4px; }
#zjLanding .login-card .field-label    { margin-bottom: 7.6px; }
#zjLanding .login-card .field-label:has(input[type="checkbox"]) { margin: 15.2px 0 30.4px; }
#zjLanding .login-card .login-actions  { margin-top: 19px; }


/* ============================================================================
   ⑨ حركة البطاقتين الكبيرتين
   ----------------------------------------------------------------------------
   «هاتين البطاقتين لم ار فيهم اي ايفكتات حركة او تجاوب فافعل ذلك فيهم».

   وحقه علي ان اعلن السبب: ما وضعته قبلا كان ظهورا عند الوصول - يقع مرة
   واحدة قبل ان يصل بصره، ثم لا شيء بعده. فالبطاقة تبدو ساكنة وهي كذلك.
   ⇒ فهنا حركة **دائمة وحركة عند اللمس**، تُرى بلا انتظار:
     · ضوء يعبر البطاقة عبورا بطيئا كل تسع ثوان
     · نقطة الشارة تنبض
     · البطاقة ترتفع ويلمع اطارها عند المرور
     · وايقونة كل مزية تكبر وتميل، وخلفيتها تتلون
   ⚠ وكلها تحت حارس تقليل الحركة في الاسفل.
   ============================================================================ */

@keyframes zlSweep { 0% { transform: translateX(-120%) skewX(-14deg); } 100% { transform: translateX(320%) skewX(-14deg); } }
@keyframes zlPulse { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.7); opacity: .35; } }

/* ضوء يعبر البطاقة - داخل حدودها فلا يتسرب */
#zjLanding .zl-duo .smart0,
#zjLanding .zl-duo .lgs { overflow: hidden; }
#zjLanding .zl-duo .smart0::after,
#zjLanding .zl-duo .lgs::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    inset-inline-start: 0;
    width: 22%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: zlSweep 9s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
#zjLanding .zl-duo .lgs::after { animation-delay: 4.5s; }

/* نقطة الشارة تنبض */
#zjLanding .s0-eye .d,
#zjLanding .lgs-eye svg { animation: zlPulse 2.4s ease-in-out infinite; transform-origin: center; }

/* البطاقة عند المرور: ترتفع ويلمع اطارها */
#zjLanding .zl-duo > .section:hover .smart0,
#zjLanding .zl-duo > .section:hover .lgs {
    border-color: rgba(11, 95, 224, .35);
}

/* وايقونة المزية تكبر وتميل وخلفيتها تتلون */
#zjLanding .s0-feat .fi { transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s, color .25s; }
#zjLanding .s0-feat:hover .fi { transform: scale(1.14) rotate(-7deg); background: rgba(11, 95, 224, .12); color: #0b5fe0; }
#zjLanding .s0-feat { transition: transform .28s, box-shadow .28s, border-color .28s; }
#zjLanding .s0-feat:hover { border-color: rgba(11, 95, 224, .32); }

/* ورقاقات القسم الثاني تتجاوب كذلك */
#zjLanding .lgs-bp { transition: transform .2s, box-shadow .2s; }
#zjLanding .lgs-bp:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11, 95, 224, .16); }

@media (prefers-reduced-motion: reduce) {
    #zjLanding .zl-duo .smart0::after,
    #zjLanding .zl-duo .lgs::after { display: none; }
    #zjLanding .s0-eye .d,
    #zjLanding .lgs-eye svg { animation: none !important; }
    #zjLanding .s0-feat:hover .fi,
    #zjLanding .lgs-bp:hover { transform: none; }
}


/* ============================================================================
   ⑩ التصاق رقاقات القسم الثاني ببطاقتيه - اصلاح
   ----------------------------------------------------------------------------
   «يوجد تراكب في بطاقاتها الداخلية على بعضها».
   قِس: اسفل صف الرقاقات 624 واعلى شبكة البطاقتين 624 - صفر فاصل بينهما،
   فتلامسا. والرقاقات تلتف صفين فيزداد الالتصاق وضوحا.
   ⇒ فاصل يوافق ايقاع القسم، وفجوة اوسع بين البطاقتين.
   ============================================================================ */
#zjLanding .lgs-feats { margin-top: 18px; gap: 14px; }
#zjLanding .lgs-badges { margin-bottom: 2px; }
#zjLanding .zl-duo .s0-feats { gap: 14px; }
#zjLanding .zl-duo .smart0 .s0-desc { margin-bottom: 16px; }

/* ============================================================================
   ⑪ اللوجو يتحرك
   ----------------------------------------------------------------------------
   «شكل الدائرة المقطعة حوله وبها علامة صح خضراء اعجبني، اجعله متحركا».
   والحلقة كانت تدور دورة في عشرين ثانية - حركة لا تكاد ترى.
   ⇒ الحلقة اسرع وتتنفس معها، وعلامة الصح تنبض نبضة هادئة، والفقاعة
     يتسع ضوءها ويضيق. وثلاثتها ايقاع واحد لا ثلاثة ايقاعات متنافرة.
   ============================================================================ */
@keyframes zlRing  { 0% { transform: rotate(0); }   100% { transform: rotate(360deg); } }
@keyframes zlBreath{ 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes zlTick  { 0%,72%,100% { transform: scale(1); } 80% { transform: scale(1.22); } 88% { transform: scale(.96); } }
@keyframes zlHalo  { 0%,100% { box-shadow: 0 24px 55px rgba(41,106,170,.15), inset 0 1px 0 rgba(255,255,255,.9); }
                     50%     { box-shadow: 0 24px 62px rgba(11,95,224,.28), inset 0 1px 0 rgba(255,255,255,.98); } }

#zjLanding .logo-bubble::after {
    animation: zlRing 11s linear infinite, zlBreath 4.4s ease-in-out infinite;
}
#zjLanding .logo-bubble { animation: zlFloat 6.5s ease-in-out infinite, zlHalo 4.4s ease-in-out infinite; }
#zjLanding .logo-bubble > span[aria-hidden] { animation: zlTick 4.4s ease-in-out infinite; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
    #zjLanding .logo-bubble,
    #zjLanding .logo-bubble::after,
    #zjLanding .logo-bubble > span[aria-hidden] { animation: none !important; }
}