/* ===== SM Pixel — all-white theme, brand-colour type, animations ===== */
:root{
  --ink:#0b153a;            /* brand navy (was near-black) */
  --muted-on-dark:#515b80;  /* former "on dark" greys now read on white */
  --line-on-dark:rgba(4,59,250,0.16);
  --brand-grad:linear-gradient(120deg,#043bfa,#00ddfc);
}
html,body{background:#fff;}

/* ---------- Typography in brand colours ---------- */
h1,h2,h3,h4,.display{color:var(--navy);}
.grad,.page-hero h1 .grad,.home-hero h1 .grad,.pf-head h1 .grad{
  background:linear-gradient(110deg,#043bfa 0%,#0a6cff 45%,#00a8f0 75%,#043bfa 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:gradShift 6s ease-in-out infinite alternate;
}
.kicker,.page-hero .kicker,.pf-kicker,.dark-panel .kicker{color:var(--blue) !important;}
.dark-panel .kicker[style]{color:var(--blue) !important;}
.crumb,.crumb a{color:var(--muted);} .crumb span{color:var(--blue); font-weight:600;}
.crumb a:hover{color:var(--blue);}
p,.lead{color:var(--muted);}
.nav-links a:hover{color:var(--blue);}

/* ---------- Dark areas → white ---------- */
.page-hero,section.home-hero,section.contact-hero,.svc-hero{background:#fff !important; color:var(--text) !important; position:relative; overflow:hidden;}
.page-hero h1,.page-hero h2,.home-hero h1,.contact-hero h1,.svc-hero h1{color:var(--navy) !important;}
.page-hero p,.home-hero p,.home-hero p.lead,.contact-hero p,.svc-hero p,.eyebrow-line{color:var(--muted) !important;}
.page-hero .pixel-grid,.home-hero .pixel-grid{background-image:radial-gradient(rgba(4,59,250,0.16) 1px, transparent 1px) !important;}
/* soft animated brand glow behind heroes */
.page-hero::before,section.home-hero::before,section.contact-hero::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%; left:-140px; top:-220px;
  background:radial-gradient(circle,rgba(0,221,252,0.22),transparent 65%); animation:orbA 14s ease-in-out infinite alternate; pointer-events:none;}
.page-hero::after,section.home-hero::after,section.contact-hero::after{
  content:""; position:absolute; width:560px; height:560px; border-radius:50%; right:-160px; bottom:-300px;
  background:radial-gradient(circle,rgba(4,59,250,0.16),transparent 65%); animation:orbB 17s ease-in-out infinite alternate; pointer-events:none;}
.page-hero .inner,.home-hero .wrap,.contact-hero .wrap{position:relative; z-index:2;}
.svc-hero::before{opacity:0.10 !important; filter:blur(3px);}
.svc-hero::after{background:linear-gradient(180deg,rgba(255,255,255,0.7),#fff) !important;}
.svc-hero p{color:var(--muted) !important;}

/* dark CTA / portfolio panels → white cards with brand outline */
.dark-panel{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,rgba(4,59,250,0.55),rgba(0,221,252,0.55)) border-box !important;
  border:1.5px solid transparent !important; color:var(--text) !important; box-shadow:0 30px 60px -34px rgba(4,59,250,0.35);}
.dark-panel h2{color:var(--navy) !important;}
.dark-panel p{color:var(--muted) !important;}
.mark-box{background:radial-gradient(circle at 30% 20%,rgba(0,221,252,0.16),transparent 60%),#f4f7ff !important; border:1px solid var(--line) !important;}
.mark-box img{animation:floatY 6s ease-in-out infinite;}

/* ---------- Buttons ---------- */
.btn-ghost{color:var(--blue) !important; border:1.5px solid rgba(4,59,250,0.4) !important; background:#fff;}
.btn-dark,.nav-cta,.svc-explore,.pf-view{background:var(--brand-grad) !important; color:#fff !important;}
.btn-dark:hover,.nav-cta:hover{filter:brightness(1.06); background:var(--brand-grad) !important;}
.btn{position:relative; overflow:hidden;}
.btn::after,.nav-cta::after,.svc-explore::after,.pf-view::after{content:""; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.45),transparent); transform:skewX(-20deg); transition:left .6s ease; pointer-events:none;}
.btn:hover::after,.nav-cta:hover::after,.svc-explore:hover::after,.pf-view:hover::after{left:130%;}
.nav-cta,.svc-explore,.pf-view{position:relative; overflow:hidden;}

/* ---------- Icon chips (were near-black) ---------- */
.service-icon,.portfolio-tile .service-icon,.check-list .tick{background:var(--brand-grad) !important;}
.service-icon svg,.check-list .tick svg{stroke:#fff !important;}
.other-svc .oi{background:rgba(4,59,250,0.08) !important;}
.other-svc .oi svg{stroke:var(--blue) !important;}
.svc-photo,.pf-cover{background:#eef3ff;}

/* ---------- Footer (white) ---------- */
footer{background:#fff !important; color:var(--muted) !important; border-top:1px solid var(--line) !important; position:relative;}
footer::before{content:""; position:absolute; left:0; right:0; top:-1px; height:3px; background:var(--brand-grad);}
.footer-brand b,.footer-col h5{color:var(--navy) !important;}
.footer-bottom .tag{color:var(--blue) !important;}
.footer-top p,.footer-col a,.footer-bottom{color:var(--muted) !important;}
.footer-col a:hover{color:var(--blue) !important; transform:translateX(3px);}
.footer-col a{transition:color .2s, transform .2s; display:block;}
.footer-bottom{border-top:1px solid var(--line) !important;}
.social-row a{border-color:var(--line) !important; color:var(--blue) !important;}
.social-row a svg{stroke:var(--blue);}
.social-row a:hover{background:rgba(4,59,250,0.08) !important; transform:translateY(-3px);}

/* ---------- Contact page bits ---------- */
.contact-card{border-color:var(--line) !important; background:#fff;}
.contact-card:hover{background:rgba(4,59,250,0.04) !important; border-color:rgba(4,59,250,0.4) !important; transform:translateY(-3px);}
.contact-card b{color:var(--navy);} .contact-card span{color:var(--muted) !important;}
.fact{border-left-color:rgba(4,59,250,0.25) !important;}

/* ---------- Animations ---------- */
@keyframes gradShift{from{background-position:0% 50%} to{background-position:100% 50%}}
@keyframes orbA{from{transform:translate(0,0) scale(1)} to{transform:translate(90px,50px) scale(1.15)}}
@keyframes orbB{from{transform:translate(0,0) scale(1)} to{transform:translate(-80px,-40px) scale(1.12)}}
@keyframes floatY{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
@keyframes popIn{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.55)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes pulseRingB{0%{box-shadow:0 0 0 0 rgba(4,59,250,0.45)} 70%{box-shadow:0 0 0 16px rgba(4,59,250,0)} 100%{box-shadow:0 0 0 0 rgba(4,59,250,0)}}

/* hero text on load */
.page-hero .inner > *,.home-hero .wrap > div > *,.pf-head .wrap > *,.svc-hero-in > *,.contact-hero .wrap > div > *{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both;}
.page-hero .inner > :nth-child(2),.svc-hero-in > :nth-child(2),.pf-head .wrap > :nth-child(2){animation-delay:.08s}
.page-hero .inner > :nth-child(3),.svc-hero-in > :nth-child(3),.pf-head .wrap > :nth-child(3){animation-delay:.16s}
.page-hero .inner > :nth-child(4),.svc-hero-in > :nth-child(4),.pf-head .wrap > :nth-child(4){animation-delay:.24s}
.page-hero .inner > :nth-child(n+5),.svc-hero-in > :nth-child(n+5),.pf-head .wrap > :nth-child(n+5){animation-delay:.32s}
.pf-tab{animation:popIn .6s cubic-bezier(.2,.7,.2,1) both;}
.pf-tab:nth-child(1){animation-delay:.25s}.pf-tab:nth-child(2){animation-delay:.31s}.pf-tab:nth-child(3){animation-delay:.37s}
.pf-tab:nth-child(4){animation-delay:.43s}.pf-tab:nth-child(5){animation-delay:.49s}.pf-tab:nth-child(6){animation-delay:.55s}.pf-tab:nth-child(7){animation-delay:.61s}
.svc-icon.big{animation:floatY 5s ease-in-out infinite;}
.gallery-item{animation:popIn .5s ease both;}
.wa-float{animation:pulseRing 2.4s infinite;} .messenger-float{animation:pulseRingB 2.8s infinite;}
.svc-icon,.pf-ic,.service-icon{transition:transform .35s cubic-bezier(.3,1.5,.5,1);}
.svc-card:hover .svc-icon,.pf-card:hover .pf-ic,.mini-card:hover .service-icon,.service-card:hover .service-icon{transform:rotate(-8deg) scale(1.1);}
.cat-card:hover .cat-num{letter-spacing:.12em;} .cat-num{transition:letter-spacing .3s;}
.stat-box,.review-card,.why-card,.mini-card,.contact-card{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.stat-box:hover,.review-card:hover,.why-card:hover,.mini-card:hover{transform:translateY(-5px); box-shadow:0 22px 40px -26px rgba(4,59,250,0.45); border-color:rgba(4,59,250,0.35);}

/* scroll reveal (JS adds .reveal then .in) */
.js-anim .reveal{opacity:0; transform:translateY(34px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s);}
.js-anim .reveal.in{opacity:1; transform:none;}
.js-anim .reveal.from-left{transform:translateX(-40px);} .js-anim .reveal.from-right{transform:translateX(40px);}
.js-anim .reveal.from-left.in,.js-anim .reveal.from-right.in{transform:none;}

@media (prefers-reduced-motion:reduce){
  .js-anim .reveal{opacity:1 !important; transform:none !important;}
  *{animation:none !important;}
}

/* keep the WhatsApp social button green with a white icon */
.social-row a.wa-icon{background:var(--whatsapp) !important; border-color:var(--whatsapp) !important; color:#fff !important;}
.social-row a.wa-icon svg{stroke:none !important; fill:#fff !important;}
.social-row a.wa-icon:hover{background:#1fb958 !important;}

/* ---------- Home caption (replaces stat boxes) ---------- */
.home-caption{max-width:820px; margin:0 auto; text-align:center; padding:28px 0 18px;}
.cap-kicker{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--blue); padding:8px 18px; border-radius:100px; background:rgba(4,59,250,0.07); border:1px solid var(--line); margin-bottom:22px;}
.home-caption h2{font-size:clamp(26px,3.6vw,42px); font-weight:700; line-height:1.22; color:var(--navy);}
.home-caption p{max-width:62ch; margin:20px auto 0; font-size:16.5px; color:var(--muted);}
.cap-line{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:30px;}
.cap-line i{display:block; height:2px; width:70px; border-radius:2px; background:linear-gradient(90deg,transparent,rgba(4,59,250,0.45));}
.cap-line i:last-child{background:linear-gradient(270deg,transparent,rgba(0,221,252,0.7));}
.cap-line b{width:10px; height:10px; border-radius:3px; transform:rotate(45deg); background:var(--brand-grad); animation:capSpin 4s ease-in-out infinite;}
@keyframes capSpin{0%,100%{transform:rotate(45deg) scale(1)} 50%{transform:rotate(225deg) scale(1.3)}}
.js-anim .home-caption > *{opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.js-anim .home-caption.in > *{opacity:1; transform:none;}
.js-anim .home-caption.in > :nth-child(2){transition-delay:.12s}.js-anim .home-caption.in > :nth-child(3){transition-delay:.24s}.js-anim .home-caption.in > :nth-child(4){transition-delay:.36s}

.review-avatar,.review-person .review-avatar{color:#fff !important;}

/* =====================  NEW FOOTER  ===================== */
footer.ft{background:#fff !important; border-top:0 !important; padding:40px 0.5cm 0.5cm; position:relative; margin-top:20px;}
footer.ft::before{display:none !important;}
.ft-card{position:relative; border-radius:30px; overflow:hidden; padding:clamp(28px,5vw,60px) clamp(22px,4vw,56px) 22px;
  background:radial-gradient(700px 320px at 0% 0%,rgba(0,221,252,0.14),transparent 62%),radial-gradient(720px 340px at 100% 100%,rgba(4,59,250,0.10),transparent 62%),linear-gradient(#fbfcff,#f3f7ff);
  border:1px solid var(--line); box-shadow:0 -20px 60px -40px rgba(4,59,250,0.35);}
.ft-card::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#043bfa,#00ddfc,#043bfa); background-size:200% 100%; animation:ftFlow 6s linear infinite;}
@keyframes ftFlow{to{background-position:200% 0}}
.ft-inner{max-width:1180px; margin:0 auto; position:relative; z-index:2;}
.ft-grid{display:grid; grid-template-columns:1.5fr .8fr 1.15fr 1.4fr; gap:clamp(24px,3.4vw,52px);}
.ft-logo{display:flex; align-items:center; gap:11px; margin-bottom:16px;}
.ft-logo img{width:42px; height:42px; filter:drop-shadow(0 6px 12px rgba(4,59,250,0.3)); transition:transform .5s;}
.ft-logo:hover img{transform:rotate(-8deg) scale(1.08);}
.ft-logo b{font-family:'Unbounded'; font-size:15px; letter-spacing:.01em; color:var(--navy);}
.ft-brand p{font-size:14px; line-height:1.7; color:var(--muted) !important; max-width:38ch; margin:0 0 20px;}
.ft .social-row{display:flex; flex-wrap:wrap; gap:10px;}
.ft .social-row a{width:42px; height:42px; background:#fff; box-shadow:0 8px 18px -12px rgba(4,59,250,0.5);}
.ft-col h5{font-family:'Unbounded'; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--navy) !important; margin:0 0 18px; position:relative; padding-bottom:12px;}
.ft-col h5::after{content:""; position:absolute; left:0; bottom:0; width:30px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--blue),var(--cyan));}
.ft-links{display:flex; flex-direction:column; gap:11px;}
.ft-links a{position:relative; font-size:14px; color:var(--muted) !important; width:fit-content; padding-left:0; transition:color .25s, padding-left .25s;}
.ft-links a::before{content:""; position:absolute; left:0; top:50%; width:0; height:2px; border-radius:2px; background:var(--brand-grad); transform:translateY(-50%); transition:width .25s;}
.ft-links a:hover{color:var(--blue) !important; padding-left:18px; transform:none !important;}
.ft-links a:hover::before{width:11px;}
.ft-row{display:flex; align-items:center; gap:12px; margin-bottom:13px; font-size:14px; color:var(--muted) !important; transition:color .25s, transform .25s;}
a.ft-row:hover{color:var(--blue) !important; transform:translateX(4px);}
.ft-row i{flex:none; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--brand-grad); box-shadow:0 10px 18px -10px rgba(4,59,250,0.7);}
.ft-row i svg{width:17px; height:17px; color:#fff;}
.ft-row span{min-width:0; overflow-wrap:anywhere; line-height:1.4;}
.ft-bottom{margin-top:38px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12.5px; color:var(--muted);}
.ft-tag{font-family:'Unbounded'; font-size:11.5px; font-weight:600; background:linear-gradient(120deg,#043bfa,#00a8f0); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}
.ft-copy{margin-left:auto;}
.ft-top{flex:none; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:var(--brand-grad); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 22px -10px rgba(4,59,250,0.8); transition:transform .3s;}
.ft-top svg{width:18px; height:18px;} .ft-top:hover{transform:translateY(-4px);}

@media (max-width:980px){ .ft-grid{grid-template-columns:1fr 1fr;} .ft-brand{grid-column:1/-1;} .ft-brand p{max-width:60ch;} }
@media (max-width:640px){
  footer.ft{padding-top:28px;}
  .ft-card{border-radius:24px; padding:30px 20px 20px;}
  .ft-grid{grid-template-columns:1fr; gap:30px;}
  .ft-links{flex-direction:row; flex-wrap:wrap; gap:9px;}
  .ft-links a{padding:9px 15px; border-radius:100px; background:#fff; border:1px solid var(--line); font-size:13px; font-weight:600;}
  .ft-links a::before{display:none;}
  .ft-links a:hover{padding-left:15px; background:rgba(4,59,250,0.06);}
  .ft-bottom{flex-wrap:wrap; justify-content:center; text-align:center; margin-top:28px;}
  .ft-tag{width:100%;} .ft-copy{margin-left:0; width:100%; order:3;}
  .ft-top{order:2;}
}
@media (min-width:641px){ .ft-top{display:none;} }

/* =====================  INTERACTIVE COLOUR ANIMATION  =====================
   Hover (mouse) · press / touch (phone) · keyboard focus → brand colours move.
   ".is-touch" is added by js/animations.js so touch behaves like hover.      */
:root{--st:":hover,:active,:focus-visible,.is-touch";}

/* 1 ▸ Gradient buttons: colour sweeps blue → cyan, lifts, glows */
.btn-primary,.btn-dark,.nav-cta,.svc-explore,.pf-view,.ft-top{
  background:linear-gradient(120deg,#043bfa 0%,#0a7bff 28%,#00ddfc 55%,#043bfa 100%) !important;
  background-size:240% 100% !important; background-position:0% 50% !important;
  transition:background-position .7s cubic-bezier(.2,.7,.2,1), transform .25s ease, box-shadow .3s ease, gap .25s !important;
}
:is(.btn-primary,.btn-dark,.nav-cta,.svc-explore,.pf-view,.ft-top):is(:hover,:active,:focus-visible,.is-touch),
.svc-card:hover .svc-explore,.pf-card:hover .pf-view,.svc-card.is-touch .svc-explore,.pf-card.is-touch .pf-view,.pf-card:active .pf-view{
  background-position:100% 50% !important; transform:translateY(-3px) scale(1.04);
  box-shadow:0 18px 32px -12px rgba(4,59,250,0.7), 0 0 0 4px rgba(0,221,252,0.18); filter:none !important;
}
:is(.btn-primary,.btn-dark,.nav-cta,.svc-explore,.pf-view,.ft-top):active{transform:translateY(0) scale(.96);}

/* 2 ▸ Outline / ghost buttons: brand gradient fills in from the left */
.btn-ghost,.gal-nav a,.ft-links a.pill{
  background:linear-gradient(120deg,#043bfa,#00ddfc) no-repeat left center / 0% 100% #fff !important;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1), color .3s, border-color .3s, transform .25s, box-shadow .3s !important;
}
:is(.btn-ghost,.gal-nav a):is(:hover,:active,:focus-visible,.is-touch){
  background-size:100% 100% !important; color:#fff !important; border-color:transparent !important;
  transform:translateY(-3px) scale(1.03); box-shadow:0 16px 28px -12px rgba(4,59,250,0.6);
}

/* 3 ▸ WhatsApp buttons: green deepens + glow */
.btn-wa{background:linear-gradient(120deg,#25D366,#1fb958) !important; transition:transform .25s, box-shadow .3s, filter .3s !important;}
.btn-wa:is(:hover,:active,:focus-visible,.is-touch){transform:translateY(-3px) scale(1.04); filter:brightness(.92) saturate(1.15); box-shadow:0 16px 30px -12px rgba(37,211,102,0.8), 0 0 0 4px rgba(37,211,102,0.18);}
.btn-wa:active{transform:scale(.96);}
.cat-order,.service-order{transition:background .25s, color .25s, border-color .25s, transform .25s, box-shadow .3s !important;}
.cat-order:is(:hover,:active,:focus-visible,.is-touch){background:#25D366 !important; border-color:#25D366 !important; color:#fff !important; transform:translateY(-2px) scale(1.05); box-shadow:0 12px 22px -10px rgba(37,211,102,0.8);}

/* 4 ▸ Menu links: colour + moving underline */
.nav-links a{position:relative; transition:color .25s, transform .25s;}
.nav-links a::before{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--brand-grad); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.nav-links a:is(:hover,:active,:focus-visible,.is-touch){color:var(--blue) !important; transform:translateY(-1px);}
.nav-links a:is(:hover,:active,:focus-visible,.is-touch)::before{transform:scaleX(1);}

/* 5 ▸ Chips, tags, tabs, small cards */
.svc-chips span,.badge,.pf-tab,.other-svc a,.review-card,.cat-card,.contact-card,.gallery-item{transition:background .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s !important;}
:is(.svc-chips span,.badge):is(:hover,:active,.is-touch){background:var(--brand-grad) !important; color:#fff !important; border-color:transparent !important; transform:translateY(-2px);}
.pf-tab:not(.active):is(:hover,:active,:focus-visible,.is-touch){background:linear-gradient(120deg,rgba(4,59,250,0.10),rgba(0,221,252,0.16)) !important; color:var(--blue) !important; transform:translateY(-4px);}
.other-svc a:is(:hover,:active,.is-touch){background:linear-gradient(120deg,rgba(4,59,250,0.08),rgba(0,221,252,0.14)) !important; color:var(--blue); transform:translateY(-4px);}
:is(.svc-card,.pf-card,.cat-card,.review-card,.contact-card,.mini-card,.why-card,.service-card).is-touch{transform:translateY(-5px); border-color:rgba(4,59,250,0.45) !important; box-shadow:0 22px 40px -22px rgba(4,59,250,0.5);}
.cat-card:is(:hover,.is-touch){background:linear-gradient(135deg,#fff,rgba(0,221,252,0.10));}
.cat-card:is(:hover,.is-touch) h3{color:var(--blue);} .cat-card h3{transition:color .3s;}
.gallery-item:is(:hover,:active,.is-touch){border-color:var(--blue); box-shadow:0 16px 30px -14px rgba(4,59,250,0.6); transform:translateY(-3px);}

/* 6 ▸ Social icons & footer links: fill with brand gradient, icon turns white */
.social-row a:not(.wa-icon){transition:background .3s, border-color .3s, transform .3s, box-shadow .3s !important;}
.social-row a:not(.wa-icon):is(:hover,:active,:focus-visible,.is-touch){background:var(--brand-grad) !important; border-color:transparent !important; transform:translateY(-4px) scale(1.08); box-shadow:0 14px 24px -10px rgba(4,59,250,0.7);}
.social-row a:not(.wa-icon):is(:hover,:active,:focus-visible,.is-touch) svg{stroke:#fff !important;}
.social-row a.wa-icon:is(:hover,:active,.is-touch){transform:translateY(-4px) scale(1.08); box-shadow:0 14px 24px -10px rgba(37,211,102,0.8);}
.ft-links a:is(:active,.is-touch){color:var(--blue) !important; padding-left:18px;}
.ft-links a:is(:active,.is-touch)::before{width:11px;}
a.ft-row:is(:hover,:active,.is-touch) i{transform:rotate(-8deg) scale(1.1);} .ft-row i{transition:transform .3s cubic-bezier(.3,1.5,.5,1);}

/* 7 ▸ Floating chat buttons */
.wa-float,.messenger-float{transition:transform .3s cubic-bezier(.3,1.5,.5,1), filter .3s !important;}
.wa-float:is(:hover,:active,.is-touch),.messenger-float:is(:hover,:active,.is-touch){transform:scale(1.14) rotate(-6deg); filter:brightness(1.08);}

/* 8 ▸ Form fields: brand ring */
.field input,.field select,.field textarea{transition:border-color .25s, box-shadow .25s, background .25s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none !important; border-color:var(--blue) !important; box-shadow:0 0 0 4px rgba(4,59,250,0.14), 0 10px 22px -14px rgba(4,59,250,0.5); background:#fff !important;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(4,59,250,0.4);}
button,.btn,a{-webkit-tap-highlight-color:rgba(4,59,250,0.12);}
.btn,.nav-cta,.svc-explore,.pf-view,.cat-order{cursor:pointer;}
@media (prefers-reduced-motion:reduce){ .btn,.nav-cta,.svc-explore,.pf-view{transition:none !important;} }

/* ---------- Header "Start a Project" button (replaces WhatsApp) ---------- */
.nav-start{gap:9px; position:relative; animation:navGlow 3s ease-in-out infinite;}
.nav-start svg{width:16px; height:16px; animation:sparkle 2.4s ease-in-out infinite;}
@keyframes navGlow{0%,100%{box-shadow:0 8px 18px -10px rgba(4,59,250,0.55)} 50%{box-shadow:0 10px 26px -6px rgba(0,221,252,0.75)}}
@keyframes sparkle{0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(25deg) scale(1.2)}}
.mobile-menu a.mm-cta{margin-top:14px; border:0; text-align:center; color:#fff !important; font-weight:700; padding:14px; border-radius:100px;
  background:linear-gradient(120deg,#043bfa 0%,#0a7bff 28%,#00ddfc 55%,#043bfa 100%); background-size:240% 100%; background-position:0% 50%; transition:background-position .7s, transform .25s;}
.mobile-menu a.mm-cta:is(:hover,:active,.is-touch){background-position:100% 50%; transform:scale(1.03);}

/* ---------- Social icons: official-style filled glyphs ---------- */
.social-row.pro{gap:12px;}
.social-row.pro a{position:relative; width:46px; height:46px; border-radius:50%; background:#fff !important; border:1px solid var(--line) !important; box-shadow:0 10px 22px -14px rgba(4,59,250,0.55); overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition:transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s, color .25s, background .3s, border-color .3s !important;}
.social-row.pro a svg{width:20px; height:20px; fill:currentColor !important; stroke:none !important; position:relative; z-index:2; transition:transform .35s cubic-bezier(.3,1.5,.5,1);}
.social-row.pro a.soc-behance{color:#1769ff !important;}
.social-row.pro a.soc-instagram{color:#d6249f !important;}
.social-row.pro a.soc-facebook{color:#1877f2 !important;}
.social-row.pro a.soc-pinterest{color:#e60023 !important;}
.social-row.pro a.soc-linkedin{color:#0a66c2 !important;}
.social-row.pro a.wa-icon svg{width:22px; height:22px; fill:#fff !important; stroke:none !important;}
.social-row.pro a:is(:hover,:active,:focus-visible,.is-touch){color:#fff !important; border-color:transparent !important; transform:translateY(-5px) scale(1.1); box-shadow:0 16px 26px -10px rgba(4,59,250,0.55) !important;}
.social-row.pro a:is(:hover,:active,:focus-visible,.is-touch) svg{transform:scale(1.12) rotate(-6deg); fill:#fff !important; stroke:none !important;}
.social-row.pro a.soc-behance:is(:hover,:active,:focus-visible,.is-touch){background:#1769ff !important;}
.social-row.pro a.soc-instagram:is(:hover,:active,:focus-visible,.is-touch){background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%) !important;}
.social-row.pro a.soc-facebook:is(:hover,:active,:focus-visible,.is-touch){background:#1877f2 !important;}
.social-row.pro a.soc-pinterest:is(:hover,:active,:focus-visible,.is-touch){background:#e60023 !important;}
.social-row.pro a.soc-linkedin:is(:hover,:active,:focus-visible,.is-touch){background:#0a66c2 !important;}
.social-row.pro a.wa-icon:is(:hover,:active,.is-touch){background:#1fb958 !important; box-shadow:0 16px 26px -10px rgba(37,211,102,0.8) !important;}
.social-row.pro a.wa-icon{background:#25D366 !important; border-color:#25D366 !important; color:#fff !important;}
.social-row.pro a.wa-icon:is(:hover,:active,.is-touch){background:#1fb958 !important; border-color:#1fb958 !important;}

/* =====================  SERVICE BANNERS (animated, one after another)  ===================== */
.bn-pills{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:38px;}
.bn-pills a{font-size:13px; font-weight:600; padding:9px 16px; border-radius:100px; background:#fff; border:1px solid var(--line); color:var(--navy);
  transition:background .3s, color .3s, transform .3s, border-color .3s, box-shadow .3s;}
.bn-pills a:is(:hover,:active,:focus-visible,.is-touch){background:var(--brand-grad); color:#fff; border-color:transparent; transform:translateY(-3px); box-shadow:0 12px 22px -10px rgba(4,59,250,0.6);}
.bn-list{display:flex; flex-direction:column; gap:clamp(30px,5vw,60px);}
.bn-item{scroll-margin-top:96px; position:relative; border-radius:26px; background:#fff; border:1px solid var(--line); overflow:hidden;
  box-shadow:0 34px 60px -40px rgba(4,59,250,0.45); transition:box-shadow .4s, transform .4s, border-color .4s;}
.bn-item:hover{box-shadow:0 40px 70px -36px rgba(4,59,250,0.6); border-color:rgba(4,59,250,0.4); transform:translateY(-4px);}
.bn-img{display:block; position:relative; overflow:hidden; background:#f4f8ff; aspect-ratio:2/1;}
.bn-img img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.001); transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.bn-item:hover .bn-img img{transform:scale(1.04);}
.bn-num{position:absolute; top:clamp(10px,2vw,20px); right:clamp(10px,2vw,20px); z-index:3; font-family:'Unbounded'; font-size:clamp(11px,1.4vw,14px); font-weight:700; color:#fff; padding:7px 14px; border-radius:100px; background:var(--brand-grad); box-shadow:0 10px 20px -8px rgba(4,59,250,0.7);}
.bn-shine{position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:2; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.65),transparent); transform:skewX(-20deg);}
.bn-bar{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:clamp(16px,2.4vw,24px) clamp(18px,3vw,32px); border-top:1px solid var(--line); background:linear-gradient(180deg,#fff,#f7faff);}
.bn-txt h3{font-size:clamp(16px,2vw,21px); font-weight:700; color:var(--navy); margin-bottom:4px;}
.bn-txt p{font-size:clamp(13px,1.4vw,15px); color:var(--muted); margin:0;}
.bn-bar .svc-explore{flex:none;}

/* reveal: alternate sides, image settles from a soft zoom, shine sweeps once, bar rises */
.js-anim .bn-item{opacity:0; transform:translateX(-90px) scale(.94) rotate(-1deg); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;}
.js-anim .bn-item.from-right{transform:translateX(90px) scale(.94) rotate(1deg);}
.js-anim .bn-item.in{opacity:1; transform:none;}
.js-anim .bn-item .bn-img img{transform:scale(1.14); transition:transform 1.6s cubic-bezier(.2,.7,.2,1);}
.js-anim .bn-item.in .bn-img img{transform:scale(1.001);}
.js-anim .bn-item.in:hover .bn-img img{transform:scale(1.04); transition-duration:1.2s;}
.js-anim .bn-item.in .bn-shine{animation:bnShine 1.4s .5s ease-out 1 both;}
@keyframes bnShine{from{left:-60%} to{left:140%}}
.js-anim .bn-item .bn-num{opacity:0; transform:scale(.4) rotate(-30deg); transition:opacity .5s .7s, transform .7s .7s cubic-bezier(.3,1.6,.5,1);}
.js-anim .bn-item.in .bn-num{opacity:1; transform:none;}
.js-anim .bn-item .bn-txt,.js-anim .bn-item .bn-bar .btn{opacity:0; transform:translateY(18px); transition:opacity .7s .55s, transform .7s .55s cubic-bezier(.2,.7,.2,1), background-position .7s, box-shadow .3s;}
.js-anim .bn-item .bn-bar .btn{transition-delay:.7s;}
.js-anim .bn-item.in .bn-txt,.js-anim .bn-item.in .bn-bar .btn{opacity:1; transform:none;}
@media (max-width:640px){
  .bn-bar{flex-direction:column; align-items:flex-start;}
  .bn-bar .svc-explore{width:100%; justify-content:center;}
  .js-anim .bn-item,.js-anim .bn-item.from-right{transform:translateY(50px) scale(.95);}
  .bn-pills{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:4px 2px 12px; scrollbar-width:none;} .bn-pills::-webkit-scrollbar{display:none;} .bn-pills a{flex:none;}
  .bn-item{border-radius:20px;}
}
@media (prefers-reduced-motion:reduce){ .js-anim .bn-item,.js-anim .bn-item *{opacity:1 !important; transform:none !important;} }

/* ---------- Contact page: faint banner photo behind hero text ---------- */
.contact-banner .hero-photo{position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);}
.contact-banner .hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 28%; opacity:.08; display:block;}
.contact-banner .pixel-grid{z-index:1;}
.contact-banner .inner{padding-bottom:56px;}

/* ---------- Footer banner (services page) ---------- */
.ft-banner{margin:0 0 34px; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 50px -30px rgba(4,59,250,.45); line-height:0;}
.ft-banner img{width:100%; height:auto; display:block; transition:transform .8s ease;}
.ft-banner:hover img{transform:scale(1.025);}
@media (max-width:640px){
  .ft-banner{margin:0 -10px 26px; border-radius:14px;}
  .ft-banner img{aspect-ratio:auto; height:auto; object-fit:fill;}
}

/* ---------- Home hero text animation ---------- */
.home-intro{position:relative; overflow:hidden;}
.home-intro .wrap{position:relative; z-index:2;}
.intro-fx{position:absolute; inset:0; z-index:0; pointer-events:none;}
.intro-fx .orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;}
.intro-fx .o1{width:340px; height:340px; left:-80px; top:-60px; background:rgba(0,221,252,.38); animation:orbDrift 14s ease-in-out infinite alternate;}
.intro-fx .o2{width:380px; height:380px; right:-100px; top:30px; background:rgba(4,59,250,.20); animation:orbDrift 17s ease-in-out infinite alternate-reverse;}
.intro-fx .px{position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:3px;
  background:linear-gradient(135deg,#043bfa,#00ddfc); opacity:0; animation:pxFloat var(--t) ease-in-out var(--dl) infinite;}
@keyframes orbDrift{from{transform:translate(0,0) scale(1)} to{transform:translate(40px,30px) scale(1.15)}}
@keyframes pxFloat{
  0%{opacity:0; transform:translateY(14px) rotate(0deg) scale(.7);}
  25%{opacity:.5;}
  50%{opacity:.28; transform:translateY(-14px) rotate(45deg) scale(1);}
  75%{opacity:.5;}
  100%{opacity:0; transform:translateY(-34px) rotate(90deg) scale(.8);}
}

/* headline: words rise in one by one, then the blue words keep flowing */
.home-intro h1.hl .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .12em; margin:0 -.04em -.12em;}
.home-intro h1.hl .w > span{display:inline-block; transform:translateY(115%); opacity:0;
  animation:wordRise .85s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.25s + var(--i) * .11s);}
.home-intro h1.hl .w.g > span{
  background:linear-gradient(110deg,#043bfa 0%,#0a6cff 35%,#00ddfc 55%,#0a6cff 75%,#043bfa 100%); background-size:250% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:wordRise .85s cubic-bezier(.2,.8,.2,1) forwards, textFlow 4.5s linear infinite;
  animation-delay:calc(.25s + var(--i) * .11s), calc(1.2s + var(--i) * .12s);}
@keyframes wordRise{to{transform:translateY(0); opacity:1;}}
@keyframes textFlow{from{background-position:0% 50%} to{background-position:250% 50%}}

/* the rest of the intro fades up after the headline */
.home-intro .intro-kicker{position:relative; overflow:hidden; opacity:0; animation:introUp .7s ease forwards;}
.home-intro .intro-kicker::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent); animation:kickShine 3.8s ease-in-out 1.4s infinite;}
.home-intro .intro-copy > p{opacity:0; animation:introUp .8s ease 1.15s forwards;}
.home-intro .intro-ctas{opacity:0; animation:introUp .8s ease 1.35s forwards;}
@keyframes introUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes kickShine{0%{left:-60%} 55%,100%{left:130%}}

@media (max-width:560px){ .intro-fx .o1,.intro-fx .o2{width:240px; height:240px;} .intro-fx .px:nth-of-type(n+8){display:none;} }
@media (prefers-reduced-motion: reduce){
  .intro-fx{display:none;}
  .home-intro h1.hl .w > span,.home-intro .intro-kicker,.home-intro .intro-copy > p,.home-intro .intro-ctas{animation:none !important; opacity:1; transform:none;}
  .home-intro .intro-kicker::after{display:none;}
}

/* Footer brand banner (portfolio page): white panel, centred, whole image visible */
.ft-banner.ft-brandbar{background:#fff; max-width:900px; margin-left:auto; margin-right:auto; padding:14px 18px;}
.ft-banner.ft-brandbar img{width:100%; height:auto; aspect-ratio:auto; object-fit:fill;}
.ft-banner.ft-brandbar:hover img{transform:none;}
@media (max-width:640px){ .ft-banner.ft-brandbar{margin-left:-10px; margin-right:-10px; padding:10px 12px;} }

/* ---------- SEO topics section (keyword explorer, FAQ, chips) ---------- */
.seo-sec{background:#f6f9ff;border-top:1px solid rgba(4,59,250,.10)}
.seo-sec .seo-in{max-width:1180px;margin:0 auto;padding:0 28px}
.seo-sec h2{font-size:clamp(24px,3vw,34px);font-weight:700;margin:0 0 14px}
.seo-sec h3{font-size:18px;font-weight:700;margin:34px 0 14px}
.seo-sec .seo-intro{max-width:78ch;font-size:16px;line-height:1.7}
.seo-chips,.seo-kw{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.seo-chips li{background:#fff;border:1px solid rgba(4,59,250,.22);color:#0b153a;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px}
.seo-kw li{background:#fff;border:1px solid rgba(4,59,250,.12);color:#515b80;font-size:12.5px;padding:5px 11px;border-radius:8px}
.seo-group,.seo-faq details{background:#fff;border:1px solid rgba(4,59,250,.14);border-radius:14px;padding:0 18px;margin-bottom:10px}
.seo-group summary,.seo-faq summary{cursor:pointer;font-weight:700;color:#0b153a;padding:15px 0;font-size:15px;list-style:none}
.seo-group summary::-webkit-details-marker,.seo-faq summary::-webkit-details-marker{display:none}
.seo-group summary::after,.seo-faq summary::after{content:"+";float:right;color:#043bfa;font-weight:700}
.seo-group[open] summary::after,.seo-faq details[open] summary::after{content:"–"}
.seo-group summary span{color:#515b80;font-weight:500}
.seo-group .seo-kw{margin:0 0 16px}
.seo-faq p{margin:0 0 16px;line-height:1.65}
.seo-related{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:#515b80}
.seo-related a{color:#043bfa;font-weight:600;text-decoration:none}
.seo-related a:hover{text-decoration:underline}
@media(max-width:640px){.seo-sec .seo-in{padding:0 18px}}

/* LP:START */
.lp-sec{padding:64px 0}
.lp-sec .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.lp-prose{max-width:78ch}
.lp-prose p{font-size:17px;line-height:1.75;color:#1d2748;margin:0 0 16px}
.lp-prose h2,.lp-sec h2{font-size:clamp(25px,3vw,36px);font-weight:700;margin:0 0 18px}
.lp-prose h3{font-size:19px;margin:26px 0 10px}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:22px}
.lp-card{background:#fff;border:1px solid rgba(4,59,250,.14);border-radius:18px;padding:22px}
.lp-card h3{font-size:17px;margin:0 0 8px}
.lp-card p{margin:0;font-size:15px;line-height:1.6;color:#515b80}
.lp-card a.more{display:inline-block;margin-top:12px;font-weight:700;color:#043bfa;font-size:14px}
.lp-steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:22px}
.lp-step{background:#f6f9ff;border:1px solid rgba(4,59,250,.12);border-radius:18px;padding:22px;position:relative}
.lp-step::before{counter-increment:s;content:counter(s);display:inline-flex;width:34px;height:34px;border-radius:50%;background:#043bfa;color:#fff;font-weight:700;align-items:center;justify-content:center;margin-bottom:12px}
.lp-step h3{font-size:17px;margin:0 0 6px}.lp-step p{margin:0;font-size:15px;line-height:1.6;color:#515b80}
.lp-alt{background:#f6f9ff}
.lp-list{margin:0 0 18px;padding:0 0 0 20px}.lp-list li{font-size:16.5px;line-height:1.7;margin-bottom:6px;color:#1d2748}
.lp-box{background:#f6f9ff;border:1px solid rgba(4,59,250,.16);border-left:4px solid #043bfa;border-radius:14px;padding:20px 24px;margin:22px 0;max-width:78ch}
.lp-box h3{margin:0 0 10px;font-size:17px}
.lp-related{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px}
.lp-related a{color:#043bfa;font-weight:600;font-size:15px}
.lp-related a:hover{text-decoration:underline}
.lp-sec .seo-faq details{background:#fff}
html[lang="bn"] body,html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3,html[lang="bn"] p,html[lang="bn"] a,html[lang="bn"] summary,html[lang="bn"] li{font-family:"Noto Sans Bengali","Manrope",sans-serif}
@media(max-width:640px){.lp-sec{padding:44px 0}.lp-sec .wrap{padding:0 18px}}
/* LP:END */