/* "Služby" — bento grid of service cards */

.services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

.svc {
  grid-column: span 2;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 32px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.svc:hover { transform: translateY(-3px); border-color: rgba(12,154,104,.5); }
.svc.wide { grid-column: span 3; }

.svc-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center; margin-bottom: 24px;
}
.svc-icon svg { width: 24px; height: 24px; }

.svc h3 { font-size: 26px; margin-bottom: 10px; }
.svc p { color: var(--ink-2); margin: 0 0 20px; }
.svc ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.svc li { color: var(--ink-2); font-size: 15px; padding-left: 26px; position: relative; }
.svc li::before { content: "→"; position: absolute; left: 0; color: var(--accent-text); font-family: var(--mono); }

/* highlighted dark card */
.svc.feature {
  background: radial-gradient(120% 90% at 100% 0%, rgba(99,241,183,.22), transparent 55%), var(--panel);
  color: var(--panel-ink); border-color: rgba(99,241,183,.35);
  box-shadow: 0 0 50px -25px var(--glow);
}
.svc.feature:hover { border-color: var(--accent); }
.svc.feature p, .svc.feature li { color: color-mix(in srgb, var(--panel-ink) 72%, transparent); }
.svc.feature li::before { color: var(--accent); }
.svc.feature .tag { background: rgba(99,241,183,.1); color: var(--accent); }
.svc.feature .svc-icon { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 24px -4px var(--glow); }

@media (max-width: 1000px) {
  .services { grid-template-columns: 1fr 1fr; }
  .svc, .svc.wide { grid-column: span 1; }
}
@media (max-width: 640px) {
  .services { grid-template-columns: 1fr; }
  .svc { padding: 26px; }
}