/* Client-reference implementation layered onto the approved BNB Tech Pro design. */
:root{--client-grad:linear-gradient(135deg,#1f9dfd,#0143ce);--client-navy:#05254f;--client-navy-2:#073a7e;--client-line:#dce8f7;--client-soft:#f5f9ff;--client-ink:#0b1730}

/* ---------- Global premium header ---------- */
.client-header.site-header{height:auto!important;padding:10px 0;background:rgba(245,249,255,.94)!important;border:0!important;box-shadow:none!important;backdrop-filter:blur(16px);position:sticky;top:0;z-index:90}
.client-nav-shell.nav-row{height:64px!important;min-height:64px;display:grid!important;grid-template-columns:210px 1fr 190px!important;align-items:center;padding:0 14px 0 12px;border-radius:18px;background:linear-gradient(112deg,#062b5e 0%,#073c81 53%,#0143ce 100%);box-shadow:0 12px 34px rgba(3,42,93,.18);border:1px solid rgba(255,255,255,.13);overflow:visible}
.client-nav-shell .brand{width:max-content;display:flex;align-items:center;background:#fff;border-radius:13px;padding:6px 11px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.client-nav-shell .brand img{width:128px!important;height:auto}
.client-nav-shell .main-nav{height:100%;display:flex;align-items:center;justify-content:center;gap:30px}
.client-nav-shell .main-nav>a,.client-nav-shell .nav-dropdown-btn{height:100%;display:flex;align-items:center;gap:6px;padding:0 2px;color:#fff!important;font-size:13px;font-weight:750;background:transparent;border:0;position:relative;cursor:pointer}
.client-nav-shell .main-nav>a:after{content:"";position:absolute;left:50%;right:50%;bottom:9px;height:2px;border-radius:99px;background:#fff;transition:.25s}
.client-nav-shell .main-nav>a:hover:after,.client-nav-shell .main-nav>a.active:after{left:0;right:0}
.client-nav-shell .nav-dropdown-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.client-nav-shell .nav-dropdown{height:100%;position:relative;display:flex;align-items:center}
.client-nav-shell .nav-dropdown-menu{top:56px;min-width:210px;border-radius:14px;border:1px solid #dce8f7;box-shadow:0 18px 42px rgba(3,32,74,.16);padding:8px;background:#fff}
.client-nav-shell .nav-dropdown-menu a{padding:10px 11px;border-radius:9px;color:#193a64;font-size:12px;font-weight:700}
.client-nav-shell .nav-dropdown-menu a:hover{background:#eff6ff;color:#075fda}
.client-nav-shell .nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.client-nav-shell .login-btn{display:inline-flex!important;align-items:center;justify-content:center;min-width:92px;height:42px;padding:0 18px;border-radius:12px;background:#fff!important;color:#084fae!important;font-size:13px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.09)}
.client-nav-shell .search-btn{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.26)!important;background:rgba(255,255,255,.10)!important;color:#fff!important}
.client-nav-shell .search-btn svg{stroke:#fff!important}
.client-nav-shell .menu-toggle{display:none}
.client-mobile-nav{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));top:79px;width:auto!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:18px!important;background:linear-gradient(155deg,#07336c,#062653)!important;padding:12px!important;box-shadow:0 24px 54px rgba(2,25,60,.28)!important;color:#fff}
.client-mobile-nav>a,.client-mobile-nav summary{display:flex!important;align-items:center;justify-content:space-between;min-height:46px;padding:0 12px!important;border-radius:11px!important;color:#fff!important;font-size:13px!important;font-weight:750;border:0!important;cursor:pointer;list-style:none}
.client-mobile-nav>a:hover,.client-mobile-nav summary:hover{background:rgba(255,255,255,.09)}
.client-mobile-nav details summary::-webkit-details-marker{display:none}
.client-mobile-nav details>div{display:grid;gap:3px;padding:3px 7px 8px 18px}
.client-mobile-nav details a{padding:9px 10px;border-radius:9px;color:#cfe4ff;font-size:12px;font-weight:650}
.client-mobile-nav details a:hover{background:rgba(255,255,255,.08);color:#fff}
.client-mobile-nav .mobile-login{margin-top:7px;background:#fff!important;color:#084da8!important;border-radius:999px!important;padding:0 16px!important}

/* ---------- Readability requested by client ---------- */
.process-track{padding:30px 18px 25px!important}
.process-step b{font-size:13px!important;line-height:1.35!important;margin-bottom:8px!important}
.process-step p{font-size:11.5px!important;line-height:1.58!important;color:#586b82!important;max-width:175px;margin-inline:auto!important}
.process-icon{width:58px!important;height:58px!important;font-size:22px!important}
.growth-benefits-grid article{padding:25px 16px!important}
.growth-benefits-grid h3{font-size:13px!important;line-height:1.35!important;margin-bottom:7px!important}
.growth-benefits-grid p{font-size:10.5px!important;line-height:1.55!important;color:#62748b!important;max-width:165px;margin-inline:auto!important}
.growth-benefits-grid article>span{width:48px!important;height:48px!important;font-size:19px!important}

/* ---------- Home latest-post replacement ---------- */
.home-three-posts{gap:18px!important;align-items:stretch}
.editorial-post.home-post{display:flex;flex-direction:column;border-radius:18px!important;overflow:hidden;border:1px solid #dfe9f6!important;background:#fff;box-shadow:0 10px 28px rgba(12,55,109,.07)!important}
.editorial-media{position:relative;display:block;overflow:hidden;background:#eef6ff}
.editorial-post .editorial-media img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0!important}
.editorial-post .editorial-media>span{position:absolute;left:13px;bottom:12px;margin:0!important;padding:5px 8px!important;border-radius:7px!important;background:var(--client-grad)!important;color:#fff;font-size:8px!important;letter-spacing:.04em;box-shadow:0 6px 14px rgba(1,67,206,.24)}
.editorial-body{display:flex;flex:1;flex-direction:column;padding:18px 18px 16px}
.editorial-meta{display:flex;align-items:center;gap:8px;color:#8290a2;font-size:9.5px;font-weight:650}
.editorial-meta i{font-style:normal;color:#b3bdc9}
.editorial-post h3{font-size:17px!important;line-height:1.38!important;margin:10px 0 8px!important}
.editorial-post h3 a:hover{color:#075ed7}
.editorial-post p{font-size:11.5px;line-height:1.65;color:#66778b;margin:0 0 18px}
.editorial-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid #edf2f8;font-size:9.5px;color:#7b899b}
.editorial-footer>a{flex:0 0 auto;padding:8px 11px;border-radius:999px;background:#072d62;color:#fff;font-size:9px;font-weight:800}
.editorial-footer>a:hover{background:#0143ce}

/* ---------- Blog page: simple banner + Popular Blogs ---------- */
.client-blog-banner.blog-page-hero{min-height:270px!important;padding:39px 0 84px!important;background:linear-gradient(115deg,#062b5c 0%,#0750a8 58%,#0e7fe8 100%)!important}
.client-blog-banner .blog-hero-inner{grid-template-columns:1fr 330px!important;align-items:center;gap:34px}
.client-blog-banner h1{font-size:42px!important;max-width:650px!important;margin-top:8px!important}
.client-blog-banner p{font-size:13px!important;line-height:1.7!important;max-width:640px!important}
.client-blog-banner .blog-hero-art{height:185px!important;display:grid;place-items:center}
.client-blog-banner .art-circle{width:185px!important;height:185px!important;border-radius:28px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.20)!important;padding:13px;box-shadow:0 20px 42px rgba(1,25,63,.17)}
.client-blog-banner .art-circle img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.blog-stats-wrap{margin-top:-57px!important}
.blog-stats{padding:21px 28px 23px!important;border-radius:22px!important}
.blog-stats-title{font-size:22px!important;margin-bottom:17px!important;padding-bottom:13px!important}
.blog-stat{min-height:83px!important;padding:13px 16px!important;border-radius:14px!important;background:#f8fbff!important}
.blog-stat-icon{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:13px!important}
.blog-stat small{font-size:10px!important}.blog-stat strong{font-size:27px!important}
.popular-blog-intro{padding:43px 0 18px}
.popular-blog-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-bottom:22px;border-bottom:1px solid #e7edf5}
.popular-blog-row .section-label{font-size:9px;letter-spacing:.12em;color:#0770e7;font-weight:850}
.popular-blog-row h2{font-size:30px;letter-spacing:-.8px;margin:5px 0 3px}
.popular-blog-row p{margin:0;color:#6d7b8c;font-size:13px}
.popular-tools{display:flex;align-items:center;gap:9px}
.compact-search{height:40px;display:flex;align-items:center;gap:7px;border:1px solid #dfe7f1;border-radius:10px;background:#fff;padding:0 11px;min-width:180px;color:#718198}
.compact-search input{width:125px;border:0;outline:0;font-size:11px;color:#22364f;background:transparent}
.popular-tools select{height:40px;min-width:155px;border:1px solid #dfe7f1;border-radius:10px;background:#fff;padding:0 11px;color:#4f6177;font-size:11px;outline:0}
.blog-categories{padding:7px 0 12px!important}
.blog-category-title{padding-top:18px!important}
.blog-featured{padding-top:30px!important}
.blog-posts-section{padding-bottom:64px!important}
.blog-page .client-footer{margin-top:0}

/* ---------- Detail: same desktop concept, refined positioning ---------- */
.client-detail-hero .article-hero-grid{grid-template-columns:.92fr 1.08fr!important;gap:34px!important}
.client-detail-hero .article-cover{order:-1}
.client-detail-hero .article-cover-inner{min-height:320px}
.client-detail-hero h1{font-size:42px!important;line-height:1.08!important}
.toc-mobile-toggle{display:none;width:100%;align-items:center;justify-content:space-between;border:1px solid #dce7f4;background:#f6faff;color:#143b6c;border-radius:10px;padding:11px 12px;font-size:12px;font-weight:800;cursor:pointer}

/* ---------- Footer based on client reference, with BNB content ---------- */
.client-footer.site-footer,.client-footer{margin-top:0;background:linear-gradient(115deg,#052a4a,#041f3b 54%,#063463)!important;color:#fff;padding:34px 0 0!important}
.client-footer-grid.footer-grid{display:grid!important;grid-template-columns:1.3fr repeat(4,1fr)!important;gap:25px!important;padding:0 0 29px!important}
.footer-logo-shell{display:inline-flex;background:#fff;padding:7px 10px;border-radius:12px;margin-bottom:11px}
.client-footer .footer-about img{width:126px!important;margin:0!important;filter:none!important}
.client-footer .footer-about p{font-size:11px!important;line-height:1.6!important;color:#bfd1e6!important;max-width:245px}
.client-footer .social-row{margin-top:13px!important}
.client-footer .social-row a{width:28px!important;height:28px!important;font-size:10px!important;background:#0a4b89!important;border:1px solid rgba(255,255,255,.12)}
.client-footer .footer-col{min-width:0}
.client-footer .footer-col h3{display:block;margin:0 0 13px!important;padding:8px 10px;border-radius:9px;background:#fff;color:#143b66!important;font-size:10.5px!important;font-weight:800}
.client-footer .footer-col>a,.client-footer .footer-col>span{display:block;color:#c4d4e7!important;font-size:10.5px!important;line-height:1.5!important;padding:4px 2px!important}
.client-footer .footer-col>a:hover{color:#fff!important;transform:translateX(2px)}
.client-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.10)!important;margin-top:0!important;padding:0!important}
.client-footer .footer-bottom .container{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8fa9c5;font-size:10px}

/* Inner-page compatibility (about/contact use a different base CSS) */
body:not(.blog-page) .client-header .nav-dropdown-menu{display:none;position:absolute;left:50%;transform:translateX(-50%)}
body:not(.blog-page) .client-header .nav-dropdown:hover .nav-dropdown-menu,body:not(.blog-page) .client-header .nav-dropdown:focus-within .nav-dropdown-menu{display:grid}
body:not(.blog-page) .client-mobile-nav{display:none;position:fixed;z-index:89}
body:not(.blog-page) .client-mobile-nav.open{display:grid}

@media(max-width:1020px){
 .client-nav-shell.nav-row{grid-template-columns:170px 1fr 155px!important}.client-nav-shell .main-nav{gap:22px}
 .client-footer-grid.footer-grid{grid-template-columns:1.25fr repeat(2,1fr)!important}.client-footer .footer-contact{grid-column:2/4}
 .process-step p{font-size:11px!important}
 .client-blog-banner .blog-hero-inner{grid-template-columns:1fr 270px!important}
}
@media(max-width:760px){
 .client-header.site-header{padding:8px 0!important;height:auto!important;background:#f5f9ff!important}
 .client-nav-shell.nav-row{height:58px!important;min-height:58px!important;display:flex!important;grid-template-columns:none!important;padding:0 9px 0 10px!important;border-radius:16px}
 .client-nav-shell .brand{padding:5px 8px;border-radius:11px}.client-nav-shell .brand img{width:108px!important}
 .client-nav-shell .main-nav,.client-nav-shell .login-btn{display:none!important}
 .client-nav-shell .nav-actions{margin-left:auto!important;margin-right:6px!important}
 .client-nav-shell .search-btn{width:38px;height:38px;border-radius:11px}
 .client-nav-shell .menu-toggle{display:flex!important;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.26);align-items:center;justify-content:center;flex-direction:column;gap:4px;background:rgba(255,255,255,.09);order:4}
 .client-nav-shell .menu-toggle span{width:15px;height:1.5px;background:#fff!important;border-radius:9px}
 .client-mobile-nav{top:74px!important}
 .process-track{padding:18px!important;gap:13px!important}
 .process-step{min-height:86px!important;padding:15px 15px 13px 78px!important}
 .process-step b{font-size:13px!important}.process-step p{font-size:11.5px!important;max-width:none!important;margin:0!important}
 .growth-benefits-grid article{min-height:164px!important;padding:18px 11px!important}
 .growth-benefits-grid h3{font-size:12.5px!important}.growth-benefits-grid p{font-size:10.3px!important;max-width:180px}
 .home-three-posts{grid-template-columns:1fr!important;gap:14px!important}
 .editorial-post{display:grid!important;grid-template-columns:132px minmax(0,1fr)!important;min-height:190px}
 .editorial-media{height:100%}.editorial-post .editorial-media img{height:100%!important;aspect-ratio:auto!important;object-fit:cover}
 .editorial-post .editorial-media>span{left:8px;bottom:8px;font-size:6.5px!important}
 .editorial-body{padding:14px 13px!important}.editorial-post h3{font-size:14px!important;line-height:1.34!important;margin:7px 0 6px!important}.editorial-post p{font-size:10px;line-height:1.5;margin-bottom:10px}.editorial-meta{font-size:8px}.editorial-footer{align-items:flex-end;font-size:8px;gap:7px}.editorial-footer>a{font-size:8px;padding:7px 9px}
 .client-blog-banner.blog-page-hero{padding:28px 0 72px!important;text-align:left!important}
 .client-blog-banner .blog-hero-inner{grid-template-columns:1fr!important;text-align:left!important;gap:20px!important}
 .client-blog-banner h1{font-size:31px!important;line-height:1.12!important;margin:7px 0 9px!important}.client-blog-banner p{margin:0!important;font-size:12px!important}
 .client-blog-banner .blog-eyebrow{justify-content:flex-start!important}
 .client-blog-banner .blog-hero-art{height:150px!important}.client-blog-banner .art-circle{width:100%!important;height:150px!important;border-radius:18px!important}.client-blog-banner .art-circle img{object-fit:cover!important}
 .blog-stats-wrap{margin-top:-46px!important}.blog-stats{padding:15px 12px 17px!important}.blog-stats-title{font-size:19px!important}
 .blog-stats-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.blog-stat{min-height:78px!important;padding:10px!important;gap:9px!important}.blog-stat-icon{width:38px!important;height:38px!important;flex-basis:38px!important}.blog-stat strong{font-size:23px!important}.blog-stat small{font-size:8.5px!important}
 .popular-blog-intro{padding:31px 0 10px}.popular-blog-row{display:grid;gap:16px;align-items:start}.popular-blog-row h2{font-size:26px}.popular-tools{width:100%}.compact-search{flex:1;min-width:0}.compact-search input{width:100%}.popular-tools select{width:45%;min-width:130px}
 .blog-category-title{display:flex!important;align-items:flex-end!important}.blog-filter-row{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:7px;scrollbar-width:none}.blog-filter-row::-webkit-scrollbar{display:none}.blog-filter{flex:0 0 auto}
 .client-detail-hero .article-hero-grid{grid-template-columns:1fr!important}.client-detail-hero .article-cover{order:0!important}.client-detail-hero h1{font-size:31px!important}
 .article-sidebar{display:block!important}.article-social{display:none!important}.article-toc{padding:10px!important}.article-toc h3{border:0!important;padding:4px 3px 8px!important;font-size:13px!important}.toc-mobile-toggle{display:flex}.article-toc nav{display:none!important;grid-template-columns:1fr!important;margin-top:8px;max-height:330px;overflow:auto;padding:5px!important;background:#fff;border-top:1px solid #edf2f7}.article-toc.open nav{display:grid!important}.article-toc a{font-size:10px!important;padding:9px 9px!important}
 .client-footer.site-footer,.client-footer{padding-top:27px!important}.client-footer-grid.footer-grid{grid-template-columns:1fr 1fr!important;gap:17px!important}.client-footer .footer-about{grid-column:1/-1!important}.client-footer .footer-contact{grid-column:1/-1!important}.client-footer .footer-col h3{font-size:10px!important}.client-footer .footer-bottom .container{flex-direction:column!important;justify-content:center!important;text-align:center!important;gap:3px!important;padding:9px 0!important}
}
@media(max-width:480px){
 .client-nav-shell .search-btn{display:none!important}.client-nav-shell .nav-actions{display:none!important}.client-nav-shell .menu-toggle{margin-left:auto}
 .process-step{padding-left:72px!important}.growth-benefits-grid{grid-template-columns:1fr 1fr!important}.growth-benefits-grid article{min-height:158px!important}
 .editorial-post{grid-template-columns:112px minmax(0,1fr)!important;min-height:178px}.editorial-post p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.editorial-footer>span{display:none}
 .blog-stats-grid{grid-template-columns:1fr 1fr!important}.blog-stat{display:block!important;text-align:center}.blog-stat-icon{margin:0 auto 6px}.popular-tools{display:grid;grid-template-columns:1fr}.popular-tools select{width:100%}.compact-search{width:100%}
 .client-footer-grid.footer-grid{grid-template-columns:1fr!important}.client-footer .footer-about,.client-footer .footer-contact{grid-column:auto!important}.client-footer .footer-col h3{margin-bottom:8px!important}.client-footer .footer-col>a,.client-footer .footer-col>span{padding:3px 2px!important}
}
@media(hover:none){.editorial-post:hover{transform:none!important}.client-footer .footer-col>a:hover{transform:none}}
/* Search overlay fallback so shared header behaves on every page */
.search-overlay{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;justify-content:center;padding:110px 18px;background:rgba(2,20,46,.72);backdrop-filter:blur(9px)}
.search-overlay.open{display:flex}.search-overlay-form{width:min(620px,100%);display:flex;gap:8px;padding:10px;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.22)}.search-overlay-form input{flex:1;min-width:0;border:1px solid #dce7f4;border-radius:11px;padding:12px 13px;outline:0;font-size:14px}.search-overlay-form button{border:0;border-radius:11px;background:var(--client-grad);color:#fff;font-weight:800;padding:0 18px}.search-close{position:absolute;top:34px;right:34px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;font-size:25px;cursor:pointer}
@media(max-width:760px){
  .client-nav-shell .nav-actions{display:none!important}
  .client-nav-shell .menu-toggle{margin-left:auto!important;order:5!important}
}