:root{
  --bg:#FFFFFF;
  --primary:#0F172A;
  --accent:#2563EB;
  --secondary:#F8FAFC;
}
main{
  overflow: hidden
}
html{scroll-behavior:smooth;}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; color:var(--primary); background:var(--bg);}

.navbar-sticky{position:sticky; top:0; z-index:1030;}

.logo-mark{border-radius:8px;}

.hero{
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(15,23,42,.03));
  border-bottom:1px solid rgba(15,23,42,.08);
}

/* Universal premium card look (used across site) */
.card-tech{
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 25px rgba(15,23,42,.04);
  background: linear-gradient(180deg, rgba(37,99,235,.04), rgba(255,255,255,1) 60%);
}

.card-tech:hover{
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow:0 16px 35px rgba(15,23,42,.06);
}

/* Testimonials (Home) */
#testimonialCarousel .carousel-inner{padding: 6px 0;}
#testimonialCarousel .carousel-item{min-height: 220px;}

/* Enable drag-to-scroll style for touch/trackpad */
#testimonialCarousel{
  touch-action: pan-y;
}

/* Hide default arrows (we use swipe/drag) */
#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 30px rgba(15,23,42,.15);
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  z-index: 10;
}

/* force Bootstrap icons visible */
#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon{
  filter: invert(35%) sepia(90%) saturate(3000%) hue-rotate(210deg);
}

/* positioning */
#testimonialCarousel .carousel-control-prev{
  left: -10px;
}

#testimonialCarousel .carousel-control-next{
  right: -10px;
}

#testimonialCarousel .custom-carousel-arrow{
  width: 52px;
  height: 52px;
  border-radius: 999px;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(37,99,235,0.25);

  box-shadow: 0 18px 40px rgba(15,23,42,0.18);
  backdrop-filter: blur(10px);

  color: var(--accent);
  font-size: 26px;
  font-weight: 800;

  transition: all .25s ease;
  z-index: 10;
}

/* hover effect */
#testimonialCarousel .custom-carousel-arrow:hover{
  background: var(--accent);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 22px 55px rgba(37,99,235,.35);
}

/* positioning */
#testimonialCarousel .carousel-control-prev.custom-carousel-arrow{
  left: -14px;
}

#testimonialCarousel .carousel-control-next.custom-carousel-arrow{
  right: -14px;
}

/* remove default bootstrap icon (important) */
#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon{
  display: none;
}

/* smooth tap feel */
#testimonialCarousel .custom-carousel-arrow:active{
  transform: translateY(-50%) scale(0.95);
}

.testimonial-card{
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(255,255,255,1) 55%);
  position: relative;
  overflow: hidden;
}

.testimonial-card::before{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width:160px;
  height:160px;
  background: radial-gradient(circle at center, rgba(37,99,235,.25), rgba(37,99,235,0));
  transform: rotate(15deg);
}
.testimonial-quote{
  font-size: 44px;
  font-weight: 800;
  color: rgba(37,99,235,.55);
  line-height: 1;
  margin-top: -8px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 6px 12px rgba(15,23,42,.25));
  opacity: 1;
}

.carousel-control-prev,
.carousel-control-next{
  width:48px;
  height:48px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 12px 30px rgba(15,23,42,.15);
  top: 50%;
  transform: translateY(-50%);
}

.carousel-control-prev:hover,
.carousel-control-next:hover{
  background: rgba(255,255,255,1);
}

.testimonial-avatar{
  width:42px;
  height:42px;

  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.22);
  color: var(--accent);
  font-weight: 800;
}


.section-soft{background:var(--secondary);}

.card-tech{border:1px solid rgba(15,23,42,.08); box-shadow:0 10px 25px rgba(15,23,42,.04);}

footer-links a{color:rgba(15,23,42,.70); text-decoration:none;}
.footer-links a:hover{color:var(--accent);}

/* Strong active navbar highlight */
.navbar-nav .nav-link.active{
  color:#fff !important;
  background: rgba(37,99,235,.22);
  border-radius: 999px;
  padding-left: 14px;
  padding-right: 14px;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.35);
}
.navbar-nav .nav-link.active:hover{
  background: rgba(37,99,235,.28);
} 

/* Mobile menu: side/off-canvas instead of top collapse */
.mavro-drawer-header{display:none;}

@media (max-width: 991.98px){

  /* off-canvas panel */
  #mavroNavbar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 86vw);
    background: #0F172A;
    padding: 16px;
    transform: translateX(110%);
    transition: transform .22s ease;
    overflow-y: auto;
    box-shadow: -20px 0 50px rgba(0,0,0,.35);
  }

  /* when Bootstrap opens the collapse, it adds .show */
  #mavroNavbar.show{
    transform: translateX(0);
  }

  /* Clickable outside-overlay (blur + close on click) */
  .mavro-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 1025;
  }


  /* When Bootstrap adds .show to the navbar collapse, show overlay */
  #mavroNavbar.show #mavroBackdrop,
  #mavroNavbar.show .mavro-backdrop{
    opacity: 1;
    pointer-events: auto;
  }






  /* stack nav items */
  #mavroNavbar .navbar-nav{
    margin: 0;
    padding: 6px 0;
  }

  /* Close (✕) button inside drawer (mobile only) */
  .mavro-drawer-header{
    display:flex;
    justify-content:flex-end;
    margin-bottom: 10px;
  }


  .mavro-drawer-close{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.95);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
    padding: 0;
  }

  .mavro-drawer-close:hover{
    background: rgba(255,255,255,.14);
  }


  /* Make links bigger on mobile for touch */
  #mavroNavbar .nav-link{
    padding: 12px 14px !important;
    border-radius: 12px;
    color: rgba(255,255,255,.92);
  }


  /* Quote button stays at bottom */
  #mavroNavbar .btn{
    width: 100%;
    margin-top: 10px;
  }

  /* Hide default collapse width behavior */
  .navbar-collapse.collapse{display:block;}
}


.back-to-top{position:fixed; right:18px; bottom:18px; display:none; width:44px; height:44px; border-radius:999px; box-shadow:0 10px 30px rgba(15,23,42,.2); display:none; padding:0;}

.back-to-top-icon{display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:16px; line-height:1;}


.whatsapp-fab{
  position:fixed;
  left:18px;
  bottom:18px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 35px rgba(37,99,235,.22);
  color:#fff;
  text-decoration:none;
  z-index:1030;
}

.whatsapp-icon{font-size:18px; line-height:1; font-weight:800; transform:translateY(-1px);}

/* Services page UI (kept distinct from home/about) */
.services-hero-card{
  background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(255,255,255,1));
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}

.services-pill{
  padding: 10px 14px;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 999px;
}
.services-pill-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  display:inline-block;
  box-shadow: 0 0 0 5px rgba(37,99,235,.12);
}

.services-badge{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(37,99,235,.20);
  color: var(--accent);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
}

.services-track-list .services-track-item{
  border: 0;
  border-left: 4px solid transparent;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  color: rgba(15,23,42,.8);
}
.services-track-item .services-track-arrow{margin-left:auto; opacity:.5;}
.services-track-item:hover{background: rgba(37,99,235,.05);}
.services-track-item.is-active{
  background: rgba(37,99,235,.08);
  border-left-color: var(--accent);
  color: var(--primary);
}

.services-track-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(37,99,235,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(37,99,235,.22);
  font-size: 16px;
}

.services-track-panels{position: relative;}
.services-panel{
  background: linear-gradient(180deg, rgba(37,99,235,.05), rgba(255,255,255,1));
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(15,23,42,.05);
  margin-bottom: 16px;
}
.services-panel-inner{display:flex; flex-direction:column; gap:14px;}
.services-panel-top .services-panel-kicker{
  font-weight: 700;
  color: rgba(37,99,235,.95);
  letter-spacing: .2px;
}

.services-bullet{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 12px 12px;
}
.services-bullet-check{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: rgba(37,99,235,.10);
  color: var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

.services-stepper{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 18px;
}
.services-step{
  display:flex;
  gap: 14px;
  padding: 16px 6px;
}
.services-step:not(:last-child){border-bottom: 1px solid rgba(15,23,42,.08);}
.services-step-num{
  font-weight: 900;
  font-size: 14px;
  color: rgba(37,99,235,.95);
  width: 44px;
}
.services-step-title{font-weight: 800; margin-bottom: 4px;}

.services-matrix-card{
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 18px 40px rgba(15,23,42,.05);
}
.services-matrix-item{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 14px;
  height: 100%;
}
.services-matrix-badge{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.22);
  color: var(--accent);
}

.services-cta{
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(15,23,42,.02));
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 18px;
  padding: 22px;
}

/* Clients page UI */
.clients-spotlight{
  background: radial-gradient(circle at 10% 0%, rgba(37,99,235,.18), rgba(255,255,255,0) 45%),
              radial-gradient(circle at 100% 40%, rgba(15,23,42,.06), rgba(255,255,255,0) 52%);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.clients-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.65);
  font-weight:650;
}
.clients-spotlight-card{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,1));
  border:1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding:22px;
  box-shadow: 0 22px 55px rgba(15,23,42,.06);
}
.clients-spotlight-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.clients-stat{
  background: rgba(255,255,255,.8);
  border:1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding:14px;
}
.clients-stat-value{
  font-size: 20px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: .2px;
}
.clients-stat-label{font-size: 12.5px; color: rgba(15,23,42,.65); font-weight:650;}
.clients-logo-wall{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.clients-logo-badge{
  border:1px dashed rgba(15,23,42,.18);
  background: rgba(255,255,255,.7);
  padding:10px 12px;
  border-radius: 999px;
  color: rgba(15,23,42,.8);
  font-weight:650;
}
.clients-casestudies{background: linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));}
.clients-case-card{
  height:100%;
  background: rgba(255,255,255,.8);
  border:1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  padding:18px;
  box-shadow: 0 18px 40px rgba(15,23,42,.05);
  position: relative;
  overflow:hidden;
}
.clients-case-card::after{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width:140px;
  height:140px;
  background: radial-gradient(circle at center, rgba(37,99,235,.20), rgba(37,99,235,0));
  transform: rotate(-10deg);
}
.clients-case-top{position:relative; z-index:1; padding-right:8px;}
.clients-case-logo{
  position:absolute;
  right:0;
  top:0;
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.22);
  overflow:hidden;
}
.clients-case-logo img{object-fit:contain; width:28px; height:28px;}
.clients-case-tag{

  display:inline-flex;
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--accent);
  font-weight:800;
  font-size: 12.5px;
}
.clients-case-title{position:relative; z-index:1; margin-top: 12px; margin-bottom: 8px;}
.clients-case-outcome{position:relative; z-index:1; min-height: 52px;}
.clients-case-tech{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px;}
.clients-tech-chip{
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.75);
  font-weight:650;
}
.clients-case-action{position:relative; z-index:1; margin-top: 14px;}
.clients-testimonial-quote{
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(255,255,255,1));
  border:1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding:22px;
  box-shadow: 0 22px 55px rgba(15,23,42,.05);
  height:100%;
}
.clients-quote-mark{
  font-size: 56px;
  line-height: 1;
  color: rgba(37,99,235,.35);
  font-weight:900;
}
.clients-quote-text{margin-top: -10px; font-size: 16px;}
.clients-quote-author{margin-top: 14px; font-weight: 800; color: rgba(15,23,42,.75); font-size: 13.5px;}
.clients-faq-card{
  background: rgba(255,255,255,.7);
  border-radius: 20px;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.04);
  padding:18px !important;
}
.clients-cta{
  background: radial-gradient(circle at 20% 0%, rgba(37,99,235,.22), rgba(255,255,255,0) 55%),
              linear-gradient(135deg, rgba(37,99,235,.10), rgba(15,23,42,.02));
  border:1px solid rgba(37,99,235,.20);
  border-radius: 20px;
  padding:22px;
}

/* IntersectionObserver reveal (SEO-safe: content is present in HTML; animation only enhances visuals) */
.reveal-anim{
  opacity:1;
  transform:none;
}

/* Apply initial visual offset only when JS adds the 'reveal-pending' marker */
.reveal-pending{
  opacity:1;
  transform: translateY(10px);
}

.reveal-anim.reveal-pending{
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), opacity 600ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.reveal-anim.is-visible{
  transform: translateY(0);
  opacity:1;
}

/* Reduce animation for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important;}
  .reveal-anim.reveal-pending{transform:none;}
}