html, body {
    overflow-x: hidden;
}    
    
    /* =================== FIXED NAV WRAPPER =================== */
.nav-overlay{
  position: fixed;                          /* keep it visible on scroll */
  top: max(18px, env(safe-area-inset-top)); /* handle iOS notch */
  left: 0; right: 0;
  z-index: 3000;
}

/* =================== NAV PILL + LINKS =================== */
/* logo that sits OUTSIDE the pill (used in some layouts) */
.outside-brand img{ height:32px; width:auto; }
.outside-brand span{ color:#fff; }

/* remove default navbar padding so we can control spacing */
.navbar{ padding:0; }
.navbar-brand{
  width: 100px !important;
  height: 60px !important;
}

/* blur / rounded pill (desktop / default) */
.nav-glass{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background:#2a4cff;               /* your blue pill */
  border:1px solid #fff;
  border-radius:56px;
  padding:.35rem .75rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 30px rgba(0,0,0,.25);
  width:100%;                        /* pill grows to full row width */
}

/* make the UL fill the pill left→right */
.navbar-collapse{ flex-grow:1; }
.nav-glass .navbar-nav{
  margin-left:0 !important;          /* ignore any ms-auto in HTML */
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;     /* spread items edge to edge */
  gap:.25rem;
  padding:0;
}

/* link + button styles */
.navbar .nav-link{
  color:#fff; opacity:.95;
  border-radius:999px;
  padding:.6rem .95rem;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  background:#fff; color:#000 !important;
}
.btn-pill{
  border-radius:999px;
  padding:.55rem 1rem;
  color:#fff;
  background:linear-gradient(90deg,var(--grad1),var(--grad2));
  border:none;
}

/* toggler on dark bg */
.navbar-toggler{ border:1px solid rgba(255,255,255,.35); }
.navbar-toggler-icon{ filter:invert(1) grayscale(1) contrast(200%); }

/* =================== MOBILE BEHAVIOR (no transparent navbar) =================== */
@media (max-width: 991.98px){
  .nav-glass{
    border-radius:20px;
    padding:.5rem;
    background:#2a4cff !important;     /* <-- solid blue on mobile (no transparency) */
    backdrop-filter:none;               /* avoid odd transparency stack on some devices */
    -webkit-backdrop-filter:none;
  }
  /* collapsed menu stacks inside the pill box */
  .nav-glass .navbar-nav{
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    width:100%;
  }
  /* ensure the collapse wrapper itself doesn't introduce transparency */
  .navbar-collapse{
    background:transparent !important;
  }
  .navbar-toggler{
    background: rgba(0,0,0,.25);
    border-color: rgba(255,255,255,.6);
  }
}

/* Mobile navbar background */
@media (max-width: 991.98px) {


  .nav-glass {
    background: transparent !important;  /* let overlay provide the bg */
    border: none;
    box-shadow: none;
  }

  .navbar-toggler {
    background: rgba(0,0,0,0.25);   /* optional: dark backdrop for button */
    border-radius: 8px;
  }

  .navbar-collapse {
    background: #2a4cff;  /* collapsed menu has solid background */
    border-radius: 12px;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
  }

  .navbar-nav .nav-link {
    display: block;
    text-align: left;
    padding: 0.75rem;
    border-radius: 6px;
  }
}

/* Mobile menu: transparent header initially */
@media (max-width: 991.98px){
  /* header bar (the row with logo + toggler) */
  .navbar-mobile{
    background: transparent;
  }
  /* your blue desktop pill stays invisible on mobile */
  .navbar-mobile .nav-glass{
    background: transparent !important;
    border: 0; box-shadow: none; border-radius: 0;
    width: 100%;
  }

  /* The collapsed menu panel */
  .navbar-mobile .navbar-collapse{
    position: absolute;                 /* float under the bar */
    top: calc(100% + 10px);
    left: 12px; right: 12px;
    background: rgba(42,76,255,.98) !important;    /* SOLID blue panel */
    border-radius: 16px;
    padding: .75rem;
    box-shadow: 0 14px 32px rgba(0,0,0,.35);
    z-index: 4000;
  }
  /* Ensure Bootstrap collapse uses block in this layout */
  .navbar-mobile .navbar-collapse.collapse{ display:none !important; }
  .navbar-mobile .navbar-collapse.show{ display:block !important; }

  /* Stack links vertically and make them full-width touch targets */
  .navbar-mobile .navbar-nav{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .35rem;
    width: 100%;
  }
  .navbar-mobile .nav-link,
  .navbar-mobile .btn-pill{
    display: block;
    width: 100%;
    text-align: left;
    padding: .85rem 1rem;
    border-radius: 12px;
    color: #fff;
    background: transparent;
  }
  .navbar-mobile .nav-link:hover{ background: rgba(255,255,255,.12); }
  .navbar-mobile .nav-link.active{ background:#fff; color:#000 !important; }

  /* Toggler visibility */
  .navbar-toggler{
    background: #2a4cff;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.6);
  }
}

/* When you scroll a bit, give the bar itself a background (nice sticky look) */
@media (max-width: 991.98px){
  .navbar-mobile.scrolled{
    background: #2a4cff;               /* same blue as panel */
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    border-radius: 25px;
  }
}

/* 1) Make the navbar float on top of every page */
.nav-overlay{
  position: fixed;                                 /* was: absolute */
  top: max(18px, env(safe-area-inset-top));        /* iOS notch-safe */
  left: 0;
  right: 0;
  z-index: 3000;
}

/* 2) Keep space for the fixed bar (you already have this on .hero) */
.hero{
  padding-top: clamp(96px, 12vw, 140px);           /* leave as-is */
}

/* 3) Nice mobile dropdown when fixed */
@media (max-width: 991.98px){
  .nav-glass{ border-radius: 20px; }

  /* give the collapsed menu its own blurred box under the fixed bar */
  .nav-glass .navbar-collapse{
    background: rgba(12,32,68,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    margin-top: .5rem;
    padding: .5rem;
    max-height: calc(100vh - 120px);               /* scroll if too tall */
    overflow: auto;
  }
}       
    :root{
      --brand:#0f62fe;   /* primary blue */
      --brand-2:#22c55e; /* green accent */
      --text:#0c1b33;
      --muted:#6b7280;
      --border:#e5e7eb;
      --bg:#ffffff;
      --soft:#f8fafc;
      --chip:#E8F2FF;
      --accent:#16a34a;
      --shadow: 0 10px 30px rgba(2,6,23,.06);
    }
    html, body { background: var(--bg); color: var(--text); scroll-behavior: smooth; }

    

    .hero{
      background:
        radial-gradient(900px 300px at 15% 10%, rgba(15,98,254,.10), transparent 60%),
        radial-gradient(800px 300px at 85% 0, rgba(34,197,94,.10), transparent 60%),
        var(--bg);
    }
    .chip{ background: var(--chip); color:#1d4ed8; border:1px solid #dbeafe; padding:8px 12px; border-radius:999px; font-size:.9rem; }
    .pill{ border:1px solid var(--border); border-radius:999px; padding:8px 12px; color: var(--muted); background: #fff; }
    .card-lite{ background: #fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding:24px; }
    .section-title{ letter-spacing:.2px; }
    .logo-gray{ opacity:.7; filter: grayscale(100%); transition: .2s; max-height: 34px; }
    .logo-gray:hover{ opacity:1; filter:none; }
    .soft { background: var(--soft); }

    .timeline{ position:relative; padding-left: 20px; }
    .timeline::before{
      content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
      background: linear-gradient(var(--brand), var(--brand-2)); border-radius: 2px; opacity:.7;
    }
    .badge-num{
      width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
      background: linear-gradient(180deg, var(--brand), var(--brand-2)); color:#fff; font-weight:700; margin-right:8px;
    }
    .check i{ color: var(--accent); }
    .table thead th{ color:#111827; border-bottom-color: var(--border); }
    .table td, .table th{ border-color: var(--border); }
    .faq .accordion-button{ background:#fff; }
    .faq .accordion-button:not(.collapsed){ color: var(--brand); background:#f5f8ff; }
    footer small{ color: var(--muted); }
    .badge-sla{ font-weight:700; background:#ecfeff; color:#0e7490; border:1px solid #cffafe; }
    :root{
    --brand-blue:#2a4cff;
    --muted:#6b7280;
    --ring:#111;              /* stroke for social icons */
  }

  /* Top hairline */
  .site-footer{
    border-top: 2px solid rgba(0,0,0,.08);
    background:#fff;
  }

  /* Logos */
  .footer-logo{ height: 56px; width: auto; }

  /* Social icons (outlined circles) */
  .social{
    width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center;
    border:2px solid var(--ring);
    color:#111; text-decoration:none;
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .social:hover{
    background: var(--brand-blue);
    color:#fff; border-color: var(--brand-blue);
    transform: translateY(-2px);
  }

  /* Column titles */
  .footer-title{
    font-weight:800;
    margin-bottom:.6rem;
  }

  /* Quick links list with slim separators */
  .footer-links{
    list-style:none; padding:0; margin:0;
    border-top:1px solid rgba(0,0,0,.08);
  }
  .footer-links li a{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding:.55rem .2rem;
    color:#111; text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .footer-links li a i{ opacity:.6; }
  .footer-links li a:hover{ color: var(--brand-blue); }

  /* Contact info */
  .footer-contact li{
    display:flex; gap:.6rem; align-items:flex-start;
    padding:.25rem 0; color: var(--muted);
  }
  .footer-contact i{ color:#111; margin-top:.2rem; }

  /* Map box */
  .footer-map{
    border-radius: 8px; overflow:hidden; background:#f6f7fb;
  }
  .footer-map iframe{
    display:block; width:100%; height:160px; border:0;
  }

  /* Bottom bar */
  .footer-bottom{
    background: var(--brand-blue);
    padding: 14px 0;
    margin-top: 10px;
  }
  .bottom-link{
    color:#cfe1ff; text-decoration:none; font-weight:600;
  }
  .bottom-link:hover{ color:#fff; text-decoration:underline; }

  /* Mobile polish */
  @media (max-width: 575.98px){
    .footer-logo{ height:48px; }
    .footer-map iframe{ height:140px; }
  }