/* NS – Poziomy Trudności (neon blocks) */
.ns-pt{
  margin: 56px 0;
  --ns-pt-gap: 22px;
  --ns-pt-gap-mobile: 18px;
}


/* Intro text above the grid (optional) */
.ns-pt__intro{
  margin: 0;
}

.ns-pt__intro-inner{
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.ns-pt__intro-inner p:last-child{ margin-bottom: 0; }

.ns-pt__grid{
  margin-top: var(--ns-pt-gap);
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.ns-pt__card{
  position:relative;
  border-radius: 18px;
  padding: 22px 18px 18px;
  overflow:hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transform: translateZ(0);
}

.ns-pt__card:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  background: var(--ns-neon);
  opacity:.14;
  filter: blur(18px);
  z-index:0;
}

.ns-pt__card:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
  z-index:0;
  pointer-events:none;
}

.ns-pt__head,
.ns-pt__icons,
.ns-pt__desc{ position:relative; z-index:1; }

.ns-pt__title{
  margin:0 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

.ns-pt__icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin: 0 0 14px;
}

.ns-pt__icon{
  width: 92px;
  height: 92px;
  object-fit: contain;
  display:block;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}

.ns-pt__icon.ph{
  background: rgba(255,255,255,.06);
}

.ns-pt__desc{
  margin:0;
  font-size: 14.5px;
  line-height: 1.6;
  opacity: .9;
}

/* Neon variants */
.ns-pt__card.is-green   { --ns-neon: rgba(64, 255, 160, .95); }
.ns-pt__card.is-yellow  { --ns-neon: rgba(255, 238, 88, .95); }
.ns-pt__card.is-red     { --ns-neon: rgba(255, 72, 88, .95); }
.ns-pt__card.is-dark-red{ --ns-neon: rgba(210, 24, 44, .95); }

.ns-pt__card{
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    0 0 26px rgba(255,255,255,.04),
    0 0 34px var(--ns-neon);
}

/* Hover – delikatnie */
.ns-pt__card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}


@media (max-width: 768px){
  .ns-pt__grid{ margin-top: var(--ns-pt-gap-mobile); }
}
/* Responsive */
@media (max-width: 1100px){
  .ns-pt__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .ns-pt__grid{ grid-template-columns: 1fr; }
  .ns-pt__icon{ width: 86px; height: 86px; }
}