<style>
:root{
  --page-bg:#0b1320;
  --border:rgba(255,255,255,.2); 
  --card:#0f1726;
  --glow-fill:rgba(0,132,255,.06);
  --brand-blue: #2da3ff; /* Definovaná farba pre ikonku aj okraj */
}
html,body{ background:var(--page-bg)!important; overflow-x:hidden; color:#fff; font-family:'Inter',sans-serif; }

/* Headline */
.section-header{ text-align:center; margin-bottom:2.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.section-top{ color:var(--brand-blue); font-weight:600; font-size:1.1rem; letter-spacing:.5px; margin-bottom:.35rem; }
.section-title{ font-weight:800; font-size:2.3rem; color:#fff; margin-bottom:.35rem; }
.section-subtitle{ font-size:1.1rem; color:rgba(255,255,255,.72); max-width:620px; margin:0 auto; }

/* GRID */
.nivexGroups{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:1.25rem !important;
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 1rem !important;
}

/* TILE */
.nivexGroup{ width:100% !important; }
.nivexGroup > a{
  display:block !important; 
  position:relative !important; 
  aspect-ratio: 5 / 3 !important;
  background:#0f1726 !important; 
  border:1px solid rgba(255, 255, 255, 0.2) !important; 
  border-radius:12px !important; 
  overflow:hidden !important; 
  transition: all .25s ease !important; /* Plynulý prechod pre všetko */
}

/* HOVER EFEKT - TU JE ZMENA */
.nivexGroup > a:hover {
  transform:translateY(-2px) !important; 
  border-color: var(--brand-blue) !important; /* Zmena farby okraja na modrú */
  box-shadow: 0 4px 20px rgba(45, 163, 255, 0.15) !important; /* Jemná modrá žiara */
}

/* IMAGE */
.nivexGroup_image{ position:absolute !important; inset:0 !important; z-index:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.nivexGroup_image img{
  display:block !important; 
  max-width: 70% !important; 
  max-height: 70% !important; 
  width: auto !important; 
  height: auto !important; 
  object-fit:contain !important;
  padding:0 !important; 
  margin-top: -12px !important; 
  filter:brightness(0) invert(1) !important; 
  transition:filter .25s ease !important; 
}

/* Keď nabehneš myšou, ikonka stratí biely filter a ukáže pôvodnú farbu */
.nivexGroup > a:hover .nivexGroup_image img{ 
  filter:none !important; 
}

/* TITLE */
.nivexGroup_footer{ position:absolute !important; bottom:12px !important; left:50% !important; transform:translateX(-50%) !important; text-align:center !important; z-index:1 !important; width: 90% !important; }
.nivexGroup_title{ 
  font-weight: 500 !important; 
  letter-spacing: .5px !important; 
  font-size: 1.25rem !important; 
  color: #fff !important; 
  text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; 
  margin: 0 !important; 
  white-space: nowrap !important;
}

/* RESET A RESPONSIVE */
.tiles-grid, .tile, .tile * { all: unset; }
.tiles-grid { display:none !important; }

@media (max-width:1024px){ .nivexGroups{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width:768px){ .nivexGroups{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width:480px){ .nivexGroups{ grid-template-columns:repeat(1, minmax(0, 1fr)) !important; } }
</style>