.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse at 69% 42%, rgba(239,224,208,.48), transparent 47%), linear-gradient(175deg, transparent 87%, rgba(175,169,153,.09) 92%, transparent 96%); }
.hero::after { content: ""; position: absolute; left: 12%; bottom: 6px; width: 70%; height: 50px; transform: rotate(-5deg); z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(80,82,66,.1), transparent 70%); filter: blur(8px); }
.hero-visual::before { content: ""; position: absolute; bottom: 14px; width: min(310px, 100%); height: 33px; border-radius: 50%; background: rgba(73,63,49,.16); filter: blur(13px); transform: rotate(3deg); }
.hero-branch { position: absolute; width: 280px; max-width: none; height: auto; bottom: -13px; right: -95px; transform: rotate(13deg); filter: drop-shadow(0 6px 4px rgba(102,74,62,.1)); z-index: 3; pointer-events: none; }
.petals { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.petal { position: absolute; display: block; width: 24px; height: 38px; border-radius: 70% 12% 75% 30%; background: radial-gradient(ellipse at 30% 20%, #ffe5df, #edb6b1 65%, #df9993); opacity: .74; box-shadow: inset 2px 1px 4px rgba(255,255,255,.6); }
.petal-one { top: 2%; left: -4%; transform: rotate(23deg); filter: blur(1px); }
.petal-two { top: 14%; left: -15%; transform: rotate(68deg) scale(.65); filter: blur(2px); }
.petal-three { top: 32%; right: -2%; transform: rotate(-31deg) scale(.8); }
.petal-four { bottom: 17%; left: -14%; transform: rotate(-60deg) scale(.55); filter: blur(1px); }
.showcase-branch { position: absolute; width: 300px; max-width: none; height: auto; left: -58px; bottom: 26px; transform: rotate(-24deg); opacity: .95; z-index: 0; }
@media (max-width: 1100px) { .hero-branch { width: 235px; right: -70px; bottom: -4px; } }
@media (max-width: 900px) { .hero-branch { right: -16px; width: 215px; bottom: 5px; } .petal-three { right: 3%; } }
@media (max-width: 650px) {
  .hero::before { background: radial-gradient(ellipse at 50% 54%, rgba(239,224,208,.5), transparent 55%); }
  .hero::after { display: none; }
  .hero-branch { right: -2px; width: 240px; bottom: -2px; }
  .petal-one { left: 15%; top: 3%; }
  .petal-two { left: 2%; top: 15%; }
  .petal-three { right: 5%; top: 29%; }
  .petal-four { left: 4%; bottom: 13%; }
  .showcase-branch { width: 200px; left: 24px; }
}