/* ============================================================
   صفحة الخدمات (القائمة) — بطاقات راقية تتبع الثيم بالكامل
   ============================================================ */
.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:120px 0 80px;text-align:center;background:var(--sl-hero-bg,var(--c-ink))}
.sl-hero .sl-deco-grid{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000,transparent);mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000,transparent)}
.sl-hero-glow{position:absolute;width:540px;height:540px;border-radius:50%;top:-200px;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 20%,transparent),transparent 60%)}
.sl-hero-inner{position:relative;z-index:2}
.sl-hero-eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--sl-hero-eyebrow,var(--c-accent));margin-bottom:22px}
.sl-hero-eyebrow::before,.sl-hero-eyebrow::after{content:"";width:30px;height:1px;background:currentColor;opacity:.5}
.sl-hero-title{font-size:var(--sl-hero-title-size,clamp(34px,5vw,56px));font-weight:800;margin:0 0 20px;letter-spacing:-1px;line-height:1.15;color:var(--sl-hero-title,#fff)}
.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:300}

/* القائمة */
.sl-list-sec{position:relative;overflow:hidden;padding:80px 0 100px;background:var(--sl-list-bg,var(--c-paper))}
.sl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* البطاقة — شكل الرئيسية + لمسة أرقى */
.sl-card{position:relative;display:flex;flex-direction:column;background:var(--sl-card-bg,var(--c-cream));
  border:1px solid var(--sl-card-border,color-mix(in srgb,var(--c-accent) 14%,transparent));
  border-radius:20px;padding:40px 32px;overflow:hidden;text-decoration:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.sl-card::before{content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--c-accent),transparent);transform:scaleX(0);transform-origin:inline-start;transition:transform .5s}
.sl-card:hover{transform:translateY(-8px);box-shadow:0 28px 58px rgba(0,0,0,.12);border-color:color-mix(in srgb,var(--c-accent) 35%,transparent)}
.sl-card:hover::before{transform:scaleX(1)}
.sl-card-num{position:absolute;top:14px;inset-inline-end:24px;font-family:'IBM Plex Mono',monospace;font-size:60px;font-weight:700;
  color:var(--sl-num,var(--sl-accent,var(--c-accent)));opacity:.09;line-height:1;direction:ltr;pointer-events:none}
.sl-card-ico{position:relative;display:inline-flex;width:62px;height:62px;border-radius:16px;
  background:var(--c-paper);box-shadow:0 8px 22px rgba(0,0,0,.07);align-items:center;justify-content:center;margin-bottom:22px;transition:transform .4s}
.sl-card:hover .sl-card-ico{transform:scale(1.08) rotate(-5deg)}
.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:20px;font-weight:800;margin:0 0 11px;color:var(--sl-card-title,var(--c-ink))}
.sl-card-text{position:relative;font-size:14.5px;line-height:1.85;color:var(--sl-card-text,var(--c-muted));margin:0 0 22px;flex:1}
.sl-card-more{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--sl-more-color,var(--sl-accent,var(--c-accent)));margin-top:auto}
.sl-card-more svg{width:17px!important;height:17px!important;transition:transform .25s}
html[dir="rtl"] .sl-card-more svg{transform:scaleX(-1)}
html[dir="rtl"] .sl-card:hover .sl-card-more svg{transform:scaleX(-1) translateX(4px)}
.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) 10%,transparent)}
.theme-v2 .sl-card:hover,.theme-v3 .sl-card:hover{border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.theme-v2 .sl-card-ico,.theme-v3 .sl-card-ico{background:var(--paper,#fff);box-shadow:0 8px 22px rgba(0,0,0,.07)}
.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:.09}

@media (max-width:980px){.sl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){
  .sl-grid{grid-template-columns:1fr}
  .sl-hero{padding:100px 0 60px}
  .sl-list-sec{padding:56px 0 70px}
}