/* Homepage section 04. Outer spacing stays on .section-block.
   Card surface matches the Product “In practice” cards. Button styles stay on .btn-primary. */

#benefits .section-header{
  margin-bottom:0;
}

#benefits .eyebrow{
  margin:0 0 24px;
  color:var(--cyan);
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:3px;
  line-height:1.5;
  text-transform:uppercase;
}

#benefits .hp-section-title{
  margin:0;
}

#benefits .qbenefits-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:24px;
  row-gap:22px;
  margin-top:48px;
}

#benefits .qbenefits-card{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 2;
  min-width:0;
  padding:32px 30px 34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.20);
  border-radius:14px;
  background:
    linear-gradient(#10196f,#6ed9e2) top / 100% 2px no-repeat,
    linear-gradient(180deg,rgba(16,25,111,.28) 0%,rgba(16,25,111,0) 88px),
    #111318;
}

#benefits .qbenefits-card h4{
  margin:0;
  color:var(--fg);
  font-family:var(--sans);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.35;
}

#benefits .qbenefits-card p{
  margin:0;
  color:rgba(232,232,237,.72);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
}

#benefits .btn-primary{
  width:auto;
  max-width:100%;
  margin-top:32px;
}

@media (max-width:700px){
  #benefits .qbenefits-grid{
    grid-template-columns:1fr;
    row-gap:20px;
    margin-top:32px;
  }

  #benefits .qbenefits-card{
    display:flex;
    flex-direction:column;
    gap:18px;
    grid-row:auto;
    padding:30px 26px;
  }
}