/* --- Services layout: vertical (ikon ustida, matn pastda) --- */
.services-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-block-start: 12px;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(195,154,111,.25);
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px rgba(195,154,111,.08);
}

.svc-title {
  margin: 0;
  font-weight: 800;
  color: var(--text);
  font-size: 1.06rem;
}
.svc-desc { margin: 0; color: var(--muted); font-size: .95rem; }

/* --- Icon container: liquid glass chip + oltin halo --- */
.svc-icon {
  position: relative;
  inline-size: 64px; block-size: 64px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(195,154,111,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 22px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
}
.svc-icon::after{ /* yumshoq oltin aura */
  content:""; position:absolute; inset:-10px;
  border-radius:22px;
  background: radial-gradient(40% 40% at 50% 20%, rgba(195,154,111,.20), transparent 60%);
  z-index:0;
}

/* --- Iconning o'zi: mask-image orqali brend rangda --- */
.svc-ico{
  position: relative; z-index:1;
  inline-size: 40px; block-size: 40px;
  background: linear-gradient(180deg, #C39A6F, #b88f5f);
  /* mask settings (longhands for better support) */
  -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
  mask-position: center;         mask-repeat: no-repeat;         mask-size: contain;
  opacity: .95;
}
/* Hoverda biroz “jon” kiradi */
.service-card:hover .svc-ico{ filter: brightness(.95); transform: translateY(-1px); transition:.15s; }

/* --- Har bir ikon uchun mask-url (Lucide CDN) --- */
.ico-rocket     { -webkit-mask-image: url("../../../public/icons/lucide/rocket.svg");     mask-image: url("../../../public/icons/lucide/rocket.svg"); }
.ico-file-text  { -webkit-mask-image: url("../../../public/icons/lucide/file-text.svg");  mask-image: url("../../../public/icons/lucide/file-text.svg"); }
.ico-line-chart { -webkit-mask-image: url("../../../public/icons/lucide/line-chart.svg"); mask-image: url("../../../public/icons/lucide/line-chart.svg"); }
.ico-gift       { -webkit-mask-image: url("../../../public/icons/lucide/gift.svg");       mask-image: url("../../../public/icons/lucide/gift.svg"); }
.ico-wrench     { -webkit-mask-image: url("../../../public/icons/lucide/wrench.svg");     mask-image: url("../../../public/icons/lucide/wrench.svg"); }
.ico-scale      { -webkit-mask-image: url("../../../public/icons/lucide/scale.svg");      mask-image: url("../../../public/icons/lucide/scale.svg"); }
.ico-palette    { -webkit-mask-image: url("../../../public/icons/lucide/palette.svg");    mask-image: url("../../../public/icons/lucide/palette.svg"); }
.ico-target     { -webkit-mask-image: url("../../../public/icons/lucide/target.svg");     mask-image: url("../../../public/icons/lucide/target.svg"); }

/* Xizmatlar grid oralig'ini aniqroq qilamiz */
.services-grid {
  gap: 20px !important;                  /* 16->20px: kartalar orasida ko'proq joy */
  align-items: stretch;
  margin-block-end: 14px;                 /* grid pastida ham bo'shliq */
}

/* CTA tugma griddan ajralib tursin */
.services-cta {
  margin-block-start: 18px !important;    /* grid bilan orasini ochadi */
  padding-block-end: 6px;                 /* pastda ham nafas */
  display: flex; gap: 10px;               /* kelajakda 2ta tugma bo'lsa ham tartib */
}

/* Kartaning ichki paddingi yetarli bo'lsin (hover shadowni noto'g'ri ko'rsatmasin) */
.service-card { padding: 20px !important; }

/* Katta ekranda ham birbiriga yopishmasin */
@media (min-width: 1200px) {
  .services-cta { margin-block-start: 22px !important; }
}

.services-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.service-card{ padding:14px; border-radius:14px; }

@media (max-width: 1100px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .services-grid{ grid-template-columns: 1fr; }
}