.hero-glass {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: 24px -18px 0;
  padding: 0 18px 18px;
  border-radius: 24px;
  box-shadow: 0 16px 42px rgb(43 75 50 / 6%);
}

.hero-glass::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -2;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 7% 12%, rgb(169 196 134 / 42%), transparent 52%),
    radial-gradient(ellipse at 91% 23%, rgb(170 192 220 / 30%), transparent 49%),
    radial-gradient(ellipse at 64% 100%, rgb(227 192 152 / 25%), transparent 47%),
    #f3f6ef;
  filter: blur(24px);
}

.hero-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(255 255 255 / 66%), rgb(255 255 255 / 28%));
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(255 255 255 / 60%);
}

.hero-glass .search-box {
  border-color: rgb(255 255 255 / 90%);
  background: rgb(255 255 255 / 55%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 18px rgb(43 96 71 / 7%);
}

.hero-glass .search-box:focus-within {
  border-color: rgb(112 144 86 / 55%);
  box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgb(43 96 71 / 10%), 0 0 0 4px rgb(138 167 103 / 10%);
}

.hero-glass .hero-poster {
  border-color: rgb(255 255 255 / 82%);
  background: rgb(255 255 255 / 38%);
  box-shadow: 0 12px 28px rgb(44 65 44 / 12%), inset 0 1px 0 #fff;
}

.hero-glass .art-stamp {
  background: rgb(226 237 186 / 72%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 55%), 0 0 0 5px rgb(180 198 156 / 45%);
}

.hero-glass .benefit-strip {
  padding: 20px 16px;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 14px;
  background: rgb(255 255 255 / 38%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%);
}

.hero-glass .benefit-strip > div > span:first-child {
  background: rgb(237 243 230 / 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%);
}

@media (max-width: 920px) {
  .hero-glass { border-radius: 20px; }
  .hero-glass .benefit-strip { padding: 18px 12px; }
}

@media (max-width: 650px) {
  .hero-glass { margin: 18px -10px 0; padding: 0 10px 12px; border-radius: 18px; }
  .hero-glass .benefit-strip { padding: 16px 10px; gap: 8px; border-radius: 11px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-glass::after { background: rgb(249 252 245 / 85%); }
  .hero-glass .search-box,
  .hero-glass .benefit-strip { background: rgb(255 255 255 / 88%); }
}