/* Liquid Glass Effect — Drops with clearer background */

.glass{
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  backdrop-filter: blur(4px) saturate(160%);      /* reduced blur */
  -webkit-backdrop-filter: blur(4px) saturate(160%);
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 40%),
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  background-clip: padding-box, border-box;
}

.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient( to bottom right, rgba(255,255,255,0.20), transparent 45% );
  -webkit-mask: linear-gradient(#000,transparent 60%);
          mask: linear-gradient(#000,transparent 60%);
  pointer-events:none;
}

/* Drops effect */
.glass.drops::after{
  content:"";
  position:absolute; inset:-12%;
  border-radius: inherit;
  background:
    radial-gradient(100px 100px at 20% -5%,
        rgba(255,255,255,0.35), rgba(255,255,255,0.05) 60%, transparent 70%),
    radial-gradient(140px 140px at 60% -15%,
        rgba(255,255,255,0.28), rgba(255,255,255,0.04) 60%, transparent 70%),
    radial-gradient(90px 90px at 85% -10%,
        rgba(255,255,255,0.30), rgba(255,255,255,0.04) 60%, transparent 70%);
  filter: blur(10px);                     /* softer, but less blur than before */
  mix-blend-mode: screen;
  animation: lgeDrops 14s linear infinite;
  pointer-events:none;
}

@keyframes lgeDrops{
  0%   { transform: translateY(-10%) }
  100% { transform: translateY(25%) }
}

@media (max-width: 767px){
  .glass{
    backdrop-filter: blur(3px) saturate(140%);
    -webkit-backdrop-filter: blur(3px) saturate(140%);
  }
  .glass.drops::after{ display:none; }
}