/* ============================================================
   صفحة الخدمات (القائمة) — بطاقات بلاطية + قلب لون عند المرور
   تتناغم مع قسم الخدمات في الرئيسية. كل متغيرات --sl-* وعناصر
   data-edit كما هي (المحرّر في الداشبورد لا يتأثر).
   ============================================================ */
.sl-page{
  --c-accent: var(--accent,#1f9296);
  --c-ink:    var(--ink,#0d2b2d);
  --c-paper:  var(--paper,#fff);
  --c-cream:  var(--cream,#eef7f7);
  --c-muted:  var(--muted,#5e7a7b);
}
.sl-page .container{position:relative;z-index:2}
.sl-deco-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--c-accent) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c-accent) 7%,transparent) 1px,transparent 1px);
  background-size:74px 74px;opacity:.5}

/* ===== الهيرو ===== */
.sl-hero{position:relative;overflow:hidden;padding:110px 0 90px;text-align:center;background:var(--sl-hero-bg,var(--c-ink))}
.sl-hero .sl-deco-grid{opacity:.35;-webkit-mask-image:radial-gradient(ellipse 65% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(ellipse 65% 70% at 50% 40%,#000,transparent)}
.sl-hero-glow{position:absolute;width:620px;height:620px;border-radius:50%;top:-260px;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 24%,transparent),transparent 62%)}
.sl-hero-inner{position:relative;z-index:2}
.sl-hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--sl-hero-eyebrow,#fff);
  padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);margin-bottom:24px}
.sl-hero-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--c-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 25%,transparent)}
.sl-hero-title{font-size:var(--sl-hero-title-size,clamp(34px,5vw,58px));font-weight:800;margin:0 0 18px;line-height:1.15;color:var(--sl-hero-title,#fff)}
html[dir="ltr"] .sl-hero-title{letter-spacing:-1px}
.sl-hero-lead{font-size:17.5px;line-height:1.85;color:var(--sl-hero-lead,rgba(255,255,255,.78));max-width:600px;margin:0 auto;font-weight:400}

/* ===== القائمة ===== */
.sl-list-sec{position:relative;overflow:hidden;padding:80px 0 110px;background:var(--sl-list-bg,var(--c-paper))}
.sl-list-sec > .sl-deco-grid{opacity:.25;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 60%);mask-image:linear-gradient(to bottom,#000,transparent 60%)}
.sl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

/* ===== البطاقة ===== */
.sl-card{position:relative;display:flex;flex-direction:column;min-height:290px;background:var(--sl-card-bg,var(--c-cream));
  border:1px solid var(--sl-card-border,color-mix(in srgb,var(--c-ink) 8%,transparent));
  border-radius:26px;padding:32px;overflow:hidden;isolation:isolate;text-decoration:none;
  box-shadow:0 8px 26px rgba(17,22,29,.04);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .45s}
/* طبقة اللون اللي تنفتح من زاوية الأيقونة */
.sl-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sl-hover-bg,#11270c);
  clip-path:circle(0% at 88% 14%);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
html[dir="ltr"] .sl-card::before{clip-path:circle(0% at 12% 14%)}
.sl-card:hover::before{clip-path:circle(150% at 88% 14%)}
html[dir="ltr"] .sl-card:hover::before{clip-path:circle(150% at 12% 14%)}
.sl-card:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(17,39,12,.18)}
.sl-card:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

/* الرقم: علامة مائية كبيرة أسفل البطاقة */
.sl-card-num{position:absolute;z-index:-1;bottom:-18px;inset-inline-end:22px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:120px;font-weight:700;
  color:var(--sl-num,var(--sl-accent,var(--c-accent)));opacity:.08;line-height:1;direction:ltr;pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1)}
.sl-card:hover .sl-card-num{opacity:.18;transform:translateY(-6px)}

/* الأيقونة */
.sl-card-ico{position:relative;display:inline-flex;width:58px;height:58px;border-radius:18px;flex:none;
  background:var(--c-paper);box-shadow:0 8px 22px rgba(0,0,0,.06);align-items:center;justify-content:center;margin-bottom:34px;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .45s}
.sl-card:hover .sl-card-ico{transform:scale(1.06);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.sl-card-ico svg{width:28px!important;height:28px!important;color:var(--sl-ico-stroke,var(--sl-accent,var(--c-accent,#1f9296)));stroke:currentColor}
.sl-card-ico svg *{stroke:var(--sl-ico-stroke,currentColor)}
.sl-card-ico svg[style*="--sl-ico-sw"] *,.sl-page[style*="--sl-ico-sw"] .sl-card-ico svg *{stroke-width:var(--sl-ico-sw,0);paint-order:stroke}
.sl-card-ico svg *:not([fill="none"]){fill:var(--sl-accent)!important}
.sl-card-ico svg[fill]:not([fill="none"]){fill:var(--sl-accent)!important}

/* النصوص */
.sl-card-title{position:relative;font-size:21px;font-weight:800;line-height:1.35;margin:0 0 10px;color:var(--sl-card-title,var(--c-ink));transition:color .45s}
.sl-card-text{position:relative;font-size:14.5px;line-height:1.85;color:var(--sl-card-text,var(--c-muted));margin:0 0 24px;max-width:520px;flex:1;transition:color .45s}
.sl-card:hover .sl-card-title{color:#fff}
.sl-card:hover .sl-card-text{color:rgba(255,255,255,.74)}

/* «اعرف أكثر» + سهم داخل دائرة */
.sl-card-more{position:relative;display:inline-flex;align-items:center;gap:12px;font-size:13.5px;font-weight:700;color:var(--sl-more-color,var(--sl-accent,var(--c-accent)));margin-top:auto;transition:color .45s}
.sl-card-more .sl-more-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex:none;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent);transition:background .45s,border-color .45s,transform .45s}
.sl-card-more svg{width:16px!important;height:16px!important;transition:transform .35s}
html[dir="rtl"] .sl-card-more svg{transform:scaleX(-1)}
.sl-card:hover .sl-card-more{color:#fff}
.sl-card:hover .sl-card-more .sl-more-ico{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.sl-card:hover .sl-card-more .sl-more-ico svg{stroke:#fff}
html[dir="rtl"] .sl-card:hover .sl-card-more svg{transform:scaleX(-1) translateX(3px)}
html[dir="ltr"] .sl-card:hover .sl-card-more svg{transform:translateX(3px)}
.sl-empty{text-align:center;padding:80px 0;color:var(--c-muted)}

/* الثيمات الداكنة (v2/v3): القائمة تبقى فاتحة — الهيرو وحده داكن */
.theme-v2 .sl-list-sec,.theme-v3 .sl-list-sec{background:var(--sl-list-bg,var(--paper,#fff))}
.theme-v2 .sl-card,.theme-v3 .sl-card{background:var(--sl-card-bg,var(--cream,#f6f3ec));border-color:color-mix(in srgb,var(--ink) 9%,transparent)}
.theme-v2 .sl-card-ico,.theme-v3 .sl-card-ico{background:var(--paper,#fff);box-shadow:0 8px 22px rgba(0,0,0,.06)}
.theme-v2 .sl-card-ico svg,.theme-v3 .sl-card-ico svg{color:var(--sl-ico-stroke,var(--sl-accent,var(--accent)))}
.theme-v2 .sl-card-title,.theme-v3 .sl-card-title{color:var(--sl-card-title,var(--ink))}
.theme-v2 .sl-card-text,.theme-v3 .sl-card-text{color:var(--sl-card-text,var(--muted))}
.theme-v2 .sl-card-more,.theme-v3 .sl-card-more{color:var(--sl-more-color,var(--sl-accent,var(--accent)))}
.theme-v2 .sl-card-num,.theme-v3 .sl-card-num{color:var(--sl-num,var(--sl-accent,var(--accent)));opacity:.08}
.theme-v2 .sl-card:hover .sl-card-title,.theme-v3 .sl-card:hover .sl-card-title{color:#fff}
.theme-v2 .sl-card:hover .sl-card-text,.theme-v3 .sl-card:hover .sl-card-text{color:rgba(255,255,255,.74)}
.theme-v2 .sl-card:hover .sl-card-more,.theme-v3 .sl-card:hover .sl-card-more{color:#fff}
.theme-v2 .sl-card:hover .sl-card-num,.theme-v3 .sl-card:hover .sl-card-num{opacity:.18}

@media (max-width:680px){
  .sl-grid{grid-template-columns:1fr;gap:12px}
  .sl-hero{padding:90px 0 64px}
  .sl-list-sec{padding:52px 0 72px}
  .sl-card{min-height:0;padding:24px 22px;border-radius:22px}
  .sl-card-ico{width:50px;height:50px;border-radius:15px;margin-bottom:24px}
  .sl-card-num{font-size:96px}
  .sl-card-more .sl-more-ico{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .sl-card,.sl-card::before,.sl-card-num,.sl-card-ico{transition:none}
}