/* PrimeLink motion system - ONE set of timings and easings shared by the public site and the admin.
   Fast interaction 200ms | normal transition 400ms | large entrance 700ms.
   Only transform + opacity are animated (GPU friendly). Everything is switched off by prefers-reduced-motion. */
:root{
  --t-fast:200ms; --t-base:400ms; --t-slow:700ms;
  --ease:cubic-bezier(.22,.8,.24,1);          /* decelerating, used for almost everything */
  --ease-io:cubic-bezier(.65,0,.35,1);         /* symmetrical, used for loops */
  --pl-blue:#1470e0; --pl-cyan:#10b4f4;
}

/* ===== loading experience: thin progress line, never a blocking screen ===== */
#plbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:2100;pointer-events:none;opacity:0;transition:opacity var(--t-fast) linear}
#plbar.on{opacity:1}
#plbar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);transition:transform var(--t-base) var(--ease);background:linear-gradient(90deg,var(--pl-cyan),var(--pl-blue));box-shadow:0 0 10px rgba(16,180,244,.6)}
/* if the very first load takes longer than ~0.4s, show an indeterminate line (removed on window load) */
html.js:not(.loaded)::before{content:"";position:fixed;top:0;left:0;width:100%;height:3px;z-index:2100;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--pl-cyan),var(--pl-blue),transparent);transform:translateX(-100%);opacity:0;
  animation:plSlide 1.1s var(--ease-io) .4s infinite,plShow .01s linear .4s forwards}
@keyframes plSlide{to{transform:translateX(100%)}}
@keyframes plShow{to{opacity:1}}

/* ===== page-to-page transitions (direction aware) ===== */
html.js main{animation:plIn var(--t-base) var(--ease) backwards}
html.js[data-enter=next] main{animation-name:plInNext}
html.js[data-enter=prev] main{animation-name:plInPrev}
@keyframes plIn{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes plInNext{from{opacity:0;transform:translate3d(30px,0,0)}}
@keyframes plInPrev{from{opacity:0;transform:translate3d(-30px,0,0)}}
html.is-leaving main{opacity:0;transition:opacity 200ms ease-in,transform 230ms ease-in;pointer-events:none}
html.is-leaving[data-leave=next] main{transform:translate3d(-28px,0,0)}
html.is-leaving[data-leave=prev] main{transform:translate3d(28px,0,0)}
html.is-leaving:not([data-leave]) main{transform:translate3d(0,-10px,0)}

/* ===== buttons: lift, glow, press, ripple ===== */
.btn,.menu-btn{position:relative;overflow:hidden;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,filter var(--t-fast) ease}
.btn:active,.menu-btn:active{transform:scale(.97);transition-duration:90ms}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);pointer-events:none;animation:plRipple 560ms var(--ease) forwards}
@keyframes plRipple{to{transform:scale(1);opacity:0}}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,112,224,.28)}
  .btn:active{transform:translateY(0) scale(.97)}
  .btn.alt:hover,.btn-outline-primary:hover{box-shadow:0 8px 22px rgba(20,112,224,.2)}
}
/* light sweep across solid public buttons */
.btn:not(.alt):not(.btn-sm):not(.btn-light):not(.dropdown-toggle):not([class*=btn-outline])::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
@media (hover:hover){.btn:not(.alt):hover::after{transform:translateX(120%);transition:transform 700ms var(--ease)}}
.is-loading{pointer-events:none;position:relative}
.is-loading::before{content:"";width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:plSpin .7s linear infinite;flex:none;margin-right:.5rem}
@keyframes plSpin{to{transform:rotate(360deg)}}

/* ===== public navigation: underline indicator, animated hamburger, staggered mobile menu ===== */
.nav a.link{position:relative;transition:color var(--t-fast) ease,background-color var(--t-fast) ease,transform var(--t-fast) var(--ease)}
.nav a.link::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue,#1470e0),var(--cyan,#10b4f4));transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-base) var(--ease)}
.nav a.link.active::after{transform:scaleX(1)}
@media (hover:hover){.nav a.link:hover{transform:translateY(-1px)}.nav a.link:hover::after{transform:scaleX(1)}}
.menu-btn .bars{position:relative;display:block;width:20px;height:14px}
.menu-btn .bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t-base) var(--ease),opacity var(--t-fast) ease,top var(--t-base) var(--ease)}
.menu-btn .bars i:nth-child(1){top:0}.menu-btn .bars i:nth-child(2){top:6px}.menu-btn .bars i:nth-child(3){top:12px}
.menu-btn[aria-expanded=true] .bars i:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] .bars i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-btn[aria-expanded=true] .bars i:nth-child(3){top:6px;transform:rotate(-45deg)}
.nav ul{display:flex;visibility:hidden;opacity:0;transform:translate3d(0,-10px,0);pointer-events:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),visibility 0s linear var(--t-base)}
.nav ul.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
.nav li{opacity:0;transform:translate3d(0,8px,0);transition:opacity var(--t-fast) ease,transform var(--t-fast) ease}
.nav ul.open li{opacity:1;transform:none;transition:opacity var(--t-base) var(--ease) calc(var(--i,0)*45ms + 70ms),transform var(--t-base) var(--ease) calc(var(--i,0)*45ms + 70ms)}
.nav li:nth-child(1){--i:0}.nav li:nth-child(2){--i:1}.nav li:nth-child(3){--i:2}.nav li:nth-child(4){--i:3}
.nav li:nth-child(5){--i:4}.nav li:nth-child(6){--i:5}.nav li:nth-child(7){--i:6}.nav li:nth-child(8){--i:7}
@media (min-width:1200px){
  .nav ul,.nav ul.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:none}
  .nav li,.nav ul.open li{opacity:1;transform:none;transition:none}
}
.site-header{transition:box-shadow var(--t-base) ease,background-color var(--t-base) ease}
.site-header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 6px 24px rgba(10,42,110,.12)}
@supports (backdrop-filter:blur(8px)){.site-header.scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}}
[id]{scroll-margin-top:calc(var(--hdr,72px) + 12px)}

/* sideways reveal starts must never widen the page on phones */
main{overflow-x:clip}

/* ===== scroll reveals: fade + translate + stagger (state is removed once played so hover effects stay instant) ===== */
.js [data-reveal]{opacity:0;transform:translate3d(var(--rx,0),var(--ry,22px),0) scale(var(--rs,1));
  transition:opacity var(--t-slow) var(--ease) calc(var(--d,0)*70ms),transform var(--t-slow) var(--ease) calc(var(--d,0)*70ms);will-change:opacity,transform}
.js [data-reveal=scale]{--ry:10px;--rs:.96}
.js [data-reveal=left]{--rx:-28px;--ry:0px}
.js [data-reveal=right]{--rx:28px;--ry:0px}
.js [data-reveal=fade]{--ry:0px}
.js [data-reveal].in{opacity:1;transform:none}
.sec-head.seen h2 .ico{animation:plPop var(--t-slow) var(--ease) 120ms backwards}
.why li.seen .ico,.svc.seen .ring .ico,.plan.seen .badge .ico{animation:plPop var(--t-slow) var(--ease) 150ms backwards}
@keyframes plPop{0%{transform:scale(.5) rotate(-12deg);opacity:0}60%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:none}}
.js img.fx:not(.loaded){opacity:0}
img.fx{transition:opacity var(--t-base) ease,transform var(--t-slow) var(--ease)}
.img-zoom{overflow:hidden;border-radius:inherit}.img-zoom img{display:block;width:100%;height:auto;transition:transform var(--t-slow) var(--ease)}
@media (hover:hover){.img-zoom:hover img{transform:scale(1.05)}}

/* ===== hero: alive but quiet ===== */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-bg::after{content:"";position:absolute;inset:auto 0 0 0;height:35%;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(20,112,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(20,112,224,.06) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%)}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(40px);will-change:transform;opacity:.55}
.hero-bg .b1{width:360px;height:360px;right:-80px;top:-100px;background:radial-gradient(circle,rgba(16,180,244,.30),transparent 70%);animation:plDrift 16s var(--ease-io) infinite alternate}
.hero-bg .b2{width:300px;height:300px;left:-90px;bottom:-60px;background:radial-gradient(circle,rgba(20,112,224,.20),transparent 70%);animation:plDrift 20s var(--ease-io) -6s infinite alternate-reverse}
@keyframes plDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-40px,30px,0) scale(1.12)}}
.hero h1{animation:plRise var(--t-slow) var(--ease) 80ms backwards}
.hero h1 em{animation:plMask 900ms var(--ease) 220ms backwards}
.hero h1 span{animation:plRise var(--t-slow) var(--ease) 420ms backwards}
.hero .bar{transform-origin:0 50%;animation:plGrow var(--t-slow) var(--ease) 520ms backwards}
.hero p{animation:plRise var(--t-slow) var(--ease) 560ms backwards}
.hero .cta .btn:nth-child(1){animation:plRise var(--t-slow) var(--ease) 700ms backwards}
.hero .cta .btn:nth-child(2){animation:plRise var(--t-slow) var(--ease) 800ms backwards}
.hero svg.art{animation:plArt 900ms var(--ease) 300ms backwards}
@keyframes plRise{from{opacity:0;transform:translate3d(0,22px,0)}}
@keyframes plMask{from{clip-path:inset(0 100% 0 0);opacity:0;transform:translate3d(-12px,0,0)}to{clip-path:inset(0 0 0 0)}}
@keyframes plGrow{from{transform:scaleX(0)}}
@keyframes plArt{from{opacity:0;transform:translate3d(26px,10px,0) scale(.96)}}
.hero svg.art .fl{animation:plFloat 6s var(--ease-io) infinite alternate;transform-box:fill-box}
.hero svg.art .fl.b{animation-duration:7.5s;animation-delay:-2s}
.hero svg.art .needle{transform-origin:295px 150px;animation:plNeedle 4.5s var(--ease-io) infinite alternate}
.hero svg.art .led{animation:plBlink 2.4s ease-in-out infinite}
.hero svg.art .wf{animation:plWave 2.4s ease-in-out infinite}
.hero svg.art .wf.w2{animation-delay:.25s}.hero svg.art .wf.w3{animation-delay:.5s}
@keyframes plFloat{from{transform:translate3d(0,-4px,0)}to{transform:translate3d(0,6px,0)}}
@keyframes plNeedle{from{transform:rotate(-14deg)}to{transform:rotate(10deg)}}
@keyframes plBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes plWave{0%,100%{opacity:.35}50%{opacity:1}}
/* skyline strip: dashed network arcs, twinkling windows, one slow light sweep (only while on screen) */
.sky::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);transform:translateX(-100%);pointer-events:none}
.sky.live::after{animation:plSweep 7s var(--ease-io) infinite}
@keyframes plSweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.sky .arc{stroke-dasharray:3 9;animation:plDash 3s linear infinite;animation-play-state:paused}
.sky .tw{animation:plTwinkle 3.6s ease-in-out infinite;animation-play-state:paused}
.sky.live .arc,.sky.live .tw{animation-play-state:running}
@keyframes plDash{to{stroke-dashoffset:-24}}
@keyframes plTwinkle{0%,100%{opacity:.85}50%{opacity:.2}}

/* ===== cards: lift, glow, animated icons (hover on pointer devices, tap on touch) ===== */
.plan,.job,.doc,.svc{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) ease,background-color var(--t-base) ease}
.plan .badge .ico,.svc .ring,.svc .ring .ico,.why li .ico,.doc .ico,.sec-head h2 .ico{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.plan:is(:hover,.is-active){transform:translateY(-6px);box-shadow:0 0 0 1px var(--c1),0 18px 38px color-mix(in srgb,var(--c1) 26%,transparent)}
.plan:is(:hover,.is-active) .badge .ico{transform:scale(1.18) rotate(-6deg)}
.svc:is(:hover,.is-active) .ring{transform:scale(1.08);box-shadow:0 0 0 10px color-mix(in srgb,var(--cyan,#10b4f4) 26%,transparent),0 10px 24px rgba(10,42,110,.14)}
.svc:is(:hover,.is-active) .ring .ico{transform:rotate(-8deg) scale(1.1)}
.job:is(:hover,.is-active){transform:translateY(-4px);border-color:var(--blue,#1470e0);box-shadow:0 0 0 1px var(--blue,#1470e0),0 16px 34px rgba(20,112,224,.16)}
.doc:is(:hover,.is-active){transform:translateY(-3px);border-color:var(--blue,#1470e0)}
.doc:is(:hover,.is-active)>.ico{transform:translateX(5px)}
.why li:is(:hover,.is-active) .ico{transform:translateY(-4px) scale(1.12)}
.contact .card{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
@media (hover:hover){.contact .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,42,110,.28)}}
.billing{position:relative}
.billing .pill{position:absolute;top:4px;bottom:4px;left:0;border-radius:99px;background:var(--blue,#1470e0);transition:transform var(--t-base) var(--ease),width var(--t-base) var(--ease);z-index:0}
.billing.has-pill button{position:relative;z-index:1;transition:color var(--t-fast) ease}
.billing.has-pill button.on{background:transparent}
.price.flash{animation:plFlash 500ms var(--ease)}
@keyframes plFlash{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.stat b{transition:transform var(--t-base) var(--ease)}
.social a{transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) ease,color var(--t-fast) ease}
#toTop{transition:opacity var(--t-base) ease,transform var(--t-base) var(--ease),visibility 0s linear var(--t-base);transform:translateY(12px);visibility:hidden}
#toTop.show{transform:none;visibility:visible;transition-delay:0s}
@media (hover:hover){#toTop:hover{transform:translateY(-3px)}}

/* ===== micro-interactions: fields, switches, dropdowns, modals, messages, tooltips ===== */
.form-control,.form-select,.input-group-text{transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease,background-color var(--t-fast) ease}
.form-control:focus,.form-select:focus{border-color:var(--blue,#1470e0);box-shadow:0 0 0 4px rgba(20,112,224,.16)}
.form-label{transition:color var(--t-fast) ease}
.mb-2:focus-within>.form-label,.mb-3:focus-within>.form-label,[class*=col-]:focus-within>.form-label{color:var(--blue,#1470e0)}
.form-check-input{transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease,background-position var(--t-fast) ease,box-shadow var(--t-fast) ease,transform var(--t-fast) var(--ease)}
.form-check-input:active{transform:scale(.88)}
.form-check-input:checked{animation:plCheck var(--t-fast) var(--ease)}
@keyframes plCheck{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:none}}
.dropdown-menu.show{animation:plMenu var(--t-fast) var(--ease)}
@keyframes plMenu{from{opacity:0;transform:translate3d(0,-6px,0) scale(.98)}}
.modal.fade .modal-dialog{transform:translate3d(0,22px,0) scale(.97);transition:transform var(--t-base) var(--ease)}
.modal.show .modal-dialog{transform:none}
.modal-backdrop.fade{transition:opacity var(--t-base) ease}
@media (min-width:768px){.modal-backdrop.show{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}
@media (max-width:575.98px){.modal.fade .modal-fullscreen-sm-down{transform:translate3d(0,40px,0)}.modal.show .modal-fullscreen-sm-down{transform:none}}
#mErr:not([hidden]),.alert,.msg-in{animation:plMsg 380ms var(--ease)}
@keyframes plMsg{0%{opacity:0;transform:translate3d(0,-8px,0)}35%{transform:translate3d(-4px,0,0)}65%{transform:translate3d(3px,0,0)}100%{opacity:1;transform:none}}
#mDone:not([hidden]){display:flex;align-items:center;gap:14px;animation:plPopIn var(--t-base) var(--ease)}
@keyframes plPopIn{from{opacity:0;transform:scale(.94) translate3d(0,8px,0)}}
.done-ico{width:46px;height:46px;flex:none}
.done-ico circle{fill:none;stroke:#12b76a;stroke-width:3;stroke-dasharray:140;stroke-dashoffset:140;animation:plDraw 600ms var(--ease) forwards}
.done-ico path{fill:none;stroke:#12b76a;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:plDraw 400ms var(--ease) 350ms forwards}
@keyframes plDraw{to{stroke-dashoffset:0}}
.toast.show{animation:plToast var(--t-base) var(--ease)}
@keyframes plToast{from{opacity:0;transform:translate3d(24px,0,0)}}
[data-tip]{position:relative}
@media (hover:hover){
  [data-tip]::before{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate3d(-50%,4px,0);padding:5px 10px;border-radius:8px;background:#0a2a6e;color:#fff;font:600 .75rem/1.2 var(--head,system-ui);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--t-fast) ease,transform var(--t-fast) var(--ease);z-index:70}
  [data-tip]:is(:hover,:focus-visible)::before{opacity:1;transform:translate3d(-50%,0,0)}
}
.tooltip{--bs-tooltip-bg:#0a2a6e}

/* ===== admin additions (same tokens) ===== */
.sidebar a.nl{position:relative;transition:background-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-fast) var(--ease)}
.sidebar a.nl i{transition:transform var(--t-fast) var(--ease)}
@media (hover:hover){.sidebar a.nl:hover{transform:translateX(3px)}.sidebar a.nl:hover i{transform:scale(1.15)}}
.sidebar a.nl.active::before{content:"";position:absolute;left:-.75rem;top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:var(--pl-cyan);animation:plGrowY var(--t-base) var(--ease)}
@keyframes plGrowY{from{transform:scaleY(0)}}
.sidebar{transition:transform var(--t-base) var(--ease),visibility 0s linear var(--t-base)}
.sidebar.open{transition:transform var(--t-base) var(--ease),visibility 0s}
.sb-backdrop{transition:opacity var(--t-base) ease}
.table-hover>tbody>tr>*{transition:background-color var(--t-fast) ease}
.star{transition:transform var(--t-fast) var(--ease),color var(--t-fast) ease}.star:active{transform:scale(1.35)}
.kpi{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
@media (hover:hover){.kpi:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,42,110,.14)}}
.kpi .ico{transition:transform var(--t-base) var(--ease)}.kpi:hover .ico{transform:rotate(-8deg) scale(1.08)}
.login-wrap form{animation:plRise var(--t-slow) var(--ease) 100ms backwards}
.login-art{overflow:hidden;position:relative}
.login-art::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;bottom:-140px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);animation:plDrift 14s var(--ease-io) infinite alternate}

/* ===== phones & tablets: calmer ===== */
@media (max-width:767.98px){
  .js [data-reveal]{--ry:14px}
  .js [data-reveal=left]{--rx:-14px}.js [data-reveal=right]{--rx:14px}
  .hero-bg .grid,.hero-bg .b2{display:none}
  .hero-bg .blob{filter:blur(28px)}
  .hero svg.art .fl{animation-duration:8s}
  .sky::after{display:none}
  .btn:not(.alt)::after{display:none}
}

/* ===== accessibility: essential state changes stay, motion goes ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .hero-bg canvas,.hero-bg .blob,.ripple,.sky::after{display:none!important}
  html.js:not(.loaded)::before{display:none}
}