.cases__header{
  max-width:72rem;
  margin-inline:auto;
  text-align:center;
  --eyebrow-margin-inline:auto;
}

.cases__h2{
  margin-top:0;
  --line-width:min(16rem, 42%);
}

.cases__lead{
  --lead-mt:.8rem;
  max-width:66rem;
  margin-inline:auto;
}

.cases__grid{
  margin-top:clamp(1.1rem, 2.6vw, 1.8rem);
  display:grid;
  gap:clamp(.9rem, 2.4vw, 1.25rem);
}

@media (min-width: 62rem){
  .cases__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:stretch;
  }
}

.cases__card{
  --case-rgb:var(--brand-rgb);
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(var(--case-rgb), .065), rgba(16,19,27,.74) 34%),
    rgba(16, 19, 27, .74);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  overflow:hidden;
  padding:1.1rem 1.1rem 1.05rem;
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.cases__card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, rgba(var(--case-rgb), .78), transparent 72%);
  pointer-events:none;
  opacity:.88;
}

.cases__card:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--case-rgb), .22);
  box-shadow:0 24px 58px rgba(0,0,0,.26);
}

.cases__card--green{
  --case-rgb:var(--brand-green-rgb);
}

.cases__card--indigo{
  --case-rgb:var(--home-indigo-rgb, var(--brand-indigo-rgb));
}

.cases__card--blue{
  --case-rgb:var(--brand-rgb);
}

.cases__labelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.cases__label{
  --pill-padding-y:.4rem;
  --pill-padding-x:.65rem;
  --pill-border:rgba(255,255,255,.12);
  --pill-bg:rgba(255,255,255,.06);
  --pill-weight:900;
  --pill-size:.85rem;
  --pill-color:rgba(255,255,255,.90);
  letter-spacing:.02em;
  width:fit-content;
  opacity:.9;
}

.cases__hero{
  margin-top:.8rem;
  height:clamp(115px, 12vw, 150px);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  position:relative;
  background:rgba(255,255,255,.035);
}

.cases__hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform var(--transition-slow);
}

.cases__card:hover .cases__hero img{
  transform:scale(1.035);
}

.cases__hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(16,19,27,.05) 0%, rgba(16,19,27,.72) 100%);
}

.cases__heroBadge{
  --pill-padding-y:.35rem;
  --pill-padding-x:.6rem;
  --pill-border:rgba(255,255,255,.14);
  --pill-bg:rgba(16,19,27,.72);
  --pill-weight:900;
  --pill-size:.85rem;
  --pill-color:rgba(255,255,255,.92);
  position:absolute;
  left:.75rem;
  bottom:.75rem;
  z-index:1;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  letter-spacing:.01em;
}

.cases__title{
  margin-top:.85rem;
  font-weight:950;
  letter-spacing:.01em;
  line-height:1.25;
  font-size:1.12rem;
  color:rgba(255,255,255,.96);
  text-shadow:none;
}

.cases__text{
  margin-top:.45rem;
}

.cases__mid{
  margin-top:.82rem;
  display:grid;
  gap:.85rem;
  flex:1 1 auto;
}

.cases__block{
  --surface-radius:18px;
  --surface-border:rgba(255,255,255,.10);
  --surface-bg:rgba(16,19,27,.62);
  --surface-shadow:none;
  padding:.9rem .95rem .85rem;
}

.cases__blockTitle{
  font-weight:950;
  letter-spacing:.01em;
  line-height:1.2;
}

.cases__list{
  margin-top:.65rem;
  padding:0;
  list-style:none;
  display:grid;
  gap:.55rem;
}

.cases__list li{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
}

.cases__dot{
  width:.6rem;
  height:.6rem;
  border-radius:999px;
  background:rgba(var(--case-rgb), .95);
  box-shadow:0 0 0 4px rgba(var(--case-rgb), .14);
  margin-top:.35rem;
  flex:0 0 auto;
}

.cases__cardLink{
  margin-top:1rem;
  width:fit-content;
}

.cases__ctaRow{
  --cta-mt:clamp(1.1rem, 2.8vw, 1.7rem);
}

@media (max-width: 768px){
  .cases__grid{
    gap:16px;
  }

  .cases__card{
    border-radius:20px;
    padding:1rem;
    box-shadow:0 16px 38px rgba(0,0,0,.18);
  }

  .cases__hero{
    height:clamp(165px, 46vw, 220px);
    border-radius:16px;
  }

  .cases__block{
    border-radius:16px;
    padding:.82rem .86rem;
  }

  .cases__cardLink{
    width:100%;
  }
}