/* =========================================================
   services.css — Services page specific styling
   ========================================================= */

.page-head {
  padding-top: 54px;
}

.service-block {
  align-items: center;
}

/* Service panel refinement */
.service-panel {
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 30%, rgba(6,182,212,.14), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(124,58,237,.12), transparent 55%),
    var(--surface);
}

/* List styling */
.service-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.service-list li {
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
  background: color-mix(in srgb, var(--surface), transparent 20%);
  color: color-mix(in srgb, var(--text), transparent 12%);
}

/* Better section rhythm */
.section {
  padding: 68px 0;
}

/* Chips spacing and look */
.chips {
  margin-top: 14px;
}

.chip {
  background: color-mix(in srgb, var(--surface), transparent 10%);
}

/* CTA surface tweak */
.section--alt .surface.center {
  background:
    radial-gradient(circle at 30% 30%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(6,182,212,.14), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface), white 4%), var(--surface));
}

/* Responsive */
@media (max-width: 920px) {
  .section { padding: 60px 0; }
  .service-panel { padding: 16px; }
  .service-list li { padding: 12px; }
}