.ui-glass-card {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 32px;
  padding: 26px;
  box-shadow: var(--biva-shadow);
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.ui-badge-default {
  background: #eef2ff;
  color: var(--biva-dark);
}

.ui-badge-success {
  background: var(--biva-green-light);
  color: #166534;
}

.ui-badge-gold {
  background: var(--biva-gold-light);
  color: #92400e;
}

.ui-progress {
  height: 13px;
  background: rgba(226,232,240,.9);
  border-radius: 999px;
  overflow: hidden;
}

.ui-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--biva-green), #84cc16);
  border-radius: 999px;
}



.hero-card h1{
    margin:10px 0;
    font-size:42px;
    letter-spacing:-.05em;
}

.hero-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
}

.section-title{
    margin:30px 0 18px;
}

.section-title h2{
    margin:0;
    font-size:28px;
}

.section-title p{
    color:var(--biva-slate);
    margin-top:6px;
}

.stat-ui-card{
    display:flex;
    align-items:center;
    gap:18px;
}

.stat-icon{
    width:62px;
    height:62px;
    border-radius:20px;
    display:grid;
    place-items:center;
    font-size:30px;
    background:rgba(37,99,235,.08);
}

@media(max-width:760px){

.hero-card h1{
font-size:30px;
}

.hero-top{
flex-direction:column;
}

}




.product-ui-card h2 {
  font-size: 28px;
  letter-spacing: -.04em;
}

.product-ui-card p {
  color: var(--biva-slate);
}

.product-ui-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-ui-icon {
  width: 60px;
  height: 60px;
  border-radius: 22px;
  background: var(--biva-dark);
  color: white;
  display: grid;
  place-items: center;
  font-size: 30px;
}

.product-ui-metric {
  margin: 22px 0;
  font-size: 34px;
  font-weight: 950;
}

.ui-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ui-action-card {
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.7);
  border-radius: 24px;
  min-height: 112px;
  padding: 20px 14px;
  font-weight: 950;
  cursor: pointer;
}

.ui-action-card span {
  display: block;
  font-size: 30px;
  margin-bottom: 10px;
}