/* Main menu, phones + tablets: slide-in panel, hamburger, sticky bottom bar. Loaded with media=(max-width:1180px); site.js switches it on for wide screens whose menu does not fit (html.nav-burger). */
:root{--hh:76px;--hh-s:66px;--lh:40px;--lh-s:36px}
  .menu-btn{display:block}
  .lang-switch{margin-left:auto}
  /* the blurred header would trap the fixed side panel inside itself, so it is plain on phones and tablets */
  .site-header::before,.site-header.is-solid::before{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav,.nav-backdrop{pointer-events:auto}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:80;background:rgba(3,8,24,.62);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
  html.nav-open .nav-backdrop{opacity:1;visibility:visible;transition:opacity .3s}
  html.nav-open,html.nav-open body{overflow:hidden}
  /* page behind: no scrolling and no sticky bottom bar while the menu is open */
  html.nav-open .mbar{display:none}
  /* full-height dark panel that slides in from the right: full width on phones, 420px on tablets */
  .nav{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:90;width:100%;max-width:100%;padding:0 0 max(16px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:radial-gradient(120% 60% at 100% 0%,var(--glow-a),transparent 60%),radial-gradient(90% 50% at 0% 100%,var(--glow-b),transparent 60%),var(--dark);
    border-left:1px solid rgba(255,255,255,.12);box-shadow:-24px 0 60px rgba(0,0,0,.5);transform:translateX(104%);visibility:hidden;transition:transform .38s cubic-bezier(.32,.72,0,1),visibility 0s .38s}
  .nav.open{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.32,.72,0,1)}
  .nav-top{display:flex;align-items:center;flex:none;min-height:calc(var(--hh) + var(--sat));padding:var(--sat) 68px 0 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}
  .nav-top .lang-switch{margin:0}
  /* list: big text (18px), 52px rows, a line icon before every item; the spacer pushes the contact area + Free Demo to the bottom */
  .menu{display:flex;flex-direction:column;flex:1;padding:6px 14px 8px;gap:2px}
  .menu::after{content:"";order:50;flex:1 1 0;min-height:8px}
  .menu li{display:flex;flex-wrap:wrap;align-items:center}
  .menu>li>a,.menu>li>.nolink,.menu .panel-all,.menu .nf{display:flex;align-items:center;gap:14px;flex:1;min-width:0;min-height:52px;padding:0 12px;font-size:1rem;font-weight:600;line-height:1.35;color:#fff;border-radius:14px}
  .menu .mi{display:inline-flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.09);color:var(--accent)}
  .menu .mi svg{width:20px;height:20px}
  .sub-toggle{width:52px;height:52px;border-radius:14px;color:#dbe4ff}
  /* the sub-menu opens like an accordion under its item */
  .menu li>.sub,.menu li>.mega-panel,.menu li>.panel-extra{display:none;width:100%;padding:2px 0 6px 12px;margin:0 0 8px 24px;border-left:2px solid rgba(255,255,255,.16);width:calc(100% - 24px)}
  .menu li.open>.sub,.menu li.open>.mega-panel,.menu li.open>.panel-extra{display:block;animation:slidedown .28s ease}
  .menu .sub li,.mega-col ul li{display:block}
  .menu .sub a,.mega-col ul a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 10px;font-size:.95rem;font-weight:500;color:#e6ecff;border-radius:12px}
  .menu .sub .mi,.mega-col ul .mi,.menu .nf .mi,.menu .panel-all .mi{width:32px;height:32px;border-radius:10px}
  .menu .sub .mi svg,.mega-col ul .mi svg,.menu .nf .mi svg,.menu .panel-all .mi svg{width:18px;height:18px}
  .mega-col{margin-bottom:4px}
  .mega-head a,.mega-head .nolink{display:block;min-height:0;padding:12px 10px 4px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9fb0e0;border:0;background:none}
  html[lang="bn"] .mega-head a,html[lang="bn"] .mega-head .nolink{letter-spacing:normal;text-transform:none;font-size:.85rem}
  .mega-head a:hover{background:none;color:#fff}
  /* "View all" row and the featured services (POS, Bulk SMS, Website) at the top of the accordion */
  .menu .panel-all{justify-content:flex-start;font-weight:700;color:var(--accent);min-height:48px;padding:0 10px;font-size:.95rem}
  .panel-arrow{margin-left:auto;font-weight:700}
  .nf-box{margin:4px 0 6px}
  .nf-head{margin:6px 10px 4px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9fb0e0}
  html[lang="bn"] .nf-head{letter-spacing:normal;text-transform:none;font-size:.85rem}
  .menu .nf{min-height:56px;margin:6px 0;padding:0 12px;font-size:.98rem;font-weight:700;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18)}
  .menu .nf .mi{background-color:var(--brand);background-image:var(--grad-btn);color:var(--on-grad)}
  /* bottom area: Call / WhatsApp / Email, social icons, then the Free Demo button */
  .menu>li.nav-foot-li{order:90;display:block;padding:16px 0 4px;border-top:1px solid rgba(255,255,255,.1);margin-top:6px}
  .menu .nav-quick{display:flex;gap:8px}
  .menu .nav-quick a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:8px 4px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:.78rem;font-weight:600;line-height:1.2;text-align:center}
  .menu .nav-quick a svg{width:22px;height:22px;flex:none}
  .menu .nav-quick .nq-wa svg{color:#3ddc84}
  .menu .nav-quick .nq-call svg,.menu .nav-quick .nq-mail svg{color:var(--accent)}
  .menu .nav-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 2px;padding:0}
  .menu .nav-social li{display:block}
  .menu .nav-social a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.05)}
  .menu .nav-social svg{width:20px;height:20px}
  .menu>li.menu-cta{order:99;display:block;margin:12px 0 0;padding:0}
  .site-header .menu>li.menu-cta>a,.site-header .menu>li.menu-cta>.nolink{display:block;width:100%;min-height:56px;padding:15px 22px;font-size:1.05rem}
  /* sticky bottom bar: Call, WhatsApp, Free Demo (switch in Settings) */
  body.has-mbar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body.has-mbar .wa-float,html.nav-open .wa-float{display:none}
  .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(10,18,48,.97);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
  .mbar a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:46px;border-radius:999px;font-size:.88rem;font-weight:700;line-height:1;text-decoration:none;color:#fff;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);-webkit-tap-highlight-color:transparent}
  .mbar a svg{flex:none}
  .mbar a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mbar .mbar-wa{background:#1da851;border-color:#1da851}
  .mbar .mbar-demo{background-color:var(--brand);background-image:var(--grad-btn);color:var(--on-grad);border-color:rgba(255,255,255,.5)}
@media (min-width:768px){.nav{width:min(420px,92vw)}}
@media (max-width:380px){.mbar{gap:6px;padding-left:8px;padding-right:8px}.mbar a{font-size:.8rem;gap:4px}.mbar a svg{width:17px;height:17px}}
@media (prefers-reduced-motion:reduce){.nav,.nav-backdrop,.menu-btn-bars span{transition:none!important}.menu li.open>.sub,.menu li.open>.mega-panel{animation:none}}
@keyframes slidedown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}