/* ===== Motion + graphics layer (safe to delete this file and fx.js to go back to the plain site) ===== */

/* scroll progress bar */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--accent),#f6c453);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* header polish */
header.site{transition:box-shadow .3s ease}
header.site.scrolled{box-shadow:0 8px 24px rgba(10,29,63,.10)}
nav.main a:not(.cta){position:relative}
nav.main a:not(.cta)::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
nav.main a:not(.cta):hover::after,nav.main a.active::after{transform:scaleX(1)}
nav.main a.cta{transition:background .25s,color .25s,transform .25s,box-shadow .25s}
nav.main a.cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(232,163,23,.35)}
.logo-img{transition:transform .4s ease}
.logo:hover .logo-img{transform:scale(1.06) rotate(-2deg)}

/* hero / banner / cta backgrounds */
.hero,.banner,.cta-band{position:relative;overflow:hidden;isolation:isolate}
.hero>.wrap,.banner>.wrap,.cta-band>.wrap{position:relative;z-index:2}
.hero::before,.banner::before,.cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(115deg,transparent 0%,#000 45%,transparent 100%);mask-image:linear-gradient(115deg,transparent 0%,#000 45%,transparent 100%);
  animation:fx-grid 40s linear infinite}
@keyframes fx-grid{to{background-position:260px 130px}}
.fx-decor{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fx-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.fx-orb.a{width:420px;height:420px;right:-80px;top:-120px;background:radial-gradient(circle,rgba(232,163,23,.55),transparent 65%);animation:fx-drift 16s ease-in-out infinite alternate}
.fx-orb.b{width:520px;height:520px;left:-160px;bottom:-240px;background:radial-gradient(circle,rgba(70,130,230,.55),transparent 65%);animation:fx-drift 20s ease-in-out infinite alternate-reverse}
@keyframes fx-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.12)}}
.fx-shape{position:absolute;opacity:.16;animation:fx-float 9s ease-in-out infinite}
.fx-shape svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.fx-shape.gold svg{stroke:var(--accent)}
@keyframes fx-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}
.fx-line{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;opacity:.5}
.fx-line path.l{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1800;stroke-dashoffset:1800;animation:fx-draw 4s .6s ease-out forwards;vector-effect:non-scaling-stroke}
.fx-line path.f{fill:url(#fxg);opacity:0;animation:fx-fade 2s 2.4s forwards}
@keyframes fx-draw{to{stroke-dashoffset:0}}
@keyframes fx-fade{to{opacity:1}}
.fx-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:34px;z-index:1;display:block;pointer-events:none}

/* load-in for hero + banner text */
@keyframes fx-up{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.hero-grid>div:first-child>*,.banner .wrap>.crumb,.banner .wrap>h1,.banner .wrap>p,.banner-grid>div>*{animation:fx-up .8s cubic-bezier(.2,.7,.2,1) both}
.hero-grid>div:first-child>*:nth-child(1),.banner .wrap>.crumb,.banner-grid>div>*:nth-child(1){animation-delay:.05s}
.hero-grid>div:first-child>*:nth-child(2),.banner .wrap>h1,.banner-grid>div>*:nth-child(2){animation-delay:.15s}
.hero-grid>div:first-child>*:nth-child(3),.banner .wrap>p,.banner-grid>div>*:nth-child(3){animation-delay:.25s}
.hero-grid>div:first-child>*:nth-child(4){animation-delay:.35s}
.hero-grid>div:first-child>*:nth-child(5){animation-delay:.45s}
.hero-grid>div:last-child .form-card{animation:fx-up .9s .3s cubic-bezier(.2,.7,.2,1) both}
.banner-img{animation:fx-up .9s .3s both,fx-bob 7s 1.2s ease-in-out infinite}
@keyframes fx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.side-img{animation:fx-bob 8s ease-in-out infinite}

/* headline highlight */
.hl{position:relative;color:var(--accent);white-space:nowrap}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C40 1 70 9 100 5 S160 2 198 6' fill='none' stroke='%23E8A317' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);animation:fx-underline 1s 1s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes fx-underline{to{clip-path:inset(0 0 0 0)}}

/* buttons */
.btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,filter .25s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(10,29,63,.22)}
.btn:active{transform:translateY(0)}
.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::after{left:140%}
.btn-outline{transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.btn-outline:hover{background:#fff;color:var(--primary)}
.hero .btn-row .btn-primary{animation:fx-pulse 2.8s 2s infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(232,163,23,.55)}70%{box-shadow:0 0 0 16px rgba(232,163,23,0)}100%{box-shadow:0 0 0 0 rgba(232,163,23,0)}}
.more{transition:letter-spacing .25s,border-color .25s}
.more:hover{letter-spacing:.02em}

/* cards */
.card{position:relative}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent),#f6c453);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;border-radius:10px 10px 0 0}
.card:hover::before{transform:scaleX(1)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(15,43,91,.14)}
.icon{transition:background .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.icon svg{transition:stroke .3s}
.card:hover .icon{background:var(--primary);transform:scale(1.08) rotate(-6deg)}
.card:hover .icon svg{stroke:#fff}
.mini{transition:transform .25s,box-shadow .25s,border-color .25s}
.mini:hover{transform:translateX(4px);border-color:var(--accent);box-shadow:0 8px 20px rgba(15,43,91,.08)}
.pill{transition:background .25s,color .25s,transform .25s}
.pill:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
details{transition:box-shadow .25s,border-color .25s}
details[open]{border-color:var(--accent);box-shadow:0 8px 22px rgba(15,43,91,.08)}
summary{transition:color .2s}
summary:hover{color:var(--accent)}

/* steps connector */
.step{position:relative}
.step .n{position:relative;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.step:hover .n{transform:scale(1.12)}
.step.in .n::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:fx-ring 1.6s .4s 2 ease-out}
@keyframes fx-ring{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.steps .step:not(:last-child)::before{content:"";position:absolute;top:26px;left:calc(50% + 36px);width:calc(100% - 72px + 24px);height:2px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 14px);transform:scaleX(0);transform-origin:left;transition:transform .9s .3s ease}
.steps .step.in:not(:last-child)::before{transform:scaleX(1)}
@media(max-width:900px){.steps .step:not(:last-child)::before{display:none}}

/* trust strip */
.trust{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:3;padding:0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;align-items:center;gap:14px;padding:24px 18px;border-right:1px solid var(--line)}
.trust-item:last-child{border-right:0}
.trust-item .ti{width:46px;height:46px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex:none;transition:background .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.trust-item .ti svg{width:24px;height:24px;stroke:var(--primary);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.trust-item:hover .ti{background:var(--primary);transform:scale(1.1)}
.trust-item:hover .ti svg{stroke:var(--accent)}
.trust-item b{display:block;font-family:'Poppins';font-size:.92rem;color:var(--primary);line-height:1.25}
.trust-item span{font-size:.8rem;color:var(--muted)}
@media(max-width:900px){.trust .wrap{grid-template-columns:1fr 1fr}.trust-item{border-right:0;border-bottom:1px solid var(--line);padding:16px 10px}.trust-item:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:480px){.trust-item{gap:10px;padding:14px 6px}.trust-item .ti{width:38px;height:38px}.trust-item b{font-size:.82rem}.trust-item span{font-size:.74rem}}

/* CTA band gradient */
.cta-band{background:linear-gradient(120deg,var(--primary-dark),var(--primary),#1a4a95,var(--primary-dark));background-size:300% 300%;animation:fx-bg 18s ease infinite}
@keyframes fx-bg{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

/* forms */
.field input,.field select,.field textarea{transition:border-color .2s,box-shadow .2s,background .2s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#94a3b8}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,163,23,.35)}
.form-card{position:relative;overflow:hidden}
.form-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary));background-size:200% 100%;animation:fx-bg 6s linear infinite}

/* whatsapp pulse */
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25D366;pointer-events:none;animation:fx-ring 2.6s 3s infinite ease-out}

/* scroll reveal (classes are added by fx.js only) */
.reveal{opacity:0;translate:0 28px;transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.reveal.in{opacity:1;translate:0 0}
.card.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),box-shadow .25s,transform .25s}
.reveal.from-left{translate:-34px 0}
.reveal.from-right{translate:34px 0}
.reveal.from-left.in,.reveal.from-right.in{translate:0 0}

/* phones: lighter decoration */
@media(max-width:600px){
  .fx-shape.hide-m{display:none}
  .fx-orb.a{width:260px;height:260px}
  .fx-orb.b{width:300px;height:300px}
  .fx-line{height:30%}
  .hl{white-space:normal}
}

/* respect reduced-motion settings */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;translate:none!important}
  .hl::after{clip-path:none}
  .fx-line path.l{stroke-dashoffset:0}
  .fx-line path.f{opacity:1}
}