:root{
  --pink-50:  #fff1f7;
  --pink-100: #ffe4ee;
  --pink-300: #ffa3c7;
  --pink-400: #ff7fb1;
  --pink-500: #ff5aa0;
  --pink-600: #e83e8c; 
  --pink-700: #d22578;
  --text-on-pink: #ffffff;
  --text-muted: rgba(255,255,255,.85);
}


.hero-pink{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, var(--pink-50), var(--pink-300) 40%, var(--pink-500));
  color: var(--text-on-pink);
}
.hero-pink::before{
  
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(800px 500px at 120% 10%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(700px 400px at 80% 120%, rgba(255,255,255,.2), transparent 60%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.hero-pink .hero-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 20px 140px; 
}
.hero-pink .breadcrumbs{
  color: var(--text-muted);
  font-weight: 600;
}
.hero-pink .breadcrumbs a{
  color: var(--text-on-pink);
  opacity: .9;
  text-decoration: none;
}
.hero-pink .breadcrumbs a:hover{ opacity: 1; text-decoration: underline; }
.hero-pink .breadcrumbs .sep{ opacity: .7; margin: 0 8px; }
.hero-pink h1{
  margin: 10px 0 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 12px rgba(210,37,120,.25);
}


.hero-pink .wave-wrap{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 140px;
}
.hero-pink .wave{
  position: absolute;
  width: 100%; height: 100%;
  left: 0; bottom: 0;
  display: block;
}