:root{
  --ink:#0f172a; --muted:#475569; --border:#e2e8f0;
  --g:#22c55e; --r:#ef4444; --b2:#0ea5e9;
  --shadow:0 14px 32px rgba(2,6,23,.08);
  --shadow-lg:0 22px 46px rgba(2,6,23,.16);
    --radius:16px;
  }

 /* ===== Hero ===== */
  .app-hero{
    margin: 18px auto 28px; border-radius: 18px; overflow: hidden; position: relative;
    background: #0f172a url('../img/home/services0.png') center/cover no-repeat;
    min-height: 60vh; display: grid; place-items: center; box-shadow: 0 18px 44px rgba(0,0,0,.18); isolation:isolate;
  }
  .app-hero::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(90% 70% at 20% 0%, rgba(34,197,94,.22), transparent 55%),
      linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.75) 100%);
    z-index:0;
  }
  .app-hero__inner{ position: relative; z-index: 1; color:#fff; text-align:center; padding: clamp(1rem,2.4vw,2rem); max-width: 900px; }
  .app-hero__title{
    font-weight: 900; font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.2rem); text-shadow: 0 6px 22px rgba(0,0,0,.35); margin-bottom:.65rem;
    opacity:0; transform: translateY(-14px); animation: fadeDown .8s ease forwards .05s;
  }
  .app-hero__lead{
    font-size: clamp(1rem, .6vw + .95rem, 1.15rem); opacity:.95;
    opacity:0; transform: translateY(14px); animation: fadeUp .8s ease forwards .15s;
  }
  @keyframes fadeUp { to { opacity:1; transform: translateY(0); } }
  @keyframes fadeDown { to { opacity:1; transform: translateY(0); } }


/* GRID CARDS */
.services-section{
  padding:8px 0 56px
  
}
.svc-card{
  display:flex;flex-direction:column;height:100%;
  border-radius:var(--radius); border:1px solid rgba(2,6,23,.08);
  background:linear-gradient(90deg, rgba(34,197,94,.20), rgba(239,68,68,.20));
  box-shadow:var(--shadow); color:var(--ink);
  padding:clamp(14px,1.4vw,18px);
  transition:transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

.svc-head{display:flex;gap:.7rem;align-items:center;margin-bottom:.35rem}
.svc-ico{
  width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(2,6,23,.08); box-shadow:0 10px 22px rgba(2,6,23,.08); font-size:28px;
}
.svc-title{margin:0;font-weight:900}

/* Summary box inside card */
.svc-sum{
  margin-top:.25rem;background:#fff;border:1px dashed rgba(2,6,23,.08);
  border-radius:12px;padding:.65rem .75rem;color:var(--muted)
}
.svc-sum ul{margin:.35rem 0 0 1rem}
.svc-sum li{margin:.18rem 0;color:#334155}

/* Footer */
.svc-foot{margin-top:auto;display:flex;justify-content:center}
.svc-btn{
  border:0;border-radius:12px;padding:.6rem 1rem;font-weight:800;
  background:var(--g); color:#0b1b34; box-shadow:0 10px 22px rgba(34,197,94,.25);
  transition:transform .15s ease, filter .15s ease;
}
.svc-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* Modal (details) */
.svc-modal{position:fixed;inset:0;display:none;place-items:center;z-index:1050}
.svc-modal.is-open{display:grid}
.svc-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.48);backdrop-filter:blur(2px);opacity:0;transition:opacity .22s ease}
.svc-modal.is-open .svc-backdrop{opacity:1}
.svc-dialog{
  position:relative; z-index:1; width:min(920px,92vw); max-height:86vh;
  background:#fff;border-radius:18px;box-shadow:0 30px 90px rgba(2,6,23,.35);
  transform:translateY(12px) scale(.98); opacity:0; transition:transform .22s ease, opacity .22s ease;
}
.svc-modal.is-open .svc-dialog{transform:none;opacity:1}
.svc-dialog__head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #eef2f7}
.svc-dialog__title{margin:0;font-weight:900;color:var(--ink)}
.svc-close{border:0;background:#f1f5f9;border-radius:10px;padding:.45rem .65rem;font-weight:800}
.svc-dialog__body{padding:14px 16px 16px}
.svc-dialog__body .scroll{max-height:64vh;overflow:auto;padding-right:.25rem}
.svc-dialog__body p{color:var(--ink);line-height:1.7;margin:.45rem 0}
.svc-dialog__body ul{margin:.3rem 0 .6rem 1.05rem}
.svc-dialog__body li{margin:.25rem 0}
.cta-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.65rem}
.btn-cta{border-radius:10px;font-weight:800;padding:.52rem .9rem;border:0}
.btn-cta--brand{background:var(--g);color:#0b1b34}
.btn-cta--outline{background:#fff;border:2px solid #dbeafe;color:#0f172a}
.btn-cta--muted{background:#f1f5f9;color:#0f172a}

/* Fade-up animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none !important;transform:none !important}
  .svc-modal .svc-dialog{transition:none !important}
}


  /* كبّر Badge "Neden PREGO?" */
.badge{
  font-size: clamp(1rem, 0.9vw + 0.95rem, 1.2rem); /* أكبر بكثير من الافتراضي */
  padding: .5rem .9rem;                            /* زيد الحشوة */
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.15) !important;
  background:#fff !important;
  color:#0f172a !important;
  box-shadow: 0 6px 18px rgba(2,6,23,.12);
}



/* (اختياري) وسّع أقصى عرض الكونتينر على الشاشات العريضة */
@media (min-width: 1400px){
  .services-section .container{ max-width: 1380px; } /* زدها 1440/1520 إذا بدك */
}



/* موبايل: قلّل الهوامش */
@media (max-width: 575.98px){
  .svc-modal{ padding: 72px 12px 12px; }
  .svc-dialog{ max-height: calc(100vh - 100px); width: 94vw; }
}



.svc-modal{
  place-items: center;
  /* إذا هيدرِك ~72px: */
  padding: 84px 16px 24px;          /* top right/left bottom */
  box-sizing: border-box;
}