/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; color: #1e293b; }
html, body { max-width: 100%; overflow-x: hidden; }

/* ── Mobile Menu ── */
#mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 340px;
  background: linear-gradient(145deg, #0a1628 0%, #0f2042 60%, #0a1628 100%);
  z-index: 9998; transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  display: flex !important; flex-direction: column; padding: 0; overflow: hidden;
}
#mobile-menu.open { transform: translateX(0); }
#mobile-menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px); z-index: 9997;
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
#mobile-menu-overlay.open { opacity: 1; visibility: visible; }
.mob-link { display: flex; align-items: center; font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.75); padding: 14px 32px; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color 0.2s ease, background 0.2s ease; letter-spacing: 0.01em; }
.mob-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.mob-link.active-link { color: #60A5FA; }
.mob-header { padding: 20px 28px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; }
.mob-logo { height: 50px; width: auto; }
.mob-close-btn { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.08); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mob-links { flex: 1; padding-top: 8px; overflow-y: auto; }
.mob-services-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.75); padding: 14px 32px; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color 0.2s ease, background 0.2s ease; letter-spacing: 0.01em; }
.mob-services-toggle:hover { color: #fff; background: rgba(255,255,255,0.05); }
.mob-services-toggle .mob-chevron { transition: transform 0.3s ease; font-size: 11px; }
.mob-services-toggle.open .mob-chevron { transform: rotate(180deg); }
.mob-services-sub { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: rgba(0,0,0,0.2); }
.mob-services-sub.open { max-height: 600px; }
.mob-sub-section { padding: 10px 32px 4px; }
.mob-sub-title { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.mob-sub-link { display: block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.6); padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s; }
.mob-sub-link:hover { color: #60A5FA; }
.mob-cta-wrap { padding: 24px 28px; border-top: 1px solid rgba(255,255,255,0.08); }
.mob-cta-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #0E78E9; color: #fff; font-weight: 700; font-size: 15px; padding: 14px 20px; border-radius: 14px; }
.mob-social { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.mob-social-icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: 13px; }
.mob-num { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.2); margin-right: 14px; letter-spacing: 0.06em; min-width: 20px; }

/* ── Nav underline ── */
.nav-a { position: relative; padding-bottom: 3px; }
.nav-a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #0E78E9; transition: width .25s; }
.nav-a:hover::after, .nav-a.active::after { width: 100%; }

/* ── Back to top ── */
#back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 9990;
  width: 44px; height: 44px; border-radius: 50%;
  background: #0E78E9; color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  /* box-shadow: 0 4px 20px rgba(14,120,233,0.4); */
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
#back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { background: #0c6cd4; }

/* ── Page loader ── */
#page-loader { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; transition: opacity 0.6s ease, visibility 0.6s ease; }
#page-loader.hidden-loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loaderLogoIn { from{opacity:0;transform:scale(0.8) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
.loader-logo { display: flex; flex-direction: column; align-items: center; gap: 28px; animation: loaderLogoIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
.loader-line { position: absolute; bottom: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #0E78E9, #60A5FA, #0E78E9); background-size: 200% 100%; animation: loaderLine 1.4s cubic-bezier(0.22,1,0.36,1) forwards, loaderShimmer 1s linear infinite; }
@keyframes loaderLine { to { width: 100%; } }
@keyframes loaderShimmer { to { background-position: -200% 0; } }
.loader-dots { display: flex; gap: 8px; }
.loader-dots span { width: 7px; height: 7px; border-radius: 50%; background: #0E78E9; animation: loaderDot 1s ease-in-out infinite; }
.loader-dots span:nth-child(2) { animation-delay: 0.18s; }
.loader-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes loaderDot { 0%,80%,100%{transform:scale(0.6);opacity:0.4} 40%{transform:scale(1);opacity:1} }
@keyframes loaderPulse { from{filter:drop-shadow(0 0 0px rgba(14,120,233,0))} to{filter:drop-shadow(0 0 14px rgba(14,120,233,0.5))} }

/* ── Scroll reveal ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.sr { opacity:0; transform:translateY(28px); transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); }
.sr.visible { opacity:1; transform:translateY(0); }
.sr-d1{transition-delay:0.08s} .sr-d2{transition-delay:0.16s}
.sr-d3{transition-delay:0.24s} .sr-d4{transition-delay:0.32s}
.sr-d5{transition-delay:0.40s} .sr-d6{transition-delay:0.48s}
.sr-d7{transition-delay:0.56s} .sr-d8{transition-delay:0.64s}
.anim-fadeup { opacity:0; animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.anim-d1{animation-delay:0.1s} .anim-d2{animation-delay:0.2s}
.anim-d3{animation-delay:0.3s} .anim-d4{animation-delay:0.4s}

/* ── Radial gradient blobs ── */
.blob-services-blue{width:500px;height:500px;left:-100px;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at center,rgba(0,129,233,.20) 0%,transparent 70%);filter:blur(50px)}
.blob-services-orange{width:500px;height:500px;right:-100px;bottom:-100px;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.40) 0%,transparent 70%);filter:blur(50px)}
.blob-about-blue-tr{width:420px;height:420px;right:-80px;top:-80px;border-radius:50%;background:radial-gradient(circle at center,rgba(0,129,233,.45) 0%,transparent 70%);filter:blur(40px)}
.blob-about-blue-bl{width:420px;height:420px;left:-80px;bottom:-80px;border-radius:50%;background:radial-gradient(circle at center,rgba(0,129,233,.45) 0%,transparent 70%);filter:blur(40px)}
.blob-about-orange-tl{width:400px;height:400px;left:-80px;top:-80px;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.35) 0%,transparent 70%);filter:blur(50px)}
.blob-tech-orange-tr{width:420px;height:420px;right:-250px;top:-80px;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.91) 0%,transparent 70%);filter:blur(40px)}
.blob-tech-orange-ml{width:420px;height:420px;left:-210px;top:50%;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.91) 0%,transparent 70%);filter:blur(40px)}
.blob-process-orange{width:450px;height:450px;right:30%;bottom:-80px;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.25) 0%,transparent 70%);filter:blur(60px)}
.blob-industries-blue{width:420px;height:620px;left:-300px;top:25%;border-radius:50%;background:radial-gradient(circle at center,rgba(73,171,242,1) 0%,transparent 70%);filter:blur(40px)}
.blob-contact-orange-tl{width:300px;height:300px;left:0;top:-90px;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.6) 0%,transparent 70%);filter:blur(40px)}
.blob-contact-blue-mid{width:300px;height:300px;left:35%;top:45%;border-radius:50%;background:radial-gradient(circle at center,#49ABF2 0%,transparent 70%);filter:blur(40px)}
.blob-contact-blue-right{width:300px;height:600px;right:-15%;top:20%;border-radius:50%;background:radial-gradient(circle at center,#49ABF2 0%,transparent 70%);filter:blur(40px)}
.blob-blog-orange{width:530px;height:680px;left:-400px;top:-161px;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.6) 0%,transparent 70%);filter:blur(40px)}
.blob-testimonial-blue{width:420px;height:620px;right:-250px;top:-120px;border-radius:50%;background:radial-gradient(circle at center,rgba(73,171,242,1) 0%,transparent 70%);filter:blur(40px)}
.blob-faq-blue{width:420px;height:620px;left:-250px;top:-80px;border-radius:50%;background:radial-gradient(circle at center,rgba(73,171,242,1) 0%,transparent 70%);filter:blur(40px)}
.blob-faq-orange{width:260px;height:260px;right:0;top:150px;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.6) 0%,transparent 70%);filter:blur(40px)}
.blob-footer-blue{width:420px;height:420px;right:-250px;top:-80px;border-radius:50%;background:radial-gradient(circle at center,#49ABF2 0%,transparent 70%);filter:blur(40px)}
.blob-footer-orange{width:687px;height:260px;left:-210px;bottom:0;border-radius:50%;background:radial-gradient(circle at center,rgba(250,130,25,.6) 0%,transparent 70%);filter:blur(40px)}

/* ── Nav Dropdown (Mega Menu) ── */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown {
  display: none;
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(1020px, 96vw);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12)) drop-shadow(0 4px 12px rgba(0,0,0,0.07));
  padding-top: 10px;
}
.nav-dropdown-wrap:hover .nav-dropdown { display: block; }
.nav-dropdown-box {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
}

/* Left promo panel */
.dd-left {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(145deg, #0a1628 0%, #0f2042 60%, #0a1628 100%);
  padding: 26px 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.dd-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/mask-nav-banner.svg') no-repeat right bottom / 75%;
  opacity: 0.5;
  filter: brightness(0) invert(1);
  z-index: 1;
}

.dd-left-title {
  font-size: 17px; font-weight: 800; color: #fff;
  line-height: 1.35; position: relative; z-index: 2;
}
.dd-left-title span { color: #60A5FA; }
.dd-left-cta {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 13px; font-weight: 700;
  position: relative; z-index: 2;
  transition: color 0.2s;
}
.dd-left-cta:hover { color: #fff; }
.dd-left-cta-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: #0E78E9; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.2s;
}
.dd-left-cta:hover .dd-left-cta-circle { background: #60A5FA; }
.dd-left-cta-circle i { color: #fff; font-size: 10px; }

/* Right columns — 2 rows × 3 cols */
.dd-right {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  padding: 24px 10px 20px 10px;
}
.dd-col {
  padding: 0 22px 20px;
  border-right: 1px solid #e2e8f0;
}
.dd-col:nth-child(3) { border-right: none; }
.dd-col:nth-child(4) { border-right: 1px solid #e2e8f0; padding-top: 18px; border-top: 1px solid #e2e8f0; }
.dd-col:nth-child(5) { padding-top: 18px; border-top: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; }
.dd-col:nth-child(6) { padding-top: 18px; border-top: 1px solid #e2e8f0; border-right: none; }
.dd-col-title {
  font-size: 9.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.dd-link {
  display: block;
  padding: 5px 0;
  font-size: 13.5px; font-weight: 400; color: #1e3a6e;
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.5;
}
.dd-link:hover { color: #0E78E9; font-weight: 500; }

@media (max-width: 1023px) {
  .blob-services-blue{width:280px;height:280px;left:-80px;top:30%}
  .blob-services-orange{width:260px;height:260px;right:-60px;bottom:-60px}
  .blob-about-blue-tr{width:220px;height:220px;right:-50px;top:-50px}
  .blob-about-blue-bl{width:220px;height:220px;left:-50px;bottom:-50px}
  .blob-about-orange-tl{width:200px;height:200px;left:-50px;top:-50px}
  .blob-tech-orange-tr{width:220px;height:220px;right:-80px;top:-40px}
  .blob-tech-orange-ml{width:220px;height:220px;left:-80px;top:40%}
  .blob-process-orange{width:240px;height:240px;right:10%;bottom:-40px}
  .blob-industries-blue{width:220px;height:320px;left:-120px;top:20%}
  .blob-contact-orange-tl{width:180px;height:180px;left:0;top:-50px}
  .blob-contact-blue-mid{width:180px;height:180px;left:30%;top:40%}
  .blob-contact-blue-right{width:180px;height:300px;right:-8%;top:15%}
  .blob-blog-orange{width:260px;height:320px;left:-120px;top:-80px}
  .blob-testimonial-blue{width:220px;height:320px;right:-80px;top:-60px}
  .blob-faq-blue{width:220px;height:320px;left:-80px;top:-40px}
  .blob-faq-orange{width:160px;height:160px;right:0;top:100px}
  .blob-footer-blue{width:220px;height:220px;right:-80px;top:-40px}
  .blob-footer-orange{width:320px;height:180px;left:-80px;bottom:0}
}

@media (max-width: 639px) {
  .blob-services-blue{width:180px;height:180px;left:-60px;opacity:0.7}
  .blob-services-orange{width:160px;height:160px;right:-40px;opacity:0.7}
  .blob-about-blue-tr{width:150px;height:150px;right:-40px;opacity:0.7}
  .blob-about-blue-bl{width:150px;height:150px;left:-40px;opacity:0.7}
  .blob-about-orange-tl{width:140px;height:140px;left:-40px;opacity:0.7}
  .blob-tech-orange-tr{width:150px;height:150px;right:-50px;opacity:0.7}
  .blob-tech-orange-ml{width:150px;height:150px;left:-50px;opacity:0.7}
  .blob-process-orange{width:160px;height:160px;right:5%;opacity:0.7}
  .blob-industries-blue{width:150px;height:220px;left:-80px;opacity:0.7}
  .blob-contact-orange-tl{width:130px;height:130px;opacity:0.7}
  .blob-contact-blue-mid{width:130px;height:130px;opacity:0.7}
  .blob-contact-blue-right{width:120px;height:200px;right:-5%;opacity:0.7}
  .blob-blog-orange{width:180px;height:220px;left:-80px;opacity:0.7}
  .blob-testimonial-blue{width:150px;height:220px;right:-50px;opacity:0.7}
  .blob-faq-blue{width:150px;height:220px;left:-50px;opacity:0.7}
  .blob-faq-orange{width:120px;height:120px;opacity:0.7}
  .blob-footer-blue{width:150px;height:150px;right:-50px;opacity:0.7}
  .blob-footer-orange{width:220px;height:130px;left:-60px;opacity:0.7}
}

/* ── Tech icons ── */
.icon-figma-filter{filter:invert(29%) sepia(97%) saturate(1352%) hue-rotate(343deg) brightness(97%) contrast(97%)}
.icon-xd-bg{background:#470137} .icon-xd-text{color:#FF61F6}
.icon-invision-bg{background:#DC395F} .icon-ps-bg{background:#001d34}
.icon-framer-color{color:#0055FF} .icon-ai-bg{background:#FF7C00}
.icon-canva-color{color:#00C4CC}

/* ── Fixed sizes / positions ── */
.faq-img{height:480px}
.testimonial-card{min-height:420px}
.about-dark-overlay{background:#00000014}
.map-card-1{left:18%;top:22%}
.map-card-2{left:62%;top:18%}
.map-card-3{left:72%;top:55%}
.process-img{height:550px}
@media(max-width:1023px){
  .process-img{height:300px !important}
  .world-map-wrap{min-height:260px !important}
}

/* ── Mobile strip ── */
@keyframes mScrollX { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.strip-track { display:flex; gap:12px; width:max-content; animation:mScrollX 20s linear infinite; }
.strip-track:hover { animation-play-state:paused; }
.strip-card { width:150px; height:110px; border-radius:16px; overflow:hidden; flex-shrink:0; transition:transform 0.4s cubic-bezier(0.25,1,0.5,1),box-shadow 0.4s ease; }
.strip-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
@media(max-width:1023px){ .strip-card{height:200px} }

/* ── Hero Masonry ── */
@keyframes mUp   { 0%{transform:translateY(0)}   100%{transform:translateY(-50%)} }
@keyframes mDown { 0%{transform:translateY(-50%)} 100%{transform:translateY(0)}   }
.masonry-stage { display:flex; gap:18px; padding:20px 10px; transform:rotate(-8deg) scale(1.1) perspective(1200px) rotateX(5deg); transform-origin:center center; height:100%; align-items:flex-start; position:relative; top:-130px; }
.m-inner { display:flex; flex-direction:column; gap:14px; will-change:transform; }
.m-up   { animation:mUp   linear infinite; }
.m-down { animation:mDown linear infinite; }
.m-card { border-radius:20px; overflow:hidden; flex-shrink:0; height:445.28px !important; width:205.67px; }
.m-card img { width:100%; height:100%; object-fit:contain; display:block; }