html { font-size: 15px; }
body { font-size: 0.9rem; line-height: 1.5; }


:root{
  --brand:#5863f8;
  --brand-2:#7c3aed;
  --ink:#0f1124;
  --muted:#6b7280;
  --soft:#f6f7ff;
}

/* base */
body{ color:var(--ink); }
a{ text-decoration:none; }
.nowrap{ white-space:nowrap; }

.py-6{ padding-block:4.5rem; }
.pt-7{ padding-top:6rem; }
.pb-6{ padding-bottom:4.5rem; }
.bg-soft{ background:var(--soft); }
.bg-gradient{
  background: radial-gradient(1200px 520px at 12% -20%, rgba(124,58,237,.55), transparent 45%),
              radial-gradient(1200px 520px at 88% -25%, rgba(88,99,248,.55), transparent 48%),
              linear-gradient(180deg, #5b63f6, #7d3aed);
}

/* nav */
.shadow-sm-sm{ box-shadow: 0 2px 10px rgba(15,17,36,.06); }
.navbar .navbar-brand .brand-dot{
  width:14px;height:14px;border-radius:50%;
  display:inline-block;background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.navbar .nav-link{ color:#1f2937; }
.navbar .nav-link:hover{ color:var(--brand); }

/* hero */
.hero{
  position: relative;
  background:
    radial-gradient(1100px 520px at 12% -25%, rgba(124,58,237,.10), transparent 42%),
    radial-gradient(1100px 520px at 88% -25%, rgba(88,99,248,.08), transparent 46%),
    linear-gradient(180deg,#ffffff 0%, #f8f9fb 58%, #f1f4ff 100%);
  overflow: clip;
}
.hero .glow{
  position:absolute; inset:-12% -12% auto -12%;
  height:420px; pointer-events:none;
  filter: blur(90px);
  opacity:.28;
  background: conic-gradient(from 140deg at 50% 50%,
              rgba(88,99,248,.28),
              rgba(124,58,237,.22),
              rgba(88,99,248,.28));
}
.grad-text{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.badge.bg-gradient{
  background:linear-gradient(90deg,rgba(88,99,248,.15),rgba(124,58,237,.15));
  color:#3b3f7f;
  border:1px solid rgba(88,99,248,.25);
}
.hero-card{
  border-radius:18px; background:#fff;
}
.hero-card-hd{
  border-bottom:1px dashed #e5e7eb; padding:.75rem 1rem;
}
.hero-card-hd .dot{
  width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:.35rem;
  background:#e5e7eb;
}
.hero-card-body{ padding:1rem 1rem 1.25rem; }
.mini-kpi{ display:flex; gap:.75rem; align-items:center; margin-bottom:.75rem; }
.mini-kpi i{ width:20px;height:20px; color:var(--brand); }
.kpi-title{ font-size:.8rem; color:var(--muted); }
.kpi-value{ font-weight:700; }

.chart-placeholder{
  margin-top:.75rem; padding:1rem; font-size:.9rem; color:#6b7280;
  border:1px dashed #d1d5db; border-radius:12px; text-align:center;
}

.brand-row{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.75rem;}
.brand-pill{
  padding:.45rem .7rem; border-radius:999px; font-size:.8rem; color:#475569;
  background:#fff; border:1px solid #e5e7eb;
}

.stat-chip{
  display:flex; gap:.5rem; align-items:center; padding:.5rem .7rem;
  border:1px solid #e5e7eb; border-radius:999px; background:#fff; font-size:.9rem;
}
.stat-chip i{ width:18px;height:18px; color:var(--brand); }
.counter{ font-weight:700; }

/* feature cards */
.feature-card .feature-icon{
  width:28px;height:28px; color:var(--brand); margin-bottom:.5rem;
}
.icon-list{ list-style:none; padding-left:0; margin:0; }
.icon-list li{ display:flex; gap:.5rem; align-items:flex-start; margin:.35rem 0; color:#374151; }
.icon-list i{ width:18px;height:18px; color:var(--brand); margin-top:.15rem; }

/* modules */
.mod-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:1rem 1.1rem;height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.mod-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,17,36,.06); }
.mod-ic{ width:22px;height:22px;color:var(--brand); }

/* analytics */
.analytics-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; }
.analytics-chart{
  height:160px; border-radius:10px;
  background:linear-gradient(135deg, rgba(88,99,248,.12), rgba(124,58,237,.12));
  display:flex; align-items:center; justify-content:center; color:#3b3f7f; font-weight:600;
}

/* footer */
footer{ background:#fff; border-top:1px solid #eef0f7; }
footer a{ color:#4b5563; }
footer a:hover{ color:var(--brand); }

/* utilities */
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #4e58ea;
  --bs-btn-hover-border-color: #4e58ea;
}
.btn-outline-primary{
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: #cdd1ff;
  --bs-btn-hover-bg: rgba(88,99,248,.08);
  --bs-btn-hover-border-color: var(--brand);
}

/* small screens */
@media (max-width: 991.98px){
  .hero{ padding-top:7.5rem; }
}



  .eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;color:#6c7585;}
  .card-lite{border:1px solid rgba(0,0,0,.08);border-radius:1rem;background:#fff;}
  .shadow-soft{box-shadow:0 10px 30px rgba(16,24,40,.08),0 2px 8px rgba(16,24,40,.04);}
  .feature{transition:transform .25s ease,box-shadow .25s ease;}
  .feature:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(16,24,40,.10);}
  .icon-pill{width:40px;height:40px;border-radius:999px;display:inline-grid;place-items:center;
             background:linear-gradient(135deg,#eef0ff,#f7f5ff);border:1px solid rgba(0,0,0,.06);}
  .step{position:relative;padding-left:2.25rem;}
  .step:before{content:"";position:absolute;left:.8rem;top:1.2rem;bottom:-1.2rem;width:2px;
               background:linear-gradient(#e9eafe,transparent);}
  .step .num{position:absolute;left:0;top:.2rem;width:28px;height:28px;border-radius:999px;
             display:grid;place-items:center;background:#eef0ff;color:#3d46d6;font-weight:600;
             border:1px solid rgba(0,0,0,.05);}




             

/* same behavior as home.html */
.cta-sticky { position: sticky; bottom: 1rem; z-index: 1020; }

/* very light card background */
/* .cta-sticky .card-lite {
  background: linear-gradient(180deg, #ffffff, #f9f9ff);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(16,24,40,0.06);
} */

.cta-sticky .card-lite {
  background: linear-gradient(180deg, #f6f1f1, #dddff5, #f8f9ff);
  background-size: 400% 400%;
  animation: ctaGradient 12s ease-in-out infinite;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(16,24,40,0.06);
}

@keyframes ctaGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* (optional) if you added earlier) remove/disable the floating style */
.cta-floating { display: none !important; }


/* start hidden; reveal on scroll */
.cta-hidden { opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; }
.cta-show   { opacity: 1; transform: none; pointer-events: auto; }




.brand-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #0f1124;   /* dark navy circle */
  color: #fff;                 /* white icon */
}

.brand-icon i {
  width: 18px;
  height: 18px;
}








/* Screenshot frame in hero */
.hero-shot{
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  margin: 0;
  box-shadow: 0 24px 60px rgba(16,24,40,.18);
}

.hero-shot img{
  display:block;
  width:100%;
  height:auto;           /* keeps aspect ratio */
}

.hero-shot-chrome{
  height:24px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, #f7f7fb, #eef0f7);
}

.hero-shot-chrome span{
  width:10px; height:10px; border-radius:50%;
  background:#e3e6ef;
}
.hero-shot-chrome span:nth-child(1){ background:#ff6b6b; }
.hero-shot-chrome span:nth-child(2){ background:#ffce54; }
.hero-shot-chrome span:nth-child(3){ background:#2ecc71; }

/* subtle tilt on large screens (optional) */
@media (min-width: 992px){
  .hero-shot{ transform: rotate(-0.4deg); }
}



#heroCarousel {
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16,24,40,.18);
}

#heroCarousel img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  background-size: 60%;
}






/* Keep hero screenshots a sane, consistent size */
.hero-media{
  /* width cap that scales with viewport */
  max-width: clamp(420px, 36vw, 560px);
  margin-left: auto;            /* pushes it to the right nicely */
}

/* Give the carousel a fixed visual box */
#heroCarousel .carousel-inner{
  /* choose one: fixed height that scales with viewport */
  height: clamp(260px, 34vw, 420px);
  background:#fff;
}

/* Make images fit inside without growing the box */
#heroCarousel img{
  width: 100%;
  height: 100%;        /* overrides earlier img height:auto */
  object-fit: contain; /* keeps full UI visible, no cropping */
  display:block;
}

/* Optional: softer rounded look consistent with your UI */
#heroCarousel{ border-radius:5px; overflow:hidden; box-shadow:0 24px 60px rgba(16,24,40,.18); }

/* (Optional) fade transition instead of slide */
/* #heroCarousel.carousel{ } */




.partner-logos img {
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease;
}
.partner-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}






/* tighten hero vertical space */
header.hero{ padding-bottom: 2.25rem !important; }  /* was pb-6 ≈ 4.5rem */
.partner-logos{ margin-top: 1rem !important; }      /* was mt-5 */
.brand-row{ margin-top: .5rem; }                     /* nudge down a bit */




/* Responsive Google Map box */
.map-embed{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  /* keep height consistent with your card layout */
  aspect-ratio: 16/10;       /* adjusts height automatically */ 
}
.map-embed iframe{
  width:100%;
  height:100%;
  border:0;
}







/* Sidebar category indentation */
.sidebar .list-group-item a{
  display:block;
  padding-left: 1.4rem;        /* ← indent amount */
  position: relative;
}

/* small dot as a visual marker (optional) */
.sidebar .list-group-item a::before{
  content:"";
  position:absolute; left:0.35rem; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:#e2e7ff; transform: translateY(-50%);
}

/* hover + active states */
.sidebar .list-group-item a:hover{
  color:#111827; text-decoration:none;
}
.sidebar .list-group-item .active-link{
  color:#111827; font-weight:700;
}
.sidebar .list-group-item .active-link::before{
  background:#5863f8;          /* brand dot for active */
}


/* extra inner padding for the categories card */
.sidebar .fx-card{ padding-left: 1.1rem; padding-right: 1.1rem; }





/* Vertical bar (|) separators between nav items */
.nav-bar-sep .nav-item:not(:last-child)::after {
  content: "|";
  color: #c4c7ce; /* subtle neutral gray */
  margin: 0 .4rem;
  font-weight: 500;
  opacity: 0.7;
}

.nav-bar-sep .nav-item {
  display: flex;
  align-items: center;
}

/* Hide separator in collapsed mobile nav */
@media (max-width: 991.98px) {
  .nav-bar-sep .nav-item::after { content: none; }
}