/* ==========================================================================
   Moventra247 — Brand Design System
   Navy (trust) / Electric Blue (technology) / Orange (CTA)
   ========================================================================== */

:root{
  --navy: #0a1e42;
  --navy-2: #0f2a5c;
  --blue: #1e6fff;
  --blue-light: #4fa3ff;
  --orange: #ff6a1a;
  --orange-2: #ff8c42;
  --grey-light: #f4f6fb;
  --grey: #eef1f8;
  --ink: #1b2536;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow-soft: 0 8px 24px -14px rgba(10,30,66,0.14);
  --shadow-hover: 0 16px 34px -14px rgba(10,30,66,0.2);
}

html{scroll-behavior:smooth;}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}

::selection{ background: var(--orange); color:#fff; }

/* ---------- Brand utility classes ---------- */
.text-navy{ color: var(--navy); }
.text-blue-brand{ color: var(--blue); }
.text-orange-brand{ color: var(--orange); }
.bg-navy{ background-color: var(--navy); }
.bg-grey-light{ background-color: var(--grey-light); }

.gradient-navy{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 45%, #123a8f 100%);
}
.gradient-orange{
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
}
.gradient-text{
  background: linear-gradient(90deg, var(--blue-light), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color:#fff; font-weight:600; padding: .9rem 1.8rem; border-radius: 999px;
  box-shadow: 0 10px 25px -8px rgba(255,106,26,.55);
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn-cta:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px -8px rgba(255,106,26,.65); color:#fff;}
.btn-cta:active{ transform: translateY(-1px); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.55);
  color:#fff; font-weight:600; padding: .85rem 1.7rem; border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: all .25s ease;
}
.btn-ghost:hover{ background:#fff; color: var(--navy); transform: translateY(-3px); }

.btn-outline-navy{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border: 1.5px solid var(--navy); color: var(--navy); font-weight:600;
  padding: .8rem 1.6rem; border-radius: 999px; transition: all .25s ease;
}
.btn-outline-navy:hover{ background: var(--navy); color:#fff; transform: translateY(-2px); }

/* ---------- Sticky header ---------- */
#site-header{
  position: sticky; top:0; z-index:1000;
  transition: box-shadow .35s ease, background-color .35s ease, padding .35s ease;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
}
#site-header.scrolled{
  box-shadow: 0 8px 30px -10px rgba(10,30,66,0.2);
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}
#site-header .nav-link{
  position:relative; font-weight:600; color: var(--navy); opacity:.85;
  transition: opacity .2s ease, color .2s ease;
}
#site-header .nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background: linear-gradient(90deg,var(--blue),var(--orange));
  transition: width .3s ease;
}
#site-header .nav-link:hover{ opacity:1; }
#site-header .nav-link:hover::after,
#site-header .nav-link.active::after{ width:100%; }
#site-header .nav-link.active{ color: var(--orange); opacity:1; }

/* mobile menu */
#mobile-menu{
  max-height:0; overflow:hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
#mobile-menu.open{ max-height: 700px; }

/* ---------- Animations ---------- */
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes floatX{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(10px);} }
@keyframes pulseRing{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.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 spinSlow{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
@keyframes gradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(28px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.float-anim{ animation: floatY 5s ease-in-out infinite; }
.float-anim-slow{ animation: floatY 7s ease-in-out infinite; }
.float-anim-x{ animation: floatX 6s ease-in-out infinite; }
.spin-slow{ animation: spinSlow 18s linear infinite; }
.animate-gradient{
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .1s; }
.reveal-delay-2{ transition-delay: .2s; }
.reveal-delay-3{ transition-delay: .3s; }
.reveal-delay-4{ transition-delay: .4s; }
.reveal-delay-5{ transition-delay: .5s; }

/* ---------- Cards ---------- */
.card-service{
  border-radius: var(--radius-lg);
  background:#fff;
  box-shadow: var(--shadow-soft);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .3s ease;
  border: 1px solid rgba(10,30,66,0.06);
}
.card-service:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(30,111,255,0.2);
}
.icon-badge{
  width:60px; height:60px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(30,111,255,.12), rgba(255,106,26,.12));
  color: var(--blue);
  transition: transform .3s ease, background .3s ease;
  font-size: 1.6rem;
}
.card-service:hover .icon-badge{
  transform: scale(1.06);
  background: linear-gradient(135deg, var(--blue), var(--orange));
  color:#fff;
}

.city-card{ position:relative; overflow:hidden; border-radius: var(--radius-lg); }
.city-card img{ transition: transform .6s ease; }
.city-card:hover img{ transform: scale(1.12); }
.city-card .overlay{
  background: linear-gradient(180deg, rgba(10,30,66,0) 30%, rgba(10,30,66,0.88) 100%);
}

/* Step timeline */
.step-num{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff; font-weight:700; box-shadow: 0 8px 18px -6px rgba(30,111,255,.5);
  flex-shrink:0;
}
.timeline-line{
  position:absolute; left:23px; top:46px; bottom:-8px; width:2px;
  background: repeating-linear-gradient(180deg, rgba(30,111,255,.35) 0 8px, transparent 8px 16px);
}

/* Testimonials marquee */
.marquee-track{
  display:flex; gap:1.5rem; width: max-content;
  animation: ticker 32s linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }

/* Accordion tweaks (bootstrap) */
.accordion-button:not(.collapsed){
  color: var(--navy); background-color: #eef4ff; font-weight:700;
}
.accordion-button:focus{ box-shadow: 0 0 0 .2rem rgba(30,111,255,.2); }
.accordion-item{ border-radius: 14px !important; overflow:hidden; margin-bottom:.85rem; border:1px solid #e7ecf7 !important; }
.accordion-button::after{ filter: hue-rotate(190deg); }

/* Floating WhatsApp button */
.whatsapp-float{
  position: fixed; bottom: 24px; right: 24px; z-index: 1100;
  width: 62px; height:62px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; box-shadow: 0 12px 26px -8px rgba(37,211,102,.6);
  animation: pulseRing 2.2s infinite;
  transition: transform .25s ease;
}
.whatsapp-float:hover{ transform: scale(1.1); color:#fff; }

.back-to-top{
  position: fixed; bottom: 24px; right: 96px; z-index:1100;
  width:46px; height:46px; border-radius:50%;
  background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft); opacity:0; pointer-events:none; transform: translateY(10px);
  transition: all .3s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
.back-to-top:hover{ background: var(--blue); color:#fff; }

/* Blob decoration */
.blob{
  position:absolute; border-radius:50%; filter: blur(80px); opacity:.18; z-index:0;
}

/* Hero pattern grid */
.hero-grid{
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* Counter */
.counter-num{ font-variant-numeric: tabular-nums; }

/* Section label */
.section-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(30,111,255,.08); color: var(--blue);
  font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.4rem 1rem; border-radius:999px;
}
.section-tag .dot{ width:6px; height:6px; border-radius:50%; background: var(--orange); }

/* Utility: line icons crispness */
.bi{ vertical-align: -0.125em; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--grey-light); }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,var(--blue),var(--navy)); border-radius:10px; }

/* Form controls */
.form-control-brand{
  border: 1.5px solid #e2e7f3; border-radius: 12px; padding: .85rem 1.1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.form-control-brand:focus{
  outline:none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30,111,255,.12);
}

/* Sticky quick-contact bar (mobile) */
.mobile-quickbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1090;
  display:flex; background:#fff; box-shadow: 0 -8px 24px -10px rgba(10,30,66,.25);
}
.mobile-quickbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.6rem 0; font-size:.72rem; font-weight:700; color:var(--navy); gap:.15rem;
}
.mobile-quickbar a.primary{ background: linear-gradient(135deg,var(--orange),var(--orange-2)); color:#fff; }

@media (min-width: 992px){
  .mobile-quickbar{ display:none; }
}

/* ==========================================================================
   Interactive design layer — scroll progress, typewriter, animated
   step connector, FAQ live search, location scrollspy
   ========================================================================== */

/* Top scroll-progress bar */
#scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  z-index: 1200; transition: width .1s linear;
}

/* Typewriter caret */
.typewriter-caret{
  display:inline-block; width:3px; margin-left:2px;
  background: currentColor; animation: caretBlink .9s steps(1) infinite;
}
@keyframes caretBlink{ 50%{ opacity:0; } }

/* How-it-works animated connector */
.hiw-track{ position:relative; }
.hiw-line-bg{
  position:absolute; top:40px; left:10%; right:10%; height:3px;
  border-radius:3px; overflow:hidden;
  background: #e7ecf7;
}
.hiw-line-fill{
  position:absolute; top:0; left:0; height:100%;
  border-radius:3px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  width:0%; transition: width .25s ease-out;
}
@media (max-width: 767px){ .hiw-line-bg{ display:none; } }

/* City chip scrollspy nav */
.city-chip{
  padding:.55rem 1.2rem; border-radius:999px; font-weight:700; font-size:.85rem;
  border:1.5px solid #e2e7f3; color: var(--navy); transition: all .25s ease;
}
.city-chip:hover{ border-color: var(--blue); color: var(--blue); }
.city-chip.active{
  background: linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; border-color: transparent;
  box-shadow: 0 8px 18px -6px rgba(30,111,255,.45);
}

/* FAQ search */
.faq-search-wrap{ position:relative; }
.faq-search-wrap i{ position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); color:#9aa5bd; }
#faq-search{ padding-left: 2.8rem; }
#faq-empty{ display:none; }
#faq-empty.show{ display:block; }
.faq-hide{ display:none !important; }

/* Document upload dropzone */
#dropzone.dragover{
  border-color: var(--blue); background: rgba(30,111,255,.06);
}
.file-item{
  display:flex; align-items:center; gap:.6rem;
  background:#fff; border:1px solid #e7ecf7; border-radius:10px;
  padding:.55rem .8rem; font-size:.82rem;
}
.file-item .file-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--navy); font-weight:600; }
.file-item .file-size{ color:#9aa5bd; font-size:.72rem; flex-shrink:0; }
.file-item .file-remove{
  color:#c94a3a; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; transition: background .2s ease;
}
.file-item .file-remove:hover{ background:#fdecea; }