/* ═══════════════════════════════════════════════════════════════════
   SERVICES.CSS — صفحة خدماتنا
   ═══════════════════════════════════════════════════════════════════ */

/* توكنز محلية مطلوبة لتصميم الهيرو (نفس قيم صفحة الأعمال) */
:root {
  --or-bd: rgba(245,158,11,.30);
  --gl:    rgba(255,255,255,.04);
  --bd:    rgba(255,255,255,.07);
  --tx2:   #A6ADC0;
  --spr:   cubic-bezier(.34,1.56,.64,1);
  --out:   cubic-bezier(.16,1,.3,1);
}

@keyframes svcPulse  { 0%,100%{opacity:.62;transform:scale(1)} 50%{opacity:1;transform:scale(1.09)} }
@keyframes svcFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes svcReveal { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes svcBlink  { 0%,100%{opacity:1;box-shadow:0 0 8px var(--or)} 50%{opacity:.28;box-shadow:none} }
@keyframes svcBarFill{ from{width:0} to{width:var(--w,0)} }
@keyframes svcScroll { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ══════════════════════════════════════════════════
   1. HERO — Two-Column Cinematic (نفس فكرة صفحة الأعمال)
   ══════════════════════════════════════════════════ */
.svc-hero {
  padding: calc(var(--header-h,70px) + 32px) 0 48px;
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center;
  isolation: isolate;
}

/* Background */
.svc-bg { position:absolute;inset:0;pointer-events:none;z-index:0; }
.svc-bg-glow {
  position:absolute;border-radius:50%;filter:blur(90px);
  pointer-events:none;will-change:opacity,transform;
  animation:svcPulse var(--dur,8s) ease-in-out infinite var(--del,0s);
}
.svc-glow-c { --dur:7s;--del:0s; width:650px;height:550px;top:-100px;right:0%;background:radial-gradient(ellipse,rgba(245,158,11,.18) 0%,transparent 65%); }
.svc-glow-r { --dur:10s;--del:3s;width:400px;height:350px;bottom:-60px;left:5%;background:radial-gradient(ellipse,rgba(245,158,11,.10) 0%,transparent 65%); }
.svc-glow-l { --dur:12s;--del:1.5s;width:300px;height:280px;top:30%;left:2%;background:radial-gradient(ellipse,rgba(59,130,246,.065) 0%,transparent 65%); }

.svc-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative; z-index: 2;
}

/* Content column */
.svc-hero-left { display:flex;flex-direction:column;align-items:flex-start; }

.svc-eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  background:rgba(245,158,11,.09);border:1px solid var(--or-bd);
  font-size:.78rem;font-weight:700;color:var(--or);letter-spacing:.06em;
  margin-bottom:22px;animation:svcReveal .55s ease both;
  text-transform:uppercase;
}
.svc-eyebrow-dot {
  width:7px;height:7px;border-radius:50%;
  background:var(--or);flex-shrink:0;
  animation:svcBlink 2s ease-in-out infinite;
}

.svc-hero-h1 {
  font-size:clamp(3rem,6vw,5.2rem);
  font-weight:900;letter-spacing:-.045em;line-height:1.24;
  color:var(--tx);margin:0 0 20px;
  animation:svcReveal .6s ease .08s both;
}
.svc-hero-h1-accent {
  display:block;
  margin-top:0.15em;
  padding-bottom:0.18em;
  background:linear-gradient(120deg,#FFD080 0%,#F59E0B 50%,#FF5500 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.svc-hero-desc {
  font-size:clamp(.95rem,1.4vw,1.06rem);color:var(--tx2);
  line-height:1.82;max-width:440px;margin:0 0 32px;
  animation:svcReveal .6s ease .16s both;
}

.svc-hero-stats {
  display:flex;align-items:center;gap:20px;
  padding:14px 22px;border-radius:14px;
  background:var(--gl);border:1px solid var(--bd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.04);
  margin-bottom:28px;
  animation:svcReveal .6s ease .22s both;
}
.svc-hstat    { text-align:center; }
.svc-hstat-n  { font-size:1.5rem;font-weight:900;color:var(--or);line-height:1; }
.svc-hstat-l  { font-size:.7rem;color:var(--tx2);margin-top:4px;font-weight:600;white-space:nowrap; }
.svc-hstat-sep{ width:1px;height:30px;background:var(--bd); }

.svc-hero-actions {
  display:flex;gap:12px;flex-wrap:wrap;
  animation:svcReveal .6s ease .28s both;
}

.svc-scroll-hint {
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
  z-index: 2;
}
.svc-scroll-line {
  width:1.5px;height:36px;
  background:linear-gradient(to bottom,var(--or),transparent);
  animation:svcScroll 2.2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   2. HERO VISUAL — كوكبة الخدمات (Services Orbit)
   ══════════════════════════════════════════════════ */
.svc-hero-right {
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:480px;
  animation:svcReveal .8s ease .12s both;
}

.svc-visual-glow {
  position:absolute;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.20) 0%,transparent 65%);
  filter:blur(60px);animation:svcPulse 4s ease-in-out infinite;
  pointer-events:none;
}

/* حلقات مدارية دوّارة */
.svc-orbit-rings { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none; }
.svc-orbit-ring { position:absolute;border-radius:50%;border:1px dashed rgba(245,158,11,.22); }
.svc-orbit-ring-1 { width:300px;height:300px;animation:svcOrbitSpin 32s linear infinite; }
.svc-orbit-ring-2 { width:420px;height:420px;border-color:rgba(245,158,11,.12);animation:svcOrbitSpin 46s linear infinite reverse; }
@keyframes svcOrbitSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* المحور المركزي */
.svc-orbit-hub {
  position:relative;z-index:2;
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FF9D2E,#E8620B);
  box-shadow:0 0 50px rgba(245,158,11,.5),0 12px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3);
  animation:svcFloat 5s ease-in-out infinite;
}
.svc-orbit-hub-glow {
  position:absolute;inset:-18px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.35) 0%,transparent 70%);
  filter:blur(14px);animation:svcPulse 3s ease-in-out infinite;
  z-index:-1;
}

/* أقمار الخدمات العائمة */
.svc-orbit-sat {
  position:absolute;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:svcFloat 6s ease-in-out infinite;
}
.svc-sat-icon {
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  background:rgba(10,14,30,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(245,158,11,.28);
  box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);
  transition:transform .3s var(--spr);
}
.svc-orbit-sat:hover .svc-sat-icon { transform:scale(1.12) translateY(-3px); }
.svc-orbit-sat span {
  font-size:.68rem;font-weight:700;color:var(--tx2);
  white-space:nowrap;
  background:rgba(10,14,30,.7);padding:3px 9px;border-radius:999px;
  backdrop-filter:blur(8px);
}

.svc-sat-1 { top:2%;   left:50%; transform:translateX(-50%); animation-delay:0s; }
.svc-sat-2 { top:22%;  right:2%; animation-delay:1.2s; }
.svc-sat-3 { bottom:8%;right:12%;animation-delay:2.4s; }
.svc-sat-4 { bottom:8%;left:12%; animation-delay:3.6s; }
.svc-sat-5 { top:22%;  left:2%;  animation-delay:.6s;  }

.svc-hero-chip {
  position:absolute;
  bottom:-14px;left:-16px;z-index:4;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;
  background:rgba(10,14,30,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--or-bd);
  box-shadow:0 10px 36px rgba(0,0,0,.4),0 0 20px rgba(245,158,11,.08);
  animation:svcFloat 4.5s ease-in-out infinite;
}
.svc-chip-emoji { font-size:1.4rem;flex-shrink:0; }
.svc-chip-val   { font-size:1.1rem;font-weight:900;color:var(--or);line-height:1; }
.svc-chip-lbl   { font-size:.68rem;color:var(--tx2);margin-top:3px; }

@media (prefers-reduced-motion: reduce) {
  .svc-bg-glow,.svc-visual-glow,.svc-orbit-ring,.svc-orbit-hub,.svc-orbit-hub-glow,
  .svc-orbit-sat,.svc-hero-chip,.svc-eyebrow-dot,.svc-scroll-line { animation:none !important; }
}

/* ══════════════════════════════════════════════════
   2. SERVICES GRID
   ══════════════════════════════════════════════════ */
.svc-grid-section { padding-top:0; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.svc-card {
  background: var(--bg-glass-2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .3s ease;
}
.svc-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(245,158,11,.07) 0%, transparent 55%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 0;
}
.svc-card::after {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  transform: scaleX(0); transition: transform .4s cubic-bezier(.16,1,.3,1); z-index: 1;
}
.svc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245,158,11,.35);
  box-shadow:
    0 0 0 1px rgba(245,158,11,.12),
    0 24px 64px rgba(245,158,11,.10),
    0 8px 24px rgba(0,0,0,.3);
}
.svc-card:hover::before { opacity: 1; }
.svc-card:hover::after  { transform: scaleX(1); }

.svc-card-icon { margin-bottom: 18px; position: relative; z-index: 1; }
.svc-card-title {
  font-size: 1rem; font-weight: 800; color: var(--tx);
  margin-bottom: 14px; line-height: 1.4;
  position: relative; z-index: 1;
}
.svc-card-feats {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
  position: relative; z-index: 1;
}
.svc-card-feats li {
  font-size: .82rem; color: var(--tx-3); line-height: 1.55;
  padding-right: 16px; position: relative;
}
.svc-card-feats li::before {
  content: ''; position: absolute; right: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--or); box-shadow: 0 0 6px var(--or);
}
.svc-card-cta {
  align-self: flex-start;
  position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════════
   3. CTA (utility — نفس أسلوب باقي الصفحات)
   ══════════════════════════════════════════════════ */
.pb-cta-section { padding-top: 20px; }
.pb-cta-emoji   { font-size: 2.2rem; margin-bottom: 10px; }
.pb-cta-h2      { margin: 12px 0 14px; }
.pb-cta-p       { max-width: 500px; margin: 0 auto; }

/* ══════════════════════════════════════════════════
   4. RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero — الفيجوال بيتخفي على التابلت، المحتوى يتوسّط */
  .svc-hero-right  { display:none; }
  .svc-hero-layout { grid-template-columns:1fr; }
  .svc-hero-left   { align-items:center;text-align:center; }
  .svc-hero-desc   { max-width:560px;margin-inline:auto; }
  .svc-hero        { min-height:auto; }
}
@media (max-width: 768px) {
  .svc-hero-h1     { font-size:clamp(2.6rem,9vw,3.6rem); }
  .svc-hero-desc   { font-size:.92rem;max-width:90%; }
  .svc-hero-stats  { flex-wrap:wrap;gap:14px;padding:12px 16px;justify-content:center; }
  .svc-hero-actions{ justify-content:center; }
  .svc-scroll-hint { display:none; }
  .svc-eyebrow     { font-size:.72rem; }

  .svc-grid { grid-template-columns: 1fr; gap: 14px; }
  .svc-card { padding: 24px 20px; }
}
@media (max-width: 400px) {
  .svc-hero-stats { gap:10px;padding:10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-hero-glow { animation: none !important; }
  .svc-card { transition: none !important; }
}