/* ══════════════════════════════════════════════════════════════════════
   لاند شاركس — زى لاند Zemam فى الـUX بهوية شاركس (المالك 2026-10-22)
   ──────────────────────────────────────────────────────────────────────
   «انت شايف لاندينج بيدج بتاعت زمام عامله ازاى … عايز اعمل شاركس شبيهها
    … خد المميزات … الـUX والموبايل والأيقونز … واعملها مخصصه لشاركس».

   الملف ده **منقول** من public/shared/css/zemam-landing.css (المولّد فى
   scratchpad الجلسه: sl_css_build.php): نفس الهيكل والموبايل وكل الشاشات،
   بأسماء ‎.sl-*‎ وألوان شاركس (أزرق ‎#1457FF‎ للتفاصيل · كحلى ‎#071A3A‎ للأزرار
   والنصوص · خلفيه بيضا من غير gradient). وفى الآخر أجزاء شاركس بس:
   «اختار طريقك» (مسوّق/تاجر) · «الفلوس ماشيه» بدل العربيه (هوية شاركس:
   مفيش عربيات ولا طرود) · «اتصل بينا» · الفوتر.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --sl-sand:#A9C1FF; --sl-caramel:#1457FF; --sl-deep:#0F45D6; --sl-slate:#071A3A; --sl-ink:#071A3A;
  --sl-paper:#F8FAFC; --sl-paper2:#F1F5F9; --sl-card:#FFFFFF; --sl-line:#E2E8F0; --sl-text:#334155;
  --sl-muted:#64748B; --sl-soft:#EAF2FF; --sl-ok:#2E7D59;
  --sl-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 }
.sl-in{ max-inline-size:76rem; margin-inline:auto; padding-inline:var(--pad-page-x, 20px) }

/* ══ الشريط اللى فوق ══════════════════════════════════════════════════ */
.sl-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 }
.sl-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(7,26,58,.1); box-shadow:0 10px 30px -24px rgba(7,26,58,.5) }
.sl-top__in{ max-inline-size:76rem; margin-inline:auto; padding:14px var(--pad-page-x, 20px); display:flex; align-items:center; gap:24px }
.sl-top__brand{ display:inline-flex; flex:none }
.sl-top__brand img{ block-size:34px; inline-size:auto; display:block }
.sl-top__links{ display:flex; gap:4px; margin-inline:auto }
.sl-top__links a{ padding:8px 14px; border-radius:999px; color:var(--sl-text); text-decoration:none; font-size:14.5px; font-weight:500; transition:background .2s, color .2s }
.sl-top__links a:hover{ background:rgba(20,87,255,.10); color:var(--sl-ink) }
.sl-top__end{ display:flex; align-items:center; gap:12px; flex:none }
.sl-top__login{ color:var(--sl-ink); text-decoration:none; font-weight:600; font-size:14.5px; padding:8px 6px }
.sl-top__cta{ display:inline-flex; align-items:center; min-block-size:42px; padding:0 18px; border-radius:999px; background:var(--sl-slate); color:#fff;
  text-decoration:none; font-weight:600; font-size:14px; transition:background .2s, transform .3s var(--sl-ease) }
.sl-top__cta:hover{ background:#12305F; color:#fff; transform:translateY(-1px) }
@media (max-width: 980px){ .sl-top__links{ display:none } .sl-top__end{ margin-inline-start:auto } }
@media (max-width: 600px){ .sl-top__login{ display:none } .sl-top__brand img{ block-size:28px } .sl-top__cta{ min-block-size:38px; padding:0 14px; font-size:13px } .sl-top__in{ gap:10px } }

/* ══ ١) الهيرو ═════════════════════════════════════════════════════════ */
.sl-hero{ position:relative; overflow:hidden; padding-block:clamp(110px, 12vw, 150px) clamp(64px, 8vw, 110px);
  background:#fff }
.sl-hero__grid{ position:relative; display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.2fr); gap:clamp(36px, 5vw, 72px); align-items:center }
.sl-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(--sl-line); font-size:13.5px; font-weight:600; color:var(--sl-slate); box-shadow:0 6px 16px -12px rgba(7,26,58,.5) }
.sl-kicker__dot{ inline-size:8px; block-size:8px; border-radius:50%; background:var(--sl-ok); box-shadow:0 0 0 4px rgba(46,125,89,.15) }
.sl-h1{ margin:0 0 20px; font-size:clamp(38px, 5vw, 66px); font-weight:800; line-height:1.06; letter-spacing:-.035em; color:var(--sl-ink); text-wrap:balance }
html[dir="rtl"] .sl-h1{ line-height:1.28; letter-spacing:-.005em }
.sl-line{ display:block }
.sl-accent{ color:var(--sl-caramel); -webkit-text-fill-color:currentColor }
.sl-hero__body{ margin:0 0 30px; max-inline-size:34rem; font-size:clamp(16px, 1.25vw, 18.5px); line-height:1.85; color:var(--sl-text) }
.sl-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px }
.sl-btn{ display:inline-flex; align-items:center; gap:10px; min-block-size:52px; padding:0 26px; border-radius:999px; background:var(--sl-slate); color:#fff;
  text-decoration:none; font-weight:600; font-size:15.5px; box-shadow:0 16px 32px -16px rgba(7,26,58,.7); transition:transform .3s var(--sl-ease), box-shadow .3s var(--sl-ease) }
.sl-btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 20px 38px -16px rgba(7,26,58,.75) }
.sl-link{ display:inline-flex; align-items:center; gap:8px; color:var(--sl-ink); text-decoration:none; font-weight:600; font-size:15.5px; padding:4px 0;
  border-block-end:1.5px solid rgba(20,87,255,.5) }
.sl-link:hover{ color:var(--sl-deep) }
.sl-arrow{ flex:none; transition:transform .3s var(--sl-ease) }
html[dir="rtl"] .sl-arrow{ transform:scaleX(-1) }
.sl-btn:hover .sl-arrow,.sl-link:hover .sl-arrow{ transform:translateX(3px) }
html[dir="rtl"] .sl-btn:hover .sl-arrow,html[dir="rtl"] .sl-link:hover .sl-arrow{ transform:scaleX(-1) translateX(3px) }
.sl-ticks{ display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; margin:28px 0 0; padding:0; font-size:14px; color:var(--sl-text) }
.sl-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, #8FB2FF); opacity:1 }
.sl-ticks svg{ color:var(--sl-ok); --duo:#BFE3CE }

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

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

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

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

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

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

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

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

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

/* ══ ٧) الأسئله ════════════════════════════════════════════════════════ */
.sl-faqwrap{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(24px, 5vw, 72px); align-items:start }
.sl-faq{ display:grid; gap:10px }
.sl-faq details{ border-radius:16px; background:#fff; border:1px solid var(--sl-line); padding:0 20px; transition:border-color .2s, box-shadow .2s }
.sl-faq details[open]{ border-color:rgba(20,87,255,.5); box-shadow:0 14px 30px -24px rgba(7,26,58,.5) }
.sl-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(--sl-ink) }
.sl-faq summary::-webkit-details-marker{ display:none }
.sl-faq summary i{ display:grid; place-items:center; flex:none; inline-size:30px; block-size:30px; border-radius:50%; background:var(--sl-soft); color:var(--sl-deep);
  transition:transform .25s var(--sl-ease), background .2s }
.sl-faq details[open] summary i{ transform:rotate(45deg); background:var(--sl-slate); color:#fff }
.sl-faq p{ margin:0 0 18px; font-size:15px; line-height:1.9; color:var(--sl-text) }
@media (max-width: 900px){ .sl-faqwrap{ grid-template-columns:minmax(0, 1fr) } }

/* ══ ٨) الدعوه — والشعار السايل ════════════════════════════════════════ */
.sl-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(--sl-slate) }
.sl-end__copy{ position:relative; z-index:2; max-inline-size:34rem }
html .sl-end h2,html.zm .sl-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"] .sl-end h2{ line-height:1.42; letter-spacing:0 }
.sl-end p{ margin:0 0 28px; font-size:16.5px; line-height:1.85; color:rgba(255,255,255,.78) }
.sl-btn--light{ background:#fff; color:var(--sl-ink); box-shadow:0 14px 30px -16px rgba(0,0,0,.6) }
.sl-btn--light:hover{ color:var(--sl-ink) }
.sl-link--light{ color:#fff; border-color:rgba(255,255,255,.4) }
.sl-link--light:hover{ color:var(--sl-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 }
.sl-end[data-zl-mounted] .zl-fallback{ margin-block-start:0 }
@media (max-width: 900px){
  .sl-end{ flex-direction:column; align-items:flex-start; min-block-size:0 }
  .sl-end .zl-stage{ position:relative; inset:auto; order:-1 }
  .sl-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 أو لمس — انتقائيته أعلى من ‎.sl-btn‎ فكل الزراير كانت بتتقفل على ٢٦px.
      الانتقائيه هنا أعلى منه بالقصد. */
html body a.sl-btn[href]{ min-block-size:52px }
html body a.sl-top__cta[href]{ min-block-size:42px }

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

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

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

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

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

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

/* لوحتك: الكارت بيبقى موبايل وجوّاه لقطه من اللوحه بمقاس الموبايل */
@media (max-width: 600px){
  .sl-show{ padding-block:64px 44px }
  .sl-tabs{ margin-block-start:20px }
  .sl-show__card{ position:relative; max-inline-size:292px; padding:9px; border-radius:46px; border-width:3px;
    box-shadow:0 2px 4px rgba(7,26,58,.12), 0 34px 50px -30px rgba(7,26,58,.6) }   /* الظل الكبير كان بيتقصّ بحرف القسم */
  .sl-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:#071A3A }
  /* شريط حاله فوق اللقطه (زى الموبايل الحقيقى) — النتوء الأسود بيقعد فيه ومايغطّيش عنوان الصفحه */
  .sl-show__screen{ aspect-ratio:auto; padding-block-start:34px; border-radius:37px; background:#F1F5F9 }
  .sl-show__screen img{ position:static; display:block; block-size:auto }
  .sl-show__cap{ margin-block-start:34px; padding-inline:20px }
}

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

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

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

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

/* ══ ★ شاركس: الخط ═════════════════════════════════════════════════════ */
body{ margin:0; font-family:'Inter','IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif; color:var(--sl-ink); -webkit-font-smoothing:antialiased }
html[dir="rtl"] body{ font-family:'IBM Plex Sans Arabic','Inter','Noto Sans Arabic',system-ui,sans-serif }
*,*::before,*::after{ box-sizing:border-box }
img{ max-inline-size:100% }
/* لوجو شاركس (partials/sharks-lockup) — نفس قواعد sharks-skin §4 (الصفحه دى مابتحمّلوش) */
.skl{ display:inline-flex; align-items:center; gap:.55em; line-height:1; color:#071A3A; font-size:15px }
.skl__mark{ inline-size:2.1em; block-size:2.1em; flex:none; display:block }
.skl__txt{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:.32em }
.skl__word{ font-weight:700; font-size:1.6em; letter-spacing:-.045em; line-height:.9 }
.skl__desc{ font-weight:600; font-size:.5em; letter-spacing:.24em; text-transform:uppercase; color:#1457FF }
.skl.skl--img{ gap:0 }
.skl__img{ display:block; block-size:2.4em; inline-size:auto; max-inline-size:100%; flex:none }
.skl--mark .skl__img{ block-size:2.1em }
.skl--short .skl__img{ block-size:1.8em }
.skl--full .skl__img{ block-size:auto; inline-size:15em; max-inline-size:100% }
.skl .skl__img--dk{ display:none }
.skl--light{ color:#fff }
.skl--light .skl__img--std{ display:none } .skl--light .skl__img--dk{ display:block }
.sl-top__brand .skl{ font-size:15px }
.sl-foot__brand .skl{ font-size:15px }
@media (max-width: 600px){ .sl-top__brand .skl{ font-size:12.5px } }

/* AR | EN */
.sl-lang{ display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--sl-line); background:#fff }
.sl-lang a{ min-inline-size:36px; block-size:32px; padding:0 9px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font:700 12.5px/1 'Inter',sans-serif; color:var(--sl-muted); text-decoration:none }
.sl-lang a[aria-current="true"]{ background:var(--sl-slate); color:#fff }
html body a.sl-lang__a[href]{ min-block-size:32px }

/* ══ ★ شاركس: «اختار طريقك» — مسوّق / تاجر ══════════════════════════════ */
.sl-paths{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px }
.sl-path{ position:relative; display:flex; flex-direction:column; gap:14px; padding:clamp(22px, 2.6vw, 34px); border-radius:26px; background:#fff;
  border:1px solid var(--sl-line); box-shadow:0 1px 2px rgba(16,24,40,.04) }
.sl-path--mk{ background:#F7FAFF; border-color:rgba(20,87,255,.22) }
.sl-path__tag{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--sl-soft); color:var(--sl-deep) }
.sl-path h3{ margin:0; font-size:clamp(21px, 2vw, 27px); font-weight:800; line-height:1.3; color:var(--sl-ink); letter-spacing:-.01em }
.sl-path p{ margin:0; font-size:15.5px; line-height:1.8; color:var(--sl-text) }
.sl-path ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.sl-path li{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--sl-ink) }
.sl-path li .ph{ color:var(--sl-ok); --duo:#BFE3CE }
.sl-path .sl-btn,.sl-path .sl-link{ align-self:flex-start; margin-block-start:auto }
.sl-path__ico{ position:absolute; inset-block-start:clamp(22px, 2.6vw, 34px); inset-inline-end:clamp(22px, 2.6vw, 34px) }
@media (max-width: 860px){ .sl-paths{ grid-template-columns:minmax(0, 1fr) } }

/* ══ ★ شاركس: «الفلوس ماشيه» بدل العربيه (العمله رايحه من التاجر للمحفظه) ══ */
.sl-road{ --vw:58px; block-size:96px; overflow:visible }   /* العمله بتبدأ من أول محطه — مش داخله من برّه زى عربية Zemam */
.sl-road__van{ inset-block-end:9px; filter:none }
.sl-coin{ display:grid; place-items:center; inline-size:58px; block-size:58px; border-radius:50%; background:var(--sl-slate); color:#fff; --duo:#8FB2FF;
  box-shadow:0 0 0 6px #fff, 0 14px 26px -12px rgba(7,26,58,.55) }
.sl-road__line{ inset-block-end:30px }
.sl-road__pin{ inset-block-end:26px }
@media (max-width: 600px){ .sl-road{ --vw:48px; block-size:84px } .sl-road__van{ inset-block-end:9px } .sl-road__line{ inset-block-end:25px } .sl-road__pin{ inset-block-end:21px } .sl-coin{ inline-size:48px; block-size:48px } .sl-coin .ph{ inline-size:22px; block-size:22px } }

/* الخطوات: ٤ بدل ٥ */
.sl-steps{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
.sl-steps li:nth-child(n+3) .sl-step__n{ background:var(--sl-soft); color:var(--sl-slate); --duo:#8FB2FF; border-color:rgba(20,87,255,.22) }
.sl-steps li:nth-child(3) .sl-step__n{ background:var(--sl-slate); color:#EAF2FF; --duo:#1457FF; border-color:var(--sl-slate) }
.sl-steps li:nth-child(n+3) .sl-step__n em{ background:var(--sl-slate) }
.sl-steps li:nth-child(3) .sl-step__n em{ background:var(--sl-caramel) }
.sl-step__by--sup{ background:#FFF4E5; color:#9A5B00 }
.sl-step__by--mk{ background:var(--sl-soft); color:var(--sl-deep) }
.sl-step__by--sh{ background:var(--sl-slate); color:#fff }
.sl-step__by--both{ background:#E6F4EC; color:var(--sl-ok) }
@media (max-width: 1000px){ .sl-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 860px){ .sl-steps{ grid-template-columns:minmax(0, 1fr) } }   /* الخط الزمنى الرأسى (زى Zemam) */

/* ══ ★ شاركس: الدعوه — العلامه ثابته (من غير جزيئات) ═════════════════════ */
.sl-end__mark{ position:absolute; inset-block-start:50%; inset-inline-end:7%; inline-size:220px; block-size:220px; margin-block-start:-110px; z-index:1;
  display:grid; place-items:center; border-radius:56px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12) }
.sl-end__mark img{ inline-size:120px; block-size:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)) }
.sl-end .sl-ctas{ gap:12px 18px }
.sl-btn--line{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); box-shadow:none }
.sl-btn--line:hover{ background:rgba(255,255,255,.08); color:#fff }
@media (max-width: 900px){
  .sl-end__mark{ position:relative; inset:auto; margin:0 0 18px; inline-size:96px; block-size:96px; border-radius:28px }
  .sl-end__mark img{ inline-size:58px }
}

/* ══ ★ شاركس: اتصل بينا ═══════════════════════════════════════════════ */
.sl-contact{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(24px, 5vw, 64px); align-items:start }
.sl-clist{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px }
.sl-clist a,.sl-clist div{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid var(--sl-line);
  color:var(--sl-ink); text-decoration:none; font-weight:600; font-size:15px }
.sl-clist a:hover{ border-color:rgba(20,87,255,.35) }
.sl-clist .sl-ico{ inline-size:40px; block-size:40px; border-radius:12px }
.sl-form{ display:grid; gap:14px; padding:clamp(20px, 2.6vw, 30px); border-radius:24px; background:#fff; border:1px solid var(--sl-line);
  box-shadow:0 30px 60px -44px rgba(7,26,58,.45) }
.sl-form .f2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px }
.sl-fld{ display:grid; gap:6px }
.sl-fld label{ font-size:13.5px; font-weight:600; color:var(--sl-text) }
.sl-fld input,.sl-fld textarea{ inline-size:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--sl-line); background:var(--sl-paper);
  font:inherit; font-size:15px; color:var(--sl-ink); outline:none; transition:border-color .2s, box-shadow .2s, background .2s }
.sl-fld input:focus,.sl-fld textarea:focus{ background:#fff; border-color:rgba(20,87,255,.55); box-shadow:0 0 0 4px rgba(20,87,255,.12) }
.sl-form .hp{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.sl-msg{ padding:12px 14px; border-radius:14px; font-size:14.5px }
.sl-msg ul{ margin:0; padding-inline-start:18px }
.sl-msg--ok{ background:#ECFDF3; color:#05603A; border:1px solid #ABEFC6 }
.sl-msg--err{ background:#FEF3F2; color:#B42318; border:1px solid #FECDCA }
.sl-form .sl-btn{ justify-self:start; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:15.5px }
@media (max-width: 900px){ .sl-contact{ grid-template-columns:minmax(0, 1fr) } }
@media (max-width: 560px){ .sl-form .f2{ grid-template-columns:minmax(0, 1fr) } .sl-form .sl-btn{ justify-self:stretch; justify-content:center } }

/* ══ ★ شاركس: الفوتر ══════════════════════════════════════════════════ */
.sl-foot{ border-block-start:1px solid var(--sl-line); background:#fff; padding-block:clamp(40px, 6vw, 64px) 26px }
.sl-foot__grid{ display:grid; grid-template-columns:minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap:28px }
.sl-foot__brand p{ margin:14px 0 0; max-inline-size:26rem; font-size:14.5px; line-height:1.8; color:var(--sl-muted) }
.sl-foot h4{ margin:4px 0 12px; font-size:13px; font-weight:700; color:var(--sl-ink); text-transform:uppercase; letter-spacing:.06em }
html[dir="rtl"] .sl-foot h4{ text-transform:none; letter-spacing:0; font-size:14px }
.sl-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.sl-foot ul a{ color:var(--sl-text); text-decoration:none; font-size:14.5px }
.sl-foot ul a:hover{ color:var(--sl-caramel) }
.sl-soc{ display:flex; gap:8px; margin-block-start:16px }
.sl-soc a{ inline-size:40px; block-size:40px; border-radius:12px; display:grid; place-items:center; background:var(--sl-paper2); color:var(--sl-ink) }
.sl-soc a:hover{ background:var(--sl-soft); color:var(--sl-caramel) }
.sl-foot__bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-block-start:34px; padding-block-start:18px;
  border-block-start:1px solid var(--sl-line); font-size:13px; color:var(--sl-muted) }
.sl-foot__bot a{ color:var(--sl-muted) }
@media (max-width: 900px){ .sl-foot__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) } .sl-foot__brand{ grid-column:1 / -1 } }
@media (max-width: 480px){ .sl-foot__grid{ grid-template-columns:minmax(0, 1fr) } }

/* الأرقام الحيّه تحت الهيرو (من الداتابيز) */
.sl-stats{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; list-style:none; margin:18px 0 0; padding:0; font-size:13.5px; color:var(--sl-muted) }
.sl-stats b{ color:var(--sl-ink); font-weight:700 }
.sl-stats__live{ display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:999px; background:#E6F4EC; color:var(--sl-ok); font-weight:700; font-size:12px }
.sl-stats__live i{ inline-size:7px; block-size:7px; border-radius:50%; background:var(--sl-ok); box-shadow:0 0 0 3px rgba(46,125,89,.18) }
@media (prefers-reduced-motion: no-preference){ .sl-stats__live i{ animation:sl-pulse 1.6s ease-in-out infinite } }
@keyframes sl-pulse{ 50%{ box-shadow:0 0 0 6px rgba(46,125,89,0) } }
.sl-end__login{ margin:18px 0 0 }
/* ٤ محطات بدل ٥ للعمله */
.sl-road__pin{ inset-inline-start:calc(var(--p) * 25% - 12.5% - 12px) }
.sl-road__van{ inset-inline-start:calc(12.5% - var(--vw) / 2); animation:sl-flow 12s ease-in-out infinite }
@keyframes sl-flow{
  0%{ inset-inline-start:calc(12.5% - var(--vw) / 2); opacity:0 } 4%{ opacity:1 }
  12%,22%{ inset-inline-start:calc(12.5% - var(--vw) / 2) }
  34%,44%{ inset-inline-start:calc(37.5% - var(--vw) / 2) }
  56%,66%{ inset-inline-start:calc(62.5% - var(--vw) / 2) }
  78%,94%{ inset-inline-start:calc(87.5% - var(--vw) / 2); opacity:1 }
  100%{ inset-inline-start:calc(87.5% - var(--vw) / 2); opacity:0 }
}
@media (prefers-reduced-motion: reduce){ .sl-road__van{ animation:none; inset-inline-start:calc(87.5% - var(--vw) / 2) } }

/* الأيقونات اللى ليها لوجو رسمى فى الشريط */
.sl-marquee__track li img{ inline-size:28px; block-size:28px; object-fit:contain }
/* ★ 2026-10-22 («اللاند تبقى أدبتيف»): على موبايل ٣٢٠–٤٠٠ الشريط كان أعرض من الشاشه وزرار القايمه
   بيطلع برّه (اللوجو القصير الجديد أعرض من القديم). كل حاجه فى الشريط أصغر شويه */
@media (max-width: 400px){
  .sl-top__in{ gap:8px; padding-inline:14px }
  .sl-top__end{ gap:6px }
  .sl-top__brand .skl{ font-size:11px }
  .sl-lang{ padding:2px }
  .sl-lang a{ min-inline-size:30px; padding:0 6px }
  html body a.sl-top__cta[href]{ min-block-size:38px }
  .sl-top__cta{ padding:0 12px }
  .sl-top__menu{ inline-size:38px; block-size:38px }
}

/* ★ 2026-10-22 («أدبتيف»): بين ٩٠١ و١٢٦٠ هامش الصفحه ٢٠px بس والكروت العايمه بتطلع -٢٦/-٣٤ ← كانت بتلزق فى حرف الشاشه (١٠٢٤) */
@media (min-width: 901px) and (max-width: 1260px){
  .sl-float--order{ inset-inline-start:-6px } .sl-float--ship{ inset-inline-end:-6px }
}

/* ══════════════════════════════════════════════════════════════════════
   ★ 2026-10-22 — الشريط اللى فوق زى LightFunnels (المالك: «عايز الناف بار … كدا زى دى»)
   كارت أبيض عايم بحواف مدوّره فى عرض الصفحه: اللوجو على جنب، الروابط فى النص،
   «دخول» بإطار و«سجّل» مليان على الجنب التانى. بيفضل ثابت فوق مع التمرير.
   ══════════════════════════════════════════════════════════════════════ */
.sl-top,.sl-top.is-scrolled,.sl-top.is-open{ padding:16px var(--pad-page-x, 20px) 0; background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important }
.sl-top__in{ max-inline-size:76rem; min-block-size:78px; padding:12px 14px 12px 26px; background:#fff; border:1px solid var(--sl-line); border-radius:18px;
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 14px 34px -22px rgba(16,24,40,.28); transition:box-shadow .25s ease }
html[dir="rtl"] .sl-top__in{ padding:12px 26px 12px 14px }
.sl-top.is-scrolled .sl-top__in{ box-shadow:0 1px 2px rgba(16,24,40,.06), 0 18px 40px -20px rgba(16,24,40,.34) }
.sl-top__links{ gap:6px; margin-inline:auto }
.sl-top__links a{ padding:10px 16px; border-radius:10px; color:var(--sl-ink); font-size:16px; font-weight:600 }
.sl-top__links a:hover{ background:var(--sl-paper2); color:var(--sl-ink) }
.sl-top__end{ gap:10px }
.sl-top__login{ display:inline-flex; align-items:center; justify-content:center; min-block-size:46px; padding:0 20px; border:1px solid #D0D5DD; border-radius:10px; background:#fff; color:var(--sl-ink); font-size:16px; font-weight:700 }
.sl-top__login:hover{ border-color:var(--sl-ink) }
.sl-top__cta{ min-block-size:46px; padding:0 22px; border-radius:10px; background:#1457FF; font-size:16px; font-weight:700; box-shadow:none }
.sl-top__cta:hover{ background:#0F45D6; transform:none }
html body a.sl-top__cta[href],html body a.sl-top__login[href]{ min-block-size:46px }
.sl-top__menu{ border-radius:10px }
/* القايمه على الموبايل: كارت تانى تحت الشريط بنفس الشكل */
.sl-sheet{ max-inline-size:76rem; margin:8px auto 0; padding:6px 18px 16px; background:#fff; border:1px solid var(--sl-line); border-radius:16px; box-shadow:0 18px 40px -22px rgba(16,24,40,.3) }
.sl-sheet a.sl-sheet__login{ border-radius:10px }
@media (max-width: 1180px){ .sl-top__links a{ padding:10px 12px; font-size:15px } }
@media (max-width: 980px){
  .sl-top__login{ display:none }   /* «دخول» جوّه القايمه على الموبايل */
  .sl-top,.sl-top.is-scrolled,.sl-top.is-open{ padding:12px 14px 0 }
  .sl-top__in,html[dir="rtl"] .sl-top__in{ min-block-size:66px; padding:10px 12px; border-radius:16px }
}
@media (max-width: 600px){
  .sl-top,.sl-top.is-scrolled,.sl-top.is-open{ padding:10px 10px 0 }
  .sl-top__in,html[dir="rtl"] .sl-top__in{ min-block-size:60px; padding:8px 10px; border-radius:14px }
  html body a.sl-top__cta[href]{ min-block-size:40px }
  .sl-top__cta{ padding:0 14px; font-size:14px }
}
@media (min-width: 1680px){ .sl-top__in,.sl-sheet{ max-inline-size:86rem } }
@media (min-width: 2200px){ .sl-top__in,.sl-sheet{ max-inline-size:100rem } }
/* الكبسوله اللى فوق العنوان اتشالت (المالك 2026-10-22) ← مسافه أكتر شويه بين الشريط العايم والعنوان على الموبايل */
@media (max-width: 600px){ .sl-hero{ padding-block-start:116px } }

/* ══════════════════════════════════════════════════════════════════════
   ★ 2026-10-22 (بعدها) — «صغّر الناف … وخلّى الطبيعى لما يجى يفتح يفتح على ٩٠»
   ١) الشريط العايم أصغر: ٦٤px بدل ٧٨ · زراير ٤٠px · روابط ١٥px.
   ٢) (اتلغى بعدها: اللاند بتفتح ١٠٠٪ — الـ٩٠٪ للسيستم بس)
   ══════════════════════════════════════════════════════════════════════ */
.sl-top,.sl-top.is-scrolled,.sl-top.is-open{ padding-top:12px }
.sl-top__in{ min-block-size:64px; padding:8px 10px 8px 20px; border-radius:14px }
html[dir="rtl"] .sl-top__in{ padding:8px 20px 8px 10px }
.sl-top__links a{ padding:8px 12px; border-radius:9px; font-size:15px }
.sl-top__login{ min-block-size:40px; padding:0 16px; border-radius:9px; font-size:14.5px }
.sl-top__cta{ min-block-size:40px; padding:0 18px; border-radius:9px; font-size:14.5px }
html body a.sl-top__cta[href],html body a.sl-top__login[href]{ min-block-size:40px }
.sl-top__menu{ inline-size:40px; block-size:40px }
.sl-top .sl-lang a{ block-size:30px }
@media (max-width: 980px){ .sl-top__in,html[dir="rtl"] .sl-top__in{ min-block-size:58px; padding:8px 10px } }
@media (max-width: 600px){ .sl-top__in,html[dir="rtl"] .sl-top__in{ min-block-size:54px; padding:6px 8px } }
/* ★ اللاند بتفتح ١٠٠٪ (المالك: «اللاندين تفتح ١٠٠٪ عادى») — التصغير ٩٠٪ للسيستم بس (sharks-skin.css) */
/* اللوجو الأساسى (الزعنفه + sharks + AFFILIATE + الجمله) فى الشريط — المالك 2026-10-22 */
.sl-top__brand .skl--full .skl__img{ inline-size:auto; block-size:46px; max-inline-size:none }
@media (max-width: 600px){ .sl-top__brand .skl--full .skl__img{ block-size:38px } }
@media (max-width: 400px){ .sl-top__brand .skl--full .skl__img{ block-size:34px } }
/* على أصغر موبايل اللغه بتنزل جوّه القايمه عشان اللوجو الكامل ياخد مكانه */
.sl-sheet .sl-lang{ display:none }
@media (max-width: 400px){
  .sl-top__end > .sl-lang{ display:none }
  .sl-sheet .sl-lang{ display:inline-flex; margin-block-start:14px; align-self:center }
  .sl-sheet{ display:flex; flex-direction:column }
  .sl-sheet[hidden]{ display:none }
}

/* أصغر موبايل (٣٢٠–٤٠٠): نفس الكلام فى شاركس */
@media (max-width: 400px){
  .sl-top__in,html[dir="rtl"] .sl-top__in{ gap:6px }
  .sl-top__end{ gap:6px }
  .sl-top__cta{ padding:0 12px }
  .sl-top__menu{ inline-size:36px; block-size:36px }
}

/* ══════════════════════════════════════════════════════════════════════
   ★ 2026-10-22 — أيقونات ملوّنه 3D (App\Support\Icon3D · Fluent Emoji 3D · MIT) — «هات أيقونز أحسن»
   كل المربعات فاتحه (مفيش كحلى ورا أيقونه) — نفس لاند Zemam.
   ══════════════════════════════════════════════════════════════════════ */
.i3d{ display:block; flex:none; object-fit:contain; -webkit-user-drag:none; user-select:none }
.sl-ico,.sl-step__n,.sl-float__ico,.sl-strip__manual,.sl-coin{ --i3d-bg:#F3F7FF }
.sl-ico,.sl-ico--ok{ background:var(--i3d-bg); box-shadow:inset 0 0 0 1px var(--sl-line) }
.sl-steps li .sl-step__n,.sl-steps li:nth-child(n+3) .sl-step__n,.sl-steps li:nth-child(3) .sl-step__n,.sl-steps li:nth-child(n+4) .sl-step__n{ background:var(--i3d-bg); border-color:var(--sl-line); color:var(--sl-slate) }
.sl-float__ico,.sl-float__ico--green,.sl-float__ico--sand{ background:var(--i3d-bg) }
.sl-strip__manual{ inline-size:32px; block-size:32px; background:transparent }
.sl-coin{ background:transparent; box-shadow:none }
.sl-path__tag .i3d{ inline-size:22px; block-size:22px }
@media (max-width: 680px){
  .sl-bento > .sl-card:not(.sl-card--hero):not(.sl-card--wide) .sl-ico .i3d,.sl-trust article .sl-ico .i3d{ inline-size:32px; block-size:32px }
  .sl-step__n .i3d{ inline-size:30px; block-size:30px }
}
@media (max-width: 600px){ .sl-float__ico .i3d{ inline-size:22px; block-size:22px } .sl-coin .i3d{ inline-size:30px; block-size:30px } }

/* ══════════════════════════════════════════════════════════════════════
   ★ 2026-10-22 — الزراير بهويّة Zimos (المالك: «الزراير تاخد أيدينتى زيموس»)
   نفس زراير لوحة المسوّق (sharks-mk-glass.css ‎--mk-act‎ / ‎--mk-sel‎ — منقوله من
   zimos-front liquid-glass): كبسوله · تدرّج · لمعه فوق · بريق بيعدّى مع الماوس ·
   توهّج. الأساسى كحلى، «اشترك» فوق أزرق، والتانى «لوح زجاج» صغير فاتح.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --sx-act:linear-gradient(135deg, #071A3A 0%, #15336A 100%);
  --sx-act-glow:0 10px 22px -12px rgba(7,26,58,.62);
  --sx-sel:linear-gradient(135deg, #2D6BFF 0%, #1457FF 55%, #0F45D6 100%);
  --sx-sel-glow:0 10px 22px -10px rgba(20,87,255,.60);
  --sx-gloss:linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 54%);
  --sx-gloss-rim:inset 0 1px 0 0 rgba(255,255,255,.34), inset 0 -1px 0 0 rgba(0,0,0,.12);
  --sx-sweep:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  --sx-control:rgba(255,255,255,.72);
  --sx-chip:inset 0 1px 0 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(255,255,255,.62), 0 0 0 1px rgba(7,26,58,.12), 0 1px 2px rgba(7,26,58,.07);
  --sx-ease:cubic-bezier(.2,.7,.2,1);
}
.sl-btn,.sl-top__cta{
  border-radius:999px!important; border:0; color:#fff;
  background-color:#071A3A; background-image:var(--sx-sweep), var(--sx-gloss), var(--sx-act);
  background-size:260% 100%, auto, auto; background-position:160% 0, 0 0, 0 0; background-repeat:no-repeat;
  box-shadow:var(--sx-gloss-rim), var(--sx-act-glow);
  transition:background-position .65s var(--sx-ease), transform .14s ease, box-shadow .16s ease;
}
.sl-top__cta{ background-color:#1457FF; background-image:var(--sx-sweep), var(--sx-gloss), var(--sx-sel); box-shadow:var(--sx-gloss-rim), var(--sx-sel-glow) }
.sl-btn:hover,.sl-top__cta:hover{ background-position:-60% 0, 0 0, 0 0; color:#fff; transform:none }
.sl-btn:hover{ background-color:#071A3A; box-shadow:var(--sx-gloss-rim), 0 14px 28px -12px rgba(7,26,58,.75) }
.sl-top__cta:hover{ background-color:#1457FF; box-shadow:var(--sx-gloss-rim), 0 14px 28px -10px rgba(20,87,255,.70) }
.sl-btn:active,.sl-top__cta:active{ transform:scale(.97) }
/* على الكارت الغامق آخر الصفحه */
.sl-btn--light{
  color:var(--sl-ink); background-color:#fff;
  background-image:linear-gradient(112deg, transparent 38%, rgba(20,87,255,.16) 50%, transparent 62%), linear-gradient(180deg, #fff 0%, #EEF3FF 100%);
  background-size:260% 100%, auto; background-position:160% 0, 0 0;
  box-shadow:inset 0 1px 0 0 #fff, 0 14px 30px -16px rgba(0,0,0,.6);
}
.sl-btn--light:hover{ color:var(--sl-ink); background-color:#fff; background-position:-60% 0, 0 0 }
.sl-btn--line{
  background-color:rgba(255,255,255,.10); background-image:none; border:0!important;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.22);
}
.sl-btn--line:hover{ background-color:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.30) }
/* «دخول» + «عندى منتجات» = لوح زجاج صغير (زى Outline فى Zimos) */
.sl-top__login,.sl-hero .sl-link,.sl-path .sl-link{
  border:0!important; border-radius:999px!important; background:var(--sx-control); box-shadow:var(--sx-chip);
  transition:background-color .16s ease, transform .14s ease;
}
.sl-top__login:hover,.sl-hero .sl-link:hover,.sl-path .sl-link:hover{ background:rgba(255,255,255,.96); color:var(--sl-ink) }
.sl-top__login:active,.sl-hero .sl-link:active,.sl-path .sl-link:active{ transform:scale(.97) }
.sl-hero .sl-link,.sl-path .sl-link{ min-block-size:52px; padding:0 24px }
.sl-link--light{
  border:0!important; border-radius:999px; min-block-size:44px; padding:0 20px;
  background:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.18);
}
.sl-link--light:hover{ background:rgba(255,255,255,.18); color:#fff }
.sl-top .sk-lseg a[aria-current="true"]{ background-image:var(--sx-gloss), var(--sx-act)!important; box-shadow:var(--sx-gloss-rim)!important }
@media (max-width: 600px){ .sl-hero .sl-link,.sl-path .sl-link{ min-block-size:50px } }
@media (prefers-reduced-motion: reduce){ .sl-btn,.sl-top__cta,.sl-btn--light{ transition:none } }

/* الزرارين جنب بعض فى الهيرو (الكبسوله التانيه كانت بتنزل سطر لوحدها بفرق ٢px) */
.sl-hero .sl-link,.sl-path .sl-link{ padding:0 20px }
.sl-hero .sl-ctas{ column-gap:16px }
@media (max-width: 600px){ .sl-hero .sl-link,.sl-path .sl-link{ flex:1 1 100%; justify-content:center; margin-inline:0; align-self:stretch } }

/* ══════════════════════════════════════════════════════════════════════
   ★ 2026-10-22 — خلفيات الأقسام (المالك: «الأيقونات العايمه مشتّته … الباك جراوند
   فيه لون خفيف أو حاجات بسيطه بتتحرك — شكل احترافى»)
   • الهيرو: نور ناعم (أزرق · سماوى · بنفسجى فاتح) بيلفّ على مهله + نقط خفيفه فوق.
   • الأقسام: أبيض ↔ أزرق فاتح جدًا بالتبادل، وفى كل قسم بقعة نور واحده بتتحرك ببطء.
   • transform بس (طبقه واحده لكل قسم) · ثابته على الموبايل وللى مقلّل الحركه.
   ══════════════════════════════════════════════════════════════════════ */
.sl-hero,.sl-sec,.sl-show{ position:relative; isolation:isolate; overflow:clip }
.sl-hero{ background:#fff }
.sl-hero::before{
  content:""; position:absolute; inset:-40% -20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(closest-side at 26% 36%, rgba(20,87,255,.16), transparent),
    radial-gradient(closest-side at 76% 30%, rgba(20,216,230,.20), transparent),
    radial-gradient(closest-side at 58% 80%, rgba(124,140,255,.18), transparent);
  animation:slAura 48s linear infinite;
}
.sl-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(7,26,58,.14) 1px, transparent 1.6px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 70%);
}
@keyframes slAura{
  0%{ transform:rotate(0deg) scale(1) }
  50%{ transform:rotate(180deg) scale(1.08) }
  100%{ transform:rotate(360deg) scale(1) }
}
.sl-strip{ background:rgba(255,255,255,.72) }
.sl-sec--paper{ background:#F6F9FF }
.sl-sec--paper::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(20,87,255,.12) 1px, transparent 1.6px); background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 38%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 38%);
}
.sl-sec::before,.sl-show::before{
  content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  inline-size:min(760px, 90vw); aspect-ratio:1; inset-block-start:-220px; inset-inline-end:-200px;
  background:radial-gradient(closest-side, rgba(20,87,255,.11), transparent);
  animation:slDrift 28s ease-in-out infinite alternate;
}
.sl-sec:nth-of-type(odd)::before{
  inset-block-start:auto; inset-block-end:-260px; inset-inline-end:auto; inset-inline-start:-220px;
  background:radial-gradient(closest-side, rgba(20,216,230,.15), transparent); animation-duration:34s;
}
.sl-show::before{ inset-inline-end:auto; inset-inline-start:50%; margin-inline-start:-380px; inset-block-start:-300px;
  background:radial-gradient(closest-side, rgba(124,140,255,.16), transparent) }
@keyframes slDrift{
  from{ transform:translate3d(0, 0, 0) scale(1) }
  to{ transform:translate3d(-70px, 60px, 0) scale(1.14) }
}
@media (max-width: 760px){
  .sl-sec::before,.sl-show::before{ animation:none; inline-size:120vw }
  .sl-hero::before{ animation-duration:70s }
}
@media (prefers-reduced-motion: reduce){
  .sl-hero::before,.sl-sec::before,.sl-show::before{ animation:none }
}