/* ============================================================
   طبقة هوية جواهر ERP — الموقع الرسمي
   تُحمَّل بعد ورقة كل صفحة، وتضبط ما لا تكفيه الرموز: الخطوط،
   الجوهرة، الهيرو، وتفاصيل المكوّنات وفق مرجع المصمم.

   الألوان الأساسية مصبوغة في أوراق الصفحات نفسها
   (scripts/apply_jawaher_brand.php) فلا تُكرَّر هنا.
   ============================================================ */

/* ───────────── الخطوط ───────────── */

body,
.landing-body,
.about-body,
.contact-body,
.blog-body,
.features-body,
.gold-prices-body,
.gold-calculator-body,
.legal-body,
.article-body,
.resources-body {
    font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 400;
}

button,
input,
select,
textarea {
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* اللاتيني والأرقام بخط Inter — أوضح داخل نص عربي */
.hero-brand-erp,
.stat-card strong,
.gp-price-table td,
.gc-result strong,
.feature-index,
[lang="en"] {
    font-family: 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* ───────────── الجوهرة (شعار العلامة) ───────────── */

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
}

.brand-mark svg {
    width: 26px;
    height: 32px;
    color: var(--brand-2, #14b8a6);
    stroke-width: 1.6;
    filter: drop-shadow(0 3px 4px rgba(20, 184, 166, .28));
}

.brand-text strong {
    color: #0e1a2b;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.brand-text small {
    display: block;
    margin-top: 3px;
    color: #69788d;
    font-size: 10px;
    font-weight: 500;
}

/* ───────────── الشريط العلوي ───────────── */

.landing-nav {
    background: rgba(255, 255, 255, .93);
    border-bottom: 1px solid #eef2f6;
    backdrop-filter: blur(16px);
}

.nav-links a {
    color: #3f5773;
    font-size: 13.5px;
    font-weight: 600;
}

.nav-links a:hover,
.nav-links a.active {
    color: #0c8479;
}

.nav-btn {
    min-height: 44px;
    border-radius: 10px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 700;
}

.nav-btn-ghost {
    color: #27466b;
    background: #fff;
    border: 1px solid #c3d0de;
    box-shadow: none;
}

.nav-btn-ghost:hover {
    border-color: #14b8a6;
    background: #f3fcfa;
}

/* ───────────── الأزرار ───────────── */

.btn {
    border-radius: 10px;
    font-weight: 700;
}

.nav-btn-primary,
.btn-primary,
.newsletter-app-link {
    color: #fff;
    background: linear-gradient(120deg, #08817d, #077a78);
    box-shadow: 0 5px 14px rgba(20, 184, 166, .22);
}

.nav-btn-primary:hover,
.btn-primary:hover,
.newsletter-app-link:hover {
    background: #086f6a;
    box-shadow: 0 8px 22px rgba(20, 184, 166, .3);
}

.btn-video {
    color: #27466b;
    background: #fff;
    border: 1px solid #c3d0de;
    box-shadow: none;
}

.btn-video:hover {
    border-color: #14b8a6;
    background: #f3fcfa;
}

.btn-video svg {
    color: #0c8479;
    fill: none;
}

/* ───────────── الهيرو ───────────── */

/* التوهج التركوازي خلف النص (يمينًا في RTL) لا خلف الصورة: صورة الأجهزة
   خلفيتها بيضاء، فأي لون تحتها يرسم حولها مربعًا حادّ الحواف. */
.landing-body .hero-section {
    min-height: 660px;
    padding-top: 78px;
    background:
        radial-gradient(ellipse at 80% 42%, rgba(217, 244, 240, .5), transparent 52%),
        #fff;
}

/* صورة الأجهزة تجلس يسارًا بلا قصّ، لا خلفية ممتدة خلف النص */
.landing-body .hero-section::before {
    background: linear-gradient(270deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .72) 30%, rgba(255, 255, 255, 0) 56%);
}

/**
 * صورة البنر تُثبَّت على الحاوية لا على حافة الشاشة.
 *
 * كانت `inset: auto auto 0 0` مع `width: min(56%, 720px)`: الصورة معلَّقة على
 * حافة الصفحة وعرضها مسقوف عند ‎720‎، بينما النص داخل حاوية مركزية عرضها
 * ‎1180‎. نظاما إحداثيات مختلفان — يتصادفان عند ‎1440‎ ويتباعدان بلا حدّ بعده:
 *
 *   العرض 1440 ⇠ الصورة تنتهي عند 735 والنص يبدأ عند 658 (متلاصقان)
 *   العرض 1920 ⇠ ‎163px‎ فراغ ميت بينهما
 *   العرض 2397 ⇠ ‎401px‎ — ثقب في منتصف البنر والصورة منكمشة في الزاوية
 *
 * الآن تمتد منطقة الصورة من حافة الصفحة حتى حدّ عمود النص، فالفجوة صفرٌ عند
 * كل عرض. والحدّ `50% - 8px` هو حدّ العمودين في الشبكة (نصف الحاوية ناقص
 * عرض عمود النص) زائد تراكبٍ مقصود تسعين بكسلًا تمرّ فيه الصورة تحت كتلة
 * النص — وهو التراكب نفسه الذي يعطي تماسك البنر عند ‎1440‎ اليوم.
 *
 * و`height: 100%` مع `contain` تجعل الصورة تكبر بكِبَر المساحة بدل أن تتجمّد
 * عند ‎720‎، فتبقى نسبتها محفوظة ولا تُقصّ عند أي عرض.
 */
.landing-body .hero-art {
    inset: 0 auto 0 0;
    right: calc(50% - 8px);
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
}

.landing-body .hero-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.landing-body .hero-copy {
    padding-bottom: 64px;
}

.hero-kicker {
    display: inline-block;
    width: auto !important;
    margin: 0 0 18px !important;
    padding: 6px 16px;
    border-radius: 999px;
    background: #eaf6fd;
    color: #1f7099;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}

.landing-body .hero-copy h1 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    color: #0e1a2b;
    font-size: clamp(40px, 4.6vw, 64px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
}

.hero-brand-name {
    color: #0e1a2b;
}

.hero-brand-erp {
    color: #0c8479;
    font-size: .42em;
    font-weight: 700;
    letter-spacing: 0;
}

.hero-lead {
    width: min(540px, 100%) !important;
    margin: 14px 0 0 !important;
    color: #27466b !important;
    font-size: clamp(22px, 2.1vw, 30px) !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
}

.landing-body .hero-copy > p:not(.hero-kicker):not(.hero-lead) {
    width: min(520px, 100%);
    margin-top: 16px;
    color: #59728f;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.9;
}

.landing-body .hero-badges span {
    border-radius: 12px;
    border-color: rgba(20, 184, 166, .16);
    font-weight: 600;
}

/* ───────────── الأرقام ───────────── */

.stats-panel {
    border-radius: 16px;
}

.stat-card strong {
    color: #13243d;
    font-weight: 700;
}

.stat-card span {
    color: #0c8479;
}

/* ───────────── عناوين الأقسام ───────────── */

.section-heading h2,
.item-copy h2,
.mobile-copy h2,
.cta-copy h2 {
    color: #0e1a2b;
    font-weight: 700;
    letter-spacing: -.5px;
}

.section-heading h2::after {
    background: linear-gradient(120deg, #09aaa7, #14b8a6);
}

.eyebrow {
    color: #0c8479;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* ───────────── البطاقات ───────────── */

.feature-card,
.module-tile,
.integration-card,
.content-card {
    border: 1px solid #e1e8ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(24, 50, 74, .03);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.feature-card:hover,
.module-tile:hover,
.integration-card:hover,
.content-card:hover {
    transform: translateY(-3px);
    border-color: #14b8a6;
    box-shadow: 0 10px 26px rgba(20, 184, 166, .1);
}

.feature-index {
    color: #0c8479;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.feature-card h3,
.module-tile h3,
.integration-card h3 {
    color: #284463;
    font-weight: 700;
}

.feature-card p,
.module-tile p,
.integration-card p {
    color: #5f7896;
    line-height: 1.75;
}

.feature-card > span,
.fc-icon {
    color: #0c8479;
    background: linear-gradient(135deg, #ebf7f8, #eaf8f5);
    border: 0;
    border-radius: 14px;
}

/* ───────────── الأقسام الداكنة (الرحلة والدعوة) ───────────── */

.journey-panel,
.cta-panel {
    border-radius: 18px;
    overflow: hidden;
}

.journey-panel::after,
.cta-panel::after {
    background: linear-gradient(90deg, rgba(14, 26, 43, .93) 0%, rgba(14, 26, 43, .82) 52%, rgba(19, 36, 61, .38) 100%);
}

.journey-content h2,
.cta-copy h2 {
    color: #fff;
}

.journey-step b {
    color: #fff;
}

.journey-step span {
    color: #14b8a6;
    border-color: rgba(20, 184, 166, .35);
}

/* ───────────── الفوتر ───────────── */

.landing-footer {
    color: #d7e2ed;
    background: #0e2031;
    border-top: 0;
}

.footer-brand span {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.footer-about p,
.footer-column a,
.footer-contact span {
    color: #b9cbdc;
    font-weight: 400;
}

.footer-column a:hover {
    color: #29c5be;
}

.footer-column h3,
.newsletter-label {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.footer-column h3::after,
.newsletter-label::after {
    background: #14b8a6;
}

.fc-icon {
    color: #29c5be;
    background: rgba(20, 184, 166, .12);
}

.social-row a {
    border-radius: 10px;
}

.social-row a:hover {
    background: rgba(20, 184, 166, .18);
}

/* ───────────── بنرات الصفحات الداخلية ───────────── */

.about-hero__copy h1,
.features-hero__copy h1,
.blog-hero__copy h1,
.contact-hero__copy h1,
.gp-hero__copy h1,
.gc-hero__copy h1,
.resources-hero h1,
.article-hero h1,
.legal-header h1 {
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.35;
}

.about-prooflets span,
.features-hero__badges span {
    border-radius: 999px;
}

.about-stats__panel {
    border-radius: 16px;
}

.landing-body :is(
    .about-story__visual,
    .trust-card,
    .locations-card,
    .benefits-banner,
    .popular-card,
    .post-card,
    .feature-row,
    .features-cta__panel,
    .blog-newsletter-panel,
    .contact-form-card,
    .contact-methods-card
) {
    border-color: #e1e8ef;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(14, 26, 43, .07);
}

.landing-body :is(
    .about-story__visual img,
    .trust-card img,
    .locations-map img,
    .benefits-banner > img,
    .popular-item img,
    .post-image img,
    .feature-row__visual img,
    .features-cta__panel > img,
    .blog-newsletter-panel > img
) {
    border-radius: 12px;
}

.landing-body :is(
    .about-story__visual img,
    .trust-card img
) {
    border-radius: 0;
}

/* ───────────── حماية الزوم والعروض المتوسطة ───────────── */

@media (max-width: 1180px) {
    .landing-body .hero-grid,
    .landing-body .products-layout,
    .landing-body .channels-layout,
    .landing-body .journey-panel,
    .landing-body .suite-row-top,
    .landing-body .suite-row-bottom,
    .landing-body .suite-comparison,
    .landing-body .ecommerce-grid,
    .landing-body .pricing-layout,
    .landing-body .automation-grid,
    .landing-body .reports-layout,
    .landing-body .clients-panel,
    .landing-body .cta-panel,
    .landing-body .about-hero__grid,
    .landing-body .about-story__grid,
    .landing-body .clients-layout,
    .landing-body .about-cta__panel,
    .landing-body .contact-hero__grid,
    .landing-body .contact-panel-grid,
    .landing-body .locations-card,
    .landing-body .benefits-content,
    .landing-body .contact-cta__panel,
    .landing-body .features-hero__grid,
    .landing-body .feature-row,
    .landing-body .feature-row.is-reverse,
    .landing-body .feature-row.integrations-row,
    .landing-body .features-cta__panel,
    .landing-body .blog-hero__grid,
    .landing-body .blog-featured-layout,
    .landing-body .blog-newsletter-panel,
    .landing-body .gp-hero__grid,
    .landing-body .gp-promo__grid,
    .landing-body .gp-notes-panel,
    .landing-body .gc-hero__grid {
        grid-template-columns: 1fr !important;
    }

    .landing-body :is(
        .hero-grid,
        .products-layout,
        .channels-layout,
        .journey-panel,
        .suite-row-top,
        .suite-row-bottom,
        .suite-comparison,
        .ecommerce-grid,
        .pricing-layout,
        .automation-grid,
        .reports-layout,
        .clients-panel,
        .cta-panel,
        .about-hero__grid,
        .about-story__grid,
        .clients-layout,
        .about-cta__panel,
        .contact-hero__grid,
        .contact-panel-grid,
        .locations-card,
        .benefits-content,
        .contact-cta__panel,
        .features-hero__grid,
        .feature-row,
        .feature-row.is-reverse,
        .feature-row.integrations-row,
        .features-cta__panel,
        .blog-hero__grid,
        .blog-featured-layout,
        .blog-newsletter-panel,
        .gp-hero__grid,
        .gp-promo__grid,
        .gp-notes-panel,
        .gc-hero__grid
    ) {
        grid-template-columns: 1fr !important;
    }

    .landing-body :is(
        .hero-copy,
        .products-copy,
        .channels-copy,
        .journey-content,
        .suite-mobile-copy,
        .pricing-copy,
        .automation-copy,
        .reports-copy,
        .clients-copy,
        .cta-copy,
        .about-hero__copy,
        .about-story__copy,
        .clients-copy,
        .about-cta__copy,
        .contact-hero__copy,
        .contact-form-card,
        .contact-methods-card,
        .locations-content,
        .benefits-content,
        .contact-cta__copy,
        .features-hero__copy,
        .feature-row__content,
        .features-cta__copy,
        .blog-hero__copy,
        .blog-featured-copy,
        .blog-newsletter-copy,
        .gp-hero__copy,
        .gp-promo__copy,
        .gc-hero__copy
    ) {
        grid-column: auto !important;
        min-width: 0;
        max-width: 100%;
    }

    .landing-body :is(
        .hero-art,
        .products-visual,
        .channels-visual,
        .journey-panel > img,
        .suite-visual,
        .pricing-card,
        .automation-visual,
        .reports-visual,
        .clients-panel > img,
        .cta-panel > img,
        .about-hero__media,
        .about-story__visual,
        .trust-card,
        .about-cta__actions,
        .contact-hero__media,
        .locations-map,
        .benefits-banner,
        .contact-cta__actions,
        .features-hero__visual,
        .feature-row__visual,
        .features-cta__actions,
        .features-cta__panel,
        .blog-hero__media,
        .blog-featured-media,
        .blog-newsletter-panel,
        .blog-newsletter-panel > img,
        .gp-hero__media,
        .gp-promo__visual,
        .gc-hero__media,
        .gc-rate-card
    ) {
        grid-column: auto !important;
        min-width: 0;
        max-width: 100%;
    }

    .landing-body :is(
        .feature-row.is-reverse .feature-row__visual,
        .feature-row.is-reverse .feature-row__content
    ) {
        order: initial;
    }

    .landing-body :is(
        .about-cta__copy,
        .about-cta__actions,
        .contact-cta__copy,
        .contact-cta__actions,
        .features-cta__copy,
        .features-cta__actions,
        .cta-copy,
        .cta-actions,
        .blog-newsletter-copy
    ) {
        justify-self: stretch;
        width: 100%;
        max-width: 720px;
    }

    .landing-body :is(
        .trust-card img,
        .about-cta__panel > img,
        .contact-cta__panel > img,
        .features-cta__panel > img,
        .cta-panel > img,
        .blog-newsletter-panel > img
    ) {
        opacity: .55;
        filter: saturate(.92);
    }
}

/* ───────────── التركيز ───────────── */

:focus-visible {
    outline: 3px solid #14b8a6;
    outline-offset: 3px;
}

/* ───────────── الجوال ───────────── */

@media (max-width: 1120px) {
    .mobile-toggle {
        display: grid;
        place-items: center;
        margin-inline-start: auto;
    }

    .nav-menu {
        position: absolute;
        top: calc(100% + 1px);
        right: 20px;
        left: 20px;
        display: none;
        padding: 16px;
        border: 1px solid #e1e8ef;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 18px 35px rgba(14, 26, 43, .1);
    }

    .nav-menu.open {
        display: grid;
    }

    .nav-links,
    .nav-actions {
        display: grid;
        gap: 6px;
    }

    .nav-links a {
        min-height: 42px;
        padding: 0 10px;
    }

    .brand-text small {
        display: none;
    }
}

@media (max-width: 940px) {
    .landing-body .hero-section {
        min-height: 0;
        padding-bottom: 40px;
    }

    .landing-body .hero-section::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
    }

    .landing-body .hero-art {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: 28px;
    }

    .landing-body .hero-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .landing-body .hero-copy {
        grid-column: 1;
        padding-bottom: 0;
        text-align: right;
    }
}

@media (max-width: 640px) {
    .landing-body .hero-copy h1 {
        gap: 10px;
        font-size: 38px;
    }

    .hero-lead {
        font-size: 21px !important;
    }

    .landing-body .hero-copy > p:not(.hero-kicker):not(.hero-lead) {
        font-size: 15px;
    }

    .landing-body .hero-actions {
        gap: 10px;
    }

    .brand-text strong {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}