/* Hajeri Pro — premium motion & effects layer (loads after style.css; safe to remove) */

/* ---------- Scroll progress bar ---------- */
#hp-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:99999;pointer-events:none;
  background:linear-gradient(90deg,#7b171b,#c8102e,#f5b301);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 10px rgba(245,179,1,.6)}

/* ---------- Scroll reveal ---------- */
.hp-reveal{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease;
  transition-delay:var(--hp-d,0s);will-change:opacity,transform}
.hp-reveal.hp-left{transform:translateX(-46px)}
.hp-reveal.hp-right{transform:translateX(46px)}
.hp-reveal.hp-in{opacity:1;transform:none;filter:none}

/* ---------- Hero: living background ---------- */
.hp-hero-bg{background-size:220% 220% !important;animation:hpHeroShift 16s ease-in-out infinite}
@keyframes hpHeroShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hp-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(40px);opacity:.55;
  animation:hpFloat 11s ease-in-out infinite}
.hp-orb.o1{width:320px;height:320px;left:-80px;top:12%;background:radial-gradient(circle,rgba(200,16,46,.28),transparent 70%)}
.hp-orb.o2{width:260px;height:260px;right:30%;bottom:-60px;background:radial-gradient(circle,rgba(245,179,1,.30),transparent 70%);animation-delay:-4s}
.hp-orb.o3{width:200px;height:200px;right:6%;top:22%;background:radial-gradient(circle,rgba(123,23,27,.25),transparent 70%);animation-delay:-7s}
@keyframes hpFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(28px,-34px)}66%{transform:translate(-22px,22px)}}

.hp-float{animation:hpBob 6s ease-in-out infinite;will-change:transform}
@keyframes hpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* hero badge shimmer */
.hp-shimmer{position:relative;overflow:hidden}
.hp-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  transform:translateX(-120%);animation:hpShimmer 3.6s ease-in-out infinite;pointer-events:none}
@keyframes hpShimmer{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ---------- Buttons: shine + lift ---------- */
a.openDemoModal,.plan-btn,.sw-btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background .25s,color .25s}
a.openDemoModal::after,.plan-btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none}
a.openDemoModal:hover::after,.plan-btn:hover::after{left:130%;transition:left .7s ease}
a.openDemoModal:hover,.plan-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(123,23,27,.28)}
a.openDemoModal:active,.plan-btn:active{transform:translateY(0) scale(.98)}

/* ---------- Cards: 3D tilt + mouse spotlight ---------- */
.hp-tilt{transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .3s ease;will-change:transform}
.hp-tilt.hp-tilting{transition:transform .05s linear}
.hp-spot{position:relative;overflow:hidden}
.hp-spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(200,16,46,.13),transparent 55%)}
.hp-spot:hover::before{opacity:1}
.how-works-card.hp-tilt:hover,.hp-feature-card.hp-tilt:hover{box-shadow:0 22px 48px rgba(43,41,41,.16)}

/* pricing spotlight (non-featured keep their own ::before-free pseudo) */
.plan:not(.featured){overflow:hidden}
.plan:not(.featured)::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(200,16,46,.11),transparent 55%)}
.plan:not(.featured):hover::before{opacity:1}
.plan:not(.featured)>*{position:relative}

/* ---------- How it works: pulsing step numbers ---------- */
.how-works-number{position:relative}
.how-works-number::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(123,23,27,.35);
  animation:hpPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes hpPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* badge dot pulse */
.brands-badge-dot{animation:hpDot 1.8s ease-in-out infinite}
@keyframes hpDot{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.5)}50%{box-shadow:0 0 0 7px rgba(200,16,46,0)}}

/* section titles: underline draws in */
.features-title,.how-works-title{position:relative}

/* stats icons gentle wobble on hover */
.stats-bar-item:hover i{animation:hpWobble .6s ease}
@keyframes hpWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.12)}75%{transform:rotate(10deg) scale(1.12)}}

/* brands logos lift */
.brands-logo-item{transition:transform .3s ease,filter .3s ease}
.brands-logo-item:hover{transform:translateY(-6px) scale(1.06)}

/* smooth anchor scrolling */
html{scroll-behavior:smooth}

/* touch / small screens: lighter effects */
@media(max-width:767px){
  .hp-orb{display:none}
  .hp-reveal{transform:translateY(22px);filter:none}
  .hp-reveal.hp-left,.hp-reveal.hp-right{transform:translateY(22px)}
}

@media(prefers-reduced-motion:reduce){
  .hp-reveal{opacity:1;transform:none;filter:none;transition:none}
  .hp-hero-bg,.hp-orb,.hp-float,.hp-shimmer::after,.how-works-number::after,.brands-badge-dot{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Header: always sticky + soft bordered shadow ---------- */
html,body{overflow-x:clip !important}
header.sticky{position:sticky !important;top:0 !important;z-index:9990 !important}
@media(min-width:992px){
  header.sticky > .container > .relative{
    border:1px solid rgba(123,23,27,.10);
    box-shadow:0 10px 30px rgba(43,41,41,.12),0 2px 6px rgba(123,23,27,.08) !important;
    transition:box-shadow .3s ease,background .3s ease}
}
@media(max-width:991px){
  header.sticky{background:#fff !important;border-bottom:1px solid rgba(123,23,27,.10);
    box-shadow:0 8px 22px rgba(43,41,41,.12) !important}
}

/* ---------- Header menu: tighter spacing ---------- */
@media(min-width:992px){
  #navbarCollapse > ul > li > a:not(.header-btn){margin-left:0 !important;padding:6px 10px !important}
  #navbarCollapse > ul > li{margin-left:6px !important}
  #navbarCollapse > ul > li:first-child{margin-left:0 !important}
  #navbarCollapse > ul > li.mobile-first{margin-left:18px !important}
  #navbarCollapse > ul > li.mobile-first + li.mobile-first{margin-left:10px !important}
}