/* ===========================
   USP Band v2 – Glass Gradient (row layout)
   =========================== */
:root{
  --usp2-bg:#0b0c10;
  --usp2-card:rgba(255,255,255,.08);
  --usp2-stroke:rgba(255,255,255,.16);
  --usp2-text:#f7f7f7;
  --usp2-muted:#c9c9c9;
  --usp2-g1:#667eea;
  --usp2-g2:#06b6d4;
}
@media (prefers-color-scheme: light){
  :root{
    --usp2-bg:#f7f8fb;
    --usp2-card:rgba(255,255,255,.7);
    --usp2-stroke:rgba(0,0,0,.06);
    --usp2-text:#1a1a1a;
    --usp2-muted:#606060;
  }
}

/* Secțiune */
.usp-band{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(102,126,234,.10), transparent 50%),
    radial-gradient(1000px 500px at 90% 110%, rgba(6,182,212,.10), transparent 50%),
    var(--usp2-bg);
  padding:5rem 0;
  position:relative;
  overflow:hidden;
}

/* Container */
.usp-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem;
}

/* Grid */
.usp-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:2rem;
}

/* Card = rând compact (icon stânga, text dreapta) */
.usp-item{
  position:relative;
  isolation:isolate;
  display:flex; align-items:center; gap:1rem;
  padding:1.25rem 1.5rem;
  border-radius:18px;
  background:var(--usp2-card);
  border:1px solid var(--usp2-stroke);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 30px rgba(0,0,0,.10);
  transform:translateY(0) scale(1);
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s cubic-bezier(.25,.46,.45,.94);
}

/* Inel gradient pe contur (mask trick) */
.usp-item::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:20px; padding:1px;
  background:linear-gradient(120deg, var(--usp2-g1), var(--usp2-g2));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:0; transition:opacity .45s ease; z-index:-1;
}
.usp-item:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 18px 50px rgba(0,0,0,.18);
}
.usp-item:hover::before{ opacity:1; }

/* Icon */
.usp-icon{
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:linear-gradient(120deg, var(--usp2-g1), var(--usp2-g2));
  color:#fff; /* svg folosește currentColor */
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  flex:0 0 auto;
}
.usp-item svg{ width:1.35em; height:1.35em; }

/* Text + underline animat */
.usp-text{
  font-size:1rem; color:var(--usp2-text); opacity:.9; line-height:1.6;
  position:relative;
}
.usp-text::after{
  content:""; position:absolute; left:0; bottom:-8px;
  width:0; height:2px; border-radius:1px;
  background:linear-gradient(90deg, var(--usp2-g1), var(--usp2-g2));
  transition:width .5s ease;
}
.usp-item:hover .usp-text::after{ width:72px; }

/* Badge opțional în colț (dacă îl folosești) */
.usp-badge{
  position:absolute; top:12px; right:12px;
  padding:.35rem .6rem; border-radius:999px;
  font-size:.75rem; font-weight:600; color:#0b1220;
  background:linear-gradient(120deg, var(--usp2-g1), var(--usp2-g2));
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* Animație intrare + stagger */
@keyframes usp2FadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
.usp-item{ animation:usp2FadeUp .7s ease-out both; }
.usp-item:nth-child(2){ animation-delay:.12s; }
.usp-item:nth-child(3){ animation-delay:.24s; }
.usp-item:nth-child(4){ animation-delay:.36s; }

/* Focus accesibil */
.usp-item:focus-within{
  outline:2px solid var(--usp2-g1); outline-offset:3px; scroll-margin:16px;
}

/* Responsive */
@media (max-width: 768px){
  .usp-band{ padding:4rem 0; }
  .usp-container{ padding:0 1.5rem; }
  .usp-wrap{ gap:1.25rem; }
  .usp-item{ padding:1rem 1.25rem; }
}
@media (max-width: 480px){
  .usp-band{ padding:3rem 0; }
  .usp-container{ padding:0 1rem; }
  .usp-item{ border-radius:16px; }
  .usp-icon{ width:48px; height:48px; border-radius:12px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .usp-item, .usp-item::before, .usp-text::after{
    transition:none !important; animation:none !important;
  }
}