@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/orbitron/v35/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6xpg.ttf) format('truetype');
}
body {
  background: url(../img/background.png);
  /* Ciemne tło ze screena */
  background-size: cover;
  background-position: center center;
  font-family: sans-serif;
}
body {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.4px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  letter-spacing: 1px;
}
a {
    color: #00ff99;
    text-decoration: underline;
}
p,
li,
span {
  font-weight: 400;
}
/* ============================= */
/* GLOBAL LIST STYLE – CHECK ✔ */
/* ============================= */
ul {
  list-style: none;
  /* usuwamy domyślne kropki */
  padding-left: 0;
  margin-left: 0;
}
ul li {
  position: relative;
  padding-left: 28px;
  /* miejsce na ptaszka */
  margin-bottom: 10px;
  line-height: 1.6;
}
/* Zielony ptaszek */
ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #00ff88;
  /* neonowy zielony */
  font-weight: 700;
}
.navbar ul li::before {
  content: none !important;
}
.navbar ul li {
  padding-left: 0;
}
.bg-darker {
  background-color: #080a0d;
}
/* Hero section z tłem (obrazek procesora) */
.hero-section {
  min-height: 80vh;
  background: linear-gradient(rgba(11, 15, 19, 0.7), rgba(11, 15, 19, 0.7)), url('../img/slide001.png') no-repeat center center;
  background-size: cover;
}
/* Stylizacja kart usług */
.service-card {
  background-color: #1a1f24 !important;
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.service-card:hover {
  transform: translateY(-10px);
  border-color: #1877F2 !important;
}
/* Akcenty kolorystyczne Bootstrapa */
.text-success {
  color: #28a745 !important;
}
.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}
/* Przesunięcie kart na sekcję Hero */
.mt-n5 {
  margin-top: -100px;
}
@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
}
.slideIn {
  animation-name: slideIn;
}
/*Logo*/
.navbar-brand img {
  height: auto;
  /* Zachowuje proporcje */
  width: 180px;
  /* Szerokość bazowa na PC */
  max-width: 100%;
  /* Logo nigdy nie wyjdzie poza kontener */
}
.logo-text {
  font-size: clamp(1.2rem, 4vw, 2.5rem);
}
@media (max-width: 768px) {
  .navbar-brand img {
    width: 140px;
    /* Mniejsze logo na tablety/telefony */
  }
}
/*MENU NAV BAR*/
/* Efekt szklanego menu (Glassmorphism) */
.navbar-custom {
  background: rgba(11, 15, 19, 0.8) !important;
  backdrop-filter: blur(10px);
  /* Rozmycie tła pod menu */
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 15px 0;
  transition: all 0.3s ease;
}
/* Stylizacja Logo */
.logo-text {
  font-size: 1.5rem;
  letter-spacing: 1px;
  transition: transform 0.3s ease;
}
.logo-text:hover {
  transform: scale(1.05);
}
/* Animacja linii pod linkami */
.nav-link-grow {
  position: relative;
  font-weight: 500;
  margin: 0 5px;
}
.nav-link-grow::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 5px;
  left: 8px;
  background-color: #00ff00;
  /* Zielony kolor */
  transition: width 0.3s ease;
}
.nav-link-grow:hover::after {
  width: 80%;
}
/* Przycisk z gradientem */
.btn-gradient-success {
  background: linear-gradient(45deg, #198754, #1ea966);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 8px 25px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(25, 135, 84, 0.3);
  transition: all 0.3s ease;
}
.btn-gradient-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4);
  color: white;
}
/* Customowy Badge dla Promocji */
.badge-promo {
  background: #dc3545;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 4px;
  font-weight: bold;
}
/* Płynne rozwijanie dropdowna */
.dropdown-menu-dark {
  background-color: #0b1013;
}
.animate {
  animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
/* Kolor ikon wewnątrz rozwijanego menu */
.dropdown-item i {
  font-size: 1.1rem;
  vertical-align: middle;
}
/* Kolor ikon w głównym menu (opcjonalnie, jeśli chcesz by były białe lub zielone) */
.nav-link i {
  opacity: 0.8;
  /* Delikatne przygaszenie ikon w głównym pasie */
}
/* Stylizacja ikon po najechaniu na link */
.nav-link:hover i,
.dropdown-item:hover i {
  opacity: 1;
  color: #00ff00 !important;
  /* Wszystkie ikony stają się wyraźnie zielone po hoverze */
  transition: 0.3s;
}
/* Ustawienie czcionki Michroma dla całego menu */
.navbar {
  font-family: 'Michroma', sans-serif;
  letter-spacing: 0.5px;
  /* Michroma jest dość szeroka, lekki odstęp poprawia czytelność */
}
/* Opcjonalnie: Dopasowanie wielkości, bo Michroma optycznie wydaje się większa */
.nav-link {
  font-size: small;
}
/* Stylizacja dropdownów, aby zachowały spójność */
.dropdown-item {
  font-family: 'Michroma', sans-serif;
}
/* Jeśli chcesz, aby logo również używało tej czcionki (jeśli jest tekstowe) */
.logo-text {
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 1px;
}
/* EFEKT GLOW PO NAJECHANIU */
.navbar-nav .nav-link:hover {
  color: #00ff00 !important;
  /* Zielony Bootstrapowy lub Twój kolor */
  /* Zielona poświata (glow) */
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.8), 0 0 10px rgba(0, 255, 0, 0.5);
  transform: translateY(-1px);
}
/* Opcjonalnie: Glow dla przycisku KONTAKT */
.btn-gradient-success {
  transition: all 0.3s ease;
  border: none;
}
.btn-gradient-success:hover {
  box-shadow: 0 0 15px rgba(25, 135, 84, 0.7);
  transform: scale(1.05);
}
.navbar-nav .nav-link.active {
  color: #198754 !important;
  text-shadow: 0 0 8px rgba(25, 135, 84, 0.6);
}
.dropdown-item:hover {
  background-color: transparent !important;
  color: #00ff00 !important;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
  padding-left: 20px;
  /* Delikatne przesunięcie w prawo przy najechaniu */
  transition: all 0.2s;
}
/* WYŁĄCZNIE DLA PC */
@media (min-width: 992px) {
  /* 1. Wymuszamy wyświetlanie po najechaniu */
  .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
  }
  /* 2. Resetujemy domyślne ukrycie Bootstrapa dla PC */
  .dropdown-menu {
    margin-top: 0 !important;
    transition: all 0.3s ease-in-out;
    /* Jeśli menu ucieka, gdy przesuwasz kursor w dół, 
           ten transparentny pseudo-element wypełni lukę */
  }
  .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
  }
}
/*SOCIAL MEDIA */
.social-header {
  order: 2;
}
.navbar-toggler {
  order: 3;
}
/* Styl bazowy - ikony są puste w środku, widać tylko obrys */
.social-link {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.4);
  /* Kolor obramowania */
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Usuwamy wypełnienie, zostawiamy tylko "kontur" (klasy Bootstrap Icons) */
.social-link i::before {
  font-weight: normal !important;
}
/* EFEKT GLOW PO NAJECHANIU */
/* Facebook */
.social-link.fb:hover {
  color: #1877F2 !important;
  filter: drop-shadow(0 0 5px #1877F2) drop-shadow(0 0 10px #1877F2);
  transform: scale(1.2);
}
.social-link.msg:hover {
  -webkit-text-stroke: 1px #00B2FF;
  filter: drop-shadow(0 0 8px #00B2FF);
  transform: translateY(-3px);
}
/* YouTube */
.social-link.yt:hover {
  color: #FF0000 !important;
  filter: drop-shadow(0 0 5px #FF0000) drop-shadow(0 0 10px #FF0000);
  transform: scale(1.2);
}
/* TikTok */
.social-link.tt:hover {
  color: #00f2ea !important;
  filter: drop-shadow(0 0 5px #00f2ea) drop-shadow(0 0 10px #ff0050);
  transform: scale(1.2);
}
@media (min-width: 992px) {
  .social-header {
    order: 4;
    margin-left: 20px;
    border-left: 1px solid gray;
    padding-left: 15px;
  }
  .navbar-collapse {
    order: 3;
  }
}
/* Wyrównanie do lewej na mobile */
@media (max-width: 991px) {
  .navbar-nav {
    align-items: flex-start !important;
  }
}
@media (max-width: 991px) {
  /* Wyrównanie listy do lewej */
  /* Rozciągnięcie dropdownów do pełnej szerokości, ale z tekstem do lewej */
  .navbar-nav .dropdown-menu {
    border: none;
    background: transparent;
    padding-left: 20px;
    /* Wcięcie dla elementów wewnątrz Oferty */
  }
  .dropdown-item {
    text-align: left !important;
  }
  /* Poprawka dla animowanej zielonej linii, żeby zaczynała się od lewej */
  .nav-link-grow::after {
    left: 0 !important;
    transform: none !important;
  }
}
.social-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  transition: 0.3s;
}
.social-link:hover {
  color: #198754;
  /* Zielony kolor po najechaniu */
  transform: translateY(-2px);
}
/* Styl dla hamburgera, żeby pasował do reszty */
.navbar-toggler:focus {
  box-shadow: none;
}
/*Koniec Navbar*/
/*Slider*/
/* Wysokość slidera na cały ekran minus menu */
#mainSlider .carousel-item {
  height: 85vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* --- USTAWIENIA WYSOKOŚCI SLIDERA --- */
/* 1. DOMYŚLNIE DLA TELEFONU (do 767px szerokości) */
#mainSlider,
#mainSlider .carousel-item,
#mainSlider .container {
  height: 250px !important;
  min-height: 250px;
}
/* 2. DLA TABLETU (od 768px do 991px) */
@media (min-width: 768px) {
  #mainSlider,
  #mainSlider .carousel-item,
  #mainSlider .container {
    height: 300px !important;
    min-height: 300px;
  }
  .carousel-indicators {
    bottom: 25px !important;
    /* Domyślnie jest to zwykle 0 lub 10px */
  }
  #services {
    margin-top: -50px;
    /* Podciąga całą sekcję o 100px w górę */
    position: relative;
    z-index: 10;
    /* Gwarantuje, że kafelki będą NAD sliderem, a nie pod nim */
    background: transparent !important;
    /* Usuwamy tło sekcji, żeby nie zasłaniało slidera */
  }
  /* Opcjonalnie: dodaj lekki prześwit tła tylko wewnątrz kart, 
       aby zdjęcie slidera było widoczne w przerwach między nimi */
  .service-card {
    background: rgba(22, 22, 22, 0.95) !important;
    backdrop-filter: blur(10px);
    /* Efekt szklanego tła (glassmorphism) */
  }
}
/* 3. DLA PC (od 992px wzwyż) */
@media (min-width: 992px) {
  #mainSlider,
  #mainSlider .carousel-item,
  #mainSlider .container {
    height: 650px !important;
    min-height: 650px;
  }
  .carousel-indicators {
    bottom: 100px !important;
    /* Domyślnie jest to zwykle 0 lub 10px */
  }
  #services {
    margin-top: -100px;
    /* Podciąga całą sekcję o 100px w górę */
    position: relative;
    z-index: 10;
    /* Gwarantuje, że kafelki będą NAD sliderem, a nie pod nim */
    background: transparent !important;
    /* Usuwamy tło sekcji, żeby nie zasłaniało slidera */
  }
  /* Opcjonalnie: dodaj lekki prześwit tła tylko wewnątrz kart, 
       aby zdjęcie slidera było widoczne w przerwach między nimi */
  .service-card {
    background: rgba(22, 22, 22, 0.95) !important;
    backdrop-filter: blur(10px);
    /* Efekt szklanego tła (glassmorphism) */
  }
}
/* --- DODATKOWA KOREKTA TEKSTU --- */
.slide-caption h1 {
  font-family: 'Michroma', sans-serif;
  /* Mniejsza czcionka na tel, większa na PC */
  font-size: calc(1.5rem + 1.5vw);
}
.slide-caption p {
  font-family: 'Michroma', sans-serif;
  font-size: calc(0.8rem + 0.2vw);
}
/* Wyśrodkowanie kontenera z tekstem wewnątrz nowej wysokości */
/* Stylizacja tekstów slajdu */
.slide-caption h1 {
  font-family: 'Michroma', sans-serif;
  color: #fff;
  letter-spacing: 2px;
}
.glow-green {
  color: #00ff00;
  text-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 30px rgba(25, 135, 84, 0.4);
}
.slide-caption p {
  font-family: 'Michroma', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 3px;
  margin-top: 10px;
}
/* Przycisk neonowy */
.btn-neon-green {
  border: 2px solid #00FF00;
  background: transparent;
  color: #fff;
  font-family: 'Michroma', sans-serif;
  padding: 12px 35px;
  transition: all 0.4s ease;
  border-radius: 0;
  /* Kwadratowy, nowoczesny styl */
}
.btn-neon-green:hover {
  background: #00ff00;
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.7);
  transform: translateY(-3px);
}
.btn-neon-green2 {
  border: 2px solid #00FF00;
  background: transparent;
  color: #fff;
  font-family: 'Michroma', sans-serif;
  padding: 12px 35px;
  transition: all 0.4s ease;
  border-radius: 0;
  /* Kwadratowy, nowoczesny styl */
}
.btn-neon-green2:hover {
  background: #00ff00;
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.7);
  transform: translateY(-3px);
}
/* Wskaźniki na dole */
.carousel-indicators [button] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #198754;
}
/* Przesunięcie pasków nawigacji slidera w górę */
/* Stylizacja strzałek */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-color: rgba(25, 135, 84, 0.2);
  /* Delikatne zielone tło kółka */
  border-radius: 50%;
  background-size: 50%;
  /* Zmniejszenie samej strzałki wewnątrz kółka */
  transition: all 0.3s ease;
  border: 1px solid rgba(25, 135, 84, 0.5);
}
/* Efekt po najechaniu na obszar przycisku */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: #198754;
  filter: drop-shadow(0 0 10px #198754);
  transform: scale(1.1);
}
/* Zwiększenie czułości - obszar klikalny */
.carousel-control-prev,
.carousel-control-next {
  width: 8%;
  /* Subtelne zwężenie obszaru aktywnego, by nie zasłaniał tekstu */
}
/*KONIEC*/
/*KAFELKI*/
.service-card {
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 40px 30px;
  height: 100%;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.service-card h3 {
  font-family: 'Michroma', sans-serif;
  color: #fff;
  letter-spacing: 1px;
}
.icon-box i {
  font-size: 3rem;
  color: #198754;
  transition: all 0.4s ease;
}
/* Efekt po najechaniu */
.service-card:hover {
  border-color: #1877F2;
  transform: translateY(-10px);
  box-shadow: 0 0 20px rgba(25, 135, 84, 0.2);
}
.service-card:hover .icon-box i {
  filter: drop-shadow(0 0 8px #1877F2);
  transform: scale(1.1);
}
/* Wyróżnienie środkowej kafelki (opcjonalnie) */
.active-card {
  border-color: rgba(25, 135, 84, 0.5);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
/* Kontener z perspektywą */
.custom-perspective {
  display: flex !important;
  gap: 0 !important;
}
.card-wrapper {
  position: relative !important;
  transition: all 0.5s ease-in-out;
}
/* KARTA ŚRODKOWA - Największa i najwyżej */
.card-center .service-card {
  /* Wymuszamy niebieską ramkę */
  /* Niebieska poświata (glow) */
  box-shadow: 0 0 25px rgba(24, 119, 242, 0.4) !important;
  background: #222;
  /* Nieco jaśniejsza, by wyszła do przodu */
}
.service-card {
  border: 1px solid #333;
  padding: 40px 30px;
  text-align: center;
  border-radius: 10px;
  font-family: 'Michroma', sans-serif;
  transition: all 0.5s ease;
  background-blend-mode: multiply;
  /* Pomaga mieszać kolor gradientu ze zdjęciem */
}
.service-card,
.service-card * {
  color: #ffffff !important;
}
/* Efekt po najechaniu na kafelkę ze zdjęciem */
.card-wrapper:hover .service-card {
  background-color: rgba(25, 135, 84, 0.2) !important;
  /* Zielona poświata na zdjęciu */
  border-color: #1877F2;
  box-shadow: 0 0 20px rgba(25, 135, 84, 0.4);
}
/* Napisy na tle zdjęć muszą być białe i wyraźne */
.service-card h3,
.service-card p {
  color: #fff !important;
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
/* KARTY BOCZNE - Mniejsze, schowane i ciemniejsze */
.card-left {
  z-index: 1 !important;
  transform: translateX(10px) scale(0.9);
}
/* KARTA PRAWA - warstwa 1 (to samo co lewa) */
.card-right {
  z-index: 1 !important;
  transform: translateX(-10px) scale(0.9);
}
/* KARTA ŚRODKOWA - warstwa 10 (musi być wyżej niż 1) */
.card-center {
  z-index: 10 !important;
  transform: scale(1.1);
}
/* Styl bazowy karty */
.service-card {
  background: #161616;
  border: 1px solid #333;
  padding: 40px 30px;
  text-align: center;
  border-radius: 10px;
  font-family: 'Michroma', sans-serif;
}
/* Interakcja - po najechaniu boczna karta wychodzi na przód */
.card-wrapper:hover {
  z-index: 20 !important;
  transform: scale(1.15) translateX(0) !important;
}
/* Wspólne ustawienia dla wszystkich kart z tłem */
.service-card {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
}
/* ============================= */
/* CENNIK – STYLIZACJA           */
/* ============================= */
#cennik {
  color: #ffffff;
}
/* Wszystkie teksty w kartach */
#cennik .service-card,
#cennik .service-card * {
  color: #ffffff;
}
/* Cena */
#cennik .service-card h4 {
  color: #00ff00 !important;
  font-weight: 600;
  margin-top: 10px;
}
/* Lista usług */
#cennik ul {
  list-style: none;
  margin-top: 15px;
  margin-left: 20px;
  padding-left: 0;
}
#cennik ul li {
  text-align: left;
  padding-left: 28px;
  margin-left: 20px;
  /* miejsce na ptaszka */
  margin-bottom: 10px;
  line-height: 1.6;
}
.mk-serwis .service-card p {
  text-align: left;
}
.mk-serwis .service-card ul li {
  text-align: left;
}
/* Ptaszek – zielony, spójny */
#cennik ul li::before {
  color: #00ff00;
}
/* Zdjęcie 1: Serwis */
.bg-serwis {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/assets/img/kafel_serwis.png') !important;
  /* To zapewnia, że zdjęcie wypełni cały kafelek */
  background-size: cover !important;
  /* To trzyma środek zdjęcia zawsze w centrum kafelka */
  background-position: center !important;
  /* Zapobiega powielaniu się zdjęcia, jeśli kafelek byłby bardzo duży */
  background-repeat: no-repeat !important;
  /* Opcjonalnie: sprawia, że przejście przy hoverze jest płynniejsze */
  transition: background 0.4s ease-in-out, transform 0.4s ease;
}
/* Zdjęcie 2: WWW */
.bg-wsparcie {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/assets/img/wsparcie-it.png') !important;
  /* To trzyma środek zdjęcia zawsze w centrum kafelka */
  background-position: center !important;
  /* Zapobiega powielaniu się zdjęcia, jeśli kafelek byłby bardzo duży */
  background-repeat: no-repeat !important;
  /* Opcjonalnie: sprawia, że przejście przy hoverze jest płynniejsze */
  transition: background 0.4s ease-in-out, transform 0.4s ease;
}
/* Zdjęcie 3: PC */
.bg-skladanie {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/assets/img/pc-build.png') !important;
  background-size: cover !important;
  /* To trzyma środek zdjęcia zawsze w centrum kafelka */
  background-position: center !important;
  /* Zapobiega powielaniu się zdjęcia, jeśli kafelek byłby bardzo duży */
  background-repeat: no-repeat !important;
  /* Opcjonalnie: sprawia, że przejście przy hoverze jest płynniejsze */
  transition: background 0.4s ease-in-out, transform 0.4s ease;
}
/* --- LEWA KARTA: CZERWONY (Składanie PC) --- */
.card-left .service-card {
  border-color: rgba(255, 0, 0, 0.3);
}
.card-left:hover .service-card {
  border-color: #ff0000 !important;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4) !important;
}
.card-left .icon-box i {
  color: #ff0000;
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.5));
}
/* --- ŚRODKOWA KARTA: NIEBIESKI FB (Serwis IT) --- */
.card-center:hover {
  transform: scale(1.15) !important;
  /* Robi się jeszcze większy */
  z-index: 20 !important;
}
.card-center:hover .service-card {
  border-color: #1877F2 !important;
  box-shadow: 0 0 50px rgba(24, 119, 242, 0.8) !important;
}
.card-center .icon-box i {
  color: #1877F2;
  filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.6));
}
/* --- PRAWA KARTA: FIOLETOWY (Wsparcie IT) --- */
.card-right:hover {
  transform: scale(1.05) translateX(-10px) !important;
  /* Wysuwa się lekko spod środka */
  z-index: 15 !important;
}
.card-right:hover .service-card {
  border-color: #a333ff !important;
  box-shadow: 0 0 30px rgba(144, 83, 194, 0.6) !important;
  background-color: rgba(163, 51, 255, 0.05) !important;
}
.card-right .icon-box i {
  color: #a333ff;
  filter: drop-shadow(0 0 5px rgba(163, 51, 255, 0.5));
}
.card-right .icon-box i:hover {
  box-shadow: 0 0 30px rgba(87, 194, 83, 0.6) !important;
}
.card-left:hover .icon-box i {
  /* 1. Biały rdzeń dla ostrości, 2. Mocny kolor, 3. Szeroka aura */
  filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor) !important;
  transform: scale(1.15) rotate(2deg);
  /* Lekkie powiększenie i obrót */
  opacity: 1 !important;
}
.card-center:hover .icon-box i {
  /* 1. Biały rdzeń dla ostrości, 2. Mocny kolor, 3. Szeroka aura */
  filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor) !important;
  transform: scale(1.15) rotate(2deg);
  /* Lekkie powiększenie i obrót */
  opacity: 1 !important;
}
.card-right:hover .icon-box i {
  /* 1. Biały rdzeń dla ostrości, 2. Mocny kolor, 3. Szeroka aura */
  filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor) !important;
  transform: scale(1.15) rotate(2deg);
  /* Lekkie powiększenie i obrót */
  opacity: 1 !important;
}
/* Celujemy tylko w tablety (szerokość od 768px do 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .service-card {
    height: 300px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Wyśrodkuje zawartość pionowo przy stałej wysokości */
    padding: 20px !important;
  }
  /* Resetujemy efekty nachodzenia/skalowania na tablecie, 
       żeby karty 300px mieściły się obok siebie */
  .card-left,
  .card-right,
  .card-center {
    transform: none !important;
    z-index: 1 !important;
  }
  .custom-perspective {
    gap: 15px !important;
    /* Doda lekkie odstępy, by karty się nie zlewały */
  }
  .card-left .service-card,
  .card-right .service-card {
    height: 380px;
  }
}
/* Wyłączenie efektu na telefonach, żeby było czytelnie */
@media (max-width: 767px) {
  .card-left,
  .card-right,
  .card-center {
    transform: none !important;
    margin-bottom: 20px;
  }
  .card-wrapper {
    padding: 0 15px;
  }
}
@media (max-width: 991px) {
  /* Wymuszamy stan aktywny dla środkowego kafelka */
  .card-center .service-card {
    transform: scale(1.05) !important;
    /* Lekkie powiększenie */
    border-color: #1877F2 !important;
    /* Niebieska ramka */
    box-shadow: 0 0 30px rgba(24, 119, 242, 0.6) !important;
    /* Niebieski glow */
    z-index: 10;
  }
  /* Wymuszamy OSTRY GLOW dla ikony w środkowym kafelku */
  .card-center .icon-box i {
    color: #1877F2 !important;
    /* Czerwona ikona */
    filter: drop-shadow(0 0 2px #1877F2) drop-shadow(0 0 10px #1877F2) drop-shadow(0 0 20px #1877F2) !important;
    opacity: 1 !important;
  }
  /* Opcjonalnie: lekkie rozsuniecie, żeby środkowy nie nachodził za mocno na boki na mniejszym ekranie */
  .card-left {
    transform: translateY(10px) scale(0.9) !important;
  }
  .card-right {
    transform: translateY(10px) scale(0.9) !important;
  }
}
@media (max-width: 767px) {
  /* Układamy kafelki jeden pod drugim z odstępem */
  .custom-perspective {
    display: flex;
    flex-direction: column;
    gap: 25px;
    perspective: none !important;
    transform-style: flat !important;
    padding: 20px 0;
  }
  .card-wrapper {
    width: 100% !important;
    transform: none !important;
    z-index: 1 !important;
  }
  /* --- WSZYSTKIE KAFELKI: Efekt Active --- */
  .service-card {
    background: rgba(22, 22, 22, 0.9) !important;
    opacity: 1 !important;
  }
  /* Lewy: Składanie PC (Czerwony Active) */
  .card-left .service-card {
    border: 2px solid #ff0000 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4) !important;
  }
  .card-left .icon-box i {
    color: #ff0000 !important;
    filter: drop-shadow(0 0 8px #ff0000) !important;
  }
  /* Środkowy: Serwis IT (Niebieski Active) */
  .card-center .service-card {
    border: 2px solid #1877F2 !important;
    box-shadow: 0 0 20px rgba(24, 119, 242, 0.4) !important;
  }
  .card-center .icon-box i {
    color: #ff0000 !important;
    /* Czerwona ikona zgodnie z Twoim wyborem */
    filter: drop-shadow(0 0 8px #ff0000) !important;
  }
  /* Prawy: Wsparcie IT (Fioletowy Active) */
  .card-right .service-card {
    border: 2px solid #a333ff !important;
    box-shadow: 0 0 20px rgba(163, 51, 255, 0.4) !important;
  }
  .card-right .icon-box i {
    color: #1877F2 !important;
    /* Niebieska ikona zgodnie z Twoim wyborem */
    filter: drop-shadow(0 0 8px #1877F2) !important;
  }
  /* Wyłączenie jakichkolwiek skoków przy dotknięciu ekranu */
  .card-wrapper:hover {
    transform: scale(1.02) !important;
    /* Bardzo delikatne powiększenie zamiast obrotów */
  }
  /* Wymuszamy widoczność zdjęć tła */
  .bg-skladanie,
  .bg-serwis,
  .bg-wsparcie {
    /* Przywracamy gradient i obrazek */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* Ważne: usuwamy tło z klasy nadrzędnej, jeśli przysłania obrazek */
    background-color: transparent !important;
  }
  /* Ustawienie konkretnych obrazków (upewnij się, że ścieżki są poprawne) */
  .bg-skladanie {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('/assets/img/pc-build.png') !important;
  }
  .bg-serwis {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('/assets/img/kafel_serwis.png') !important;
  }
  .bg-wsparcie {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('/assets/img/wsparcie-it.png') !important;
  }
}
/*Sekcja Główna*/
/* Kontener kompaktowy */
.knowledge-header {
  font-family: 'Orbitron', sans-serif;
  /* Futurystyczna czcionka */
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffffff;
  padding-left: 15px;
  margin-bottom: 30px;
}
.text-glow-purple {
  color: #1877F2;
  /* Efekt neonowego blasku */
  text-shadow: 0 0 5px rgba(24, 119, 242, 0.5), 0 0 10px rgba(24, 119, 242, 0.3), 0 0 20px rgba(24, 119, 242, 0.2);
  animation: purplePulse 3s infinite alternate;
}
/* Delikatne pulsowanie neonu */
@keyframes purplePulse {
  from {
    text-shadow: 0 0 5px rgba(24, 119, 242, 0.5), 0 0 10px rgba(24, 119, 242, 0.3);
  }
  to {
    text-shadow: 0 0 8px rgba(24, 119, 242, 0.8), 0 0 15px rgba(24, 119, 242, 0.5), 0 0 25px rgba(24, 119, 242, 0.3);
  }
}
.knowledge-card-compact {
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
}
.knowledge-card-compact:hover {
  transform: translateY(-5px);
  border-color: #1877F2;
  box-shadow: 0 5px 20px rgba(24, 119, 242, 0.3);
}
/* Miniatura */
.card-thumb-compact {
  position: relative;
  width: 100%;
  height: 110px;
  /* Niższe zdjęcie dla 4 kolumn */
}
.card-thumb-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Centruje obrazek wewnątrz diva */
}
/* Badge mini */
.badge-mini {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
}
/* Treść kompaktowa */
.card-body-compact {
  padding: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.card-title-compact {
  color: #fff;
  font-size: 0.9rem;
  /* Mniejszy font */
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
  min-height: 2.4em;
}
.card-text-compact {
  color: #999;
  font-size: 0.75rem;
  /* Mniejszy opis */
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Przycisk kompaktowy */
.btn-compact {
  margin-top: auto;
  text-align: center;
  color: #1877F2;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: bold;
  border: 1px solid #1877F2;
  padding: 5px;
  border-radius: 4px;
  transition: 0.3s;
  text-transform: uppercase;
}
.knowledge-card-compact:hover .btn-compact {
  background: #1877F2;
  color: #fff;
}
/* Specjalny wariant czerwony dla wideo */
.border-red {
  border-color: rgba(255, 0, 0, 0.3) !important;
}
.text-red {
  color: #ff4d4d !important;
}
.btn-compact.hover-red:hover {
  background: #ff0000 !important;
  border-color: #ff0000 !important;
  box-shadow: 0 0 10px #ff0000;
}
/* Kontener lewej kolumny */
.knowledge-section-wrapper {
  position: relative;
  padding-left: 25px;
}
/* Neonowy pasek - zanikanie od 70% */
.knowledge-section-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #1877F2;
  /* Ujednolicony niebieski */
  border-radius: 10px;
  /* Intensywny blask w kolorze #1877F2 */
  box-shadow: 0 0 12px rgba(24, 119, 242, 0.8), -5px 0 25px rgba(24, 119, 242, 0.5), 5px 0 25px rgba(24, 119, 242, 0.5);
  /* EFEKT ZANIKANIA PRZY 70% */
  /* black 40% - pełna widoczność przez górną część */
  /* transparent 70% - całkowite wygaszenie linii */
  -webkit-mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.6) 55%, transparent 70%);
  mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.6) 55%, transparent 70%);
}
/* Jasny rdzeń linii dla efektu 3D */
.knowledge-section-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  filter: blur(1px);
  z-index: 1;
  /* To samo zanikanie przy 70% */
  -webkit-mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.6) 55%, transparent 70%);
  mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.6) 55%, transparent 70%);
}
.knowledge-card-bg {
  height: 250px;
  /* Stała wysokość kafelka */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* Tekst na dole kafelka */
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}
.knowledge-card-bg:hover {
  transform: translateY(-5px);
  border-color: #1877F2;
}
/* Panel z tekstem */
.card-overlay {
  width: 100%;
  padding: 15px;
  /* Ciemne, półprzezroczyste tło */
  background: rgba(0, 0, 0, 0.7);
  /* Opcjonalnie: efekt rozmycia zdjęcia pod tekstem */
  backdrop-filter: blur(5px);
  border-top: 1px solid rgba(24, 119, 242, 0.3);
  transition: background 0.3s ease;
}
.knowledge-card-bg:hover .card-overlay {
  background: rgba(0, 0, 0, 0.85);
  /* Przyciemnienie po najechaniu */
}
/* Dostosowanie tekstów, aby były czytelne na zdjęciu */
.card-title-compact {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.card-text-compact {
  color: #ccc;
  font-size: 0.75rem;
  margin-bottom: 12px;
}
.knowledge-card-compact {
  position: relative;
  /* Ważne dla pozycjonowania rogu */
  background: #0f0f0f;
  border: 1px solid rgba(24, 119, 242, 0.2);
  border-radius: 6px;
  overflow: hidden;
  /* 1. Ścinamy róg kafelka (prawy górny) */
  /* Punkty: lewy-góra, prawy-góra-start, prawy-góra-dół, prawy-dół, lewy-dół */
  clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%);
}
/* 2. Tworzymy zawinięty róg */
.knowledge-card-compact::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  /* Kolor "spodu" zagięcia - nieco jaśniejszy niebieski dla efektu 3D */
  background: linear-gradient(135deg, #1877F2 50%, #0d4a96 50%);
  /* Cień pod zagięciem */
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
  /* Zaokrąglenie tylko wewnętrznego rogu zagięcia */
  border-bottom-left-radius: 4px;
  z-index: 2;
}
/*Koniec*/
/*Prawa KOLUMNA*/
/* Kontener i linia boczna (Fioletowa) */
.products-section-wrapper {
  position: relative;
  padding-left: 25px;
}
.products-section-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #A333FF;
  box-shadow: 0 0 15px rgba(163, 51, 255, 0.5);
  /* Zanikanie na 70% wysokości */
  mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.5) 55%, transparent 70%);
}
.products-header {
  font-family: 'Orbitron', sans-serif;
  color: #A333FF;
  text-shadow: 0 0 8px rgba(163, 51, 255, 0.4);
  font-size: 1.5rem;
}
/* --- Wrapper z fioletową linią --- */
.products-section-wrapper {
  position: relative;
  padding-left: 25px;
}
.products-section-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: #A333FF;
  box-shadow: 0 0 15px rgba(163, 51, 255, 0.6);
  /* Zanikanie identyczne jak po lewej stronie (niebieskiej) */
  -webkit-mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.5) 55%, transparent 70%);
  mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.5) 55%, transparent 70%);
}
/* --- Nagłówek --- */
.products-header {
  font-family: 'Orbitron', sans-serif;
  color: #A333FF;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(163, 51, 255, 0.5);
}
/* --- Kafelek Poziomy --- */
.product-horizontal-card {
  display: flex;
  background: #0f0f0f;
  border: 1px solid rgba(163, 51, 255, 0.15);
  border-radius: 6px;
  margin-bottom: 12px;
  height: 100px;
  /* Kompaktowa wysokość */
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  /* Zagięcie prawy górny róg */
  clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%);
  transition: 0.3s ease;
}
.product-horizontal-card:hover {
  border-color: #A333FF;
  transform: translateX(5px);
  background: #151515;
}
/* Fioletowe zagięcie (Dog-ear) */
.product-horizontal-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background: linear-gradient(135deg, transparent 50%, #A333FF 50%, #6a1bb3 100%);
  z-index: 5;
}
/* LEWA SEKCJA: Zdjęcie */
/* LEWA SEKCJA: Zdjęcie wypełniające całość */
.prod-left {
  flex: 0 0 40%;
  background: #000;
  /* Tło pod spodem */
  position: relative;
  overflow: hidden;
  padding: 0;
}
.prod-left img {
  width: 100%;
  height: 100%;
  /* KLUCZ: Cover sprawia, że zdjęcie wypełnia 100% szerokości i wysokości.
       Jeśli zdjęcie ma inne proporcje, zostanie delikatnie docięte, 
       ale paski znikną całkowicie. */
  object-fit: cover;
  /* Możesz ustawić punkt skupienia na środek lub lewo/prawo */
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
/* Efekt najazdu - zdjęcie lekko "puchnie" */
.product-horizontal-card:hover .prod-left img {
  transform: scale(1.1);
}
/* PRAWA SEKCJA: Tekst */
.prod-right {
  flex: 1;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.prod-category {
  color: #A333FF;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
}
.prod-name {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-price {
  color: #A333FF;
  font-weight: 800;
  font-size: 1rem;
  text-shadow: 0 0 5px rgba(163, 51, 255, 0.3);
}
.products-section-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-static-list {
  display: flex;
  flex-direction: column;
  /* Rozsuwa 4 kafelki tak, by pierwszy był u góry, a ostatni na samym dole */
  justify-content: space-between;
  /* To sprawi, że lista wypełni całą wysokość pod nagłówkiem */
  flex-grow: 1;
  margin-bottom: 0;
}
.product-horizontal-card {
  height: 110px;
  /* Stała wysokość kafelka */
  margin-bottom: 0;
  /* Marginesy przejmuje justify-content */
  /* ... reszta Twoich stylów (clip-path, fioletowe zagięcie) ... */
}
/* --- Wrapper z zieloną linią --- */
.products-section-wrapper.green-theme {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding-left: 25px;
}
.products-section-wrapper.green-theme::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: #00FF00;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.5) 55%, transparent 70%);
  mask-image: linear-gradient(to bottom, black 40%, rgba(0, 0, 0, 0.5) 55%, transparent 70%);
}
/* --- Nagłówek Zielony --- */
.green-theme .products-header {
  font-family: 'Orbitron', sans-serif;
  color: #00FF00;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}
/* --- Lista z autowyrównaniem do dołu --- */
.product-static-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* To rozciąga 4 kafelki do dolnej krawędzi */
  flex-grow: 1;
}
/* --- Kafelek Poziomy Zielony --- */
.product-horizontal-card-green {
  display: flex;
  background: #080808;
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 6px;
  height: 115px;
  /* Wysokość kafelka */
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%);
  transition: 0.3s ease;
  border-color: #00FF00;
}
.product-horizontal-card-green:hover {
  border-color: #00FF00;
  transform: translateX(8px);
  background: #051505;
  /* Bardzo ciemny zielony na hover */
}
.btn-gradient-success {
  /* Nadpisanie tła i usunięcie gradientów */
  background: #00FF00 !important;
  background-color: #00FF00 !important;
  background-image: none !important;
  /* Kolor tekstu (czarny najlepiej kontrastuje z jaskrawym zielonym) */
  color: #000000 !important;
  /* Obramowanie */
  border: 1px solid #00FF00 !important;
  /* Cień neonowy (opcjonalnie, dla lepszego efektu) */
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
  /* Zapewnienie, że po najechaniu i kliknięciu kolor pozostanie ten sam */
  transition: none !important;
}
.btn-gradient-success:hover,
.btn-gradient-success:focus,
.btn-gradient-success:active {
  background: #00FF00 !important;
  background-color: #00FF00 !important;
  color: #000000 !important;
  border-color: #00FF00 !important;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.6) !important;
  outline: none !important;
}
/* Zielone zagięcie (Dog-ear) */
/* Lewa sekcja (Zdjęcie bez pasków) */
.prod-left {
  flex: 0 0 40%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-right: 1px solid rgba(0, 255, 0, 0.1);
}
.prod-left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Pełny produkt, czarne tło wypełnia div */
  transition: 0.4s;
}
/* Prawa sekcja (Tekst) */
.prod-right {
  flex: 1;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.prod-category {
  color: #00FF00;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}
.prod-name {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 3px 0;
}
.prod-price {
  color: #00FF00;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}
/*KONIEC*/
.tech-hud-bar {
  background: #000;
  border-top: 1px solid rgba(0, 255, 0, 0.3);
  border-bottom: 1px solid rgba(0, 255, 0, 0.1);
  padding: 10px 0;
  font-family: 'Courier New', monospace;
  /* Techniczna czcionka */
  overflow: hidden;
  position: relative;
}
.hud-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.hud-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 1px;
}
.hud-label {
  color: #555;
  /* Przygaszony kolor etykiety */
}
.hud-value {
  color: #00FF00;
  /* Twoja neonowa zieleń */
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}
/* Animacja pulsującego statusu */
.status-pulse::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #00FF00;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 10px #00FF00;
  animation: hud-blink 2s infinite;
}
.hud-trend.up {
  color: #00FF00;
  font-size: 0.6rem;
}
@keyframes hud-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.8);
  }
}
/* Efekt skanowania linii na pasku */
.tech-hud-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 255, 0, 0.05) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.02));
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.core-footer {
  background: #000;
  padding-bottom: 40px;
  color: #fff;
}
.footer-main-box {
  background: #050505;
  border: 1px solid rgba(0, 255, 0, 0.1);
  position: relative;
  /* Spójny clip-path z kafelkami produktów */
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}
.footer-top-accent {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #00FF00, transparent);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}
.footer-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.footer-logo span {
  color: #00FF00;
}
.footer-about {
  color: #888;
  font-size: 0.85rem;
  line-height: 1.6;
}
.footer-heading {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  color: #00FF00;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.footer-links {
  list-style: none;
  padding: 0;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links a {
  color: #888;
  text-decoration: none;
  font-size: 0.85rem;
  transition: 0.3s;
}
.footer-links a:hover {
  color: #00FF00;
  padding-left: 5px;
}
/* Newsletter Input */
.footer-input-group {
  display: flex;
  background: #111;
  border: 1px solid #333;
  padding: 5px;
  margin-bottom: 15px;
}
.footer-input {
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px;
  flex-grow: 1;
  outline: none;
  font-size: 0.8rem;
}
.footer-input-btn {
  background: #00FF00;
  border: none;
  color: #000;
  font-weight: 800;
  padding: 0 15px;
  font-size: 0.7rem;
  cursor: pointer;
}
.system-status {
  font-family: monospace;
  font-size: 0.65rem;
  color: #444;
}
.footer-bottom {
  background: #000;
  padding: 20px 30px;
  font-size: 0.7rem;
  color: #555;
  border-top: 1px solid #111;
}
.tech-version {
  color: #00FF00;
  opacity: 0.5;
}
.footer-socials {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}
.footer-socials a {
  color: #888;
  font-size: 1.2rem;
  transition: 0.3s;
}
.footer-socials a:hover {
  color: #00FF00;
  transform: scale(1.1);
}
/* --- Sekcja Projektowa --- */
.project-callout {
  background: #000;
  padding-top: 50px;
}
.project-box {
  background: #080808;
  border: 1px solid #00FF00;
  padding: 40px;
  position: relative;
  /* Ścięty prawy górny róg */
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  box-shadow: 0 -10px 30px rgba(0, 255, 0, 0.05);
}
.project-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.project-badge {
  color: #00FF00;
  font-family: monospace;
  font-size: 0.7rem;
  letter-spacing: 2px;
}
.project-text h2 {
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  margin: 10px 0;
  font-size: 1.8rem;
}
.project-text p {
  color: #888;
  margin: 0;
}
.project-btn {
  background: #00FF00;
  color: #000;
  padding: 15px 30px;
  font-weight: 900;
  text-decoration: none;
  font-size: 0.8rem;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  transition: 0.3s;
}
.project-btn:hover {
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
  transform: scale(1.05);
}
/* --- Główna Stopka --- */
.main-footer {
  background: #000;
  padding: 40px 0;
}
.footer-core {
  border-top: 1px solid #1a1a1a;
  padding-top: 40px;
}
.f-brand {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: #fff;
}
.f-brand span {
  color: #00FF00;
}
.f-desc {
  color: #555;
  font-size: 0.8rem;
  margin-top: 10px;
}
.f-nav {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
}
.f-nav a {
  color: #888;
  text-decoration: none;
  font-size: 0.85rem;
  transition: 0.3s;
}
.f-nav a:hover {
  color: #00FF00;
}
.f-status {
  color: #00FF00;
  font-family: monospace;
  font-size: 0.7rem;
}
.f-status .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #00FF00;
  border-radius: 50%;
  margin-right: 5px;
  box-shadow: 0 0 8px #00FF00;
}
.f-version {
  color: #333;
  font-size: 0.6rem;
  margin-top: 5px;
  font-family: monospace;
}
/*SERWIS*/
/* ============================= */
/* SEKCJE USŁUG – CTA STYLE */
/* ============================= */
.service-highlight {
  color: #ffffff;
  border-radius: 16px;
  margin-bottom: 4rem;
}
.service-highlight h2 {
  font-weight: 700;
}
.service-highlight .lead {
  opacity: 0.9;
}
/* Lista */
.service-list {
  list-style: none;
  padding-left: 0;
}
.service-list li {
  margin-bottom: 0.5rem;
}
/* Zdjęcia */
.service-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.service-images img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* Kolory sekcji */
.service-computers {
  background: linear-gradient(135deg, #0d6efd, #084298);
}
.service-mobile {
  background: linear-gradient(135deg, #6f42c1, #4b2c91);
}
.service-network {
  background: linear-gradient(135deg, #0b1c2d, #132f4c);
}
/* ============================= */
/* LISTA USŁUG – ZIELONY PTASZEK */
/* ============================= */
.service-list {
  list-style: none;
  margin-left: 20px;
  padding-left: 20px;
}
.service-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.5rem;
}
/* Ptaszek */
.service-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #00ff00;
  /* zielony */
  font-weight: bold;
}
.project-text .lead {
  padding-bottom: 20px;
}
/* Kolory ikon w sekcji składania PC */
.mk-serwis .service-card i.bi-chat-dots {
  color: #1877F2 !important;
  /* niebieska */
}
.mk-serwis .service-card i.bi-pc-display {
  color: red !important;
  /* czerwona */
}
.mk-serwis .service-card i.bi-speedometer2 {
  color: #00ff00 !important;
  /* zielona neonowa */
}
/* Formularz kontaktowy w stylu stopki */
#kontakt .footer-input {
  background-color: #1c1c1c;
  /* ciemne tło */
  color: #fff;
  /* jasny tekst */
  border: 2px solid #00ff00;
  /* neonowy border */
  border-radius: 0.5rem;
  /* lekko zaokrąglone rogi */
  padding: 0.75rem 1rem;
  width: 100%;
  font-size: 1rem;
}
#kontakt .footer-input:focus {
  outline: none;
  border-color: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  background-color: #262626;
  color: #fff;
}
.contact-info ul {
  list-style: none !important;
  /* usuwa punkty */
  padding-left: 0 !important;
  /* usuwa wcięcie */
  margin: 0;
  /* usuwa marginesy domyślne */
}
/* Efekt hover kafelka */
.hover-scale {
  transition: transform 0.2s, box-shadow 0.2s;
}
.hover-scale:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
/* Karty - obraz dopasowany */
.card-img-top {
  object-fit: cover;
  height: 200px;
  /* wysokość miniatury */
}
/* Tytuł i tekst */
.card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.card-text {
  font-size: 0.9rem;
  color: #555;
}
/* Kafelek artykułu/filmu */
.article-card {
  position: relative;
  border: none;
  width: 100%;
}
/* Obrazek */
.article-card .article-img {
  width: 100%;
  height: 200px;
  /* wysokość */
  object-fit: cover;
  /* zachowuje proporcje, cały obraz widoczny */
}
/* Półprzezroczyste tło tekstu */
.article-card .article-text {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}
/* Ikona w lewym górnym rogu */
.article-card .card-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 8px;
  border-radius: 5px;
  z-index: 2;
  color: white;
  font-size: 0.9rem;
}
/* Tekst na półprzezroczystym tle */
.article-card .article-text {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px;
}
/* Tytuł artykułu */
.article-card .article-text .card-title {
  color: #fff;
  /* tytuł biały */
  margin-bottom: 5px;
}
/* Opis artykułu */
.article-card .article-text .card-text {
  color: #fff;
  /* opis również biały */
  margin: 0;
}
.ribbon {
  position: absolute;
  top: 10px;
  right: 0;
  /* zamiast left: 0 */
  background: #ff0000;
  color: #fff;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: bold;
  transform: rotate(10deg);
  /* lekki obrót w przeciwną stronę */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 10;
}
.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  /* rozmiar obrazka */
  height: 50px;
  z-index: 10;
}
.article-page .article-header-img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  /* cały obrazek widoczny */
  border-radius: 8px;
}
.article-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  z-index: 10;
}
.article-type {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  z-index: 10;
}
.article-content p,
.article-content li {
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
}
.article-content h2 {
  color: #fff;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.related-articles .card {
  border: none;
  border-radius: 8px;
  overflow: hidden;
}
.related-articles .card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.related-articles .card-body {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 1rem;
}
.article-intro {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.article-title {
  font-family: 'Michroma', sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: left;
  margin-bottom: 0.5rem;
}
.article-meta {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.article-summary {
  font-size: 1.1rem;
  line-height: 1.6;
}
.article-meta {
  font-size: 0.9rem;
  color: #ffffff;
  /* biały tekst */
  opacity: 0.75;
  /* delikatnie stonowany */
  margin-bottom: 1rem;
}
/* ================= ARTYKUŁ – SEKCJA 2 ================= */
.mk-article-content {
  color: #eaeaea;
  font-size: 1rem;
  line-height: 1.7;
}
/* Obraz wyróżniający */
.article-featured-img {
  width: 360px;
  max-width: 100%;
  float: left;
  margin: 0 25px 15px 0;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.15);
}
/* Tekst artykułu */
.article-body p {
  margin-bottom: 1.2rem;
}
/* Nagłówki wewnątrz artykułu */
.article-body h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #00ff99;
  font-size: 1.4rem;
}
/* Responsywność – mobile */
@media (max-width: 768px) {
  .article-featured-img {
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
  }
}
/* Opływanie filmu w artykule */
.mk-article-content .article-media-float {
  float: left;
  width: 420px;
  max-width: 100%;
  margin: 0 45px 25px 0;
}
.mk-article-content .article-media-float iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  border: none;
}
/* Reset floatów */
.mk-article-content .clearfix {
  clear: both;
}
/* Mobile – bez opływania */
@media (max-width: 768px) {
  .mk-article-content .article-media-float {
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
  }
}
.article-body ol {
  /* usuwamy domyślne kropki */
  padding-left: 50px;
  margin-left: 10px;
}
.article-body ol li {
  margin-left: 100ox;
  /* miejsce na ptaszka */
  margin-bottom: 10px;
  line-height: 1.6;
}
/* Zielony ptaszek */
.mk-why-us {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.why-box {
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  border: 1px solid rgba(0, 255, 120, 0.15);
  transition: 0.3s ease;
}
.why-box i {
  font-size: 2.2rem;
  color: #00ff88;
  margin-bottom: 12px;
}
.why-box p {
  color: #bbb;
  font-size: 0.9rem;
}
.why-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(0, 255, 120, 0.25);
}
.mk-knowledge-zone {
  border-top: 1px solid rgba(0, 255, 120, 0.15);
}
/* VIDEO */
.knowledge-video {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 255, 120, 0.15);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 255, 120, 0.15);
}
.video-caption {
  padding: 12px 16px;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.7);
  color: #00ff88;
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-caption i {
  font-size: 1.2rem;
}
/* KAFLE ARTYKUŁÓW */
.knowledge-card {
  height: 100%;
  padding: 25px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 255, 0, 0.15);
  transition: 0.3s ease;
  color: #fff;
}
.knowledge-card i {
  font-size: 2rem;
  color: #00ff88;
  margin-bottom: 12px;
  display: block;
}
.knowledge-card h5 {
  margin-bottom: 8px;
}
.knowledge-card p {
  color: #bbb;
  font-size: 0.9rem;
  margin: 0;
}
.knowledge-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.25);
}
/* CTA */
.knowledge-cta {
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 255, 120, 0.15), rgba(0, 0, 0, 0.8));
}
.mk-components .component-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  overflow: hidden;
  transition: 0.3s ease;
  border: 1px solid rgba(0, 255, 120, 0.15);
}
.mk-components .component-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(0, 255, 120, 0.25);
}
.component-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.component-body {
  padding: 15px;
}
.component-title {
  color: #00ff88;
  font-weight: 600;
  margin-bottom: 8px;
}
.component-text {
  color: #bbb;
  font-size: 0.9rem;
}
.mk-wiedza-youtube .component-card {
  background-color: #1c1c1c;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}
.mk-wiedza-youtube .component-card:hover {
  transform: translateY(-5px);
}
.component-img {
  width: 100%;
  object-fit: cover;
  height: 120px;
  /* dopasować do wysokości kafelka */
}
.component-body {
  padding: 10px;
}
.component-title {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.component-text {
  font-size: 0.8rem;
}
.price {
  color: #39ff14;
  /* neonowa zieleń */
  font-weight: 700;
  font-size: 1.5rem;
}
/* Slider */
.swiper {
  padding: 1rem 0;
}
.swiper-slide {
  display: flex;
  justify-content: center;
}
.service-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  /* żeby obraz był w całości */
}
.service-card h5 {
  font-size: 1rem;
}
.service-card p.price {
  font-size: 1.2rem;
}
.components-slider {
  position: relative;
}
.components-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s ease;
}
.components-carousel {
  overflow: hidden;
  width: 100%;
}
.components-track {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-wrapper {
  overflow: hidden;
  position: relative;
}
.carousel-track {
  display: flex;
  gap: 1rem;
}
.component-card {
  min-width: 250px;
  /* szerokość kafelka */
  flex: 0 0 auto;
}
/* Kolor nagłówków Gutenberg */
.mk-serwis .wp-block-heading,
.mk-serwis .wp-block-heading h1,
.mk-serwis .wp-block-heading h2,
.mk-serwis .wp-block-heading h3,
.mk-serwis .wp-block-heading h4,
.mk-serwis .wp-block-heading h5,
.mk-serwis .wp-block-heading h6 {
    color: #00ff99 !important;
}

/* Linki w nagłówkach */
.mk-serwis .wp-block-heading a {
    color: #00ff99 !important;
    text-decoration: none;
}

/* Hover linków (opcjonalnie) */
.mk-serwis .wp-block-heading a:hover {
    opacity: 0.8;
}