/* Liquid glass effect */
.liquid-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.12));
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 30px rgba(16,24,40,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}
.liquid-glass::after {
  content: "";
  position: absolute;
  left: -40%;
  top: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 15%),
              radial-gradient(circle at 70% 80%, rgba(255,255,255,0.12), transparent 20%);
  transform: translate3d(0,0,0) rotate(15deg);
  mix-blend-mode: normal;
  opacity: 0.35;
  pointer-events: none;
}
/* subtle inner sheen */
.liquid-sheen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0));
  pointer-events: none;
  mix-blend-mode: screen;
}
/* complementary darker border glow */
.glass-outline {
  box-shadow: 0 6px 24px rgba(59,130,246,0.06), 0 1px 0 rgba(255,255,255,0.4) inset;
}

/* Hero-specific glass: more subtle, no heavy padding, blends with background */
.hero-liquid {
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.06));
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 6px 20px rgba(16,24,40,0.06);
  border-radius: 1rem;
  overflow: visible;
}
.hero-liquid .liquid-sheen::before { height: 28%; opacity: 0.9 }

/* Hero bleed: lets the image overflow slightly and blend with background */
.hero-bleed {
  position: relative;
  overflow: visible;
  border-radius: 0.75rem;
}
.hero-bleed img {
  display: block;
  width: 110%; /* slight bleed */
  margin-left: -5%;
  border-radius: 0.75rem;
  mix-blend-mode: normal; /* ensure original colors */
  /* Enhanced glow effect to make the logo pop */
  filter: drop-shadow(0 8px 24px rgba(59,130,246,0.3));
}

/* Images inside glass containers should render their original colors */
.liquid-glass img, .hero-bleed img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 24px rgba(59,130,246,0.2));
}
  border-radius: 0.75rem;
  /* Added a subtle glow effect */
  box-shadow: 0 4px 12px rgba(2,6,23,0.05);
}

/* Glow effect (product cards) */
.glow-effect {
  box-shadow: 0 0 24px 8px #60a5fa, 0 0 48px 16px #3b82f6;
  transition: box-shadow 0.3s;
}
.glow-effect:hover {
  box-shadow: 0 0 32px 16px #60a5fa, 0 0 64px 24px #3b82f6;
}

/* Fade-in animation */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in 1s ease;
}

/* Underline animation */
@keyframes underline {
  from { width: 0; }
  to { width: 100%; }
}
.animate-underline {
  animation: underline 1.2s cubic-bezier(.4,0,.2,1) forwards;
}