/* ===== Tlo strony - kolorowe rozmyte plamy na ciemnym granacie ===== */
html, body, #__next {
  background-color: #0a0b10 !important;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(124, 92, 255, 0.32), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(0, 200, 180, 0.22), transparent 40%),
    radial-gradient(circle at 50% 95%, rgba(255, 90, 150, 0.18), transparent 50%) !important;
  background-attachment: fixed !important;
}

#page_wrapper, #inner_wrapper {
  background: transparent !important;
}

/* ===== Karty uslug - szklane, rozmyte, z hover-lift ===== */
.service-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}
.service-card:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(124, 92, 255, 0.5) !important;
  transform: translateY(-2px);
}

.service-icon {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 4px;
  margin: 2px;
}

/* ===== Naglowki sekcji (Media i rozrywka, Pliki i produktywnosc...) ===== */
.service-group-name {
  text-transform: uppercase;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  font-weight: 600 !important;
  opacity: 0.8;
}

/* ===== Pasek widgetow na gorze (CPU/RAM/dysk, zegar) ===== */
#information-widgets {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(16px);
  padding: 16px !important;
}