/* ---------- HERO ---------- */
  #serverspi-home .hero-ctas{
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px;
  }
  #serverspi-home .hero-ctas a.btn{
    text-decoration:none !important;
    display:inline-flex; align-items:center; justify-content:center;
    width:auto; white-space:nowrap;
  }
  @media (max-width:560px){
    #serverspi-home .hero-ctas a.btn{ min-width:140px; padding:0.6rem 0.9rem; }
    #serverspi-home .hero-ctas a.btn i{ margin-right:6px; }
  }

  #serverspi-home .hero-wrapper .topup-benefits,
  #serverspi-home .benefits-wrapper .topup-benefits{
    max-width:900px; margin:0 auto;
  }
  @media (max-width:560px){
    #serverspi-home .hero-wrapper .topup-benefits,
    #serverspi-home .benefits-wrapper .topup-benefits{
      padding:1rem 0.8rem !important;
      border-radius:10px;
    }
    #serverspi-home .hero-wrapper .section-title{
      font-size:1.4rem;
    }
  }

  /* ---------- VPS CARDS ---------- */
  #serverspi-home .vps-cards{ justify-content:center; padding:0 12px; }
  #serverspi-home .vps-cards .card{
    width:100%; max-width:340px; flex:1 1 280px; box-sizing:border-box;
  }
  @media (min-width:900px){
    #serverspi-home .vps-cards{ gap:20px; }
    #serverspi-home .vps-cards .card{ max-width:300px; }
  }
  @media (max-width:560px){
    #serverspi-home .vps-cards .card{ max-width:100%; }
  }
  #serverspi-home .vps-cards .card a.btn{
    text-decoration:none !important;
    display:block; width:100%; box-sizing:border-box;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    margin-left:auto; margin-right:auto;
  }

  /* ---------- BENEFITS ---------- */
  #serverspi-home .benefits-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:14px; margin-top:14px;
  }
/* ---------- BENEFITS ---------- */
#serverspi-home .benefit-item{
  display:flex;
  align-items:center; /* ✅ centrarea verticală perfectă */
  gap:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
#serverspi-home .benefit-item:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
#serverspi-home .benefit-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px; /* ✅ dimensiune fixă egală */
  border-radius:10px;
  background:rgba(26,35,126,.08);
  color:var(--primary);
  flex-shrink:0;
}
#serverspi-home .benefit-icon i{
  font-size:18px;
}
#serverspi-home .benefit-content h4{
  margin:0 0 4px;
  font-size:15px;
  font-weight:600;
  color:var(--primary);
}
#serverspi-home .benefit-content p{
  margin:0;
  font-size:13.5px;
  color:var(--text);
  line-height:1.4;
}

  #serverspi-home .benefit-content h4{
    margin:0; font-size:15px; font-weight:600; color:var(--primary);
  }
  #serverspi-home .benefit-content p{
    margin:4px 0 0; font-size:13.5px; color:var(--text); line-height:1.4;
  }

  /* ---------- DARK MODE ---------- */
  [data-theme="dark"] #serverspi-home .topup-benefits{
    background:#0b1220 !important;
    border:1px solid #1e293b !important;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
    color:#e5e7eb;
  }
  [data-theme="dark"] #serverspi-home .benefit-item{
    background:#111827 !important;
    border:1px solid #1f2937 !important;
    box-shadow:0 6px 14px rgba(0,0,0,.35);
  }
  [data-theme="dark"] #serverspi-home .benefit-content h4{ color:#93c5fd !important; }
  [data-theme="dark"] #serverspi-home .benefit-content p{ color:#cbd5e1 !important; }
	/* ---------- HERO + BENEFITS background fix ---------- */
#serverspi-home .hero-wrapper,
#serverspi-home .benefits-wrapper {
  background: #f8f9ff;          /* un gri-alb ușor, doar în light mode */
  padding-top: 20px;
  padding-bottom: 20px;
}

[data-theme="dark"] #serverspi-home .hero-wrapper,
[data-theme="dark"] #serverspi-home .benefits-wrapper {
  background: #0b1220 !important;  /* închis, uniform cu restul temei dark */
}

/* Our other apps – compact cards (Topup style) */
.mp-section { text-align:center; }
.mp-section .section-title { margin-bottom: 12px; }

.mp-grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(210px, 1fr) );
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 8px;
}

.mp-app{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  background: var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:16px 14px;
  transition: transform .18s ease, box-shadow .18s ease;
  color: var(--text);
}
.mp-app:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.mp-app img{
  width:64px; height:64px; object-fit:cover; border-radius:8px; /* pătrat colțuri ușor rotunjite */
  background: var(--surface);
  border:1px solid var(--border);
  padding:0; /* fără frame suplimentar */
  margin-bottom:10px;
}

.mp-app h3{
  font-size: 15.5px;
  margin: 2px 0 6px;
  color: var(--primary);
  font-weight: 700;
}

.mp-app p{
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  color: var(--text);
  opacity: .9;
}

/* dark tune */
[data-theme="dark"] .mp-app{
  background:#0b1220;
  border-color:#1e293b;
}
[data-theme="dark"] .mp-app img{
  background:#0b1220;
  border-color:#1e293b;
}