/* ============================================================
   SERVICES PAGE — services.css
   ============================================================ */
.services-hero {
  min-height: 420px;
  padding-top: 68px;
  background: var(--page-bg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.svc-hero-dec {
  position: absolute;
  top: -80px; right: -80px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.06), transparent 70%);
  pointer-events: none;
}

/* Feature Rows */
.svc-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.svc-reverse { direction: rtl; }
.svc-reverse > * { direction: ltr; }

.svc-feature-text { display: flex; flex-direction: column; }
.svc-num {
  font-size: 4rem;
  font-weight: 900;
  color: rgba(37,99,235,0.07); /* Brand blue watermark */
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.svc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-list li {
  font-size: 0.95rem;
  color: var(--text-body);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.svc-list li i {
  color: var(--brand); /* Checkmarks use brand color */
}

.svc-feature-img { overflow: hidden; }
.svc-feature-img img { width: 100%; max-height: 380px; object-fit: cover; object-position: center top; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
#notifications .svc-feature-img img { object-position: center 38%; }
.bg-cream-section { background: var(--surface-alt); }

/* Pack process */
.pack-visual { text-align: center; }
.pack-visual img { display: block; max-width: 100%; margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); }

/* Quick Features Grid */
.qf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.qf-card {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all var(--dur-mid) var(--ease);
}
.qf-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.qf-icon { font-size: 2.4rem; margin-bottom: var(--space-md); display: block; color: var(--brand); }

/* CTA */
.cta-banner { background: var(--footer-bg); position: relative; overflow: hidden; padding: var(--space-3xl) 0; }
.cta-banner-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(37,99,235,0.12), transparent 65%); }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; }
.cta-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

@media (max-width: 1024px) {
  .svc-feature-row, .svc-reverse { grid-template-columns: 1fr; direction: ltr; }
  .svc-feature-img { order: -1; }
  .qf-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .qf-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-actions { justify-content: center; }
  .services-hero { min-height: 320px; }
}