/* ==================================
   PS UNITY LITE – boksy na białym tle (ciemne, bez tła sekcji)
   ================================== */

.ps-unity-lite{
  --ps-ul-primary: var(--polsteam-primary, #00357d);
  --ps-ul-ink: #0f172a;
  --ps-ul-muted: rgba(15,23,42,.74);
  --ps-ul-line: rgba(15,23,42,.14);
  --ps-ul-line-strong: rgba(15,23,42,.18);
  --ps-ul-card: rgba(255,255,255,.96);

  padding:84px 40px;
  color: var(--ps-ul-ink);
}

.ps-unity-lite__grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.ps-unity-lite__card{
  position:relative;
  background: var(--ps-ul-card);
  border:1px solid var(--ps-ul-line);
  border-radius:18px;
  padding:28px 24px 22px 26px;
  overflow:hidden;

  /* reveal */
  opacity:0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease, border-color .25s ease, box-shadow .25s ease;
  will-change: opacity, transform;
}

.ps-unity-lite__card.is-visible{
  opacity:1;
  transform:none;
}

/* PIONOWA LINIA – PO PRAWEJ, prosta, max 2px, bez gradientu */
.ps-unity-lite__rail{
  position:absolute;
  right:0;
  top:0;
  width:2px;
  height:0;
  background: var(--ps-ul-primary);
  transition: height .75s ease;
}

.ps-unity-lite__card.is-visible .ps-unity-lite__rail{
  height:100%;
}

/* IKONA – lżej */
.ps-unity-lite__icon{
  width:54px;
  height:54px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--ps-ul-line-strong);
  background:#fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);

  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  margin-bottom:16px;
}

.ps-unity-lite__icon i{
  font-size:21px;
  color: var(--ps-ul-primary);
  opacity:.92;
}

.ps-unity-lite__card h3{
  margin:0 0 10px;
  font-family:'Teko',sans-serif;
  font-size:28px;
  line-height:1.05;
  letter-spacing:.2px;
  color: var(--ps-ul-ink);
}

.ps-unity-lite__card p{
  margin:0;
  font-family:'Poppins',sans-serif;
  font-size:14.6px;
  line-height:1.75;
  color: var(--ps-ul-muted);
}

/* hover: premium, ale spokojnie */
@media (hover:hover){
  .ps-unity-lite__card:hover{
    border-color: rgba(0,53,125,.24);
    box-shadow: 0 22px 60px rgba(15,23,42,.10);
  }
  .ps-unity-lite__card:hover .ps-unity-lite__icon{
    transform: translateY(-2px);
    border-color: rgba(0,53,125,.22);
    box-shadow: 0 16px 34px rgba(15,23,42,.10);
  }
}

/* RESPONSIVE: 4 -> 2 -> 1 */
@media (max-width:1100px){
  .ps-unity-lite__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:640px){
  .ps-unity-lite{ padding:56px 18px; }
  .ps-unity-lite__grid{ grid-template-columns:1fr; }
  .ps-unity-lite__card{ padding:24px 18px 20px; }
}

/* MOBILE: bez ramki (border), ale cień zostaje */
@media (max-width:768px){
  .ps-unity-lite__card{
    border:0;
    box-shadow: 0 14px 44px rgba(15,23,42,.08);
  }
  /* rail dalej działa i zostaje na prawej */
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ps-unity-lite__card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .ps-unity-lite__rail{
    height:100% !important;
    transition:none !important;
  }
}