/* Formula Unit - final homepage hero/logo refinement */
.brand{min-width:220px !important;height:72px !important;display:flex;align-items:center;overflow:visible !important}
.clean-logo{width:220px !important;height:auto !important;max-height:58px !important;object-fit:contain !important;object-position:left center !important}
.clean-hero{
  min-height:700px !important;
  background-image:url('assets/hero-cosmetic-ingredients-hd.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:right center !important;
  background-size:auto 100% !important;
  background-color:#fff7fb !important;
}
.clean-hero:before{
  background:linear-gradient(90deg,
    rgba(255,249,252,.99) 0%,
    rgba(255,249,252,.98) 25%,
    rgba(255,249,252,.88) 40%,
    rgba(255,249,252,.55) 53%,
    rgba(255,249,252,.12) 68%,
    rgba(255,249,252,0) 100%) !important;
}
.clean-hero-inner{min-height:600px !important}
.clean-hero-copy{padding-top:50px !important}
@media(max-width:1000px){
  .brand{min-width:190px !important;height:66px !important}
  .clean-logo{width:190px !important;max-height:52px !important}
  .clean-hero{min-height:760px !important;background-size:auto 58% !important;background-position:75% top !important}
  .clean-hero:before{background:linear-gradient(180deg,#fff9fc 0%,rgba(255,249,252,.94) 45%,rgba(255,249,252,.50) 67%,#fff9fc 86%) !important}
}
@media(max-width:600px){
  .brand{min-width:160px !important;height:62px !important}
  .clean-logo{width:160px !important;max-height:48px !important}
  .clean-hero{min-height:850px !important;background-size:auto 42% !important;background-position:70% top !important}
}


/* Formula Unit sitewide logo animation + subtle lighting */
.fu-site-logo-animation{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:99999;
  width:68px;
  height:68px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.20),rgba(255,105,180,.08) 45%,transparent 70%);
  box-shadow:0 0 14px rgba(255,105,180,.28),0 0 34px rgba(255,255,255,.10);
  animation:fuLogoFloat 3.2s ease-in-out infinite;
}
.fu-site-logo-animation::before{
  content:"FORMULA UNIT";
  font-weight:800;
  font-size:8px;
  letter-spacing:1px;
  text-align:center;
  color:#fff;
  text-shadow:0 0 5px rgba(255,105,180,.9),0 0 12px rgba(255,255,255,.55);
  animation:fuLogoGlow 2.2s ease-in-out infinite alternate;
}
.fu-site-logo-animation::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(255,105,180,.35);
  box-shadow:0 0 16px rgba(255,105,180,.25);
  animation:fuRing 3s linear infinite;
}
.fu-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}
.fu-search-icon{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.10);
  color:currentColor;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.fu-search-icon:hover{
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 0 12px rgba(255,105,180,.45);
  background:rgba(255,105,180,.14);
}
.fu-search-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes fuLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fuLogoGlow{from{opacity:.65;filter:brightness(.9)}to{opacity:1;filter:brightness(1.35)}}
@keyframes fuRing{to{transform:rotate(360deg)}}
@media(max-width:700px){.fu-site-logo-animation{width:56px;height:56px;left:10px;bottom:10px}.fu-search-icon{width:28px;height:28px}}



/* ===== Formula Unit: sitewide polished logo animation ===== */
.fu-site-logo-animation{
  position:fixed!important;
  top:18px!important;
  right:18px!important;
  left:auto!important;
  bottom:auto!important;
  z-index:2147483000!important;
  width:74px!important;
  height:74px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) 0 14%,rgba(255,105,180,.12) 34%,rgba(255,255,255,0) 70%)!important;
  box-shadow:
    0 0 10px rgba(255,255,255,.18),
    0 0 22px rgba(255,105,180,.25),
    0 0 42px rgba(255,105,180,.12)!important;
  animation:fuLogoFloat 3.4s ease-in-out infinite!important;
}
.fu-site-logo-animation::before{
  content:"FORMULA UNIT"!important;
  width:58px!important;
  height:58px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px!important;
  box-sizing:border-box!important;
  font-weight:900!important;
  font-size:7px!important;
  line-height:1.15!important;
  letter-spacing:1px!important;
  text-align:center!important;
  color:#fff!important;
  background:rgba(0,0,0,.25)!important;
  border:1px solid rgba(255,255,255,.25)!important;
  text-shadow:0 0 5px rgba(255,105,180,.9),0 0 12px rgba(255,255,255,.5)!important;
  box-shadow:inset 0 0 15px rgba(255,105,180,.12)!important;
  animation:fuLogoPulse 2.2s ease-in-out infinite alternate!important;
}
.fu-site-logo-animation::after{
  content:""!important;
  position:absolute!important;
  inset:-6px!important;
  border-radius:50%!important;
  border:1px solid rgba(255,105,180,.38)!important;
  box-shadow:0 0 12px rgba(255,105,180,.24)!important;
  animation:fuRing 4s linear infinite!important;
}

/* Search icon: clean, centered, non-overlapping */
.fu-search-icon{
  position:absolute!important;
  right:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(255,105,180,.28)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  color:currentColor!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:10!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
  line-height:1!important;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important;
}
.fu-search-icon:hover{
  transform:translateY(-50%) scale(1.08)!important;
  background:rgba(255,105,180,.14)!important;
  box-shadow:0 0 14px rgba(255,105,180,.38)!important;
}
.fu-search-icon svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.fu-search-wrap{position:relative!important;display:flex!important;align-items:center!important;width:100%!important}
@keyframes fuLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fuLogoPulse{from{opacity:.72;filter:brightness(.9)}to{opacity:1;filter:brightness(1.35)}}
@keyframes fuRing{to{transform:rotate(360deg)}}
@media(max-width:700px){
 .fu-site-logo-animation{top:10px!important;right:10px!important;width:62px!important;height:62px!important}
 .fu-site-logo-animation::before{width:49px!important;height:49px!important;font-size:6px!important}
 .fu-search-icon{width:32px!important;height:32px!important;min-width:32px!important}
}