/* Formula Unit — clean high-quality homepage hero fix */
.clean-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 760px !important;
  overflow: hidden !important;
  background-color: #fff7fb !important;
  background-image: url('assets/hero-clean-bg.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: auto 100% !important;
  line-height: normal !important;
}
.clean-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, #fffafe 0%, rgba(255,250,254,.98) 28%, rgba(255,250,254,.78) 43%, rgba(255,250,254,.22) 63%, rgba(255,250,254,0) 80%) !important;
}
.clean-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  min-height: 610px !important;
  width: min(1180px,92%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 52% 48% !important;
  align-items: center !important;
}
.clean-hero-copy {
  max-width: 650px !important;
  padding: 55px 20px 30px 0 !important;
}
.hero-kicker {
  color: #f20b70 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  margin-bottom: 12px !important;
}
.clean-hero h1 {
  margin: 0 0 18px !important;
  color: #151319 !important;
  font-size: clamp(42px,5.2vw,72px) !important;
  line-height: 1.02 !important;
  letter-spacing: -2.5px !important;
}
.clean-hero h1 span {
  display: block !important;
  color: #f20b70 !important;
}
.hero-supply {
  display: inline-block !important;
  margin-bottom: 16px !important;
  padding: 9px 15px !important;
  border-radius: 10px !important;
  background: #17151a !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
.clean-hero p {
  max-width: 590px !important;
  margin: 0 !important;
  color: #4f4a51 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}
.clean-hero .hero-live-actions {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 27px !important;
  margin-bottom: 0 !important;
}
.clean-hero .hero-live-actions .btn {
  min-height: 50px !important;
  padding: 0 25px !important;
}
.clean-hero .hero-wa {
  background: rgba(255,255,255,.96) !important;
  color: #f20b70 !important;
  border: 2px solid #ff86b9 !important;
  box-shadow: none !important;
}
.clean-hero-visual { display: block !important; min-height: 610px !important; }
.clean-hero-features {
  position: relative !important;
  z-index: 4 !important;
  width: min(1180px,92%) !important;
  margin: 0 auto !important;
  padding: 0 0 28px !important;
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 16px !important;
}
.clean-hero-features a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 78px !important;
  padding: 15px !important;
  border: 1px solid rgba(245,210,225,.95) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 30px rgba(30,15,25,.08) !important;
  backdrop-filter: blur(8px) !important;
}
.clean-hero-features span {
  width: 45px !important;
  height: 45px !important;
  flex: 0 0 45px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: #ffe2ee !important;
  color: #f20b70 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}
.clean-hero-features b { display:block !important; font-size:14px !important; color:#17151a !important; }
.clean-hero-features small { display:block !important; margin-top:3px !important; font-size:11px !important; color:#77717a !important; }
@media (max-width:1000px) {
  .clean-hero { min-height: 820px !important; background-size: auto 56% !important; background-position: 72% 0 !important; }
  .clean-hero::before { background: linear-gradient(180deg,#fffafe 0%,rgba(255,250,254,.95) 44%,rgba(255,250,254,.55) 67%,#fffafe 82%) !important; }
  .clean-hero-inner { min-height: 660px !important; grid-template-columns: 1fr !important; align-items: start !important; }
  .clean-hero-copy { padding: 55px 0 0 !important; max-width: 690px !important; }
  .clean-hero-visual { display:none !important; }
  .clean-hero-features { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width:600px) {
  .clean-hero { min-height: 930px !important; background-size: auto 42% !important; background-position: 72% 0 !important; }
  .clean-hero-inner { min-height: 750px !important; }
  .clean-hero-copy { padding-top: 36px !important; }
  .clean-hero h1 { font-size: 42px !important; letter-spacing:-1.8px !important; }
  .clean-hero p { font-size:15px !important; }
  .clean-hero .hero-live-actions { flex-direction:column !important; align-items:stretch !important; }
  .clean-hero .hero-live-actions .btn { width:100% !important; justify-content:center !important; }
  .clean-hero-features { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .clean-hero-features a { min-height:74px !important; padding:11px 9px !important; gap:8px !important; }
  .clean-hero-features span { width:36px !important; height:36px !important; flex-basis:36px !important; font-size:18px !important; }
  .clean-hero-features b { font-size:11px !important; }
  .clean-hero-features small { font-size:9px !important; }
}

/* ===== Formula Unit Animated Homepage ===== */
.clean-hero-inner{animation:fuHeroIn .9s cubic-bezier(.2,.75,.25,1) both;}
.clean-hero-copy .hero-kicker{animation:fuFadeUp .7s .08s both;}
.clean-hero-copy h1{animation:fuFadeUp .8s .16s both;}
.clean-hero-copy .hero-supply{animation:fuFadeUp .75s .24s both;}
.clean-hero-copy p{animation:fuFadeUp .75s .32s both;}
.clean-hero .hero-live-actions{animation:fuFadeUp .75s .4s both;}
.clean-hero-visual{animation:fuFloat 5s ease-in-out 1.1s infinite;}
.clean-hero-features a{animation:fuCardIn .65s cubic-bezier(.2,.7,.25,1) both;}
.clean-hero-features a:nth-child(1){animation-delay:.48s}.clean-hero-features a:nth-child(2){animation-delay:.58s}.clean-hero-features a:nth-child(3){animation-delay:.68s}.clean-hero-features a:nth-child(4){animation-delay:.78s}
.clean-hero .hero-shop{position:relative;overflow:hidden;}
.clean-hero .hero-shop::after{content:"";position:absolute;top:-80%;left:-35%;width:24%;height:260%;transform:rotate(25deg);background:rgba(255,255,255,.45);animation:fuShine 3.8s 1.5s ease-in-out infinite;}
.clean-hero-features a:hover span{animation:fuPulse .75s ease-in-out;}

/* Gentle scroll-reveal for lower homepage sections */
.categories-section,.about-preview,.section.soft,.section:not(.categories-section):not(.about-preview):not(.soft),.darkstrip{animation:fuSectionIn .8s ease both;}

@keyframes fuHeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fuFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fuCardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fuFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.008)}}
@keyframes fuPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes fuShine{0%{left:-35%;opacity:0}12%{opacity:1}40%,100%{left:135%;opacity:0}}
@keyframes fuSectionIn{from{opacity:.2;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== Formula Unit Full-Site Premium Motion Pack ===== */
.brand .clean-logo, .footer-logo {
  transform-origin: 50% 50%;
  animation: fuLogoReveal 1.05s cubic-bezier(.16,1,.3,1) both, fuLogoFloat 4.8s 1.2s ease-in-out infinite;
}
.brand:hover .clean-logo { animation: fuLogoPop .55s ease both; }
.topbar { animation: fuTopbarIn .65s ease both; }
.nav { animation: fuNavIn .8s .05s cubic-bezier(.16,1,.3,1) both; }
.links a { position:relative; transition:color .25s ease, transform .25s ease; }
.links a:hover { transform:translateY(-2px); }
.links a::after { content:""; position:absolute; left:50%; bottom:-9px; width:0; height:2px; border-radius:9px; background:var(--pink); transform:translateX(-50%); transition:width .25s ease; }
.links a:hover::after, .links a.active::after { width:70%; }
.nav-actions .btn, .nav-actions .iconbtn, .cart-nav { transition:transform .25s ease, box-shadow .25s ease; }
.nav-actions .btn:hover, .nav-actions .iconbtn:hover, .cart-nav:hover { transform:translateY(-3px); }
.btn { transition:transform .25s ease, box-shadow .25s ease; }
.btn:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(242,11,112,.28); }
.hero-live-actions .hero-wa:hover { box-shadow:0 12px 26px rgba(242,11,112,.12); }
.hero-shop span { display:inline-block; transition:transform .3s ease; }
.hero-shop:hover span { transform:translateX(5px); }
.clean-hero-features a { transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.clean-hero-features a:hover { transform:translateY(-7px) scale(1.015); border-color:#ffb2d0; box-shadow:0 18px 42px rgba(242,11,112,.14); }
.clean-hero-features span { transition:transform .3s ease; }
.clean-hero-features a:hover span { transform:rotate(-7deg) scale(1.08); }
.cat, .product, .promo-card, .card, .about-image { transition:transform .35s cubic-bezier(.2,.7,.25,1), box-shadow .35s ease, border-color .35s ease; }
.cat:hover, .product:hover, .promo-card:hover, .card:hover { transform:translateY(-7px); box-shadow:0 22px 55px rgba(30,18,28,.12); border-color:#ffd0e2; }
.cat img, .product img, .about-image img { transition:transform .6s cubic-bezier(.2,.7,.25,1); }
.cat:hover img, .product:hover img, .about-image:hover img { transform:scale(1.035); }
.promo-icon, .feature .ico, .check span { transition:transform .35s ease, background .35s ease; }
.promo-card:hover .promo-icon, .feature:hover .ico { transform:rotate(-7deg) scale(1.08); }
.whatsapp { animation:fuWhatsAppIn .9s .8s cubic-bezier(.16,1,.3,1) both, fuWhatsAppPulse 2.8s 2s ease-in-out infinite; transition:transform .25s ease; }
.whatsapp:hover { transform:scale(1.1); }
.footer { position:relative; overflow:hidden; }
.footer::before { content:""; position:absolute; width:420px; height:420px; right:-180px; top:-230px; border-radius:50%; background:radial-gradient(circle,rgba(242,11,112,.18),transparent 65%); pointer-events:none; animation:fuGlow 6s ease-in-out infinite; }

/* Scroll reveal: elements become animated only when they enter view. */
.fu-reveal { opacity:0; transform:translateY(28px); }
.fu-reveal.fu-visible { animation:fuReveal .75s cubic-bezier(.16,1,.3,1) both; }
.fu-delay-1 { animation-delay:.08s!important; } .fu-delay-2 { animation-delay:.16s!important; } .fu-delay-3 { animation-delay:.24s!important; } .fu-delay-4 { animation-delay:.32s!important; }

@keyframes fuLogoReveal { from{opacity:0;transform:translateY(-14px) scale(.82) rotate(-3deg)} to{opacity:1;transform:translateY(0) scale(1) rotate(0)} }
@keyframes fuLogoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes fuLogoPop { 0%{transform:scale(1)} 50%{transform:scale(1.06) rotate(-1deg)} 100%{transform:scale(1)} }
@keyframes fuTopbarIn { from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:translateY(0)} }
@keyframes fuNavIn { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fuWhatsAppIn { from{opacity:0;transform:scale(.55)} to{opacity:1;transform:scale(1)} }
@keyframes fuWhatsAppPulse { 0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.2),0 0 0 0 rgba(37,211,102,.28)} 50%{box-shadow:0 12px 30px rgba(0,0,0,.2),0 0 0 9px rgba(37,211,102,0)} }
@keyframes fuReveal { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fuGlow { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-35px,25px)} }

@media (prefers-reduced-motion:reduce){
 .brand .clean-logo,.footer-logo,.topbar,.nav,.whatsapp{animation:none!important}
 .fu-reveal{opacity:1!important;transform:none!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}
}