/* =========================================================
   SunlineReg — visual refresh & animations
   Loaded after style.css. Palette and layout are unchanged.
   ========================================================= */
:root{
  --navy:#0B2A5B;
  --cyan:#22C7D9;
  --grad:linear-gradient(90deg,var(--blue) 0%,var(--cyan) 100%);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
body{overflow-x:hidden;}

/* ---------- Scroll progress ---------- */
.fx-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  background:var(--grad);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 12px rgba(26,174,245,.55);
}

/* ---------- Intro loader ---------- */
.fx-loader{
  position:fixed;inset:0;z-index:300;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease-out),visibility .6s;
}
.fx-loader.done{opacity:0;visibility:hidden;}
.fx-loader .logo-shine{width:min(300px,70vw);opacity:0;transform:translateY(16px) scale(.92);animation:fx-logo-in .8s var(--ease-out) .1s forwards;}
.fx-loader .logo-shine::after{animation:fx-shine-pass 1s ease-in-out .6s 1 both;}
@keyframes fx-logo-in{to{opacity:1;transform:none}}
@keyframes fx-ray{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

/* ---------- Logo (original image, animated as a whole) ---------- */
.logo.brand{display:inline-flex;align-items:center;}
.logo-shine{position:relative;display:inline-block;line-height:0;}
.logo-shine img{width:100%;height:auto;}
.logo.brand .logo-shine{width:auto;}
.logo.brand img{height:58px;width:auto;transition:height .35s var(--ease-out),transform .45s var(--ease-spring),filter .3s;}
.logo-shine::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%);
  background-size:250% 100%;background-position:150% 0;
  -webkit-mask:url(logo-sunlinereg-sm.png) center/100% 100% no-repeat;mask:url(logo-sunlinereg-sm.png) center/100% 100% no-repeat;
}
.logo.brand .logo-shine::after{animation:fx-shine-pass 1.2s ease-in-out 2.2s 1 both, fx-shine-pass 1.2s ease-in-out 9s infinite;}
.logo.brand:hover .logo-shine::after{animation:fx-shine-pass .9s ease-in-out;}
.logo.brand:hover img{transform:translateY(-2px) scale(1.03);filter:drop-shadow(0 6px 12px rgba(26,174,245,.25));}
@keyframes fx-shine-pass{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes fx-shine{to{background-position:-200% 0}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  transition:padding .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.site-header.scrolled{padding:9px 0;box-shadow:0 10px 30px rgba(17,24,39,.07);}
.site-header.scrolled .logo.brand img{height:46px;}

.main-nav a{position:relative;border-bottom:none;padding-bottom:6px;transition:color .2s;}
.main-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out);
}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1);transform-origin:left;}

.wa-icon{position:relative;transition:transform .25s var(--ease-spring);}
.wa-icon::before,.wa-icon::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:fx-ring 2.4s ease-out infinite;
}
.wa-icon::after{animation-delay:1.2s;}
.wa-icon:hover{transform:scale(1.12) rotate(-8deg);}
@keyframes fx-ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}

.lang-menu{display:block;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s;}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:none;}
.lang-btn svg{transition:transform .25s var(--ease-out);}
.lang-switch.open .lang-btn svg{transform:rotate(180deg);}

/* ---------- Hero background ---------- */
.hero-section{position:relative;isolation:isolate;padding-bottom:10px;}
.fx-hero-bg{position:absolute;inset:-80px 0 -40px;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent);}
.fx-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;}
.fx-blob.b1{width:460px;height:460px;background:#D3EEFD;top:-60px;right:-80px;animation:fx-float1 14s ease-in-out infinite;}
.fx-blob.b2{width:340px;height:340px;background:#E3F8FB;bottom:-40px;left:-120px;animation:fx-float2 17s ease-in-out infinite;}
.fx-blob.b3{width:200px;height:200px;background:#FFF6CC;top:120px;left:42%;opacity:.45;animation:fx-float1 12s ease-in-out infinite reverse;}
@keyframes fx-float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.08)}}
@keyframes fx-float2{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-30px)}}
.fx-sunrays{
  position:absolute;top:-260px;right:-260px;width:760px;height:760px;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(26,174,245,.08) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 68%);mask:radial-gradient(circle,#000 0,transparent 68%);
  animation:fx-rotate 80s linear infinite;
}
@keyframes fx-rotate{to{transform:rotate(360deg)}}
.fx-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(26,174,245,.18) 1px,transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%,transparent 90%);mask:linear-gradient(180deg,transparent,#000 30%,transparent 90%);
  opacity:.5;
}

/* ---------- Hero content ---------- */
.badge{position:relative;overflow:hidden;}
.badge::after{
  content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  animation:fx-sweep 3.6s ease-in-out 1.6s infinite;
}
.badge svg{animation:fx-wiggle 3.6s ease-in-out infinite;}
@keyframes fx-sweep{0%{left:-60%}45%,100%{left:130%}}
@keyframes fx-wiggle{0%,80%,100%{transform:translateX(0)}85%{transform:translateX(3px)}90%{transform:translateX(-2px)}95%{transform:translateX(1px)}}

.hero-title .line-blue{
  background:linear-gradient(90deg,var(--blue) 0%,var(--cyan) 45%,var(--blue) 90%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fx-shine 6s linear infinite;
}
.fx-js .hero-title .line-blue,.fx-js .hero-title .line-black{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(30px);}
.fx-ready .hero-title .line-blue{animation:fx-line .95s var(--ease-out) .15s forwards,fx-shine 6s linear 1.2s infinite;}
.fx-ready .hero-title .line-black{animation:fx-line .95s var(--ease-out) .32s forwards;}
@keyframes fx-line{to{opacity:1;clip-path:inset(-10% -5% -20% -5%);transform:none;}}

.feature{transition:transform .35s var(--ease-out);}
.feature:hover{transform:translateY(-4px);}
.feature-icon{position:relative;transition:transform .45s var(--ease-spring),background .3s,color .3s,box-shadow .3s;}
.feature-icon::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px dashed rgba(26,174,245,.45);
  animation:fx-rotate 12s linear infinite;opacity:0;transition:opacity .3s;
}
.feature:hover .feature-icon{background:var(--blue);color:#fff;transform:rotate(-10deg) scale(1.08);box-shadow:0 10px 22px rgba(26,174,245,.35);}
.feature:hover .feature-icon::after{opacity:1;}

/* How it works card */
.how-card{
  position:relative;box-shadow:0 18px 50px rgba(17,24,39,.07);
  transition:box-shadow .4s var(--ease-out),transform .4s var(--ease-out);
}
.how-card::before{
  content:"";position:absolute;inset:-1px;border-radius:19px;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--fx-angle,0deg),transparent 0 70%,var(--blue) 80%,var(--cyan) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:fx-angle 6s linear infinite;
}
@property --fx-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
@keyframes fx-angle{to{--fx-angle:360deg}}
.how-card:hover{box-shadow:0 26px 60px rgba(26,174,245,.14);transform:translateY(-3px);}
.step:not(:last-child)::after{
  content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;margin-left:0;
  background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease-out);
}
.how-card.fx-in .step:not(:last-child)::after{transform:scaleY(1);}
.how-card.fx-in .step:nth-child(3)::after{transition-delay:.7s;}
.how-card.fx-in .step:nth-child(2)::after{transition-delay:.25s;}
.step-num{transition:background .3s,color .3s,transform .4s var(--ease-spring),box-shadow .3s;}
.step:hover .step-num{background:var(--blue);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px rgba(26,174,245,.15);}
.step-body h4{transition:color .25s;}
.step:hover .step-body h4{color:var(--blue-dark);}
.how-card .step-num{animation:fx-num-pop 3.6s ease-in-out infinite;}
.how-card .step:nth-child(3) .step-num{animation-delay:1.2s}
.how-card .step:nth-child(4) .step-num{animation-delay:2.4s}
@keyframes fx-num-pop{0%,25%,100%{box-shadow:0 0 0 0 rgba(26,174,245,0)}10%{box-shadow:0 0 0 7px rgba(26,174,245,.18)}}

/* ---------- Road with driving car ---------- */
.fx-road{position:relative;height:64px;margin:34px 0 0;overflow:hidden;}
.fx-road::before{
  content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;
  background:repeating-linear-gradient(90deg,var(--blue) 0 22px,transparent 22px 40px);
  opacity:.35;animation:fx-road 1.2s linear infinite;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
@keyframes fx-road{to{background-position:-40px 0}}
.fx-car{
  position:absolute;bottom:14px;left:0;width:84px;height:40px;color:var(--blue);
  animation:fx-car-drive 11s cubic-bezier(.45,.05,.55,.95) infinite;
}
.fx-car .wheel{transform-box:fill-box;transform-origin:center;animation:fx-rotate .6s linear infinite;}
.fx-car .body{animation:fx-bump .5s ease-in-out infinite;}
@keyframes fx-bump{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes fx-car-drive{
  0%{transform:translateX(-120px)}
  100%{transform:translateX(calc(100vw + 40px))}
}
.fx-plate{
  position:absolute;bottom:22px;right:8%;display:flex;align-items:center;
  height:26px;border:2px solid var(--text);border-radius:5px;background:#fff;
  font:700 13px 'Poppins',sans-serif;letter-spacing:.06em;overflow:hidden;opacity:.9;
}
.fx-plate i{display:flex;align-items:flex-end;justify-content:center;width:16px;height:100%;background:#1D4ED8;color:#fff;font-style:normal;font-size:8px;padding-bottom:2px;}
.fx-plate span{padding:0 8px;}

/* ---------- Process ---------- */
.process-heading h2 .fx-u{position:relative;white-space:nowrap;}
.process-heading h2 .fx-u svg{position:absolute;left:0;bottom:-10px;width:100%;height:12px;overflow:visible;}
.process-heading h2 .fx-u path{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.2s var(--ease-out) .3s;}
.process-heading.fx-in h2 .fx-u path{stroke-dashoffset:0;}

.process-card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);transform-style:preserve-3d;will-change:transform;}
.process-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .8s var(--ease-out);
}
.process-step:hover .process-card::after{transform:translateX(120%);}
.process-step:hover .process-card{box-shadow:0 22px 44px rgba(26,174,245,.25);}
.process-card img{transition:transform .7s var(--ease-out);}
.process-step:hover .process-card img{transform:scale(1.07);}
.process-step .fx-num{
  position:absolute;top:-10px;left:-10px;z-index:3;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;font:700 13px 'Poppins',sans-serif;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(26,174,245,.4);
  transform:scale(0);transition:transform .5s var(--ease-spring);
}
.process-step.fx-in .fx-num{transform:scale(1);transition-delay:calc(var(--i,0) * .12s + .35s);}
.process-step h4{transition:color .25s;}
.process-step:hover h4{color:var(--blue-dark);}

.process-arrow svg path{stroke-dasharray:4 4;animation:fx-dash 1s linear infinite;}
.process-arrow{animation:fx-nudge 1.6s ease-in-out infinite;}
@keyframes fx-dash{to{stroke-dashoffset:-16}}
@keyframes fx-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* Tooltip: animated instead of display toggle */
.process-tooltip{
  display:block;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(10px) scale(.96);
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility .28s;
}
.process-step:hover .process-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);}

/* ---------- Request block ---------- */
.request-block{position:relative;overflow:hidden;isolation:isolate;}
.request-block::before{
  content:"";position:absolute;width:380px;height:380px;right:-140px;top:-160px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(26,174,245,.14),transparent 70%);animation:fx-float1 12s ease-in-out infinite;
}
.field label{transition:color .2s;}
.field:focus-within label{color:var(--blue-dark);}
.field input{transition:border-color .2s,box-shadow .25s,transform .25s var(--ease-out);}
.field input:hover{border-color:#BFE6FB;}
.field input:focus{box-shadow:0 0 0 4px rgba(26,174,245,.14);transform:translateY(-1px);}

.submit-btn{position:relative;overflow:hidden;transition:background .2s,transform .25s var(--ease-out),box-shadow .25s;}
.quote-submit-btn{background:linear-gradient(90deg,var(--blue),var(--blue-dark),var(--blue));background-size:200% 100%;animation:fx-btn-bg 5s ease-in-out infinite;}
@keyframes fx-btn-bg{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.submit-btn::after{
  content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  animation:fx-sweep 3.2s ease-in-out infinite;
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(26,174,245,.35);}
.submit-btn:active{transform:translateY(0) scale(.99);}
.fx-arrow{display:inline-block;transition:transform .3s var(--ease-out);}
.submit-btn:hover .fx-arrow{transform:translateX(6px);}

.trust-check{transition:background .3s,color .3s,transform .4s var(--ease-spring);}
.trust-check path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .6s var(--ease-out);}
.trust-row.fx-in .trust-check path{stroke-dashoffset:0;}
.trust-row.fx-in span:nth-child(2) .trust-check path{transition-delay:.2s}
.trust-row.fx-in span:nth-child(3) .trust-check path{transition-delay:.4s}
.trust-row > span:hover .trust-check{background:var(--blue);color:#fff;transform:scale(1.15);}

/* ---------- Modal ---------- */
.app-modal-overlay:not([hidden]){animation:fx-fade .3s ease-out;}
.app-modal-overlay:not([hidden]) .app-modal{animation:fx-pop .5s var(--ease-spring);}
.app-modal-icon{animation:fx-pop .6s var(--ease-spring) .15s both;}
@keyframes fx-fade{from{opacity:0}}
@keyframes fx-pop{from{opacity:0;transform:scale(.85) translateY(20px)}}

/* ---------- Footer ---------- */
.footer-links a{position:relative;}
.footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--blue);transform:scaleX(0);transition:transform .3s var(--ease-out);}
.footer-links a:hover::after{transform:scaleX(1);}
.footer-credit a svg{transition:transform .4s var(--ease-spring);}
.footer-credit a:hover svg{transform:translate(3px,-3px) rotate(-12deg);}

/* ---------- Scroll reveal ---------- */
.fx-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * .1s);}
.fx-reveal.fx-left{transform:translateX(-30px);}
.fx-reveal.fx-right{transform:translateX(40px);}
.fx-reveal.fx-zoom{transform:scale(.92) translateY(20px);}
.fx-reveal.fx-in{opacity:1;transform:none;}
.process-step.fx-reveal.fx-in .process-card{animation-play-state:running;}

/* ---------- Back to top ---------- */
.fx-top{
  position:fixed;right:22px;bottom:22px;z-index:70;width:46px;height:46px;border-radius:50%;
  border:none;background:#fff;color:var(--blue);box-shadow:0 10px 26px rgba(17,24,39,.15);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;
  transition:opacity .3s,transform .4s var(--ease-spring),background .2s,color .2s;
}
.fx-top.show{opacity:1;transform:none;pointer-events:auto;}
.fx-top:hover{background:var(--blue);color:#fff;}
.fx-top svg{width:20px;height:20px;}
.fx-top circle.ring{stroke-dasharray:138;stroke-dashoffset:138;}

@media (max-width:960px){
  .main-nav{display:flex;opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility .25s;}
  .site-header.nav-open .main-nav{opacity:1;visibility:visible;transform:none;}
  .main-nav a::after{display:none;}
  .main-nav a.active{color:var(--blue);}
}
@media (max-width:640px){
  .logo.brand img,.site-header.scrolled .logo.brand img{height:44px;}
  .site-header .container{gap:10px;padding:0 16px;}
  .header-right{gap:12px;}
  .logo-tag{display:none;}
  .header-contact .details{display:none;}
  .fx-plate{display:none;}
  .fx-sunrays{width:500px;height:500px;top:-200px;right:-240px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .fx-reveal{opacity:1;transform:none;}
  .fx-js .hero-title .line-blue,.fx-js .hero-title .line-black{opacity:1;clip-path:none;transform:none;}
  .fx-loader{display:none;}
}

.process-heading h2{margin-bottom:26px;}

/* =========================================================
   Registration process — timeline with animated illustrations
   ========================================================= */
.process-section{position:relative;padding:76px 0 56px;
  background:linear-gradient(180deg,#fff 0%,var(--blue-bg) 45%,#fff 100%);}
.process-heading{margin-bottom:28px;}
.process-heading p{display:flex;align-items:center;justify-content:center;gap:8px;}
.process-heading p::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(26,174,245,.5);animation:fx-live 1.8s ease-out infinite;}
@keyframes fx-live{to{box-shadow:0 0 0 10px rgba(26,174,245,0)}}

.process-card{background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(17,24,39,.06);animation:none!important;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s;}
.process-card .pa{width:100%;height:100%;display:block;}
.process-step h4{transition:color .3s;}

/* Number badges */
.process-step .fx-num{
  width:34px;height:34px;background:#fff;color:var(--blue-dark);border:2px solid #BFE6FB;box-shadow:none;
  transition:transform .5s var(--ease-spring),background .35s,color .35s,border-color .35s,box-shadow .35s;font-size:14px;
}
.process-step.is-done .fx-num{background:var(--blue-bg);border-color:var(--blue);}
.process-step.is-active .fx-num{background:var(--blue);color:#fff;border-color:var(--blue);animation:fx-badge-pulse 1.6s ease-out infinite;}
@keyframes fx-badge-pulse{0%{box-shadow:0 0 0 0 rgba(26,174,245,.45)}100%{box-shadow:0 0 0 12px rgba(26,174,245,0)}}
.process-step.is-active .process-card{transform:translateY(-8px);border-color:#BFE6FB;box-shadow:0 24px 46px rgba(26,174,245,.22);}
.process-step.is-active h4{color:var(--blue-dark);}

/* Track */
.fx-track{position:absolute;top:15px;height:4px;border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#BFE6FB 0 10px,transparent 10px 18px);}
.fx-track-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:var(--grad);
  transition:width 1.1s var(--ease-out);box-shadow:0 0 10px rgba(26,174,245,.5);}
.fx-track-car{position:absolute;top:-30px;left:0;width:44px;height:22px;color:var(--blue);margin-left:-22px;
  transition:left 1.1s var(--ease-out);}
.fx-track-car svg{width:100%;height:100%;display:block;}
.fx-track-car .wheel{transform-box:fill-box;transform-origin:center;animation:fx-rotate .5s linear infinite;}

@media (min-width:961px){
  .process-section .container{max-width:1300px;}
  .process-steps{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;position:relative;padding-top:64px;flex-wrap:nowrap;}
  .process-arrow{display:none!important;}
  .process-step{width:auto!important;}
  .process-card{width:100%!important;height:auto!important;aspect-ratio:11/8;border-radius:22px;}
  .process-step .fx-num{top:-64px;left:50%;margin-left:-17px;}
  .process-step h4{margin-top:16px;}
}

/* Phones & tablets: vertical timeline, details shown inline */
@media (max-width:960px){
  .process-steps{display:flex!important;flex-direction:column;align-items:stretch;gap:26px;position:relative;padding-left:50px;}
  .process-steps::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;width:3px;border-radius:3px;
    background:repeating-linear-gradient(180deg,#BFE6FB 0 10px,transparent 10px 18px);}
  .fx-track,.process-arrow{display:none!important;}
  .process-step{width:auto!important;align-items:flex-start;text-align:left;}
  .process-card{width:100%!important;height:auto!important;aspect-ratio:11/8;max-width:420px;border-radius:20px;}
  .process-step .fx-num{top:0;left:-50px;}
  .process-step h4{margin-top:12px;}
  .process-tooltip{position:static;display:block;opacity:1;visibility:visible;pointer-events:auto;transform:none!important;
    width:auto;max-width:420px;margin-top:8px;padding:12px 14px;box-shadow:none;background:#fff;}
  .process-tooltip::after{display:none;}
  .process-heading p{display:none;}
}

/* ---------- Illustration animations ---------- */
.pa-spark path,.pa-bg,.pa-badge,.pa-mark,.pa-plate,.pa-keys,.pa-confetti > *,.pa-pen,.pa-glint{transform-box:fill-box;}
.pa-spark path{transform-origin:center;animation:pa-twinkle 2.4s ease-in-out infinite;}
.pa-spark circle{animation:pa-float 3s ease-in-out infinite;}
.pa-spark circle:nth-of-type(2){animation-delay:1s;}
@keyframes pa-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
@keyframes pa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pa-bg{transform-origin:center;animation:pa-breathe 5s ease-in-out infinite;}
@keyframes pa-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.pa-badge{transform-origin:center;animation:pa-pop 3.2s var(--ease-spring) infinite;}
@keyframes pa-pop{0%,8%{transform:scale(0)}22%,88%{transform:scale(1)}100%{transform:scale(0)}}
.pa-check{stroke-dasharray:24;stroke-dashoffset:24;animation:pa-check 3.2s ease-out infinite;}
@keyframes pa-check{0%,22%{stroke-dashoffset:24}36%,100%{stroke-dashoffset:0}}

/* 1 documents */
.pa-doc-a{animation:pa-doc 3.2s var(--ease-out) infinite;}
.pa-doc-b{animation:pa-doc 3.2s var(--ease-out) .25s infinite;}
@keyframes pa-doc{0%,100%{transform:translateY(14px)}35%,75%{transform:translateY(-6px)}}
.pa-pen{transform-origin:20% 90%;animation:pa-write 1.2s ease-in-out infinite;}
@keyframes pa-write{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,2px) rotate(-4deg)}50%{transform:translate(2px,-1px) rotate(3deg)}75%{transform:translate(-2px,1px) rotate(-2deg)}}

/* 2 ITV */
.pa-beam{animation:pa-scan 2.6s ease-in-out infinite;}
@keyframes pa-scan{0%,100%{transform:translateX(52px)}50%{transform:translateX(168px)}}
.pa-lift{animation:pa-lift 3.2s ease-in-out infinite;}
@keyframes pa-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pa-2 .pa-car circle:nth-of-type(odd){}

/* 3 ficha técnica */
.pa-draw{stroke-dasharray:240;stroke-dashoffset:240;animation:pa-draw 3.2s ease-in-out infinite;}
@keyframes pa-draw{0%{stroke-dashoffset:240}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
.pa-stamp{animation:pa-stamp 3.2s cubic-bezier(.5,0,.3,1) infinite;}
@keyframes pa-stamp{0%,20%{transform:translateY(-14px) rotate(-8deg)}38%{transform:translateY(18px) rotate(0)}44%{transform:translateY(15px)}62%,100%{transform:translateY(-14px) rotate(-8deg)}}
.pa-mark{transform-origin:center;opacity:0;animation:pa-mark 3.2s ease-out infinite;}
@keyframes pa-mark{0%,37%{opacity:0;transform:scale(.6)}42%{opacity:1;transform:scale(1.08)}50%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* 4 tax */
.pa-coin{animation:pa-coin 2.4s cubic-bezier(.5,0,.75,0) infinite;}
@keyframes pa-coin{0%{transform:translateY(-70px);opacity:0}15%{opacity:1}55%{transform:translateY(0)}62%{transform:translateY(-5px)}70%,90%{transform:translateY(0);opacity:1}100%{opacity:0}}
.pa-receipt{animation:pa-print 3.6s ease-in-out infinite;}
@keyframes pa-print{0%,100%{transform:translateY(6px)}50%{transform:translateY(-6px)}}
.pa-4 .pa-badge{animation:pa-spin3d 4s ease-in-out infinite;transform-origin:center;}
@keyframes pa-spin3d{0%,60%,100%{transform:scaleX(1)}70%{transform:scaleX(-1)}80%{transform:scaleX(1)}}

/* 5 DGT */
.pa-plate{transform-origin:center;animation:pa-plate 3.6s var(--ease-out) infinite;}
@keyframes pa-plate{0%{transform:translateY(-20px) scale(.9);opacity:0}18%,90%{transform:none;opacity:1}100%{opacity:0}}
.pa-glint{animation:pa-glint 3.6s ease-in-out infinite;}
@keyframes pa-glint{0%,30%{transform:translateX(-10px);opacity:0}35%{opacity:.7}60%,100%{transform:translateX(150px);opacity:0}}
.pa-keys{transform-origin:50% 0;animation:pa-swing 2.2s ease-in-out infinite;}
@keyframes pa-swing{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-12deg)}}
.pa-confetti > *{transform-origin:center;animation:pa-confetti 3.6s ease-out infinite;}
.pa-confetti > *:nth-child(2){animation-delay:.15s}.pa-confetti > *:nth-child(3){animation-delay:.3s}.pa-confetti > *:nth-child(4){animation-delay:.1s}.pa-confetti > *:nth-child(5){animation-delay:.25s}
@keyframes pa-confetti{0%,15%{transform:translateY(20px) rotate(0);opacity:0}30%{opacity:1}70%{transform:translateY(-6px) rotate(180deg);opacity:1}100%{transform:translateY(-12px) rotate(260deg);opacity:0}}

/* Calmer when not active (desktop) */
@media (min-width:961px){
  .process-step:not(.is-active) .pa *{animation-duration:6s;}
}