/* Match the package cards using their existing Higgsfield light artwork. */
#szolgaltatasok .seo-card {
  --ws-glow: 81 193 255;
  --ws-light-x: 50%;
  --ws-light-y: 22%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 12px 32px #0003, 0 0 18px rgb(var(--ws-glow) / .08);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#szolgaltatasok .seo-card:nth-child(2) { --ws-glow: 191 147 255; }
#szolgaltatasok .seo-card:nth-child(3) { --ws-glow: 232 200 120; }
#szolgaltatasok .seo-card:nth-child(4) { --ws-glow: 81 193 255; }
#szolgaltatasok .seo-card::before,
#szolgaltatasok .seo-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
#szolgaltatasok .seo-card::before {
  inset: -15%;
  background: linear-gradient(#102338a8, #102338e8 62%), url("assets/packages-spectrum-background.webp") center / cover;
  opacity: .5;
  animation: ws-service-light 10s ease-in-out infinite alternate;
  animation-play-state: paused;
}
#szolgaltatasok .seo-card:nth-child(2)::before { animation-delay: -4s; }
#szolgaltatasok .seo-card:nth-child(3)::before { animation-delay: -7s; }
#szolgaltatasok .seo-card:nth-child(4)::before { animation-delay: -2s; }
#szolgaltatasok.is-light-active .seo-card::before { animation-play-state: running; }
#szolgaltatasok .seo-card::after {
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 300px 250px at var(--ws-light-x) var(--ws-light-y), rgb(var(--ws-glow) / .21), transparent 75%), linear-gradient(125deg, rgb(var(--ws-glow) / .07), transparent 52%);
  opacity: .65;
  transition: opacity .3s ease;
}
#szolgaltatasok .seo-card p { flex: 1; }
#szolgaltatasok .seo-card .text-link { max-width: 100%; }
#szolgaltatasok .seo-card:focus-within {
  z-index: 2;
  border-color: rgb(var(--ws-glow) / .85);
  box-shadow: 0 22px 45px #0006, 0 0 30px rgb(var(--ws-glow) / .23), inset 0 0 0 1px rgb(var(--ws-glow) / .12);
}
#szolgaltatasok .seo-card:focus-within::after { opacity: 1; }
#szolgaltatasok .seo-start-note {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
#szolgaltatasok .seo-start-note p { margin: 10px auto 8px; }
#szolgaltatasok .seo-start-note .text-link {
  max-width: 100%;
  justify-content: center;
  text-align: center;
}
#szolgaltatasok .seo-start-note .text-link > span:first-child { min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  #szolgaltatasok .seo-card:hover {
    z-index: 2;
    transform: translateY(-7px) scale(1.012);
    border-color: rgb(var(--ws-glow) / .85);
    box-shadow: 0 22px 45px #0006, 0 0 30px rgb(var(--ws-glow) / .23), inset 0 0 0 1px rgb(var(--ws-glow) / .12);
  }
  #szolgaltatasok .seo-card:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  #szolgaltatasok .seo-card:focus-within { transform: translateY(-7px) scale(1.012); }
}
@keyframes ws-service-light {
  from { transform: translate3d(-2%, -2%, 0) scale(1.02); opacity: .36; }
  to { transform: translate3d(2%, 3%, 0) scale(1.08); opacity: .66; }
}
@media (prefers-reduced-motion: reduce) {
  #szolgaltatasok .seo-card,
  #szolgaltatasok .seo-card::after { transition: none; }
  #szolgaltatasok .seo-card:hover { transform: none; }
  #szolgaltatasok .seo-card::before { animation: none; opacity: .4; }
}