/* ═══════════════════════════════════════════════════════════════════
   الصفحة الرئيسية بجلد SALES: نفس الوان وتقسيم لوحة التحكم وشاشتي الدخول.
   طبقة فوق الانماط القائمة - لا يتغير اي محتوى ولا ترتيب اي قسم،
   يتغير الشكل فقط. تُحمَّل بعد بقية الملفات فتسبقها في الترجيح.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --hs-green: #10b981;
    --hs-green-dk: #059669;
    --hs-green-dp: #047857;
    --hs-mint: #ecfdf5;
    --hs-mint-br: #a7f3d0;
    --hs-ink: #0f172a;
    --hs-muted: #64748b;
    --hs-line: #e5e7eb;
    --hs-bg: #f8fafc;
    --hs-radius: 14px;
    --hs-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    --hs-shadow-h: 0 10px 30px rgba(6, 95, 70, .10);
}

/* ── ايقاع الاقسام: ابيض ثم رمادي فاتح بالتناوب ── */
.modern-services,
.modern-about,
.modern-apps,
.blog-preview-section { background: #ffffff !important; }

.system-modules,
.modern-benefits,
.pro-pricing,
.modern-contact { background: var(--hs-bg) !important; }

.modern-services::before, .modern-services::after,
.system-modules::before, .system-modules::after,
.modern-benefits::before, .modern-benefits::after,
.modern-about::before, .modern-about::after,
.pro-pricing::before, .pro-pricing::after,
.modern-apps::before, .modern-apps::after { display: none !important; }

/* ── العناوين: حبر داكن وخط سفلي اخضر قصير ── */
.modern-services__title, .system-modules__title, .modern-benefits__title,
.modern-apps__title, .pro-pricing__title, .blog-preview__title,
.modern-about__title, .modern-contact__title, .seo-articles__title {
    color: var(--hs-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    -webkit-text-fill-color: var(--hs-ink) !important;
    background: none !important;
}

.modern-services__header, .system-modules__header, .modern-benefits__header,
.modern-apps__header, .pro-pricing__header, .blog-preview__header,
.modern-contact__header { position: relative; }

.modern-services__header::after, .system-modules__header::after,
.modern-benefits__header::after, .modern-apps__header::after,
.pro-pricing__header::after, .blog-preview__header::after,
.modern-contact__header::after {
    content: ""; display: block; inline-size: 48px; block-size: 4px;
    border-radius: 99px; background: var(--hs-green); margin: 1rem auto 0;
}

.modern-services__subtitle, .system-modules__subtitle, .modern-benefits__intro,
.pro-pricing__intro, .blog-preview__subtitle, .modern-about__subtitle,
.modern-contact__subtitle, .seo-articles__intro {
    color: var(--hs-muted) !important;
    -webkit-text-fill-color: var(--hs-muted) !important;
}

/* ── الهيرو: خلفية نعناعية فاتحة بدل الاخضر الداكن ── */
.modern-hero {
    background: linear-gradient(150deg, #f0fdf9 0%, #ecfdf5 45%, #e8f7f1 100%) !important;
    color: var(--hs-ink) !important;
}
.modern-hero__background, .modern-hero__gradient { background: none !important; opacity: .5 !important; }
.modern-hero__shape, .modern-hero__shapes { opacity: .35 !important; }

.modern-hero__badge {
    background: #ffffff !important;
    border: 1px solid var(--hs-mint-br) !important;
    color: var(--hs-green-dp) !important;
    box-shadow: var(--hs-shadow);
}
.modern-hero__title, .modern-hero h1 {
    color: var(--hs-ink) !important;
    -webkit-text-fill-color: var(--hs-ink) !important;
    background: none !important;
    letter-spacing: -.02em;
}
.modern-hero__title span, .modern-hero__title b {
    color: var(--hs-green) !important;
    -webkit-text-fill-color: var(--hs-green) !important;
}
.modern-hero__lead, .modern-hero p { color: #475569 !important; }

.modern-hero__feature-card {
    background: #ffffff !important;
    border: 1px solid var(--hs-line) !important;
    border-radius: var(--hs-radius) !important;
    box-shadow: var(--hs-shadow) !important;
    backdrop-filter: none !important;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.modern-hero__feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--hs-mint-br) !important;
    box-shadow: var(--hs-shadow-h) !important;
}
.modern-hero__feature-icon {
    background: var(--hs-mint) !important;
    color: var(--hs-green-dk) !important;
    border: 1px solid var(--hs-mint-br) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.modern-hero__feature-icon i { color: var(--hs-green-dk) !important; }
.modern-hero__feature-title, .modern-hero__feature-content { color: var(--hs-ink) !important; }

/* ── الازرار ── */
.modern-hero__btn--primary, .modern-hero__btn,
.blog-preview__cta, .pp-card__cta, .modern-contact__submit,
.modern-contact__form-submit, .blog-preview-card__link {
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.modern-hero__btn--primary, .modern-contact__submit, .modern-contact__form-submit {
    background: var(--hs-green) !important;
    border-color: var(--hs-green) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, .28) !important;
}
.modern-hero__btn--primary:hover, .modern-contact__submit:hover, .modern-contact__form-submit:hover {
    background: var(--hs-green-dk) !important;
    border-color: var(--hs-green-dk) !important;
    transform: translateY(-1px);
}

/* ── البطاقات: خدمات، موديولات، مزايا، تطبيقات ── */
.modern-service-card, .system-module-card, .modern-benefit-card,
.modern-app-card, .blog-preview-card, .post-card,
.modern-about__card, .modern-contact__branch {
    background: #ffffff !important;
    border: 1px solid var(--hs-line) !important;
    border-radius: var(--hs-radius) !important;
    box-shadow: var(--hs-shadow) !important;
    transition: transform .18s, box-shadow .18s, border-color .18s !important;
}
.modern-service-card::before, .system-module-card::before,
.modern-benefit-card::before, .modern-app-card::before { display: none !important; }

.modern-service-card:hover, .system-module-card:hover, .modern-benefit-card:hover,
.modern-app-card:hover, .blog-preview-card:hover, .post-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--hs-mint-br) !important;
    box-shadow: var(--hs-shadow-h) !important;
}

/* الايقونات: مربع نعناعي وايقونة خضراء - بلا تدرجات داكنة */
.modern-service-card__icon, .system-module-card__icon, .modern-benefit-card__icon,
.modern-app-card__icon, .modern-about__icon-wrapper, .modern-about__feature-icon,
.modern-contact__branch-icon, .modern-contact__detail-icon {
    background: var(--hs-mint) !important;
    border: 1px solid var(--hs-mint-br) !important;
    color: var(--hs-green-dk) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background-image: none !important;
}
.modern-service-card__icon i, .system-module-card__icon i, .modern-benefit-card__icon i,
.modern-app-card__icon i, .modern-about__icon i, .modern-about__icon-wrapper i,
.modern-about__feature-icon i, .modern-contact__branch-icon i, .modern-contact__detail-icon i {
    color: var(--hs-green-dk) !important;
    -webkit-text-fill-color: var(--hs-green-dk) !important;
}

.modern-service-card__title, .system-module-card__title, .modern-benefit-card__title,
.modern-app-card__name, .blog-preview-card__title, .post-card__title,
.modern-contact__branch-title {
    color: var(--hs-ink) !important;
    font-weight: 800 !important;
}
.modern-service-card__desc, .system-module-card__desc, .modern-benefit-card__desc,
.modern-app-card__desc, .blog-preview-card__excerpt, .post-card__excerpt {
    color: var(--hs-muted) !important;
}
.system-module-card__features li { color: #475569 !important; }
.system-module-card__features li::before,
.system-module-card__features li i { color: var(--hs-green) !important; }

/* ── عن الشركة ── */
.modern-about { color: var(--hs-ink) !important; }
.modern-about__badge {
    background: var(--hs-mint) !important;
    border: 1px solid var(--hs-mint-br) !important;
    color: var(--hs-green-dp) !important;
}
.modern-about__icon--1, .modern-about__icon--2, .modern-about__icon--3 {
    background: var(--hs-mint) !important;
    color: var(--hs-green-dk) !important;
    background-image: none !important;
}
.modern-about__feature-item { color: #334155 !important; }
.modern-about__feature-text { color: #334155 !important; }

/* ── التطبيقات ── */
.modern-app-card__badge {
    background: var(--hs-mint) !important;
    color: var(--hs-green-dp) !important;
    border: 1px solid var(--hs-mint-br) !important;
    border-radius: 999px !important;
}

/* ── الاسعار: الاخضر بدل الازرق ── */
.cx-currency-switch {
    background: #ffffff !important;
    border: 1px solid var(--hs-line) !important;
    border-radius: 999px !important;
    box-shadow: var(--hs-shadow) !important;
}
.cx-currency-switch__label { color: var(--hs-muted) !important; }
.cx-currency-switch button { border-radius: 999px !important; color: #475569 !important; font-weight: 700 !important; }
.cx-currency-switch button.is-active, .cx-currency-switch button[aria-pressed="true"] {
    background: var(--hs-green) !important;
    border-color: var(--hs-green) !important;
    color: #fff !important;
}

.pp-card {
    background: #ffffff !important;
    border: 1px solid var(--hs-line) !important;
    border-radius: var(--hs-radius) !important;
    box-shadow: var(--hs-shadow) !important;
}
.pp-card:hover { border-color: var(--hs-mint-br) !important; box-shadow: var(--hs-shadow-h) !important; }
.pp-card--featured {
    border-color: var(--hs-green) !important;
    box-shadow: 0 0 0 1px var(--hs-green) inset, var(--hs-shadow-h) !important;
    background: #ffffff !important;
}
.pp-card__ribbon { background: var(--hs-green) !important; color: #fff !important; }
.pp-card__icon, .pp-card__icon--featured {
    background: var(--hs-mint) !important;
    border: 1px solid var(--hs-mint-br) !important;
    color: var(--hs-green-dk) !important;
    background-image: none !important;
}
.pp-card__icon i, .pp-card__icon--featured i { color: var(--hs-green-dk) !important; }
.pp-card__title { color: var(--hs-ink) !important; }
.pp-card__subtitle, .pp-card__period, .pp-card__currency { color: var(--hs-muted) !important; }
.pp-card__price { color: var(--hs-ink) !important; font-variant-numeric: tabular-nums; }
.pp-card__features li { color: #334155 !important; }
.pp-card__features li i, .pp-card__features li::before { color: var(--hs-green) !important; }
.pp-card__free { color: var(--hs-green-dp) !important; font-weight: 800 !important; }

.pp-card__cta {
    border: 1px solid var(--hs-green) !important;
    color: var(--hs-green-dk) !important;
    background: #ffffff !important;
}
.pp-card__cta:hover { background: var(--hs-mint) !important; color: var(--hs-green-dp) !important; }
.pp-card--featured .pp-card__cta {
    background: var(--hs-green) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, .28) !important;
}
.pp-card--featured .pp-card__cta:hover { background: var(--hs-green-dk) !important; color: #fff !important; }
.pro-pricing__note-link { color: var(--hs-green-dk) !important; }

/* ── المدونة ── */
.blog-preview-card__badge {
    background: var(--hs-mint) !important;
    color: var(--hs-green-dp) !important;
    border: 1px solid var(--hs-mint-br) !important;
}
.blog-preview-card__link, .post-card__link, .post-card__read { color: var(--hs-green-dk) !important; }
.blog-preview-card__meta, .post-card__meta, .post-card__date { color: var(--hs-muted) !important; }

/* ── التواصل ── */
.modern-contact__detail-link, .modern-contact__detail-link:hover { color: var(--hs-green-dk) !important; }
.modern-contact__detail-label { color: var(--hs-ink) !important; }
.modern-contact__detail-text { color: var(--hs-muted) !important; }
.modern-contact__form-container, .modern-contact__form-wrapper {
    background: #ffffff !important;
    border: 1px solid var(--hs-line) !important;
    border-radius: var(--hs-radius) !important;
    box-shadow: var(--hs-shadow) !important;
}
.modern-contact__input, .modern-contact__textarea, .modern-contact__select {
    border: 1px solid var(--hs-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--hs-ink) !important;
}
.modern-contact__input:focus, .modern-contact__textarea:focus, .modern-contact__select:focus {
    border-color: var(--hs-green) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .14) !important;
    outline: none !important;
}
.modern-contact__label { color: #334155 !important; font-weight: 700 !important; }

/* ── الشريط العلوي والتذييل ── */
.modern-navbar { background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--hs-line) !important; box-shadow: none !important; }
.modern-nav-link { color: #334155 !important; font-weight: 600 !important; }
.modern-nav-link:hover, .modern-nav-link.active { color: var(--hs-green-dk) !important; }
.modern-navbar__cta, .modern-navbar__btn--primary, .modern-navbar__register {
    background: var(--hs-green) !important;
    border-color: var(--hs-green) !important;
    color: #fff !important;
    border-radius: 10px !important;
}
.modern-navbar__cta:hover, .modern-navbar__btn--primary:hover, .modern-navbar__register:hover {
    background: var(--hs-green-dk) !important;
    border-color: var(--hs-green-dk) !important;
}

.modern-footer { background: #0b1f18 !important; }
.modern-footer__title { color: #fff !important; }
.modern-footer__link:hover, .modern-footer__contact-item a:hover { color: var(--hs-mint-br) !important; }
.modern-footer__social-link:hover { background: var(--hs-green) !important; border-color: var(--hs-green) !important; color: #fff !important; }

/* ── تصحيحات دقيقة ── */

/* العنوان كان ابيض بظل داكن: لا ظل على خلفية فاتحة */
.modern-hero__title, .modern-hero h1 { text-shadow: none !important; }

/* صف السعر كان 56px فقط فيطفح سطر «شامل الضريبة» على بنود الباقة */
.pp-card { --pp-price-h: 80px !important; }

/* سطر «شامل الضريبة» ينزل تحت السعر لا فوق بنود الباقة */
.pp-card__price { flex-wrap: wrap !important; row-gap: .1rem !important; }
.pp-card__vat { order: 9 !important; flex: 0 0 100% !important; margin-top: .15rem !important; }

/* الشارة: كبسولة في الزاوية بدل شريط مائل يغطي الايقونة */
.pp-card--featured { overflow: hidden; }
.pp-card__ribbon {
    position: absolute !important;
    top: 10px !important;
    inset-inline-start: 10px !important;
    inset-inline-end: auto !important;
    transform: none !important;
    padding: .2rem .7rem !important;
    border-radius: 999px !important;
    font-size: .7rem !important;
    box-shadow: 0 4px 12px rgba(16,185,129,.28) !important;
}

/* ازرار المتجر في الشريط العلوي: حدود خضراء لا تعبئة داكنة */
.modern-nav-link--store, .modern-nav-link--store-login {
    border: 1px solid var(--hs-green) !important;
    background: #ffffff !important;
    color: var(--hs-green-dk) !important;
    border-radius: 10px !important;
    background-image: none !important;
}
.modern-nav-link--store:hover, .modern-nav-link--store-login:hover {
    background: var(--hs-mint) !important;
    color: var(--hs-green-dp) !important;
}

/* زر «عرض جميع المقالات» كان ازرق بوتستراب */
.blog-preview-section .btn-primary, .blog-preview-section .btn-primary:focus {
    background: var(--hs-green) !important;
    border-color: var(--hs-green) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(16,185,129,.28) !important;
}
.blog-preview-section .btn-primary:hover {
    background: var(--hs-green-dk) !important;
    border-color: var(--hs-green-dk) !important;
}

/* ── الجوال ── */
@media (max-width: 768px) {
    .modern-services__header::after, .system-modules__header::after,
    .modern-benefits__header::after, .modern-apps__header::after,
    .pro-pricing__header::after, .blog-preview__header::after,
    .modern-contact__header::after { margin-top: .75rem; inline-size: 40px; }
}

/* ═══ الشريط العلوي: قوائم منسدلة تجمع الروابط المتشابهة ═══ */
.nv-drop { position: relative; }
.nv-drop__btn { display: inline-flex !important; align-items: center; gap: .4rem; cursor: pointer; border: 1px solid var(--hs-line); background: #fff; font-family: inherit; }
.nv-drop--end .nv-drop__btn { background: var(--hs-green) !important; border-color: var(--hs-green) !important; color: #fff !important; }
.nv-drop--end .nv-drop__btn:hover { background: var(--hs-green-dk) !important; }
.nv-drop__caret { font-size: .62rem !important; opacity: .7; display: inline-block !important; transition: transform .2s; }
.nv-drop:hover .nv-drop__caret { transform: rotate(180deg); }

.nv-drop__menu {
    position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
    min-inline-size: 260px; background: #fff; border: 1px solid var(--hs-line);
    border-radius: 14px; box-shadow: 0 18px 44px rgba(15,23,42,.14);
    padding: .4rem; display: flex; flex-direction: column; gap: .15rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s; z-index: 1200;
}
.nv-drop:hover .nv-drop__menu, .nv-drop:focus-within .nv-drop__menu { opacity: 1; visibility: visible; transform: none; }
.nv-drop__menu::before { content: ""; position: absolute; inset-block-start: -10px; inset-inline: 0; block-size: 10px; }
.nv-drop__menu a {
    display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .7rem;
    border-radius: 10px; text-decoration: none; color: var(--hs-ink); transition: background .15s;
}
.nv-drop__menu a:hover { background: var(--hs-mint); color: var(--hs-ink); }
.nv-drop__menu a > i { inline-size: 30px; block-size: 30px; flex: none; border-radius: 9px; background: var(--hs-mint); color: var(--hs-green-dk); display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; }
.nv-drop__menu a span { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.nv-drop__menu b { font-size: .86rem; font-weight: 800; }
.nv-drop__menu small { font-size: .74rem; color: var(--hs-muted); line-height: 1.5; }

/* زر العودة للرئيسية في شاشتي الدخول والتسجيل */
.au .au-home {
    position: absolute; top: 26px; inset-inline-start: 30px; z-index: 5;
    display: inline-flex; align-items: center; gap: .4rem;
    height: 38px; padding: 0 .95rem; border-radius: 99px;
    border: 1px solid var(--au-line); background: #fff; color: #334155;
    font-size: .875rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 2px 10px rgba(15,23,42,.06); transition: border-color .15s, color .15s;
}
.au .au-home:hover { border-color: var(--au-green); color: var(--au-green-dk); }
@media (max-width: 520px) { .au .au-home { top: 16px; inset-inline-start: 16px; padding: 0 .7rem; } .au .au-home span { display: none; } }

/* ═══ نمط موحّد لعناوين اقسام الرئيسية: شارة كبسولة ثم عنوان ثم وصف ═══ */
.sec-eyebrow {
    display: inline-block; margin-block-end: 1rem;
    background: #fff; border: 1px solid var(--hs-mint-br); color: var(--hs-green-dk);
    border-radius: 999px; padding: .3rem 1.1rem;
    font-size: .8rem; font-weight: 800; letter-spacing: .02em;
}
.modern-services__title, .system-modules__title, .pro-pricing__title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem) !important;
    line-height: 1.3 !important;
}

/* ═══ وحدات النظام: بطاقة خضراء + شبكة منتجات ═══ */
.mods2 {
    display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem;
    background: #fff; border: 1px solid var(--hs-line); border-radius: 22px;
    padding: 1.1rem; box-shadow: 0 12px 34px rgba(15,23,42,.05);
}
.mods2-promo {
    background: linear-gradient(150deg, #10b981 0%, #059669 55%, #047857 100%);
    border-radius: 16px; padding: 2rem 1.75rem; color: #fff;
    display: flex; flex-direction: column; gap: .7rem; justify-content: center; position: relative; overflow: hidden;
}
.mods2-promo::after {
    content: ""; position: absolute; inset-block-start: -40px; inset-inline-start: -40px;
    inline-size: 160px; block-size: 160px; border-radius: 50%;
    background: rgba(255,255,255,.08); pointer-events: none;
}
.mods2-promo__ic {
    inline-size: 52px; block-size: 52px; border-radius: 14px;
    background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-block-end: .4rem;
}
.mods2-promo b { font-size: 1.5rem; font-weight: 800; line-height: 1.4; }
.mods2-promo p { margin: 0; font-size: .92rem; line-height: 1.8; color: rgba(255,255,255,.9); }
.mods2-promo__btn {
    align-self: flex-start; margin-block-start: .6rem;
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; color: #047857; border-radius: 999px;
    padding: .7rem 1.4rem; font-weight: 800; font-size: .92rem; text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.mods2-promo__btn:hover { color: #047857; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }

.mods2-list { display: flex; flex-direction: column; gap: 1rem; padding: .6rem .8rem; min-inline-size: 0; }
.mods2-list__top {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-block-end: .8rem; border-block-end: 1px solid var(--hs-line);
}
.mods2-list__top > span { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--hs-muted); }
.mods2-list__top a { font-size: .8rem; font-weight: 800; color: var(--hs-green-dk); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.mods2-list__top a:hover { color: var(--hs-green-dp); }

.mods2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.2rem; }
.mods2-item { display: flex; gap: .7rem; align-items: flex-start; min-inline-size: 0; }
.mods2-item__ic {
    inline-size: 40px; block-size: 40px; flex: none; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.mods2-item__ic.t1 { background: #ecfdf5; color: #059669; }
.mods2-item__ic.t2 { background: #fff7ed; color: #ea580c; }
.mods2-item__ic.t3 { background: #eff6ff; color: #2563eb; }
.mods2-item__ic.t4 { background: #f5f3ff; color: #7c3aed; }
.mods2-item__ic.t5 { background: #fefce8; color: #ca8a04; }
.mods2-item__ic.t6 { background: #fdf2f8; color: #db2777; }
.mods2-item h3 { font-size: .98rem; font-weight: 800; margin: 0 0 .25rem; color: var(--hs-ink); line-height: 1.45; }
.mods2-item p { margin: 0; font-size: .84rem; color: var(--hs-muted); line-height: 1.75; }

@media (max-width: 1100px) {
    .mods2 { grid-template-columns: 1fr; }
    .mods2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mods2-promo { padding: 1.6rem 1.4rem; }
}
@media (max-width: 620px) {
    .mods2-grid { grid-template-columns: 1fr; }
}

/* ═══ خدماتنا: ايقونات بتدرجات باستيل متناوبة كما في المرجع ═══ */
.modern-services__grid .modern-service-card:nth-child(6n+1) .modern-service-card__icon { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #059669 !important; }
.modern-services__grid .modern-service-card:nth-child(6n+2) .modern-service-card__icon { background: #fff7ed !important; border-color: #fed7aa !important; color: #ea580c !important; }
.modern-services__grid .modern-service-card:nth-child(6n+3) .modern-service-card__icon { background: #eff6ff !important; border-color: #bfdbfe !important; color: #2563eb !important; }
.modern-services__grid .modern-service-card:nth-child(6n+4) .modern-service-card__icon { background: #f5f3ff !important; border-color: #ddd6fe !important; color: #7c3aed !important; }
.modern-services__grid .modern-service-card:nth-child(6n+5) .modern-service-card__icon { background: #fefce8 !important; border-color: #fde68a !important; color: #ca8a04 !important; }
.modern-services__grid .modern-service-card:nth-child(6n) .modern-service-card__icon { background: #fdf2f8 !important; border-color: #fbcfe8 !important; color: #db2777 !important; }
.modern-services__grid .modern-service-card__icon i { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
.modern-service-card { text-align: start; }

/* ═══════════ الهيرو: عنوان ضخم + ازرار + لقطة لوحة التحكم ═══════════ */
.hero2 {
    background: linear-gradient(180deg, #f6fdfa 0%, #ecfdf5 40%, #f8fafc 100%) !important;
    padding-block: 3rem 0 !important;
    text-align: center; overflow: hidden;
}
.hero2-wrap { max-inline-size: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); position: relative; z-index: 2; }

.hero2-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--hs-line); border-radius: 999px;
    padding: .38rem .45rem .38rem 1rem; font-size: .86rem; font-weight: 700; color: #334155;
    box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.hero2-badge > i { color: var(--hs-green); }
.hero2-badge a {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--hs-mint); color: var(--hs-green-dk);
    border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 800; text-decoration: none;
}
.hero2-badge a:hover { background: #d1fae5; color: var(--hs-green-dp); }

.hero2-title { margin: 1.4rem 0 1rem; line-height: 1.22; letter-spacing: -.02em; font-weight: 800; }
.hero2-title span { display: block; font-size: clamp(1.9rem, 5vw, 3.4rem); }
.hero2-title__g { color: var(--hs-green) !important; }
.hero2-title__d { color: var(--hs-ink) !important; }

.hero2-lead {
    max-inline-size: 60ch; margin: 0 auto 1.6rem;
    color: #475569 !important; font-size: clamp(.95rem, 1.6vw, 1.08rem); line-height: 1.9;
}

.hero2-cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.hero2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    block-size: 52px; padding-inline: 1.7rem; border-radius: 12px;
    font-weight: 800; font-size: 1rem; text-decoration: none; border: 1px solid transparent;
    transition: transform .15s, background .15s, box-shadow .15s;
}
.hero2-btn--demo { background: var(--hs-green); color: #fff; box-shadow: 0 10px 26px rgba(16,185,129,.32); }
.hero2-btn--demo:hover { background: var(--hs-green-dk); color: #fff; transform: translateY(-2px); }
.hero2-btn--go { background: #0f172a; color: #fff; }
.hero2-btn--go:hover { background: #1e293b; color: #fff; transform: translateY(-2px); }
.hero2-btn--ghost { background: #fff; color: #334155; border-color: var(--hs-line); }
.hero2-btn--ghost:hover { border-color: var(--hs-green); color: var(--hs-green-dk); }

.hero2-note { display: block; margin-block-start: .9rem; font-size: .84rem; color: var(--hs-muted); }

.hero2-shot {
    margin: 2.4rem auto 0; max-inline-size: 1000px;
    background: #fff; border: 1px solid var(--hs-line);
    border-radius: 16px 16px 0 0; overflow: hidden;
    box-shadow: 0 -2px 0 rgba(16,185,129,.12), 0 30px 70px rgba(6,95,70,.18);
}
.hero2-shot__bar { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; background: #f1f5f9; border-block-end: 1px solid var(--hs-line); }
.hero2-shot__dots { display: inline-flex; gap: .3rem; }
.hero2-shot__dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #cbd5e1; }
.hero2-shot__dots i:first-child { background: #fca5a5; }
.hero2-shot__dots i:nth-child(2) { background: #fde68a; }
.hero2-shot__dots i:last-child { background: #a7f3d0; }
.hero2-shot__url { font-size: .76rem; color: var(--hs-muted); direction: ltr; font-family: ui-monospace, monospace; display: inline-flex; align-items: center; gap: .35rem; }
.hero2-shot img { display: block; inline-size: 100%; block-size: auto; }

.hero2-feats { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; padding-block: 1.3rem 2rem; }
.hero2-feats span { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: #334155; font-weight: 600; }
.hero2-feats i { color: var(--hs-green-dk); }

@media (max-width: 640px) {
    .hero2 { padding-block: 2rem 0 !important; }
    .hero2-btn { inline-size: 100%; }
    .hero2-badge { font-size: .78rem; padding-inline-start: .8rem; }
    .hero2-shot { border-radius: 12px 12px 0 0; }
}

/* ═══════════ التذييل: خلفية فاتحة واربعة اعمدة ═══════════ */
.ft2 { background: #fff !important; border-block-start: 1px solid var(--hs-line); color: var(--hs-ink) !important; }
.ft2-wrap { max-inline-size: 1220px; margin-inline: auto; padding: 3rem clamp(1rem, 3vw, 2rem) 0; }
.ft2-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-block-end: 2.2rem; }

.ft2-logo img { block-size: 46px; inline-size: auto; }
.ft2-desc { margin: 1rem 0 1.2rem; font-size: .9rem; line-height: 1.9; color: var(--hs-muted); max-inline-size: 42ch; }
.ft2-mini { display: block; font-size: .85rem; font-weight: 800; color: var(--hs-ink); margin-block-end: .5rem; }
.ft2-mail, .ft2-addr { display: flex; align-items: center; gap: .45rem; font-size: .86rem; color: #475569; text-decoration: none; margin-block-end: .4rem; }
.ft2-mail i, .ft2-addr i { color: var(--hs-green-dk); }
.ft2-mail:hover { color: var(--hs-green-dk); }

.ft2-social { display: flex; gap: .5rem; margin-block-start: 1rem; }
.ft2-social a {
    inline-size: 38px; block-size: 38px; border-radius: 11px;
    border: 1px solid var(--hs-line); background: #fff; color: #475569;
    display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
    text-decoration: none; transition: all .15s;
}
.ft2-social a:hover { background: var(--hs-green); border-color: var(--hs-green); color: #fff; transform: translateY(-2px); }

.ft2-col { display: flex; flex-direction: column; gap: .55rem; }
.ft2-col > b { font-size: 1rem; font-weight: 800; color: var(--hs-ink); margin-block-end: .6rem; position: relative; padding-block-end: .5rem; }
.ft2-col > b::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 34px; block-size: 3px; border-radius: 99px; background: var(--hs-green); }
.ft2-col a { font-size: .88rem; color: var(--hs-muted); text-decoration: none; line-height: 1.6; transition: color .15s, padding .15s; }
.ft2-col a:hover { color: var(--hs-green-dk); padding-inline-start: .25rem; }

.ft2-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding-block: 1.1rem; border-block-start: 1px solid var(--hs-line);
    font-size: .84rem; color: var(--hs-muted);
}
.ft2-bottom b { color: var(--hs-ink); }
.ft2-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.ft2-legal a { color: var(--hs-muted); text-decoration: none; }
.ft2-legal a:hover { color: var(--hs-green-dk); }
.ft2-made { display: inline-flex; align-items: center; gap: .35rem; }
.ft2-made i { color: var(--hs-green); }

@media (max-width: 980px) { .ft2-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
    .ft2-cols { grid-template-columns: 1fr; gap: 1.6rem; }
    .ft2-bottom { flex-direction: column; text-align: center; gap: .6rem; }
}