/* ═══════════════════════════════════════════════════════════════════
   صفحات هبوط المنتجات (جلسة، مسار، سقيا، ورشتي، المتجر). نظام بصري واحد (jl-*).

   هوية الوحدة نفسها: بترولي عميق للعناوين، أخضر زمردي للفعل، ولمسة
   وردية للوسوم فقط. الخط أكبر وأهدأ من لوحة الإدارة لأن القارئة
   غريبة عن النظام، والصفحة تُقرأ على الجوّال أولًا.
   ═══════════════════════════════════════════════════════════════════ */

.jl {
    --jl-ink: #0d353f;
    --jl-brand: #047857;
    --jl-brand-d: #065f46;
    --jl-brand-l: #ecfdf5;
    --jl-rose: #a0325b;
    --jl-rose-l: #fdeaf1;
    --jl-gold: #b07a2a;
    --jl-body: #3f4a52;
    --jl-mut: #74808a;
    --jl-line: #e6e9ec;
    --jl-soft: #f6f7f8;
    --jl-cream: #fbf7f3;
    --jl-wrap: 1180px;
    --jl-r: 18px;

    background: #fff;
    color: var(--jl-body);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.8;
    overflow-x: hidden;
}
.jl * { box-sizing: border-box; }
.jl h1, .jl h2, .jl h3, .jl h4 { color: var(--jl-ink); font-weight: 800; line-height: 1.3; margin: 0; text-wrap: balance; }
.jl p { margin: 0; }
.jl img { max-width: 100%; height: auto; display: block; }
.jl-wrap { max-width: var(--jl-wrap); margin: 0 auto; padding: 0 20px; }

/* ── الأزرار ── */
.jl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 12px; padding: .85rem 1.5rem; font-weight: 800; text-decoration: none; border: 1.5px solid transparent; font-size: 1rem; transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.jl-btn:hover { transform: translateY(-1px); }
.jl-btn--brand { background: var(--jl-brand); color: #fff; box-shadow: 0 8px 20px rgba(4,120,87,.22); }
.jl-btn--brand:hover { background: var(--jl-brand-d); color: #fff; }
.jl-btn--ink { background: var(--jl-ink); color: #fff; }
.jl-btn--ghost { background: #fff; color: var(--jl-ink); border-color: var(--jl-line); }
.jl-btn--light { background: #fff; color: var(--jl-ink); }
.jl-btn--sm { padding: .55rem 1rem; font-size: .92rem; border-radius: 10px; }
.jl-btn--block { width: 100%; }

/* ── الترويسة ── */
.jl-hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.jl-hd--solid { background: rgba(255,255,255,.96); border-bottom-color: var(--jl-line); }
.jl-hd__in { max-width: var(--jl-wrap); margin: 0 auto; padding: .7rem 20px; display: flex; align-items: center; gap: 1.2rem; }
.jl-hd__brand { display: flex; align-items: baseline; gap: .45rem; text-decoration: none; color: var(--jl-ink); }
.jl-hd__mark { align-self: center; width: 38px; height: 38px; border-radius: 12px; background: var(--jl-ink); color: #fff; display: grid; place-items: center; font-size: 1.15rem; }
.jl-hd__name { font-size: 1.5rem; font-weight: 900; }
.jl-hd__by { font-size: .8rem; color: var(--jl-mut); font-weight: 700; text-decoration: none; align-self: center; }
.jl-hd__by:hover { color: var(--jl-brand); }
.jl-hd__home { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--jl-line); background: #fff; color: var(--jl-ink); display: grid; place-items: center; text-decoration: none; flex: none; }
.jl-hd__home:hover { border-color: var(--jl-brand); color: var(--jl-brand); }
.jl-hd__nav { display: flex; gap: 1.4rem; margin-inline-start: 1rem; }
.jl-hd__nav a { color: var(--jl-body); text-decoration: none; font-weight: 700; font-size: .95rem; }
.jl-hd__nav a:hover { color: var(--jl-brand); }
.jl-hd__end { margin-inline-start: auto; display: flex; align-items: center; gap: .6rem; }
.jl-hd__login { color: var(--jl-ink); font-weight: 700; text-decoration: none; padding: .4rem .6rem; }
.jl-hd__burger { display: none; border: 1.5px solid var(--jl-line); background: #fff; border-radius: 10px; width: 40px; height: 40px; font-size: 1.2rem; color: var(--jl-ink); }
.jl-hd__sheet { display: none; }
@media (max-width: 920px) {
    .jl-hd__nav, .jl-hd__login { display: none; }
    .jl-hd__home { display: none; }
    .jl-hd__burger { display: grid; place-items: center; }
    .jl-hd__sheet { display: flex; flex-direction: column; gap: .25rem; padding: .6rem 20px 1rem; border-top: 1px solid var(--jl-line); background: #fff; }
    .jl-hd__sheet a { padding: .7rem .4rem; color: var(--jl-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--jl-soft); }
    .jl-hd__sheet .jl-btn { margin-top: .6rem; border: 0; }
}
/* على الجوّال الضيّق لا يتّسع الصفّ للزرّ والقائمة معًا؛ الزرّ يبقى في القائمة المنسدلة وفي الهيرو */
@media (max-width: 480px) {
    .jl-hd__end > .jl-btn { display: none; }
    .jl-hd__by { display: none; }
}

/* ── الهيرو ── */
.jl-hero { background: radial-gradient(1200px 520px at 85% -10%, #e6f3f0 0%, transparent 60%), radial-gradient(900px 420px at 0% 100%, var(--jl-rose-l) 0%, transparent 55%), #fff; padding: 3.2rem 0 2rem; }
.jl-hero__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; }
.jl-hero__badge { display: inline-flex; align-items: center; gap: .45rem; background: var(--jl-rose-l); color: var(--jl-rose); border-radius: 999px; padding: .35rem .9rem; font-weight: 800; font-size: .86rem; margin-bottom: 1rem; }
.jl-hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1rem; }
.jl-hero h1 b { color: var(--jl-brand); }
.jl-hero__sub { font-size: 1.12rem; color: var(--jl-body); max-width: 560px; margin-bottom: 1.4rem; }
.jl-hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.jl-hero__note { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.1rem; font-size: .9rem; color: var(--jl-mut); font-weight: 700; }
.jl-hero__note i { color: var(--jl-brand); margin-inline-end: .25rem; }
.jl-shot { border-radius: var(--jl-r); border: 1px solid var(--jl-line); box-shadow: 0 30px 60px -24px rgba(13,53,63,.35), 0 8px 24px -12px rgba(13,53,63,.2); overflow: hidden; background: #fff; }
.jl-shot img { width: 100%; }
.jl-hero__shot { position: relative; }
.jl-hero__float { position: absolute; inset-inline-start: -14px; bottom: 22px; background: #fff; border-radius: 14px; padding: .6rem .9rem; box-shadow: 0 14px 30px -10px rgba(13,53,63,.3); display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 800; color: var(--jl-ink); border: 1px solid var(--jl-line); }
.jl-hero__float i { color: var(--jl-brand); font-size: 1.2rem; }
@media (max-width: 920px) { .jl-hero__in { grid-template-columns: 1fr; } .jl-hero { padding-top: 2rem; } .jl-hero__float { display: none; } }

/* ── شريط الثقة ── */
.jl-trust { border-block: 1px solid var(--jl-line); background: var(--jl-soft); }
.jl-trust__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.2rem 0; }
.jl-trust__g > div { display: flex; align-items: center; gap: .7rem; }
.jl-trust__ic { width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--jl-line); display: grid; place-items: center; color: var(--jl-brand); font-size: 1.2rem; flex: none; }
.jl-trust__v { font-weight: 800; color: var(--jl-ink); line-height: 1.3; }
.jl-trust__k { font-size: .82rem; color: var(--jl-mut); }
@media (max-width: 920px) { .jl-trust__g { grid-template-columns: repeat(2, 1fr); } }

/* ── الأقسام ── */
.jl-sec { padding: 4rem 0; }
.jl-sec--soft { background: var(--jl-soft); }
.jl-sec--cream { background: var(--jl-cream); }
.jl-head { text-align: center; max-width: 720px; margin: 0 auto 2.4rem; }
.jl-head__eyebrow { display: inline-block; color: var(--jl-brand); font-weight: 800; font-size: .88rem; letter-spacing: .02em; margin-bottom: .5rem; }
.jl-head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .6rem; }
.jl-head p { color: var(--jl-mut); font-size: 1.05rem; }

/* ميزة مع لقطة، تتناوب الجهتان */
.jl-feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.6rem; align-items: center; padding: 2.2rem 0; }
.jl-feat:nth-child(even) .jl-feat__text { order: 2; }
.jl-feat__kicker { display: inline-flex; align-items: center; gap: .4rem; color: var(--jl-rose); font-weight: 800; font-size: .86rem; margin-bottom: .5rem; }
.jl-feat h3 { font-size: 1.55rem; margin-bottom: .7rem; }
.jl-feat p { color: var(--jl-body); margin-bottom: 1rem; }
.jl-feat ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.jl-feat li { display: flex; gap: .55rem; align-items: flex-start; }
.jl-feat li i { color: var(--jl-brand); margin-top: .3rem; }
@media (max-width: 920px) { .jl-feat { grid-template-columns: 1fr; gap: 1.2rem; } .jl-feat:nth-child(even) .jl-feat__text { order: 0; } }

/* شبكة مزايا صغيرة */
.jl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.jl-card { background: #fff; border: 1px solid var(--jl-line); border-radius: var(--jl-r); padding: 1.4rem 1.3rem; }
.jl-card__ic { width: 46px; height: 46px; border-radius: 13px; background: var(--jl-brand-l); color: var(--jl-brand); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: .9rem; }
.jl-card h4 { font-size: 1.08rem; margin-bottom: .4rem; }
.jl-card p { color: var(--jl-mut); font-size: .95rem; }
@media (max-width: 920px) { .jl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .jl-grid { grid-template-columns: 1fr; } }

/* خطوات الزيارة */
.jl-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; counter-reset: step; }
.jl-flow__s { background: #fff; border: 1px solid var(--jl-line); border-radius: 16px; padding: 1.1rem 1rem; position: relative; }
.jl-flow__s::before { counter-increment: step; content: counter(step); position: absolute; top: -12px; inset-inline-start: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--jl-ink); color: #fff; font-size: .8rem; font-weight: 800; display: grid; place-items: center; }
.jl-flow__s i { color: var(--jl-rose); font-size: 1.3rem; }
.jl-flow__s h4 { font-size: 1rem; margin: .4rem 0 .25rem; }
.jl-flow__s p { font-size: .86rem; color: var(--jl-mut); }
@media (max-width: 920px) { .jl-flow { grid-template-columns: repeat(2, 1fr); } }

/* السعر */
.jl-price { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: stretch; }
.jl-price__card { background: #fff; border: 2px solid var(--jl-ink); border-radius: 22px; padding: 2rem; position: relative; overflow: hidden; }
.jl-price__card::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--jl-rose-l); inset-inline-end: -90px; top: -90px; z-index: 0; }
.jl-price__card > * { position: relative; z-index: 1; }
.jl-price__tag { display: inline-block; background: var(--jl-ink); color: #fff; border-radius: 999px; padding: .3rem .9rem; font-weight: 800; font-size: .85rem; }
.jl-price__v { font-size: 3.2rem; font-weight: 900; color: var(--jl-ink); line-height: 1.1; margin: .8rem 0 .2rem; font-variant-numeric: tabular-nums; }
.jl-price__v small { font-size: 1.1rem; font-weight: 700; color: var(--jl-mut); }
.jl-price__free { display: inline-flex; align-items: center; gap: .4rem; color: var(--jl-brand); font-weight: 800; margin-bottom: 1rem; }
.jl-price__list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; }
.jl-price__list li { display: flex; gap: .45rem; font-size: .95rem; }
.jl-price__list li i { color: var(--jl-brand); margin-top: .3rem; }
.jl-price__side { background: var(--jl-ink); color: #fff; border-radius: 22px; padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.jl-price__side h3 { color: #fff; font-size: 1.4rem; margin-bottom: .8rem; }
.jl-price__side p { color: rgba(255,255,255,.82); margin-bottom: .6rem; }
.jl-price__side .jl-btn { align-self: flex-start; margin-top: .8rem; }
@media (max-width: 920px) { .jl-price { grid-template-columns: 1fr; } .jl-price__list { grid-template-columns: 1fr; } }

/* المقارنة */
.jl-cmp { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--jl-r); overflow: hidden; border: 1px solid var(--jl-line); }
.jl-cmp th, .jl-cmp td { padding: .9rem 1rem; text-align: start; border-bottom: 1px solid var(--jl-line); vertical-align: top; }
.jl-cmp th { background: var(--jl-soft); color: var(--jl-ink); font-size: .95rem; }
.jl-cmp td:first-child { font-weight: 800; color: var(--jl-ink); }
.jl-cmp .bad { color: var(--jl-rose); }
.jl-cmp .good { color: var(--jl-brand); font-weight: 700; }
.jl-cmp-wrap { overflow-x: auto; }

/* لمن */
.jl-who { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.jl-who span { background: #fff; border: 1px solid var(--jl-line); border-radius: 999px; padding: .55rem 1.1rem; font-weight: 700; color: var(--jl-ink); }

/* الأسئلة */
.jl-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .6rem; }
.jl-faq details { background: #fff; border: 1px solid var(--jl-line); border-radius: 14px; padding: .2rem 1.1rem; }
.jl-faq summary { cursor: pointer; font-weight: 800; color: var(--jl-ink); padding: .8rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.jl-faq summary::after { content: "+"; color: var(--jl-brand); font-size: 1.3rem; line-height: 1; }
.jl-faq details[open] summary::after { content: "−"; }
.jl-faq__a { padding: 0 0 1rem; color: var(--jl-body); }

/* نداء الختام */
.jl-cta { background: linear-gradient(135deg, var(--jl-ink), #10484f 60%, #0f5f4e); color: #fff; padding: 4rem 0; text-align: center; }
.jl-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .6rem; }
.jl-cta p { color: rgba(255,255,255,.82); max-width: 640px; margin: 0 auto 1.4rem; }
.jl-cta__b { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* الذيل */
.jl-ft { background: #0b2a31; color: rgba(255,255,255,.78); padding: 3rem 0 0; }
.jl-ft__in { max-width: var(--jl-wrap); margin: 0 auto; padding: 0 20px 2rem; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; }
.jl-ft__brand p { font-size: .92rem; margin: .8rem 0 1rem; }
.jl-ft__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.jl-ft__col { display: flex; flex-direction: column; gap: .45rem; }
.jl-ft__col h6 { color: #fff; font-weight: 800; margin-bottom: .3rem; }
.jl-ft__col a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .92rem; }
.jl-ft__col a:hover { color: #fff; }
.jl-ft__bar { border-top: 1px solid rgba(255,255,255,.12); padding: 1rem 20px; max-width: var(--jl-wrap); margin: 0 auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 920px) { .jl-ft__in { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .jl-btn { transition: none; } }

/* ── باقات المتجر (من القاعدة) بالتصميم نفسه ── */
.jl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; align-items: stretch; }
.jl-plan { background: #fff; border: 1.5px solid var(--jl-line); border-radius: 22px; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; position: relative; }
.jl-plan--hot { border-color: var(--jl-ink); box-shadow: 0 20px 40px -24px rgba(13,53,63,.4); }
.jl-plan h3 { font-size: 1.25rem; }
.jl-plan__tag { color: var(--jl-mut); font-size: .92rem; }
.jl-plan .jl-price__v { font-size: 2.2rem; margin: .4rem 0; }
.jl-plan__f { list-style: none; padding: 0; margin: .4rem 0 1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .95rem; }
.jl-plan__f li { display: flex; gap: .45rem; }
.jl-plan__f li i { color: var(--jl-brand); margin-top: .3rem; }
.jl-plan .jl-btn { margin-top: auto; }
.jl-trial { text-align: center; color: var(--jl-mut); margin-top: 1.2rem; font-weight: 700; }
.jl-trial i { color: var(--jl-brand); }
@media (max-width: 920px) { .jl-flow { grid-template-columns: repeat(2, 1fr) !important; } }