/* Services Panels — design values (.svc-panels). Hover states work with
   :hover and :focus-within (touch fallback). */

.qlegy .qlg-svc-panels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--qlegy-line);
}
.qlegy .qlg-svc-panels__panel {
  position: relative;
  padding: 40px 32px 32px;
  border-inline-end: 1px solid var(--qlegy-line);
  border-bottom: 1px solid var(--qlegy-line);
  background: var(--qlegy-bg);
  cursor: pointer;
  transition: background 0.5s var(--qlegy-ease), opacity 0.5s var(--qlegy-ease), transform 0.5s var(--qlegy-ease);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  outline: none;
}
.qlegy .qlg-svc-panels__panel:nth-child(3n) { border-inline-end: 0; }
.qlegy .qlg-svc-panels__grid:hover .qlg-svc-panels__panel:not(:hover) { opacity: 0.35; }
.qlegy .qlg-svc-panels__panel:hover,
.qlegy .qlg-svc-panels__panel:focus-visible {
  background: linear-gradient(135deg, #15171a, #0d0e10);
  transform: translateY(-2px);
  opacity: 1;
}
.qlegy .qlg-svc-panels__num {
  font-family: var(--qlegy-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--qlegy-fg-mute);
}
.qlegy .qlg-svc-panels__name {
  font-size: calc(clamp(32px, 4vw, 56px) * var(--qlegy-heading-scale, 1));
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: auto;
  font-weight: var(--qlegy-heading-weight, 500);
  color: var(--qlegy-fg);
}
.qlegy .qlg-svc-panels__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s var(--qlegy-ease), opacity 0.4s var(--qlegy-ease), margin-top 0.5s var(--qlegy-ease);
  margin-top: 0;
}
.qlegy .qlg-svc-panels__panel:hover .qlg-svc-panels__body,
.qlegy .qlg-svc-panels__panel:focus-visible .qlg-svc-panels__body,
.qlegy .qlg-svc-panels__panel:focus-within .qlg-svc-panels__body {
  max-height: 360px;
  opacity: 1;
  margin-top: 16px;
}
.qlegy .qlg-svc-panels__body p { font-size: 14px; line-height: 1.55; color: var(--qlegy-fg-dim); }
.qlegy .qlg-svc-panels__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.qlegy .qlg-svc-panels__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--qlegy-brand);
  text-decoration: none;
  font-family: var(--qlegy-mono);
  letter-spacing: 0.04em;
}
.qlegy .qlg-svc-panels__link:hover { color: var(--qlegy-brand-2); }
.qlegy .qlg-svc-panels__art {
  position: absolute;
  inset-inline-end: 32px;
  top: 32px;
  width: 140px;
  height: 100px;
  opacity: 0;
  transform: scale(0.8) translateY(8px);
  transition: opacity 0.5s var(--qlegy-ease) 0.1s, transform 0.6s var(--qlegy-ease);
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  border-radius: 8px;
}
.qlegy .qlg-svc-panels__panel:hover .qlg-svc-panels__art,
.qlegy .qlg-svc-panels__panel:focus-within .qlg-svc-panels__art {
  opacity: 1;
  transform: scale(1);
}
.qlegy .qlg-svc-panels__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(103, 232, 249, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--qlegy-ease);
  pointer-events: none;
}
.qlegy .qlg-svc-panels__panel:hover .qlg-svc-panels__glow { opacity: 1; }

@media (max-width: 1000px) {
  .qlegy .qlg-svc-panels__grid { grid-template-columns: repeat(2, 1fr); }
  .qlegy .qlg-svc-panels__panel:nth-child(3n) { border-inline-end: 1px solid var(--qlegy-line); }
  .qlegy .qlg-svc-panels__panel:nth-child(2n) { border-inline-end: 0; }
}
@media (max-width: 640px) {
  .qlegy .qlg-svc-panels__grid { grid-template-columns: 1fr; }
  .qlegy .qlg-svc-panels__panel { border-inline-end: 0 !important; min-height: 0; padding: 32px 24px; }
  .qlegy .qlg-svc-panels__name { margin-top: 16px; }
  .qlegy .qlg-svc-panels__body { max-height: none; opacity: 1; margin-top: 16px; }
}