
:root{
  --bb-maxw: 1100px;
  --bb-gap: 14px;
  --bb-radius: 12px;
  --bb-shadow: 0 4px 10px rgba(0,0,0,.04);
  --bb-shadow-hover: 0 6px 14px rgba(0,0,0,.08);
  --bb-bg: #fff;
  --bb-accent: #0f172a;
}

#biobobo-benefits{ width:100%; padding: clamp(16px,3vw,28px) 0; }
#biobobo-benefits .bb-container{ max-width:var(--bb-maxw); margin:0 auto; padding:0 clamp(12px,2vw,20px); }
#biobobo-benefits .bb-title{ font-size:clamp(20px,2.2vw,28px); font-weight:800; margin-bottom:1.5rem; text-align:center; color:var(--bb-accent); }

#biobobo-benefits .bb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bb-gap); }
@media (max-width:900px){ #biobobo-benefits .bb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ #biobobo-benefits .bb-grid{ grid-template-columns:1fr; } }

#biobobo-benefits .bb-card{
  background:var(--bb-bg);
  border-radius:var(--bb-radius);
  box-shadow:var(--bb-shadow);
  padding:14px 10px;
  text-align:center;
  font-weight:600;
  color:var(--bb-accent);
  font-size:14px;
  line-height:1.3;
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
#biobobo-benefits .bb-card:hover{ transform:translateY(-3px); box-shadow:var(--bb-shadow-hover); }
#biobobo-benefits .bb-ico{ font-size:22px; }



#biobobo-benefits .bb-ico{
  font-size: clamp(28px, 3.2vw, 42px) !important; /* mobil → desktop */
  line-height: 1;                                  /* bez zbytečných mezer kolem */
}



#biobobo-benefits .bb-text .bb-lead{
  font-weight: 800;
  color: #0f172a;         /* můžeš změnit na vlastní akcent */
  letter-spacing: .2px;
}

#biobobo-benefits .bb-title {
  font-family: 'Exo 2', sans-serif !important;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--bb-accent);
}
