/*----------------------------------------
   Magic UI-style effect layer (sitewide)
   Hooks onto existing class names; magic-ui.js injects the helper
   elements (.mx-aurora, .mx-cursor-*, .mx-spot, .mx-beam, .mx-meteors,
   .mx-retro-grid, .mx-particles, .mx-progress, .mx-word).
----------------------------------------*/

:root {
  --mx-blue: #005de0;
  --mx-cyan: #54d6eb;
  --mx-violet: #7c3aed;
  --mx-pink: #ec4899;
  --mx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@property --mx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* =========================================================
   Ambient layers: aurora + cursor glow (behind all content)
   ========================================================= */
.mx-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.mx-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.38;
  will-change: transform;
}

.mx-aurora i:nth-child(1) {
  width: 46vw;
  height: 46vw;
  left: -10vw;
  top: -12vw;
  background: radial-gradient(circle, var(--mx-cyan), transparent 65%);
  animation: mx-aurora-a 22s ease-in-out infinite alternate;
}

.mx-aurora i:nth-child(2) {
  width: 40vw;
  height: 40vw;
  right: -8vw;
  top: 10vh;
  background: radial-gradient(circle, var(--mx-violet), transparent 65%);
  opacity: 0.26;
  animation: mx-aurora-b 26s ease-in-out infinite alternate;
}

.mx-aurora i:nth-child(3) {
  width: 52vw;
  height: 52vw;
  left: 25vw;
  bottom: -30vw;
  background: radial-gradient(circle, var(--mx-blue), transparent 65%);
  opacity: 0.24;
  animation: mx-aurora-c 30s ease-in-out infinite alternate;
}

.mx-aurora i:nth-child(4) {
  width: 26vw;
  height: 26vw;
  right: 20vw;
  bottom: 5vh;
  background: radial-gradient(circle, var(--mx-pink), transparent 65%);
  opacity: 0.14;
  animation: mx-aurora-a 18s ease-in-out infinite alternate-reverse;
}

@keyframes mx-aurora-a {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18vw, 12vh) scale(1.2); }
  100% { transform: translate(6vw, 30vh) scale(0.9); }
}

@keyframes mx-aurora-b {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20vw, 25vh) scale(1.15); }
  100% { transform: translate(-6vw, 50vh) scale(0.85); }
}

@keyframes mx-aurora-c {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15vw, -20vh) scale(1.1); }
  100% { transform: translate(10vw, -35vh) scale(1.25); }
}

.mx-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(84, 214, 235, 0.28), rgba(0, 93, 224, 0.12) 40%, transparent 68%);
  will-change: transform;
}

/* Cursor ring + dot (fine pointers only; JS adds them) */
.mx-cursor-ring,
.mx-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;
  will-change: transform;
}

.mx-cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(0, 93, 224, 0.55);
  transition: width 0.3s var(--mx-ease), height 0.3s var(--mx-ease), margin 0.3s var(--mx-ease), background 0.3s ease, border-color 0.3s ease;
}

.mx-cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: linear-gradient(135deg, var(--mx-blue), var(--mx-cyan));
  box-shadow: 0 0 10px rgba(84, 214, 235, 0.9);
}

/* Frosted, but kept small so it covers only a little of the text under it */
.mx-cursor-ring.is-hover {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-color: rgba(84, 214, 235, 0.9);
  background: rgba(84, 214, 235, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mx-cursor-ring.is-down {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

/* ---------- Scroll progress bar ---------- */
.mx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--mx-blue), var(--mx-cyan), var(--mx-violet), var(--mx-pink));
  box-shadow: 0 0 14px rgba(84, 214, 235, 0.8);
  z-index: 100000;
  pointer-events: none;
}

/* ---------- Header: flowing gradient edge ---------- */
.mx-header-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--mx-blue), var(--mx-cyan), var(--mx-violet), var(--mx-pink), transparent);
  background-size: 200% 100%;
  animation: mx-flow 6s linear infinite;
  opacity: 0.85;
}

@keyframes mx-flow {
  to { background-position: 200% 0; }
}

/* =========================================================
   Scroll reveal (blur + rise + 3D tilt-in)
   ========================================================= */
.mx-reveal {
  opacity: 0 !important;
  transform: perspective(1200px) translateY(70px) rotateX(16deg) scale(0.94) !important;
  filter: blur(12px) !important;
}

.mx-reveal.mx-from-left {
  transform: perspective(1200px) translateX(-90px) rotateY(12deg) scale(0.95) !important;
}

.mx-reveal.mx-from-right {
  transform: perspective(1200px) translateX(90px) rotateY(-12deg) scale(0.95) !important;
}

.mx-reveal.mx-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: opacity 1s var(--mx-ease), transform 1.1s var(--mx-ease), filter 1s var(--mx-ease) !important;
}

/* Word-by-word headline reveal */
.mx-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.mx-words-pending .mx-word {
  opacity: 0;
  transform: translateY(0.7em) rotateX(-70deg);
  transform-origin: 50% 100%;
  filter: blur(10px);
}

.mx-words-in .mx-word {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.7s var(--mx-ease), transform 0.9s var(--mx-ease), filter 0.7s var(--mx-ease);
}

/* =========================================================
   Cards: spotlight, border beam, 3D tilt
   ========================================================= */
.mx-card {
  transform-style: preserve-3d;
}

.mx-card.mx-tilting {
  transition: transform 0.12s linear, box-shadow 0.35s ease, background 0.35s ease !important;
  box-shadow: 0 30px 60px -20px rgba(0, 40, 120, 0.35), 0 0 0 1px rgba(84, 214, 235, 0.25) !important;
}

.mx-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(420px circle at var(--mx-x, 50%) var(--mx-y, 50%), rgba(84, 214, 235, 0.28), rgba(124, 58, 237, 0.1) 40%, transparent 70%);
}

.mx-card:hover > .mx-spot {
  opacity: 1;
}

.mx-beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: conic-gradient(from var(--mx-angle), transparent 0 50%, var(--mx-cyan) 64%, var(--mx-blue) 76%, var(--mx-violet) 88%, var(--mx-pink) 95%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mx-spin 3s linear infinite;
  animation-play-state: paused;
}

.mx-card:hover > .mx-beam,
.single-pricing.active > .mx-beam,
.mx-beam.mx-beam-always {
  opacity: 1;
  animation-play-state: running;
}

@keyframes mx-spin {
  to { --mx-angle: 360deg; }
}

/* Icons inside cards spring on hover */
.mx-card .features-icon,
.mx-card .service-icon,
.mx-card .product-window-icon {
  transition: transform 0.6s var(--mx-ease);
}

.mx-card:hover .features-icon,
.mx-card:hover .service-icon {
  transform: translateZ(40px) translateY(-6px) scale(1.12) rotate(-4deg);
}

.mx-card:hover .product-window-icon {
  transform: translateY(-4px) scale(1.12) rotate(-6deg);
}

/* =========================================================
   Buttons: flowing gradient, shimmer, glow, magnetic (JS)
   ========================================================= */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: mx-shine 3.2s ease-in-out infinite;
}

@keyframes mx-shine {
  0% { left: -80%; }
  45%, 100% { left: 130%; }
}

.btn {
  transition: all 0.3s ease 0s, box-shadow 0.4s var(--mx-ease), transform 0.25s var(--mx-ease);
}

.btn:hover {
  box-shadow: 0 16px 36px -10px rgba(0, 93, 224, 0.7), 0 0 0 5px rgba(84, 214, 235, 0.2);
}

.btn.mx-btn-primary {
  background-color: transparent;
  background-image: linear-gradient(110deg, #005de0, #4f46e5, #7c3aed, #0ea5e9, #005de0);
  background-size: 300% 100%;
  border-color: transparent;
  animation: mx-btn-flow 6s linear infinite;
  box-shadow: 0 12px 30px -12px rgba(0, 93, 224, 0.8);
}

@keyframes mx-btn-flow {
  to { background-position: 300% 0; }
}

/* =========================================================
   Gradient text
   ========================================================= */
.text-gradient {
  background-size: 220% auto !important;
  animation: mx-gradient-shift 5s ease-in-out infinite alternate;
}

@keyframes mx-gradient-shift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Word rotator in the homepage hero */
.mx-rotate {
  display: inline-block;
  transition: opacity 0.45s var(--mx-ease), transform 0.55s var(--mx-ease), filter 0.45s var(--mx-ease);
}

.mx-rotate.is-out {
  opacity: 0;
  transform: translateY(-0.5em) rotateX(60deg);
  filter: blur(10px);
}

.mx-rotate.is-in-start {
  opacity: 0;
  transform: translateY(0.6em) rotateX(-60deg);
  filter: blur(10px);
  transition: none;
}

/* =========================================================
   Homepage hero
   ========================================================= */
.tech-hero-section-6 .hero-images .images {
  animation: mx-float 7s ease-in-out infinite;
}

@keyframes mx-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(-1.5deg); }
}

.tech-hero-section-6 .hero-content .title {
  text-shadow: 0 20px 60px rgba(0, 93, 224, 0.12);
}

/* =========================================================
   Inner-page banners: aurora mesh + grid + big gradient title
   ========================================================= */
.page-banner-section {
  min-height: 360px !important;
  padding-top: 130px !important;
  padding-bottom: 70px !important;
  background-color: #eef3fe !important;
}

.page-banner-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 93, 224, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 93, 224, 0.09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 25%, transparent 78%);
  animation: mx-grid-drift 14s linear infinite;
}

@keyframes mx-grid-drift {
  to { background-position: 44px 44px, 44px 44px; }
}

.mx-banner-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mx-banner-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

.mx-banner-aurora i:nth-child(1) {
  width: 520px;
  height: 520px;
  left: -120px;
  top: -260px;
  background: radial-gradient(circle, rgba(84, 214, 235, 0.75), transparent 65%);
  animation: mx-banner-a 12s ease-in-out infinite alternate;
}

.mx-banner-aurora i:nth-child(2) {
  width: 460px;
  height: 460px;
  right: -100px;
  top: -180px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 65%);
  animation: mx-banner-b 14s ease-in-out infinite alternate;
}

.mx-banner-aurora i:nth-child(3) {
  width: 600px;
  height: 600px;
  left: 30%;
  bottom: -420px;
  background: radial-gradient(circle, rgba(0, 93, 224, 0.5), transparent 65%);
  animation: mx-banner-a 16s ease-in-out infinite alternate-reverse;
}

@keyframes mx-banner-a {
  to { transform: translate(260px, 120px) scale(1.25); }
}

@keyframes mx-banner-b {
  to { transform: translate(-280px, 160px) scale(1.2); }
}

.page-banner .title {
  font-size: 64px !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #0a0e27 0%, #0a0e27 25%, var(--mx-blue) 45%, var(--mx-violet) 60%, var(--mx-cyan) 75%, #0a0e27 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mx-gradient-shift 6s ease-in-out infinite alternate;
}

@media only screen and (max-width: 991px) {
  .page-banner .title {
    font-size: 46px !important;
  }
}

@media only screen and (max-width: 575px) {
  .page-banner-section {
    min-height: 280px !important;
    padding-top: 110px !important;
  }
  .page-banner .title {
    font-size: 34px !important;
  }
}

.page-banner .breadcrumb {
  display: flex;
  width: fit-content;
  margin: 22px auto 0 !important;
  padding: 9px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 93, 224, 0.16);
  box-shadow: 0 10px 30px -12px rgba(0, 93, 224, 0.35);
}

/* =========================================================
   Dark sections: meteors + retro grid floor
   ========================================================= */
.mx-meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mx-meteors i {
  position: absolute;
  top: -10px;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 12px 2px rgba(84, 214, 235, 0.9);
  transform: rotate(215deg);
  animation: mx-meteor linear infinite;
  opacity: 0;
}

.mx-meteors i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 120px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(84, 214, 235, 0.9), transparent);
}

@keyframes mx-meteor {
  0% { opacity: 0; transform: rotate(215deg) translateX(0); }
  5% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(215deg) translateX(-900px); }
}

.mx-retro-grid {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 55%;
  pointer-events: none;
  z-index: 0;
  perspective: 300px;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  mask-image: linear-gradient(to top, #000 10%, transparent 90%);
}

.mx-retro-grid::before {
  content: "";
  position: absolute;
  inset: 0 0 -100% 0;
  transform: rotateX(65deg);
  transform-origin: 50% 0;
  background-image:
    linear-gradient(to right, rgba(84, 214, 235, 0.35) 1px, transparent 0),
    linear-gradient(to bottom, rgba(84, 214, 235, 0.35) 1px, transparent 0);
  background-size: 60px 60px;
  animation: mx-retro 12s linear infinite;
}

@keyframes mx-retro {
  from { background-position: 0 0; }
  to { background-position: 0 600px; }
}

/* =========================================================
   Homepage capability marquee band
   ========================================================= */
.mx-marquee-band {
  position: relative;
  float: left;
  width: 100%;
  overflow: hidden;
  padding: 46px 0;
  background: #0a0e27;
  transform: skewY(-2deg);
  margin: 40px 0;
  box-shadow: 0 30px 80px -30px rgba(0, 40, 120, 0.6);
}

.mx-marquee-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 200px at 15% 50%, rgba(0, 93, 224, 0.45), transparent 70%),
    radial-gradient(600px 200px at 85% 50%, rgba(124, 58, 237, 0.4), transparent 70%);
  pointer-events: none;
}

.mx-marquee-row {
  position: relative;
  z-index: 1;
  display: flex;
  width: max-content;
  gap: 48px;
  white-space: nowrap;
  animation: mx-marquee 40s linear infinite;
}

.mx-marquee-row + .mx-marquee-row {
  margin-top: 18px;
  animation-direction: reverse;
  animation-duration: 48s;
}

.mx-marquee-band:hover .mx-marquee-row {
  animation-play-state: paused;
}

.mx-marquee-row span {
  font-family: "Manrope", sans-serif;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
}

.mx-marquee-row span.mx-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(84, 214, 235, 0.85);
}

.mx-marquee-row span.mx-grad {
  background: linear-gradient(90deg, var(--mx-cyan), var(--mx-violet), var(--mx-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mx-marquee-row i {
  align-self: center;
  font-style: normal;
  font-size: 28px;
  color: var(--mx-cyan);
  text-shadow: 0 0 16px rgba(84, 214, 235, 0.9);
}

@keyframes mx-marquee {
  to { transform: translateX(-50%); }
}

@media only screen and (max-width: 767px) {
  .mx-marquee-row span {
    font-size: 28px;
  }
  .mx-marquee-band {
    padding: 30px 0;
  }
}

/* =========================================================
   Service marquee cards (home + about): compact light premium glass
   ========================================================= */
.home-service-section .service-wrap .service-item,
.about-service-section .service-wrap .service-item {
  flex: 0 0 300px;
  width: 300px;
  padding: 30px 26px 26px;
  border-radius: 24px;
  text-align: left !important;
  cursor: pointer;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 249, 255, 0.78) 55%, rgba(238, 244, 255, 0.72) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 24px 50px -22px rgba(0, 61, 224, 0.28),
    0 2px 6px rgba(0, 30, 90, 0.04),
    inset 0 1px 0 #ffffff;
}

/* Living pastel mesh inside the card (always moving, stronger on hover) */
.home-service-section .service-wrap .service-item::before,
.about-service-section .service-wrap .service-item::before {
  opacity: 0.75;
  visibility: visible;
  border-radius: inherit;
  background:
    radial-gradient(45% 40% at 20% 15%, rgba(84, 214, 235, 0.32), transparent 70%),
    radial-gradient(40% 40% at 85% 25%, rgba(124, 58, 237, 0.2), transparent 70%),
    radial-gradient(50% 45% at 60% 95%, rgba(0, 93, 224, 0.16), transparent 70%),
    radial-gradient(35% 35% at 10% 90%, rgba(236, 72, 153, 0.12), transparent 70%);
  background-size: 180% 180%;
  animation: mx-mesh 12s ease-in-out infinite alternate;
  transition: opacity 0.5s ease;
}

@keyframes mx-mesh {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 40%; }
  100% { background-position: 30% 100%; }
}

.home-service-section .service-wrap .service-item:hover::before,
.about-service-section .service-wrap .service-item:hover::before {
  opacity: 1;
  animation-duration: 5s;
}

.home-service-section .service-wrap .service-item:hover,
.about-service-section .service-wrap .service-item:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.85) 100%);
  box-shadow:
    0 36px 70px -24px rgba(0, 61, 224, 0.42),
    0 0 0 1px rgba(84, 214, 235, 0.35),
    0 0 40px -10px rgba(124, 58, 237, 0.35),
    inset 0 1px 0 #ffffff;
}

/* Faint blueprint grid, fading down from the top */
.home-service-section .service-wrap .service-item .shape-1,
.about-service-section .service-wrap .service-item .shape-1 {
  inset: 0;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  opacity: 0.8;
  visibility: visible;
  background-color: transparent;
  background-image:
    linear-gradient(rgba(0, 93, 224, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 93, 224, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
}

.home-service-section .service-wrap .service-item .shape-2,
.about-service-section .service-wrap .service-item .shape-2 {
  opacity: 0.12;
  visibility: visible;
  filter: none;
}

/* Glass sheen sweeping across every few seconds */
.mx-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.mx-sheen::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  transform: rotate(18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: mx-sheen 6s ease-in-out infinite;
  animation-delay: var(--mx-sheen-delay, 0s);
  will-change: transform;
}

@keyframes mx-sheen {
  0%, 70% { transform: rotate(18deg) translateX(0); }
  100% { transform: rotate(18deg) translateX(550%); }
}

/* Always-on border beam, brighter + faster on hover */
.home-service-section .service-item > .mx-beam,
.about-service-section .service-item > .mx-beam {
  opacity: 0.7;
  animation-play-state: running;
  animation-duration: 6s;
}

.home-service-section .service-item:hover > .mx-beam,
.about-service-section .service-item:hover > .mx-beam {
  opacity: 1;
  animation-duration: 2.2s;
}

/* Index number */
.mx-index {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 3;
  font-family: "Manrope", sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(0, 93, 224, 0.28);
  background: linear-gradient(120deg, var(--mx-blue), var(--mx-violet), var(--mx-cyan));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: 200% 0;
  opacity: 0.32;
  transition: background-position 0.8s var(--mx-ease), -webkit-text-stroke-color 0.4s ease, transform 0.5s var(--mx-ease), opacity 0.4s ease;
}

.mx-card:hover .mx-index {
  opacity: 1;
  background-position: 0 0;
  -webkit-text-stroke-color: transparent;
  transform: translateY(-3px) scale(1.06);
}

/* Icon on a frosted orb with counter-rotating rings */
.home-service-section .service-wrap .service-item .service-icon,
.about-service-section .service-wrap .service-item .service-icon {
  position: relative;
  z-index: 3;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffff 0%, #eef5ff 55%, #dfe9ff 100%);
  box-shadow:
    0 14px 30px -10px rgba(0, 93, 224, 0.4),
    0 0 0 6px rgba(255, 255, 255, 0.7),
    inset 0 -6px 14px rgba(0, 93, 224, 0.08);
}

.home-service-section .service-wrap .service-item .service-icon::before,
.about-service-section .service-wrap .service-item .service-icon::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 93, 224, 0.28);
  animation: mx-ring 16s linear infinite;
}

.home-service-section .service-wrap .service-item .service-icon::after,
.about-service-section .service-wrap .service-item .service-icon::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 65%, var(--mx-cyan) 80%, var(--mx-violet) 92%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: mx-ring 3.2s linear infinite reverse;
}

@keyframes mx-ring {
  to { transform: rotate(360deg); }
}

.home-service-section .service-wrap .service-item .service-icon img,
.about-service-section .service-wrap .service-item .service-icon img {
  width: 64px;
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(0, 61, 224, 0.28));
  animation: mx-icon-bob 4.5s ease-in-out infinite;
}

@keyframes mx-icon-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-3deg); }
}

.home-service-section .service-wrap .service-item:hover .service-icon,
.about-service-section .service-wrap .service-item:hover .service-icon {
  transform: translateY(-4px) scale(1.08);
}

/* Text: stays dark on hover (the old theme flipped it white) */
.home-service-section .service-wrap .service-item .service-content,
.about-service-section .service-wrap .service-item .service-content {
  position: relative;
  z-index: 3;
  margin-top: 24px;
}

.home-service-section .service-wrap .service-item .service-content .title,
.about-service-section .service-wrap .service-item .service-content .title {
  font-size: 21px;
  line-height: 1.25;
  margin-top: 0;
}

.home-service-section .service-wrap .service-item .service-content .title a,
.about-service-section .service-wrap .service-item .service-content .title a,
.home-service-section .service-wrap .service-item:hover .service-content .title a,
.about-service-section .service-wrap .service-item:hover .service-content .title a {
  color: #0f1535;
}

.home-service-section .service-wrap .service-item .service-content p,
.about-service-section .service-wrap .service-item .service-content p,
.home-service-section .service-wrap .service-item:hover .service-content p,
.about-service-section .service-wrap .service-item:hover .service-content p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 23px;
  font-weight: 500;
  color: #5b6478;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Explore chip */
.mx-explore {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mx-blue);
  background: rgba(0, 93, 224, 0.07);
  border: 1px solid rgba(0, 93, 224, 0.18);
  transition: background 0.35s ease, color 0.35s ease, gap 0.35s var(--mx-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.mx-explore i {
  font-size: 11px;
  transition: transform 0.35s var(--mx-ease);
}

.mx-card:hover .mx-explore {
  gap: 12px;
  color: #ffffff;
  background: linear-gradient(110deg, var(--mx-blue), var(--mx-violet), var(--mx-cyan));
  background-size: 200% 100%;
  border-color: transparent;
  box-shadow: 0 10px 24px -8px rgba(124, 58, 237, 0.6);
  animation: mx-btn-flow 3s linear infinite;
}

.mx-card:hover .mx-explore i {
  transform: translateX(3px);
}

@media only screen and (max-width: 575px) {
  .home-service-section .service-wrap .service-item,
  .about-service-section .service-wrap .service-item {
    flex-basis: 260px;
    width: 260px;
  }
}

/* =========================================================
   Plain section right below a banner: flicker grid + rays + orbs
   (magic-ui.js only applies this when the section has no
   background/decoration of its own)
   ========================================================= */
.mx-fx-section {
  position: relative;
  overflow: hidden;
}

.mx-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.mx-flicker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 58%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 58%, #000 100%);
}

.mx-rays {
  position: absolute;
  left: 50%;
  top: -35%;
  width: 140%;
  height: 130%;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(84, 214, 235, 0.16) 0deg 3deg, transparent 3deg 9deg, rgba(124, 58, 237, 0.1) 9deg 11deg, transparent 11deg 18deg);
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 50% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 75% at 50% 0%, #000 10%, transparent 70%);
  filter: blur(1.5px);
  transform-origin: 50% 0%;
  animation: mx-rays 14s ease-in-out infinite alternate;
}

@keyframes mx-rays {
  0% { transform: translateX(-50%) rotate(-5deg); opacity: 0.7; }
  50% { opacity: 1; }
  100% { transform: translateX(-50%) rotate(5deg); opacity: 0.75; }
}

.mx-fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  will-change: transform;
}

.mx-fx-orb.o1 {
  width: 380px;
  height: 380px;
  left: -80px;
  top: 10%;
  background: radial-gradient(circle, rgba(84, 214, 235, 0.55), transparent 65%);
  animation: mx-fx-o1 13s ease-in-out infinite alternate;
}

.mx-fx-orb.o2 {
  width: 420px;
  height: 420px;
  right: -100px;
  bottom: -10%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.4), transparent 65%);
  animation: mx-fx-o2 16s ease-in-out infinite alternate;
}

@keyframes mx-fx-o1 {
  to { transform: translate(220px, 80px) scale(1.2); }
}

@keyframes mx-fx-o2 {
  to { transform: translate(-260px, -90px) scale(1.15); }
}

.mx-horizon {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mx-cyan), var(--mx-violet), var(--mx-blue), transparent);
  background-size: 200% 100%;
  box-shadow: 0 0 24px 4px rgba(84, 214, 235, 0.45);
  animation: mx-flow 5s linear infinite;
}

/* =========================================================
   CTA banner: sits in its own band instead of overlapping the footer
   ========================================================= */
.cta-section {
  position: relative;
  overflow: hidden;
  padding: 34px 0;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(84, 214, 235, 0.22), transparent 70%),
    radial-gradient(600px 300px at 85% 80%, rgba(124, 58, 237, 0.18), transparent 70%),
    linear-gradient(180deg, #f5f8fe 0%, #eef3fb 100%);
}

.cta-section .cta-wrap {
  margin-bottom: 0 !important;
  box-shadow: 0 40px 80px -30px rgba(0, 61, 224, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.cta-section + .footer-section .footer-widget-wrap {
  padding-top: 90px;
}

@media only screen and (max-width: 767px) {
  .cta-section {
    padding: 22px 0;
  }
  .cta-section + .footer-section .footer-widget-wrap {
    padding-top: 60px;
  }
}

/* =========================================================
   Particles canvas (hero / banner)
   ========================================================= */
.mx-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* =========================================================
   Reduced motion: switch it all off
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .mx-reveal,
  .mx-words-pending .mx-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .btn::before,
  .btn.mx-btn-primary,
  .mx-beam,
  .mx-header-line,
  .text-gradient,
  .page-banner .title,
  .page-banner-section::after,
  .tech-hero-section-6 .hero-images .images,
  .mx-marquee-row,
  .mx-aurora i,
  .mx-banner-aurora i,
  .mx-retro-grid::before,
  .mx-sheen::after,
  .mx-rays,
  .mx-fx-orb,
  .mx-horizon,
  .service-item::before,
  .service-icon::before,
  .service-icon::after,
  .service-icon img {
    animation: none !important;
  }
  .mx-particles,
  .mx-progress,
  .mx-meteors,
  .mx-flicker,
  .mx-cursor-glow,
  .mx-cursor-ring,
  .mx-cursor-dot {
    display: none !important;
  }
}

/* Success messages are shown as a toast (toast.js); hide the duplicate inline box.
   Errors stay inline next to the form. */
.form-feedback.success {
  display: none !important;
}

/* =========================================================
   Services: factual stat cards
   ========================================================= */
.mx-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.mx-stat {
  position: relative;
  padding: 24px 22px;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(240, 245, 255, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 12px 12px 28px rgba(150, 168, 200, 0.34), -8px -8px 22px rgba(255, 255, 255, 0.95), inset 0 1px 0 #ffffff;
  transition: transform 0.4s var(--mx-ease), box-shadow 0.4s ease;
}

.mx-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -22px rgba(0, 61, 224, 0.4), 0 0 0 1px rgba(84, 214, 235, 0.35);
}

.mx-stat-value {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(110deg, var(--mx-blue), var(--mx-violet), var(--mx-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mx-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 19px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--mx-blue), var(--mx-violet));
  box-shadow: 0 10px 22px -8px rgba(0, 61, 224, 0.6);
}

.mx-stat-label {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 800;
  color: #0f1535;
}

.mx-stat p {
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #5b6478;
}

@media only screen and (max-width: 575px) {
  .mx-stats {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   About: journey timeline
   ========================================================= */
.mx-journey-section {
  position: relative;
  padding: 90px 0;
  background:
    radial-gradient(600px 300px at 10% 10%, rgba(84, 214, 235, 0.18), transparent 70%),
    radial-gradient(600px 300px at 90% 90%, rgba(124, 58, 237, 0.14), transparent 70%),
    linear-gradient(180deg, #f5f8fe 0%, #eef3fb 100%);
}

.mx-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 50px;
}

/* Animated rail behind the step numbers */
.mx-journey::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 46px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mx-blue), var(--mx-cyan), var(--mx-violet), var(--mx-blue));
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(84, 214, 235, 0.6);
  animation: mx-flow 5s linear infinite;
}

.mx-journey-step {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(240, 245, 255, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 12px 12px 28px rgba(150, 168, 200, 0.34), -8px -8px 22px rgba(255, 255, 255, 0.95), inset 0 1px 0 #ffffff;
  transition: transform 0.4s var(--mx-ease), box-shadow 0.4s ease;
}

.mx-journey-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -24px rgba(0, 61, 224, 0.4), 0 0 0 1px rgba(84, 214, 235, 0.35);
}

.mx-journey-num {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(0, 93, 224, 0.3);
}

.mx-journey-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 21px;
  color: #ffffff;
  box-shadow: 0 12px 24px -10px rgba(0, 61, 224, 0.6);
}

.j-blue { background: linear-gradient(135deg, #2f8dff, #005de0); }
.j-violet { background: linear-gradient(135deg, #9d7bf0, #6a3fd6); }
.j-teal { background: linear-gradient(135deg, #54d6eb, #0e9fb8); }
.j-navy { background: linear-gradient(135deg, #3b4a8f, #0f1535); }

.mx-journey-step h4 {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 800;
  color: #0f1535;
}

.mx-journey-step p {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #5b6478;
}

.mx-journey-step a,
.about-content p a {
  color: var(--mx-blue);
  font-weight: 700;
}

@media only screen and (max-width: 991px) {
  .mx-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mx-journey::before {
    display: none;
  }
}

@media only screen and (max-width: 575px) {
  .mx-journey-section {
    padding: 60px 0;
  }
  .mx-journey {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-journey::before {
    animation: none;
  }
}

/* Homepage hero: product CTAs */
.tech-hero-section-6 .hero-content .mx-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.tech-hero-section-6 .hero-content .mx-hero-btns .btn {
  margin-top: 0;
  height: 56px;
  line-height: 52px;
  padding: 0 34px;
  font-size: 17px;
}

.tech-hero-section-6 .hero-content .mx-hero-more {
  margin-top: 22px;
  font-size: 14px;
  color: #5b6478;
}

.tech-hero-section-6 .hero-content .mx-hero-more a {
  color: var(--mx-blue);
  font-weight: 700;
}

@media only screen and (max-width: 575px) {
  .tech-hero-section-6 .hero-content .mx-hero-btns .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* Hovered cards don't lift or scale: moving the card under a still cursor made
   :hover toggle on and off at the edges (flicker). The JS tilt only rotates,
   leaning the edge nearest the cursor towards the viewer so it stays under it. */
.mx-card:hover:not(.mx-tilting) {
  transform: none !important;
}