/* =========================================================
   Bestcare home — hero overlay + liquid-glass clients section
   Load AFTER home.css
   ========================================================= */

/* ---------- HERO: image background + dull off-white abstract overlay ---------- */
.hm-hero{position:relative;isolation:isolate;overflow:hidden}
.hm-hero>.hm-wrap{position:relative;z-index:2}

.hm-hero-bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:#e6e2d9 url("https://bestcareservices.co.ke/dash/uploads/image/westlands-facility-management-company.jpg") center/cover no-repeat;
}
/* dull off-white translucent veil */
.hm-hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(238,235,227,.95) 0%,rgba(238,235,227,.88) 42%,rgba(232,228,219,.72) 100%);
}
/* fine grain of lines for an architectural feel */
.hm-hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(135deg,rgba(0,83,156,.035) 0 1px,transparent 1px 46px);
}
/* abstract translucent shapes */
.hm-hero-bg span{position:absolute;display:block;z-index:1}
.hm-hero-bg .s1{
  width:520px;height:520px;border-radius:50%;right:-140px;top:-180px;
  background:radial-gradient(circle at 35% 35%,rgba(0,83,156,.16),rgba(0,83,156,.02) 70%);
  border:1px solid rgba(0,83,156,.12);
}
.hm-hero-bg .s2{
  width:340px;height:340px;border-radius:64px;left:-110px;bottom:-130px;transform:rotate(24deg);
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hm-hero-bg .s3{
  width:220px;height:220px;border-radius:50%;left:46%;top:58%;
  border:1px solid rgba(0,83,156,.14);
  box-shadow:0 0 0 38px rgba(0,83,156,.03),0 0 0 76px rgba(0,83,156,.02);
}
.hm-hero-bg .s4{
  width:180px;height:180px;border-radius:40px;right:8%;bottom:10%;transform:rotate(-14deg);
  background:linear-gradient(160deg,rgba(212,170,70,.16),rgba(212,170,70,0));
  border:1px solid rgba(212,170,70,.22);
}
@media (max-width:720px){
  .hm-hero-bg .s1{width:320px;height:320px;right:-120px;top:-120px}
  .hm-hero-bg .s3,.hm-hero-bg .s4{display:none}
}

/* ---------- CLIENTS SECTION: liquid glass ---------- */
.hm-clients{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(900px 500px at 8% 0%,rgba(0,83,156,.20),transparent 60%),
    radial-gradient(800px 520px at 100% 30%,rgba(212,170,70,.20),transparent 60%),
    radial-gradient(900px 600px at 40% 110%,rgba(0,150,170,.16),transparent 60%),
    linear-gradient(180deg,#eef3f8 0%,#e8eef5 100%);
}
/* soft floating colour blobs behind the glass */
.hm-clients::before,.hm-clients::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);pointer-events:none;
}
.hm-clients::before{width:380px;height:380px;left:-90px;top:38%;background:rgba(0,83,156,.22)}
.hm-clients::after{width:340px;height:340px;right:-80px;bottom:6%;background:rgba(212,170,70,.26)}

.hm-clients-grid{
  display:grid;gap:18px;margin-top:40px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}

.hm-client{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
  padding:22px 22px 24px;border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.26));
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 10px 30px rgba(18,52,92,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.25),
    inset 0 0 24px rgba(255,255,255,.25);
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}
/* specular highlight (the "liquid" sheen) */
.hm-client::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.65),transparent 55%),
    linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%) -120% 0/250% 100% no-repeat;
  transition:background-position .9s ease;
}
.hm-client:hover,.hm-client:focus-within{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(18,52,92,.16),inset 0 1px 0 #fff,inset 0 0 28px rgba(255,255,255,.4);
}
.hm-client:hover::before{background-position:0 0,120% 0}

.hm-client-ic{
  position:relative;display:grid;place-items:center;flex:none;
  width:46px;height:46px;border-radius:16px;
  color:#00539C;font-size:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.35));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 14px rgba(0,83,156,.14),inset 0 1px 0 #fff;
}
.hm-client h3{margin:4px 0 0;font-size:1.05rem;line-height:1.25;color:#10253d}
.hm-client p{margin:0;font-size:.9rem;line-height:1.55;color:#40536a}

.hm-clients-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}

/* fallback when backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hm-client{background:rgba(255,255,255,.82)}
}
@media (prefers-reduced-motion:reduce){
  .hm-client,.hm-client::before{transition:none}
  .hm-client:hover{transform:none}
}