/* ══════════════════════════════════════════════════════════════════════
   لاند Zemam — النسخه الاحترافيه (المالك 2026-10-21)
   resources/views/fulfillment/landing.blade.php · zemam-landing.js · zemam-liquid.js
   ──────────────────────────────────────────────────────────────────────
   ألوان Zemam بس: رملى · كراميل · Slate · أوف وايت. خصائص منطقيه
   (inline/block) — نفس الملف عربى وإنجليزى. العربيه (fulfillment/partials/van)
   بتتقلب فى العربى والشعار جوّاها بيرجع معدول.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --lz-sand:#D4B48C; --lz-caramel:#B58963; --lz-deep:#8A5A2B; --lz-slate:#2F3A44; --lz-ink:#1F2933;
  --lz-paper:#F8F6F2; --lz-paper2:#F3EEE6; --lz-card:#FFFFFF; --lz-line:#E8E2D8; --lz-text:#475467;
  --lz-muted:#667085; --lz-soft:#F3E8DA; --lz-ok:#2E7D59;
  --lz-ease:cubic-bezier(.2,.7,.2,1);
}
html{ scroll-behavior:smooth }
/* ★ المالك 2026-10-21: «باللون الأبيض … وبلاش gradient» — كل الخلفيات لون واحد سادة */
html,body,html.zm body{ background:#fff!important }   /* zemam-skin بيدّى body لون ‎--paper‎ ‎!important‎ */
.ff-foot-bar{ margin-block-start:0 }
.ltr{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums }
.lz-in{ max-inline-size:76rem; margin-inline:auto; padding-inline:var(--pad-page-x, 20px) }

/* ══ الشريط اللى فوق ══════════════════════════════════════════════════ */
.lz-top{ position:fixed; inset-block-start:0; inset-inline:0; z-index:50; transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-block-end:1px solid transparent }
.lz-top.is-scrolled{ background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border-color:rgba(70,52,36,.1); box-shadow:0 10px 30px -24px rgba(60,40,24,.5) }
.lz-top__in{ max-inline-size:76rem; margin-inline:auto; padding:14px var(--pad-page-x, 20px); display:flex; align-items:center; gap:24px }
.lz-top__brand{ display:inline-flex; flex:none }
.lz-top__brand img{ block-size:34px; inline-size:auto; display:block }
.lz-top__links{ display:flex; gap:4px; margin-inline:auto }
.lz-top__links a{ padding:8px 14px; border-radius:999px; color:var(--lz-text); text-decoration:none; font-size:14.5px; font-weight:500; transition:background .2s, color .2s }
.lz-top__links a:hover{ background:rgba(212,180,140,.18); color:var(--lz-ink) }
.lz-top__end{ display:flex; align-items:center; gap:12px; flex:none }
.lz-top__login{ color:var(--lz-ink); text-decoration:none; font-weight:600; font-size:14.5px; padding:8px 6px }
.lz-top__cta{ display:inline-flex; align-items:center; min-block-size:42px; padding:0 18px; border-radius:999px; background:var(--lz-slate); color:#fff;
  text-decoration:none; font-weight:600; font-size:14px; transition:background .2s, transform .3s var(--lz-ease) }
.lz-top__cta:hover{ background:#3E4A55; color:#fff; transform:translateY(-1px) }
@media (max-width: 980px){ .lz-top__links{ display:none } .lz-top__end{ margin-inline-start:auto } }
@media (max-width: 600px){ .lz-top__login{ display:none } .lz-top__brand img{ block-size:28px } .lz-top__cta{ min-block-size:38px; padding:0 14px; font-size:13px } .lz-top__in{ gap:10px } }

/* ══ ١) الهيرو ═════════════════════════════════════════════════════════ */
.lz-hero{ position:relative; overflow:hidden; padding-block:clamp(110px, 12vw, 150px) clamp(64px, 8vw, 110px);
  background:#fff }
.lz-hero__grid{ position:relative; display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.2fr); gap:clamp(36px, 5vw, 72px); align-items:center }
.lz-kicker{ display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; padding:7px 14px 7px 12px; border-radius:999px; background:#fff;
  border:1px solid var(--lz-line); font-size:13.5px; font-weight:600; color:var(--lz-slate); box-shadow:0 6px 16px -12px rgba(60,40,24,.5) }
.lz-kicker__dot{ inline-size:8px; block-size:8px; border-radius:50%; background:var(--lz-ok); box-shadow:0 0 0 4px rgba(46,125,89,.15) }
.lz-h1{ margin:0 0 20px; font-size:clamp(38px, 5vw, 66px); font-weight:800; line-height:1.06; letter-spacing:-.035em; color:var(--lz-ink); text-wrap:balance }
html[dir="rtl"] .lz-h1{ line-height:1.28; letter-spacing:-.005em }
.lz-line{ display:block }
.lz-accent{ color:var(--lz-caramel); -webkit-text-fill-color:currentColor }
.lz-hero__body{ margin:0 0 30px; max-inline-size:34rem; font-size:clamp(16px, 1.25vw, 18.5px); line-height:1.85; color:var(--lz-text) }
.lz-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px }
.lz-btn{ display:inline-flex; align-items:center; gap:10px; min-block-size:52px; padding:0 26px; border-radius:999px; background:var(--lz-slate); color:#fff;
  text-decoration:none; font-weight:600; font-size:15.5px; box-shadow:0 16px 32px -16px rgba(47,58,68,.7); transition:transform .3s var(--lz-ease), box-shadow .3s var(--lz-ease) }
.lz-btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 20px 38px -16px rgba(47,58,68,.75) }
.lz-link{ display:inline-flex; align-items:center; gap:8px; color:var(--lz-ink); text-decoration:none; font-weight:600; font-size:15.5px; padding:4px 0;
  border-block-end:1.5px solid rgba(181,137,99,.5) }
.lz-link:hover{ color:var(--lz-deep) }
.lz-arrow{ flex:none; transition:transform .3s var(--lz-ease) }
html[dir="rtl"] .lz-arrow{ transform:scaleX(-1) }
.lz-btn:hover .lz-arrow,.lz-link:hover .lz-arrow{ transform:translateX(3px) }
html[dir="rtl"] .lz-btn:hover .lz-arrow,html[dir="rtl"] .lz-link:hover .lz-arrow{ transform:scaleX(-1) translateX(3px) }
.lz-ticks{ display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; margin:28px 0 0; padding:0; font-size:14px; color:var(--lz-text) }
.lz-ticks li{ display:inline-flex; align-items:center; gap:7px }
/* ★ الأيقونات: Phosphor Duotone (App\Support\DuoIcon) — الخط ‎currentColor‎ والطبقه الفاتحه ‎--duo‎ (لونين سادة) */
.ph{ display:block; flex:none }
.ph .ph-duo{ fill:var(--duo, #D4A373); opacity:1 }
.lz-ticks svg{ color:var(--lz-ok); --duo:#BFE3CE }

/* الصوره الحقيقيه جوّه إطار + الكروت العايمه */
.lz-hero__visual{ position:relative; perspective:1800px }
.lz-frame{ margin:0; border-radius:20px; overflow:hidden; background:#fff; border:1px solid rgba(70,52,36,.12);
  box-shadow:0 2px 4px rgba(60,40,24,.06), 0 40px 80px -36px rgba(60,40,24,.55); transform:rotateY(-7deg) rotateX(3deg); transform-origin:50% 50%;
  transition:transform .8s var(--lz-ease) }
html[dir="rtl"] .lz-frame{ transform:rotateY(7deg) rotateX(3deg) }
.lz-hero__visual:hover .lz-frame{ transform:none }
.lz-frame__bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#F6F2EC; border-block-end:1px solid var(--lz-line) }
.lz-frame__bar i{ inline-size:10px; block-size:10px; border-radius:50%; background:#E2D6C6 }
.lz-frame__bar i:first-child{ background:#E8A598 } .lz-frame__bar i:nth-child(2){ background:#EBCB8B } .lz-frame__bar i:nth-child(3){ background:#A9CBB2 }
.lz-frame__bar span{ margin-inline:auto; padding:3px 16px; border-radius:999px; background:#fff; border:1px solid var(--lz-line); font-size:11.5px; font-weight:600; color:var(--lz-muted) }
.lz-frame img{ display:block; inline-size:100%; block-size:auto }
.lz-float{ position:absolute; z-index:2; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(70,52,36,.1); box-shadow:0 22px 40px -22px rgba(60,40,24,.55);
  white-space:nowrap; animation:lz-bob 6s ease-in-out infinite }
.lz-float b{ display:block; font-size:14px; font-weight:700; color:var(--lz-ink); line-height:1.3 }
.lz-float small{ display:block; font-size:12px; color:var(--lz-muted); line-height:1.3 }
.lz-float__ico{ display:grid; place-items:center; inline-size:38px; block-size:38px; border-radius:12px; flex:none }
.lz-float__ico--green{ background:#E6F4EC; color:var(--lz-ok); --duo:#A8D8BD }
.lz-float__ico--sand{ background:var(--lz-soft); color:var(--lz-slate); --duo:#D4A373 }
.lz-float--order{ inset-block-start:12%; inset-inline-start:-34px; animation-delay:-1s }
.lz-float--ship{ inset-block-end:24%; inset-inline-end:-26px; animation-delay:-3s }
.lz-float--cash{ inset-block-end:-26px; inset-inline-start:14%; animation-delay:-4.5s }
.lz-float--cash b{ color:var(--lz-ok) }
@keyframes lz-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

@media (min-width: 901px) and (max-width: 1180px){
  .lz-hero__grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:40px }
  .lz-h1{ font-size:clamp(36px, 4.6vw, 54px) }
  .lz-hero__body{ font-size:16px }
}
@media (max-width: 900px){
  .lz-hero__grid{ grid-template-columns:minmax(0, 1fr) }
  .lz-hero__copy{ max-inline-size:40rem }
  .lz-frame,html[dir="rtl"] .lz-frame{ transform:none }
  .lz-float--order{ inset-inline-start:-8px } .lz-float--ship{ inset-inline-end:-8px }
}
@media (max-width: 600px){
  .lz-float{ padding:8px 10px; gap:8px; border-radius:14px }
  .lz-float b{ font-size:12.5px } .lz-float small{ font-size:11px }
  .lz-float__ico{ inline-size:30px; block-size:30px; border-radius:10px }
  .lz-float--order{ inset-block-start:-18px } .lz-float--ship{ inset-block-end:auto; inset-block-start:52% }
  .lz-float--order > img,.lz-float--order > span:last-child{ display:none }
  .lz-ticks{ font-size:13px }
}

/* العربيه */
.lz-van{ display:block; overflow:visible }
html[dir="rtl"] .lz-van{ transform:scaleX(-1) }
html[dir="rtl"] .lz-van__brand > *{ transform:scaleX(-1); transform-box:fill-box; transform-origin:center }   /* الشعار على الصندوق يفضل معدول */
.lz-van--chip{ inline-size:50px; block-size:auto; flex:none }

/* ══ ٢) تصلك الطلبات من ════════════════════════════════════════════════ */
.lz-strip{ border-block:1px solid var(--lz-line); background:#fff }
.lz-strip__in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px; padding-block:22px }
.lz-strip__t{ font-size:13.5px; font-weight:600; color:var(--lz-muted) }
.lz-strip__in{ flex-wrap:nowrap }
.lz-strip__t{ flex:none }
/* بيلف لوحده (zemam-landing.js بيكرّر العناصر) — بيقف لما الماوس عليه */
.lz-marquee{ flex:1; min-inline-size:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%) }   /* الأطراف بتختفى بنعومه (شفافيه مش لون) */
.lz-marquee__track{ display:flex; align-items:center; inline-size:max-content; list-style:none; margin:0; padding:0 }
.lz-marquee__track li{ display:inline-flex; align-items:center; gap:9px; margin-inline-end:44px; font-weight:600; font-size:14.5px; color:var(--lz-slate); white-space:nowrap }
.lz-marquee.is-on .lz-marquee__track{ animation:lz-marquee 38s linear infinite }
html[dir="rtl"] .lz-marquee.is-on .lz-marquee__track{ animation-name:lz-marquee-rtl }
.lz-marquee.is-on:hover .lz-marquee__track{ animation-play-state:paused }
@keyframes lz-marquee{ to{ transform:translateX(-50%) } }
@keyframes lz-marquee-rtl{ to{ transform:translateX(50%) } }
.lz-marquee:not(.is-on) .lz-marquee__track{ flex-wrap:wrap; inline-size:auto; row-gap:12px }
@media (max-width: 700px){ .lz-strip__in{ flex-direction:column; align-items:stretch; gap:12px } }
.lz-strip__manual{ display:grid; place-items:center; inline-size:28px; block-size:28px; border-radius:8px; background:var(--lz-soft); color:var(--lz-slate); --duo:#D4A373 }

/* ══ الأشرطه ══════════════════════════════════════════════════════════ */
.lz-sec{ padding-block:clamp(70px, 9vw, 130px); scroll-margin-block-start:70px }
.lz-sec--paper{ background:#fff; border-block-start:1px solid var(--lz-line) }
.lz-head{ max-inline-size:46rem; margin-block-end:clamp(32px, 4vw, 56px) }
.lz-head--center{ margin-inline:auto; text-align:center }
.lz-eye{ display:inline-flex; align-items:center; gap:10px; margin-block-end:14px; font-size:13px; font-weight:700; color:var(--lz-caramel); letter-spacing:.02em }
.lz-eye::before{ content:""; inline-size:20px; block-size:2px; border-radius:2px; background:currentColor }
.lz-head--center .lz-eye::after,.lz-show__head .lz-eye::after{ content:""; inline-size:20px; block-size:2px; border-radius:2px; background:currentColor }
.lz-h{ margin:0 0 14px; font-size:clamp(28px, 3.6vw, 46px); font-weight:800; line-height:1.15; letter-spacing:-.025em; color:var(--lz-ink); text-wrap:balance }
html[dir="rtl"] .lz-h{ line-height:1.38; letter-spacing:0 }
.lz-lede{ margin:0; font-size:clamp(15.5px, 1.25vw, 18px); line-height:1.85; color:var(--lz-text); text-wrap:pretty }
.lz-ico{ display:inline-grid; place-items:center; inline-size:54px; block-size:54px; border-radius:16px; flex:none; color:var(--lz-slate); --duo:#D4A373;
  background:var(--lz-soft); box-shadow:inset 0 0 0 1px rgba(181,137,99,.28) }
.lz-ico--ok{ color:var(--lz-ok); --duo:#A8D8BD; background:#E6F4EC; box-shadow:inset 0 0 0 1px rgba(46,125,89,.22) }

/* ══ ٣) بنتو الفوايد ═══════════════════════════════════════════════════ */
.lz-bento{ display:grid; gap:16px; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-flow:dense }
.lz-card{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(20px, 2.2vw, 28px); border-radius:22px; background:var(--lz-card);
  border:1px solid var(--lz-line); box-shadow:0 1px 2px rgba(16,24,40,.04); transition:transform .4s var(--lz-ease), box-shadow .4s var(--lz-ease), border-color .3s }
.lz-card:hover{ transform:translateY(-3px); border-color:rgba(181,137,99,.35); box-shadow:0 22px 44px -26px rgba(90,58,30,.45) }
.lz-card h3{ margin:18px 0 8px; font-size:clamp(17px, 1.3vw, 19px); font-weight:700; line-height:1.4; color:var(--lz-ink) }
.lz-card p{ margin:0; font-size:15px; line-height:1.8; color:var(--lz-text) }
.lz-card--hero{ grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; background:#FBF8F4 }
.lz-card--hero h3{ font-size:clamp(24px, 2.4vw, 32px); letter-spacing:-.02em; margin-block-start:22px }
.lz-card--hero p{ font-size:16px; max-inline-size:30rem }
.lz-card--wide{ grid-column:span 2 }
.lz-card__split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .95fr); gap:20px; align-items:center }
.lz-chips{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:auto 0 0; padding:26px 0 0 }
.lz-chips li{ display:inline-flex; align-items:center; gap:8px; padding:9px 12px 9px 14px; border-radius:999px; background:#fff; border:1px solid var(--lz-line);
  font-size:13.5px; font-weight:600; color:var(--lz-slate); box-shadow:0 6px 14px -12px rgba(60,40,24,.5) }
.lz-chips li > svg{ color:var(--lz-deep); --duo:#EBCFA8 }
.lz-done{ display:inline-grid; place-items:center; inline-size:20px; block-size:20px; border-radius:50%; background:var(--lz-ok); color:#fff; --duo:#fff }
.lz-feed{ display:grid; gap:8px; list-style:none; margin:0; padding:0 }
.lz-feed li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--lz-paper); border:1px solid var(--lz-line) }
.lz-feed li > span{ flex:1; min-inline-size:0 }
.lz-feed b{ display:block; font-size:13.5px; color:var(--lz-ink); line-height:1.3 }
.lz-feed small{ display:block; font-size:12px; color:var(--lz-muted) }
.lz-feed em{ display:grid; place-items:center; inline-size:22px; block-size:22px; border-radius:50%; background:#E6F4EC; color:var(--lz-ok); --duo:var(--lz-ok) }
.lz-on .lz-card--hero .lz-chips li,.lz-on .lz-feed li{ opacity:0; transform:translateY(8px) }
.lz-on .lz-card--hero.in .lz-chips li,.lz-on .in .lz-feed li{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s var(--lz-ease); transition-delay:calc(.25s + var(--i) * .14s) }
@media (max-width: 1080px){ .lz-bento{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 680px){
  .lz-bento{ grid-template-columns:minmax(0, 1fr) }
  .lz-card--hero,.lz-card--wide{ grid-column:auto; grid-row:auto }
  .lz-card__split{ grid-template-columns:minmax(0, 1fr) }
}

/* ══ ٤) كيف نعمل — الخطوات والطريق ═════════════════════════════════════ */
.lz-journey{ position:relative; padding:clamp(22px, 3vw, 36px); border-radius:28px; background:#fff; border:1px solid var(--lz-line);
  box-shadow:0 30px 60px -44px rgba(60,40,24,.5) }
.lz-steps{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:18px; list-style:none; margin:0; padding:0 }
.lz-step__n{ position:relative; display:grid; place-items:center; inline-size:58px; block-size:58px; border-radius:18px; background:var(--lz-soft);
  color:var(--lz-slate); --duo:#D4A373; border:1px solid rgba(181,137,99,.28) }
.lz-step__n em{ position:absolute; inset-block-start:-8px; inset-inline-end:-8px; display:grid; place-items:center; inline-size:22px; block-size:22px;
  border-radius:50%; background:var(--lz-slate); color:#fff; font-style:normal; font-size:11.5px; font-weight:700 }
.lz-steps li:nth-child(n+4) .lz-step__n{ background:var(--lz-slate); color:#F3E8DA; --duo:var(--lz-caramel); border-color:var(--lz-slate) }
.lz-steps li:nth-child(n+4) .lz-step__n em{ background:var(--lz-caramel) }
.lz-step__by{ display:inline-block; margin:16px 0 8px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700 }
.lz-step__by--byYou{ background:var(--lz-soft); color:var(--lz-deep) }
.lz-step__by--byUs{ background:#E6F4EC; color:var(--lz-ok) }
.lz-step__by--byAuto{ background:#EEF2F6; color:var(--lz-slate) }
.lz-steps h3{ margin:0 0 6px; font-size:17px; font-weight:700; color:var(--lz-ink) }
.lz-steps p{ margin:0; font-size:14.5px; line-height:1.8; color:var(--lz-text) }
.lz-road{ position:relative; block-size:118px; margin-block-start:18px; overflow:hidden }
.lz-road__line{ position:absolute; inset-inline:0; inset-block-end:16px; block-size:16px; border-radius:999px; background:#ECE3D6 }
.lz-road__line::after{ content:""; position:absolute; inset-inline:12px; inset-block-start:7px; border-block-start:2px dashed #fff }
.lz-road__pin{ position:absolute; inset-block-end:12px; inset-inline-start:calc(var(--p) * 20% - 10% - 12px); inline-size:24px; block-size:24px; border-radius:50%;
  background:#fff; border:3px solid var(--lz-sand); box-shadow:0 4px 10px -4px rgba(60,40,24,.4) }
.lz-road__home{ display:none }
.lz-road{ --vw:104px }
.lz-road__van{ position:absolute; inset-block-end:19px; inset-inline-start:calc(10% - var(--vw) / 2); inline-size:var(--vw); z-index:1;
  filter:drop-shadow(0 8px 6px rgba(60,40,24,.18)); animation:lz-drive 16s ease-in-out infinite, lz-rumble .32s ease-in-out infinite alternate }
@keyframes lz-rumble{ to{ transform:translateY(-1.5px) } }
.lz-road__van .lz-van{ inline-size:100%; block-size:auto }
@keyframes lz-drive{
  0%{ inset-inline-start:-170px; opacity:0 } 3%{ opacity:1 }
  10%,16%{ inset-inline-start:calc(10% - var(--vw) / 2) }
  26%,32%{ inset-inline-start:calc(30% - var(--vw) / 2) }
  42%,48%{ inset-inline-start:calc(50% - var(--vw) / 2) }
  58%,64%{ inset-inline-start:calc(70% - var(--vw) / 2) }
  76%,93%{ inset-inline-start:calc(90% - var(--vw) / 2); opacity:1 }
  100%{ inset-inline-start:calc(90% - var(--vw) / 2); opacity:0 }
}
@media (max-width: 1000px){ .lz-steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:30px } }
@media (max-width: 600px){
  .lz-steps{ grid-template-columns:minmax(0, 1fr) }
  .lz-road{ block-size:96px; --vw:84px }
}

/* ══ ٥) لوحتك — صور حقيقيه فى كارت بيتعدل مع التمرير ══════════════════ */
.lz-show{ position:relative; padding-block:clamp(70px, 9vw, 120px) clamp(40px, 6vw, 90px); scroll-margin-block-start:70px; overflow:hidden;
  background:#fff; border-block-start:1px solid var(--lz-line) }
.lz-show__head{ max-inline-size:48rem; margin:0 auto; padding-inline:20px; text-align:center; will-change:transform }
.lz-tabs{ display:inline-flex; gap:4px; margin-block-start:26px; padding:5px; border-radius:999px; background:#fff; border:1px solid var(--lz-line);
  box-shadow:0 10px 24px -18px rgba(60,40,24,.5) }
.lz-tabs button{ padding:9px 18px; border:0; border-radius:999px; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--lz-text); cursor:pointer;
  transition:background .2s, color .2s }
.lz-tabs button:hover{ color:var(--lz-ink) }
.lz-tabs button[aria-selected="true"]{ background:var(--lz-slate); color:#fff }
.lz-tabs button:focus-visible{ outline:2px solid var(--lz-caramel); outline-offset:2px }
.lz-show__stage{ perspective:1000px; padding-inline:clamp(12px, 4vw, 40px); margin-block-start:clamp(26px, 3.5vw, 44px) }
.lz-show__card{ max-inline-size:70rem; margin:0 auto; padding:clamp(8px, 1.2vw, 14px); border-radius:30px; background:var(--lz-slate); border:4px solid #55606A;
  transform-origin:50% 0; will-change:transform;
  box-shadow:0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003 }
.lz-show__screen{ position:relative; border-radius:20px; overflow:hidden; background:var(--lz-paper); aspect-ratio:16 / 10 }
.lz-show__screen img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; object-position:top center; animation:lz-fade .5s ease }
.lz-show__screen img[hidden]{ display:none }
@keyframes lz-fade{ from{ opacity:0; transform:scale(1.01) } to{ opacity:1; transform:none } }
.lz-show__cap{ margin:clamp(60px, 8vw, 110px) 0 0; text-align:center; font-size:12.5px; color:var(--lz-muted) }
@media (max-width: 600px){
  .lz-show__card{ border-radius:20px; border-width:3px } .lz-show__screen{ border-radius:13px }
  .lz-tabs button{ padding:8px 12px; font-size:13px }
}

/* ══ ٦) ما يطمئنك ══════════════════════════════════════════════════════ */
.lz-trust{ display:grid; gap:16px; grid-template-columns:repeat(4, minmax(0, 1fr)) }
.lz-trust article{ padding:24px; border-radius:20px; background:#fff; border:1px solid var(--lz-line) }
.lz-trust h3{ margin:16px 0 6px; font-size:17px; font-weight:700; color:var(--lz-ink) }
.lz-trust p{ margin:0; font-size:14.5px; line-height:1.8; color:var(--lz-text) }
@media (max-width: 1180px){ .lz-trust{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px){ .lz-trust{ grid-template-columns:minmax(0, 1fr) } }

/* ══ ٧) الأسئله ════════════════════════════════════════════════════════ */
.lz-faqwrap{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(24px, 5vw, 72px); align-items:start }
.lz-faq{ display:grid; gap:10px }
.lz-faq details{ border-radius:16px; background:#fff; border:1px solid var(--lz-line); padding:0 20px; transition:border-color .2s, box-shadow .2s }
.lz-faq details[open]{ border-color:rgba(181,137,99,.5); box-shadow:0 14px 30px -24px rgba(90,58,30,.5) }
.lz-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:18px; cursor:pointer; list-style:none;
  font-weight:600; font-size:15.5px; color:var(--lz-ink) }
.lz-faq summary::-webkit-details-marker{ display:none }
.lz-faq summary i{ display:grid; place-items:center; flex:none; inline-size:30px; block-size:30px; border-radius:50%; background:var(--lz-soft); color:var(--lz-deep);
  transition:transform .25s var(--lz-ease), background .2s }
.lz-faq details[open] summary i{ transform:rotate(45deg); background:var(--lz-slate); color:#fff }
.lz-faq p{ margin:0 0 18px; font-size:15px; line-height:1.9; color:var(--lz-text) }
@media (max-width: 900px){ .lz-faqwrap{ grid-template-columns:minmax(0, 1fr) } }

/* ══ ٨) الدعوه — والشعار السايل ════════════════════════════════════════ */
.lz-end{ position:relative; overflow:hidden; isolation:isolate; min-block-size:380px; display:flex; align-items:center; padding:clamp(34px, 6vw, 80px);
  border-radius:32px; color:#fff;
  background:var(--lz-slate) }
.lz-end__copy{ position:relative; z-index:2; max-inline-size:34rem }
html .lz-end h2,html.zm .lz-end h2{ color:#fff!important; /* zemam-skin بيلوّن كل العناوين ‎!important‎ */ margin:0 0 12px; font-size:clamp(28px, 3.6vw, 46px); font-weight:800; line-height:1.2; letter-spacing:-.02em }
html[dir="rtl"] .lz-end h2{ line-height:1.42; letter-spacing:0 }
.lz-end p{ margin:0 0 28px; font-size:16.5px; line-height:1.85; color:rgba(255,255,255,.78) }
.lz-btn--light{ background:#fff; color:var(--lz-ink); box-shadow:0 14px 30px -16px rgba(0,0,0,.6) }
.lz-btn--light:hover{ color:var(--lz-ink) }
.lz-link--light{ color:#fff; border-color:rgba(255,255,255,.4) }
.lz-link--light:hover{ color:var(--lz-sand) }
.zl-stage{ position:absolute; inset:0; z-index:1; pointer-events:none }
.zl-canvas{ position:absolute; inset:0; inline-size:100%; block-size:100%; display:block; opacity:0; transition:opacity .5s ease }
.zl-fallback{ position:absolute; display:block; max-inline-size:none; user-select:none; -webkit-user-drag:none; transition:opacity .5s ease;
  inset-block-start:50%; inset-inline-end:7%; inline-size:260px; block-size:260px; margin-block-start:-130px; filter:drop-shadow(0 30px 40px rgba(0,0,0,.35)) }
[data-gl="on"] .zl-canvas{ opacity:1 }
[data-gl="on"] .zl-fallback{ opacity:0 }
.lz-end[data-zl-mounted] .zl-fallback{ margin-block-start:0 }
@media (max-width: 900px){
  .lz-end{ flex-direction:column; align-items:flex-start; min-block-size:0 }
  .lz-end .zl-stage{ position:relative; inset:auto; order:-1 }
  .lz-end .zl-fallback{ position:relative; inset:auto; margin:0 0 18px; inline-size:110px; block-size:110px }
}

/* ══ ★ الموبايل (المالك 2026-10-21: «ظبطلي كمان الموبايل») ═════════════════
   ⚠️ sharks-responsive.css بيحط ‎html body a[href]{min-block-size:24px}‎ على أى شاشه
      ≤1024 أو لمس — انتقائيته أعلى من ‎.lz-btn‎ فكل الزراير كانت بتتقفل على ٢٦px.
      الانتقائيه هنا أعلى منه بالقصد. */
html body a.lz-btn[href]{ min-block-size:52px }
html body a.lz-top__cta[href]{ min-block-size:42px }

/* زرار القايمه + اللوح بتاعه (بيظهر لما الروابط تستخبّى) */
.lz-top__menu{ display:none; place-items:center; flex:none; inline-size:42px; block-size:42px; padding:0; border-radius:12px; border:1px solid var(--lz-line);
  background:#fff; color:var(--lz-ink); --duo:#D4A373; cursor:pointer }
.lz-top__menu .lz-menu-close,.lz-top.is-open .lz-top__menu .lz-menu-open{ display:none }
.lz-top.is-open .lz-top__menu .lz-menu-close{ display:block }
.lz-top__menu:focus-visible{ outline:2px solid var(--lz-caramel); outline-offset:2px }
.lz-top.is-open{ background:#fff; border-color:var(--lz-line); box-shadow:0 18px 40px -24px rgba(60,40,24,.45) }
.lz-sheet{ max-inline-size:76rem; margin-inline:auto; padding:4px var(--pad-page-x, 20px) 18px }
.lz-sheet[hidden]{ display:none }
.lz-sheet nav{ display:grid }
.lz-sheet a{ display:flex; align-items:center; color:var(--lz-ink); text-decoration:none; font-weight:600; font-size:16px;
  border-block-end:1px solid var(--lz-line) }
html body .lz-sheet a[href]{ min-block-size:50px }   /* نفس حكاية ‎a[href]‎ فوق */
.lz-sheet a.lz-sheet__login{ justify-content:center; margin-block-start:14px; border:1px solid var(--lz-line); border-radius:999px }
@media (max-width: 980px){ .lz-top__menu{ display:inline-grid } }
/* «Register your brand» طويله على الموبايل → «Sign up» (والعربى بس على الشاشات الصغيره جدًا) */
.lz-top__cta-s{ display:none }
@media (max-width: 460px){ html[dir="ltr"] .lz-top__cta-l{ display:none } html[dir="ltr"] .lz-top__cta-s{ display:inline } }
@media (max-width: 350px){ .lz-top__cta-l{ display:none } .lz-top__cta-s{ display:inline } }
@media (min-width: 981px){ .lz-sheet{ display:none } }
@media (max-width: 600px){
  .lz-top__in{ padding-block:12px }
  html body a.lz-top__cta[href]{ min-block-size:40px }
  .lz-top__menu{ inline-size:40px; block-size:40px }

  /* الهيرو: مسافه أقل فوق، والزرار الأساسى بعرض الشاشه */
  .lz-hero{ padding-block:96px 64px }
  .lz-kicker{ margin-block-end:18px; font-size:12.5px }
  .lz-hero__body{ margin-block-end:24px; font-size:16px }
  .lz-hero .lz-ctas{ gap:12px 22px }
  .lz-hero .lz-btn{ flex:1 1 100%; justify-content:center }
  .lz-hero .lz-link{ margin-inline:auto }
  .lz-ticks{ gap:8px 16px; margin-block-start:22px }
  .lz-hero__visual{ margin-block-start:8px }
  .lz-frame__bar span{ display:none }   /* كارت «طلب جديد» بيقعد فوقها على الموبايل */

  .lz-strip__in{ padding-block:18px }
  .lz-marquee__track li{ margin-inline-end:34px }

  .lz-sec{ padding-block:64px }
  .lz-head{ margin-block-end:28px }
}

/* الفوايد وما يطمئنك: الأيقونه جنب العنوان بدل ما فوقه — القسم كان ٢٣٠٠px */
@media (max-width: 680px){
  .lz-bento{ gap:12px }
  .lz-bento > .lz-card:not(.lz-card--hero):not(.lz-card--wide),.lz-trust article{
    display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:14px; align-items:start; padding:18px }
  .lz-bento > .lz-card:not(.lz-card--hero):not(.lz-card--wide) .lz-ico,.lz-trust article .lz-ico{ grid-row:span 2; inline-size:46px; block-size:46px; border-radius:14px }
  .lz-bento > .lz-card:not(.lz-card--hero):not(.lz-card--wide) .lz-ico .ph,.lz-trust article .lz-ico .ph{ inline-size:24px; block-size:24px }
  .lz-bento > .lz-card:not(.lz-card--hero):not(.lz-card--wide) h3,.lz-trust article h3{ margin:1px 0 4px; font-size:16.5px }
  .lz-card p,.lz-trust p{ font-size:14.5px; line-height:1.75 }
  .lz-card--hero,.lz-card--wide{ padding:20px }
  .lz-card--hero h3{ font-size:24px; margin-block-start:16px }
  .lz-card--hero p{ font-size:15px }
  .lz-chips{ gap:8px; padding-block-start:20px }
  .lz-chips li{ padding:7px 10px 7px 12px; font-size:13px }
  .lz-trust{ gap:12px }
}

/* كيف نعمل: خط زمنى رأسى (الأيقونه جنب الكلام وخط متقطّع بين الخطوات) */
@media (max-width: 860px){
  .lz-journey{ padding:20px 18px 14px; border-radius:22px }
  .lz-steps{ grid-template-columns:minmax(0, 1fr); row-gap:0 }
  .lz-steps li{ position:relative; display:grid; grid-template-columns:48px minmax(0, 1fr); column-gap:14px; align-items:start; padding-block-end:22px }
  .lz-steps li:last-child{ padding-block-end:4px }
  .lz-steps li::before{ content:""; position:absolute; inset-inline-start:23px; inset-block:56px 6px; border-inline-start:2px dashed var(--lz-line) }
  .lz-steps li:last-child::before{ display:none }
  .lz-step__n{ grid-row:span 3; inline-size:48px; block-size:48px; border-radius:15px } .lz-step__n .ph{ inline-size:24px; block-size:24px }
  .lz-step__by{ justify-self:start; margin:2px 0 6px }
  .lz-steps h3{ font-size:16.5px; margin-block-end:4px }
  .lz-steps p{ font-size:14px; line-height:1.75 }
  .lz-road{ margin-block-start:10px }
}

/* لوحتك: الكارت بيبقى موبايل وجوّاه لقطه من اللوحه بمقاس الموبايل */
@media (max-width: 600px){
  .lz-show{ padding-block:64px 44px }
  .lz-tabs{ margin-block-start:20px }
  .lz-show__card{ position:relative; max-inline-size:292px; padding:9px; border-radius:46px; border-width:3px;
    box-shadow:0 2px 4px rgba(31,41,51,.12), 0 34px 50px -30px rgba(31,41,51,.6) }   /* الظل الكبير كان بيتقصّ بحرف القسم */
  .lz-show__card::before{ content:""; position:absolute; z-index:3; inset-block-start:17px; inset-inline-start:50%; inline-size:76px; block-size:20px;
    margin-inline-start:-38px; border-radius:999px; background:#1F2933 }
  /* شريط حاله فوق اللقطه (زى الموبايل الحقيقى) — النتوء الأسود بيقعد فيه ومايغطّيش عنوان الصفحه */
  .lz-show__screen{ aspect-ratio:auto; padding-block-start:34px; border-radius:37px; background:#F4EFE8 }
  .lz-show__screen img{ position:static; display:block; block-size:auto }
  .lz-show__cap{ margin-block-start:34px; padding-inline:20px }
}

/* الدعوه */
@media (max-width: 600px){
  .lz-end{ padding:30px 22px; border-radius:24px }
  .lz-end p{ font-size:15.5px; margin-block-end:22px }
  .lz-end__copy{ inline-size:100% }
  .lz-end .lz-ctas{ gap:10px 22px }
  .lz-end .lz-btn{ flex:1 1 100%; justify-content:center }
  .lz-end .lz-link{ margin-inline:auto }
}

/* ══ ★ الشاشات الكبيره (المالك 2026-10-21: «تتظبط على كل الشاشات») ══════
   من ١٦٨٠ وفوق المحتوى بيعرض والكلام بيكبر — بدل عمود ١٢١٦px فى نص شاشه ٢٥٦٠ */
@media (min-width: 1680px){
  .lz-in,.lz-top__in{ max-inline-size:86rem }
  .lz-show__card{ max-inline-size:78rem }
  .lz-h1{ font-size:72px }
  .lz-h,html .lz-end h2,html.zm .lz-end h2{ font-size:50px }
  .lz-hero__body,.lz-lede{ font-size:19px }
  .lz-card p,.lz-trust p,.lz-steps p,.lz-faq p{ font-size:16px }
  .lz-hero__visual{ min-inline-size:0 }
}
@media (min-width: 2200px){
  .lz-in,.lz-top__in{ max-inline-size:100rem }
  .lz-show__card{ max-inline-size:90rem }
  .lz-h1{ font-size:86px }
  .lz-h,html .lz-end h2,html.zm .lz-end h2{ font-size:58px }
  .lz-hero__body,.lz-lede,.lz-end p{ font-size:21px }
  .lz-card h3,.lz-trust h3,.lz-steps h3{ font-size:21px }
  .lz-card--hero h3{ font-size:36px }
  .lz-card p,.lz-trust p,.lz-steps p,.lz-faq p,.lz-faq summary{ font-size:18px }
  .lz-top__links a,.lz-top__login,.lz-marquee__track li,.lz-strip__t{ font-size:16px }
  .lz-btn,.lz-link{ font-size:17px }
}

/* ══ الظهور مع التمرير — بس لو الجافاسكريبت شغّال ═════════════════════ */
.lz-on .lz-r{ opacity:0; transform:translateY(18px) }
.lz-on .lz-r.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s var(--lz-ease) }
.lz-on .lz-bento .lz-r.in{ transition-delay:calc(var(--d, 0) * 70ms) }
.lz-top a:focus-visible,.lz-hero a:focus-visible,.lz-end a:focus-visible{ outline:2px solid var(--lz-caramel); outline-offset:4px; border-radius:10px }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .lz-float,.lz-road__van,.lz-show__screen img{ animation:none }
  .lz-road__van{ inset-inline-start:calc(50% - var(--vw) / 2) }
  .lz-frame,.lz-btn,.lz-card,.lz-arrow,.zl-canvas,.zl-fallback{ transition:none }
  .lz-on .lz-r,.lz-on .lz-card--hero .lz-chips li,.lz-on .lz-feed li{ opacity:1; transform:none }
  .lz-show__card,.lz-show__head{ transform:none!important }
}