/* Prespri Hero Section */
.phs-hero{position:relative;overflow:hidden;width:100%;--phs-h:800px;font-family:'Outfit',sans-serif;background-color:#fbeaf3;box-sizing:border-box}
.phs-hero *{box-sizing:border-box}
.phs-slides{display:grid}
.phs-slide{grid-area:1/1;position:relative;min-height:var(--phs-h);opacity:0;visibility:hidden;transition:opacity calc(1.2s*var(--s,1)) ease,visibility calc(1.2s*var(--s,1));z-index:1}
.phs-slide.is-active{opacity:1;visibility:visible;z-index:2}
.phs-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.phs-bg::after{content:"";position:absolute;inset:0}

.phs-inner{position:relative;z-index:3;max-width:1280px;min-height:var(--phs-h);margin:0 auto;padding:0 17px;display:flex;align-items:center}
.phs-content{position:relative;z-index:6;width:46%}
.phs-badge{display:inline-block;padding:10px 25px;border-radius:30px;font-size:14px;line-height:25px;font-weight:500;color:#000;background:#e8d2f3;margin-bottom:22px}
.phs-title{margin:0 0 20px;font-family:'Roboto',sans-serif;font-weight:900;font-size:70px;line-height:80px;color:#111010}
.phs-desc{margin:0 0 30px;max-width:540px;font-size:18px;line-height:1.4;font-weight:400;color:#464646}
.phs-btn{display:inline-block;padding:0 40px;line-height:62px;font-size:15px;font-weight:600;text-transform:uppercase;text-decoration:none;color:#fff;background-color:#4951fe;border-radius:10px;transition:all .3s}

/* stage (product images) */
.phs-stage{position:absolute;inset:0;z-index:4;pointer-events:none}
.phs-item{position:absolute;pointer-events:none;transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)));transition:transform .8s cubic-bezier(.22,1,.36,1)}
.phs-in,.phs-in img{display:block;width:100%}
.phs-in img{height:auto}

.phs-circle{left:77%;top:49%;width:36%;z-index:1}
.phs-main{left:77%;top:48%;width:31%;z-index:2}
.phs-card{left:92%;top:56%;width:10%;z-index:3}
.phs-cups{left:57%;top:71%;width:13%;z-index:3}
.phs-cap{left:89%;top:80%;width:18%;z-index:4}
.phs-panel{left:75%;top:86%;width:16%;z-index:4}
.phs-d-coral{left:61%;top:24%;width:5%;z-index:3}
.phs-d-pen{left:64%;top:92%;width:5.5%;z-index:5}

/* decor relative to full-width slide */
.phs-d-ribbon{right:0;left:auto;top:44%;width:23%;z-index:2;transform:translate(var(--px,0px),calc(-50% + var(--py,0px)))}
.phs-d-tl{left:2%;top:15%;width:4%;z-index:2}
.phs-d-tr{left:91%;top:11%;width:4%;z-index:2}
.phs-d-bl{left:11%;top:82%;width:3%;z-index:2}
.phs-d-bc{left:44%;top:84%;width:4.5%;z-index:2}

/* ---------- animations (play only on active slide) ----------
   --s = speed multiplier (Elementor control). Bigger = slower & smoother */
@keyframes phsFromLeft{from{opacity:0;transform:translate3d(-60px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes phsFromRight{from{opacity:0;transform:translate3d(60%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes phsRise{from{opacity:0;transform:translate3d(0,70px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes phsScaleIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes phsTiltIn{from{opacity:0;transform:translate3d(0,40px,0) scale(.92)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes phsFlip{from{opacity:0;transform:scale(.6) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes phsDrop{from{opacity:0;transform:translate3d(0,-40px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes phsPop{from{opacity:0;transform:scale(1.25) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes phsFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}
@keyframes phsSway{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}

.phs-slide .phs-badge,.phs-slide .phs-title,.phs-slide .phs-desc,.phs-slide .phs-btn,.phs-slide .phs-in{opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.phs-slide.is-active{--e:cubic-bezier(.22,1,.36,1)}

.phs-slide.is-active .phs-badge{animation:phsFromLeft calc(1.4s*var(--s,1)) var(--e) calc(.3s*var(--s,1)) both}
.phs-slide.is-active .phs-title{animation:phsFromLeft calc(1.6s*var(--s,1)) var(--e) calc(.5s*var(--s,1)) both}
.phs-slide.is-active .phs-desc{animation:phsFromLeft calc(1.6s*var(--s,1)) var(--e) calc(.7s*var(--s,1)) both}
.phs-slide.is-active .phs-btn{animation:phsFromLeft calc(1.6s*var(--s,1)) var(--e) calc(.9s*var(--s,1)) both}

.phs-slide.is-active .phs-circle .phs-in{animation:phsScaleIn calc(1.6s*var(--s,1)) var(--e) calc(.5s*var(--s,1)) both}
.phs-slide.is-active .phs-main .phs-in{animation:phsRise calc(1.8s*var(--s,1)) var(--e) calc(.6s*var(--s,1)) both}
.phs-slide.is-active .phs-main img{animation:phsFloat calc(4.5s*var(--s,1)) ease-in-out calc(2.4s*var(--s,1)) infinite alternate}
.phs-slide.is-active .phs-card .phs-in{animation:phsFlip calc(1.7s*var(--s,1)) var(--e) calc(1.3s*var(--s,1)) both}
.phs-slide.is-active .phs-cups .phs-in{animation:phsTiltIn calc(1.7s*var(--s,1)) var(--e) calc(1s*var(--s,1)) both}
.phs-slide.is-active .phs-cups img{animation:phsFloat calc(5s*var(--s,1)) ease-in-out calc(2.7s*var(--s,1)) infinite alternate}
.phs-slide.is-active .phs-cap .phs-in{animation:phsPop calc(1.7s*var(--s,1)) var(--e) calc(1.1s*var(--s,1)) both}
.phs-slide.is-active .phs-cap img{animation:phsFloat calc(5.5s*var(--s,1)) ease-in-out calc(2.8s*var(--s,1)) infinite alternate-reverse}
.phs-slide.is-active .phs-panel .phs-in{animation:phsRise calc(1.5s*var(--s,1)) var(--e) calc(1.5s*var(--s,1)) both}
.phs-slide.is-active .phs-d-coral .phs-in{animation:phsFlip calc(1.8s*var(--s,1)) var(--e) calc(1.4s*var(--s,1)) both}
.phs-slide.is-active .phs-d-pen .phs-in{animation:phsRise calc(1.5s*var(--s,1)) var(--e) calc(1.6s*var(--s,1)) both}
.phs-slide.is-active .phs-d-pen img{animation:phsSway calc(3.2s*var(--s,1)) ease-in-out calc(3s*var(--s,1)) infinite alternate;transform-origin:50% 90%}
.phs-slide.is-active .phs-d-ribbon .phs-in{animation:phsFromRight calc(2s*var(--s,1)) var(--e) calc(1.1s*var(--s,1)) both}
.phs-slide.is-active .phs-d-tl .phs-in{animation:phsDrop calc(1.6s*var(--s,1)) var(--e) calc(.9s*var(--s,1)) both}
.phs-slide.is-active .phs-d-tl img{animation:phsFloat calc(4.8s*var(--s,1)) ease-in-out calc(2.5s*var(--s,1)) infinite alternate}
.phs-slide.is-active .phs-d-tr .phs-in{animation:phsDrop calc(1.6s*var(--s,1)) var(--e) calc(1.1s*var(--s,1)) both}
.phs-slide.is-active .phs-d-tr img{animation:phsFloat calc(5.2s*var(--s,1)) ease-in-out calc(2.7s*var(--s,1)) infinite alternate-reverse}
.phs-slide.is-active .phs-d-bl .phs-in{animation:phsPop calc(1.6s*var(--s,1)) var(--e) calc(1.3s*var(--s,1)) both}
.phs-slide.is-active .phs-d-bl img{animation:phsSway calc(3.6s*var(--s,1)) ease-in-out calc(3s*var(--s,1)) infinite alternate}
.phs-slide.is-active .phs-d-bc .phs-in{animation:phsPop calc(1.6s*var(--s,1)) var(--e) calc(1.5s*var(--s,1)) both}
.phs-slide.is-active .phs-d-bc img{animation:phsSway calc(4s*var(--s,1)) ease-in-out calc(3.2s*var(--s,1)) infinite alternate-reverse}

/* keep button text visible on hover/focus (theme & Elementor kit link-hover colors can override it) */
.phs-btn{position:relative;z-index:2}
.phs-hero .phs-btn:hover,.phs-hero .phs-btn:focus,.phs-hero .phs-btn:active,.phs-hero .phs-btn:visited{color:#fff;text-decoration:none;opacity:1;visibility:visible}
.phs-hero .phs-arrow:hover,.phs-hero .phs-arrow:focus{color:#fff}

/* arrows (position presets) */
.phs-hero{--phs-ax:30px;--phs-ay:0px;--phs-gap:12px;--phs-as:60px;--s:1}
.phs-arrow{position:absolute;z-index:20;width:var(--phs-as);height:var(--phs-as);padding:0;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;background-color:#4951fe;transition:background .5s ease,color .3s ease,box-shadow .4s ease,border-color .3s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.phs-arrow svg{display:block;width:22px;height:22px;stroke-width:2.6}
.phs-arr-sides .phs-arrow{top:50%;transform:translateY(calc(-50% - var(--phs-ay))) scale(var(--phs-hs,1))}
.phs-arr-sides .phs-prev{left:var(--phs-ax)}
.phs-arr-sides .phs-next{right:var(--phs-ax)}
.phs-arr-bl .phs-arrow,.phs-arr-bc .phs-arrow,.phs-arr-br .phs-arrow{top:auto;bottom:calc(30px + var(--phs-ay));transform:scale(var(--phs-hs,1))}
.phs-arr-bl .phs-prev{left:var(--phs-ax)}
.phs-arr-bl .phs-next{left:calc(var(--phs-ax) + var(--phs-as) + var(--phs-gap))}
.phs-arr-bc .phs-prev{left:50%;margin-left:calc(-1*var(--phs-as) - var(--phs-gap)/2)}
.phs-arr-bc .phs-next{left:50%;margin-left:calc(var(--phs-gap)/2)}
.phs-arr-br .phs-next{right:var(--phs-ax)}
.phs-arr-br .phs-prev{right:calc(var(--phs-ax) + var(--phs-as) + var(--phs-gap))}

/* dots */
.phs-dots{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;display:flex;gap:10px}
.phs-dot{width:10px;height:10px;padding:0;border:0;border-radius:10px;background:rgba(0,0,0,.25);cursor:pointer;transition:all .5s cubic-bezier(.22,1,.36,1)}
.phs-dot.is-active{width:30px;background:#4951fe}

/* responsive */
@media (max-width:1280px){
  .phs-title{font-size:56px;line-height:64px}
}
@media (max-width:1024px){
  .phs-slide,.phs-inner{min-height:0}
  .phs-inner{flex-direction:column;align-items:flex-start;padding:70px 25px 50px}
  .phs-content{width:100%}
  .phs-title{font-size:45px;line-height:54px}
  .phs-stage{position:relative;inset:auto;width:100%;height:420px;margin-top:40px}
  .phs-circle{left:50%;top:50%;width:62%}
  .phs-main{left:50%;top:50%;width:50%}
  .phs-card{left:85%;top:55%;width:18%}
  .phs-cups{left:18%;top:72%;width:22%}
  .phs-cap{left:82%;top:84%;width:28%}
  .phs-panel{left:50%;top:92%;width:30%}
  .phs-d-coral{left:25%;top:12%;width:8%}
  .phs-d-pen{left:68%;top:96%;width:9%}
  .phs-d-ribbon{width:30%;top:70%}
  .phs-arr-mb.phs-arr-sides .phs-arrow{top:auto;bottom:calc(18px + var(--phs-ay));transform:scale(var(--phs-hs,1))}
  .phs-arr-mb.phs-arr-sides .phs-prev{left:16px}
  .phs-arr-mb.phs-arr-sides .phs-next{right:16px}
  .phs-arr-mb .phs-dots{bottom:34px}
}
@media (max-width:767px){
  /* mobile: text left, product images right (same look as desktop, scaled down) */
  .phs-inner{flex-direction:row;align-items:flex-start;padding:85px 17px 110px}
  .phs-arr-off-mb .phs-inner{padding-bottom:70px}
  .phs-content{width:72%}
  .phs-badge{padding:4px 14px;font-size:11px;line-height:16px;margin-bottom:15px}
  .phs-title{font-size:30px;line-height:41px;margin-bottom:18px}
  .phs-desc{font-size:13.5px;line-height:1.6;margin-bottom:34px}
  .phs-btn{line-height:32px;padding:0 15px;font-size:12px;border-radius:10px}
  .phs-stage{position:absolute;inset:0;width:auto;height:auto;margin:0}
  .phs-circle{left:77%;top:49%;width:36%}
  .phs-main{left:77%;top:48%;width:31%}
  .phs-panel{left:72%;top:66%;width:15%}
  .phs-d-coral{left:54%;top:11%;width:5%}
  .phs-d-pen{left:55%;top:88%;width:6%}
  .phs-d-tr{display:block;left:73%;top:5%;width:6%}
  .phs-d-bc{display:block;left:35%;top:87%;width:5%}
  .phs-card,.phs-cups,.phs-cap,.phs-d-tl,.phs-d-bl,.phs-d-ribbon{display:none}
  /* option: hide arrows on mobile */
  .phs-arr-hide-mb .phs-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .phs-slide *{animation:none!important;opacity:1!important}
}