/* BizzBox.net  |  orange #F47721 · ink #161616 · navy #101B3D · blue #1C7ED6  |  Poppins */
:root{--or:#F47721;--or-d:#DC5C0C;--or-l:#FF9B3D;--ink:#161616;--navy:#101B3D;--blue:#1C7ED6;--cream:#FFF8F2;--line:#E9E9EC;--mut:#69707D;--r:18px;--hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.01em}
#site-header,#site-footer{display:contents}
.text-bb{color:var(--or)!important}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.btn{font-weight:600;border-radius:12px}
.btn-bb{background:var(--or);color:#fff;border:0}.btn-bb:hover,.btn-bb:focus{background:var(--or-d);color:#fff}
.btn-bb-o{border:2px solid var(--or);color:var(--or)}.btn-bb-o:hover{background:var(--or);color:#fff}
.g-b2b{background:linear-gradient(135deg,#101B3D,#1C7ED6)}
.g-b2c{background:linear-gradient(135deg,#F47721,#FFA94D)}
.g-srv{background:linear-gradient(135deg,#161616,#44506f)}
@media(max-width:991.98px){body{padding-bottom:104px}}

/* ticker + marquee */
.mq{overflow:hidden}
.mq-in{display:inline-flex;white-space:nowrap;animation:mq 45s linear infinite}
.mq-slow{animation-duration:75s}.mq:hover .mq-in{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.ticker{background:var(--ink);color:#fff;display:flex;align-items:center;font-size:.82rem}
.tk-label{background:var(--or);font-weight:700;padding:.55rem 1rem;white-space:nowrap;display:flex;align-items:center;gap:.45rem;position:relative;z-index:1}
.ticker .mq{flex:1}
.tk-item{padding:.5rem 1.5rem}.tk-item:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--or-l);margin-right:.8rem;vertical-align:middle}

/* navbar */
.bb-nav{background:#fff;box-shadow:0 4px 24px rgba(16,27,61,.09);padding:.5rem 0}
.navbar-brand{display:flex;align-items:center;gap:.6rem;margin:0}.navbar-brand img{height:46px;width:auto}
.brand-t{font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:.05em;color:var(--ink)}.brand-t b{color:var(--or)}
.brand-t small{display:block;font-size:.52rem;font-weight:600;letter-spacing:.02em;color:var(--mut);margin-top:4px}
.bb-nav .navbar-nav{display:flex;align-items:center}
.bb-nav .nav-link{font-weight:600;color:var(--ink);padding:.55rem .95rem;border-radius:10px;display:inline-flex;align-items:center}
.bb-nav .nav-link:hover,.bb-nav .nav-link.active{color:var(--or);background:var(--cream)}

/* === FIXED DROPDOWN POSITIONING (NO JUMPING / NO NAVBAR MISALIGNMENT) === */
.bb-nav .navbar-nav > li{position:relative;display:flex;align-items:center}
.bb-nav .dropdown-menu{
  border-radius:14px;
  padding:.55rem;
  min-width:220px;
  border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(16,27,61,.12)!important;
  margin:0;
}
.bb-nav .dropdown-item{
  font-weight:500;
  font-size:.88rem;
  color:var(--ink);
  border-radius:8px;
  padding:.55rem .85rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  transition:all .15s;
}
.bb-nav .dropdown-item:hover,.bb-nav .dropdown-item:focus{
  background:var(--cream);
  color:var(--or);
}
.bb-nav .dropend{position:relative}
.bb-nav .dropend .dropdown-toggle::after{
  border-top:.3em solid transparent;
  border-bottom:.3em solid transparent;
  border-left:.3em solid;
  margin-left:auto;
}

@media(min-width:992px){
  /* Keep Bootstrap/Popper from shifting the desktop dropdown horizontally */
  .bb-nav .navbar-nav > li.dropdown > .dropdown-menu{
    position:absolute!important;
    top:100%!important;
    right:auto!important;
    bottom:auto!important;
    left:0!important;
    transform:none!important;
    margin:0!important;
  }

  .bb-nav .navbar-nav > li.dropdown > .dropdown-menu.dropdown-menu-end{
    left:auto!important;
    right:0!important;
  }

  .bb-nav .dropdown:hover > .dropdown-menu{
    display:block;
  }

  /* Business Type -> Category */
  .bb-nav .dropend-level-1:hover > .dropdown-menu{
    display:block;
    position:absolute!important;
    left:100%!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin-top:-6px!important;
    margin-left:4px!important;
  }

  /* Category -> Sub Category */
  .bb-nav .dropend-level-2:hover > .dropdown-menu{
    display:block;
    position:absolute!important;
    left:100%!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin-top:-6px!important;
    margin-left:4px!important;
  }
}

/* hero + page banners */
.hero{position:relative;overflow:hidden;color:#fff;padding:2.4rem 0 2.8rem;background:radial-gradient(800px 380px at 88% -10%,rgba(244,119,33,.38),transparent 62%),radial-gradient(700px 420px at -5% 105%,rgba(28,126,214,.4),transparent 62%),var(--navy)}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(#000,transparent 90%);mask-image:linear-gradient(#000,transparent 90%);pointer-events:none}
.hero>.container{position:relative}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;line-height:1.08;margin-bottom:1rem}
.hero .lead{color:#cdd6ee;max-width:36rem;margin-bottom:1.4rem}
.pbanner{padding:2.2rem 0}.pbanner h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:0 0 .4rem}.pbanner .lead{font-size:1rem;margin:0}
.pbanner .breadcrumb-item a{color:#ffb878}.pbanner .breadcrumb-item.active,.pbanner .breadcrumb-item+.breadcrumb-item:before{color:#b9c3df}
.hero-text{padding-bottom:2.2rem}
.hero-text .swiper-pagination{bottom:0;text-align:left}
.hero-text .swiper-pagination-bullet{background:#fff;opacity:.4;transition:width .25s}
.hero-text .swiper-pagination-bullet-active{background:var(--or);opacity:1;width:28px;border-radius:6px}
.search-card{background:#fff;color:var(--ink);border-radius:var(--r);padding:1rem;margin-top:.4rem;box-shadow:0 22px 50px rgba(0,0,0,.32)}
.search-card .form-label{font-size:.74rem;font-weight:600;color:var(--mut);margin-bottom:.25rem}
.form-control,.form-select{border-radius:10px;border-color:#dcdfe6;padding:.6rem .85rem;font-size:.92rem}
.form-control:focus,.form-select:focus{border-color:var(--or);box-shadow:0 0 0 .2rem rgba(244,119,33,.18)}
.hero-img-w{height:100%;display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:.8rem}
.hero-img{flex:1;min-width:0}.hero-img .swiper-slide{height:auto}
.hero-img a{display:flex;flex-direction:column;height:100%;color:#fff}
.img-tile{flex:1;min-height:230px;border-radius:14px;display:grid;place-items:center}
.img-tile i{font-size:6.5rem;color:rgba(255,255,255,.92);filter:drop-shadow(0 10px 22px rgba(0,0,0,.3))}
.hero-img h5{margin:.8rem 0 .1rem;font-size:1.05rem}.hero-img small{color:#b9c3df}
.pinbar{background:var(--cream);border-bottom:1px solid #f3e1cf;padding:.7rem 0}
.pin{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem 1rem;margin:0 .4rem;border-radius:99px;background:#fff;border:1px solid #f1dcc8;font-size:.85rem;font-weight:500;color:var(--ink)}
.pin i{color:var(--or)}.pin b{color:var(--navy)}.pin:hover{border-color:var(--or)}

/* sections */
.sec{padding:3.4rem 0}.sec-alt{background:var(--cream)}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.6rem}
.sec-h h2{font-size:clamp(1.45rem,3vw,2.05rem);font-weight:800;margin:0}
.sec-h h2:after{content:"";display:block;width:46px;height:4px;border-radius:4px;background:var(--or);margin-top:.55rem}
.sec-h p{margin:.6rem 0 0;color:var(--mut)}
.seg{height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg-h{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;color:#fff}.seg-h i{font-size:1.7rem}
.seg-h h3{font-size:1.15rem;margin:0}.seg-h small{opacity:.8}.seg-h a{margin-left:auto;color:#fff;font-weight:600;font-size:.8rem;white-space:nowrap}
.seg-g{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:1rem}
.cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:.85rem .3rem;border-radius:14px;background:var(--cream);color:var(--ink);font-size:.78rem;font-weight:600;transition:background .2s,color .2s}
.cat i{font-size:1.55rem;color:var(--or)}.cat:hover{background:var(--or);color:#fff}.cat:hover i{color:#fff}

/* two-row sliders */
.sg{overflow:hidden}.sg-b{height:452px}.sg-t{height:420px}
.sg .swiper-slide{height:calc((100% - 16px)/2)}
.sg-pg{position:static;margin-top:1.1rem;text-align:center}
.swiper-pagination-bullet-active{background:var(--or)}

/* cards */
.bcard,.pcard{display:block;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);transition:box-shadow .2s,transform .2s}
.bcard:hover,.pcard:hover{box-shadow:0 14px 34px rgba(16,27,61,.14);transform:translateY(-3px);color:var(--ink)}
.bc-top{height:88px;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 1rem;overflow:hidden}
.bc-top i{font-size:4rem;color:rgba(255,255,255,.92);line-height:.85;margin-bottom:-.5rem}
.tag{position:absolute;left:.8rem;top:.75rem;background:#fff;color:var(--navy);font-size:.68rem;font-weight:700;padding:.15rem .65rem;border-radius:99px}
.bc-body{padding:.9rem 1rem 1rem}
.bc-body h3{font-size:1rem;margin:0 0 .15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-body p{color:var(--mut);font-size:.82rem;margin:0 0 .7rem}
.bc-meta{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--mut)}.bc-meta i{color:var(--or)}
.rate{background:#e8f6ed;color:#1a7f3c;padding:.1rem .55rem;border-radius:8px;font-weight:600}.rate i{color:#1a7f3c!important}
.pc-img{height:132px;display:grid;place-items:center;position:relative;color:#fff}.pc-img i{font-size:3.3rem}.pm-img{height:240px;border-radius:14px}.pm-img i{font-size:5rem}
.off{position:absolute;right:.6rem;top:.6rem;background:#fff;color:var(--or-d);font-size:.68rem;font-weight:700;padding:.15rem .6rem;border-radius:99px}
.pc-body{padding:.8rem .9rem 1rem}.pc-body h4{font-size:.92rem;margin:0 0 .15rem}.pc-v{font-size:.76rem;color:var(--mut)}
.pc-pr{display:flex;align-items:baseline;gap:.5rem;margin:.5rem 0 0}.pc-pr b{font-size:1.05rem;color:var(--navy)}.pc-pr s{color:var(--mut);font-size:.78rem}
.tcard{height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem}
.tcard p{flex:1;margin:0;font-size:.88rem;color:#3a3f4a}.tcard .who{display:flex;align-items:center;gap:.7rem}.stars{color:var(--or);font-size:.8rem}
.av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:700}
.av-s{width:34px;height:34px;font-size:.78rem}
.lg{display:inline-flex;align-items:center;gap:.6rem;margin:0 .6rem;padding:.5rem 1.1rem .5rem .5rem;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--navy);font-weight:600;font-size:.9rem}

/* features: hexagon icons */
.feat{display:flex;gap:1.1rem;align-items:flex-start;height:100%;padding:1.3rem;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.feat h3{font-size:1.05rem;margin:0 0 .25rem}.feat p{margin:0;color:var(--mut);font-size:.88rem}
.fi-w{flex:none;filter:drop-shadow(0 6px 12px rgba(244,119,33,.4))}
.fi{position:relative;display:grid;place-items:center;width:64px;height:64px;clip-path:var(--hex);background:linear-gradient(135deg,var(--or),var(--blue));color:#fff;font-size:1.5rem}
.fi:before{content:"";position:absolute;inset:3px;clip-path:var(--hex);background:linear-gradient(160deg,#16275a,var(--navy))}.fi i{position:relative}

/* inner pages */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.form-label{font-size:.82rem;font-weight:600}
.empty{text-align:center;padding:3rem 1rem;border:2px dashed var(--line);border-radius:var(--r);color:var(--mut)}.empty i{font-size:2.6rem;color:var(--or)}.empty h4{color:var(--ink);margin:.6rem 0 .3rem}
.bd-av{width:84px;height:84px;border-radius:22px;display:grid;place-items:center;color:#fff;font-size:2.4rem;border:4px solid rgba(255,255,255,.22)}
.fact{background:var(--cream);border-radius:14px;padding:.8rem .9rem;height:100%}.fact i{color:var(--or)}.fact small{display:block;color:var(--mut);font-size:.72rem}.fact b{font-size:.86rem}
.cinfo li{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--line)}.cinfo li:last-child{border:0}.cinfo i{color:var(--or);margin-top:.15rem}.cinfo a{color:var(--ink)}
.map{width:100%;height:280px;border:0;border-radius:var(--r)}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;color:var(--mut);font-weight:500}.stat b{display:block;font-size:2.1rem;line-height:1.1;color:var(--navy);font-weight:800}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;height:100%}.step h3{font-size:1.05rem}.step p{margin:0;color:var(--mut);font-size:.9rem}
.step-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--or);color:#fff;font-weight:800;margin-bottom:.8rem}
.cta{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;padding:2.4rem;border-radius:24px;color:#fff;background:radial-gradient(500px 240px at 100% 0,rgba(244,119,33,.45),transparent 60%),var(--navy)}
.cta h2{margin:0 0 .4rem}.cta p{margin:0;color:#cdd6ee;max-width:34rem}

/* footer */
.ft{background:var(--navy);color:#b9c3df;padding:3.5rem 0 1.5rem}
.ft h6{color:#fff;font-weight:700;margin-bottom:1rem}.ft a{display:block;color:#b9c3df;padding:.22rem 0;font-size:.9rem}.ft a:hover{color:var(--or-l)}
.logo-chip{display:inline-block;background:#fff;border-radius:16px;padding:.6rem .9rem}.logo-chip img{display:block}
.ft .soc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;padding:0}.ft .soc:hover{background:var(--or);color:#fff}
.ft-b{border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.2rem;font-size:.82rem}

/* === MOBILE TOP MENU ONLY ===
   The existing bottom mobile navigation (.mbar) is intentionally untouched.
*/
.mobile-top-actions{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-left:auto;
}

.mobile-top-search,
.mobile-top-menu{
  width:42px;
  height:42px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:12px;
}

.mobile-top-menu{
  background:var(--navy);
  color:#fff;
  border:0;
  font-size:1.5rem;
}

.mobile-top-menu:hover,
.mobile-top-menu:focus{
  background:var(--navy);
  color:#fff;
}

.mobile-top-offcanvas{
  height:min(88vh,760px)!important;
  border-radius:0 0 24px 24px;
  border:0;
  box-shadow:0 18px 50px rgba(16,27,61,.24);
}

.mobile-top-offcanvas .offcanvas-header{
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--line);
  background:#fff;
}

.mobile-menu-brand{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.mobile-menu-brand img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.mobile-menu-brand strong{
  display:block;
  color:var(--ink);
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
}

.mobile-menu-brand strong span{color:var(--or)}

.mobile-menu-brand small{
  display:block;
  color:var(--mut);
  font-size:.53rem;
  font-weight:600;
  margin-top:4px;
}

.mobile-top-offcanvas .offcanvas-body{
  padding:.8rem 1rem 1.5rem;
  overflow-y:auto;
}

.mobile-top-links{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.mobile-top-links > a,
.mobile-top-link{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  padding:.72rem .85rem;
  border:0;
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font-size:.92rem;
  font-weight:650;
  text-align:left;
}

.mobile-top-links > a:hover,
.mobile-top-link:hover{
  background:var(--cream);
  color:var(--or);
}

.mobile-top-links > a > i,
.mobile-top-link > span > i{
  width:24px;
  color:var(--or);
  font-size:1.1rem;
  margin-right:.45rem;
}

.mobile-top-link > span{
  display:flex;
  align-items:center;
}

.mobile-chevron{
  color:var(--mut);
  transition:transform .2s;
}

.mobile-collapse-toggle:not(.collapsed) .mobile-chevron{
  transform:rotate(180deg);
  color:var(--or);
}

.mobile-business-levels{
  margin:.15rem 0 .3rem 0;
  padding:.25rem 0 .15rem .7rem;
  border-left:2px solid #f4c19f;
}

.mobile-all-link{
  background:var(--cream)!important;
  color:var(--navy)!important;
}

.mobile-category{
  margin-top:.25rem;
}

.mobile-sub-link{
  min-height:44px;
  padding:.62rem .7rem;
  font-size:.86rem;
}

.mobile-subcategories{
  margin:.1rem 0 .25rem .7rem;
  padding:.2rem 0 .15rem .65rem;
  border-left:2px solid #e8edf7;
}

.mobile-fourth-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:38px;
  padding:.46rem .6rem;
  border-radius:8px;
  color:#626b7c;
  font-size:.75rem;
  font-weight:500;
}
.mobile-fourth-link i{
  width:19px;
  color:var(--or);
}
.mobile-fourth-link:hover{
  background:var(--cream);
  color:var(--or);
}
.mobile-level-4{
  margin:.1rem 0 .25rem .55rem;
  padding:.2rem 0 .15rem .55rem;
  border-left:2px solid #f0e0d5;
}

.mobile-third-link{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-height:40px;
  padding:.5rem .65rem;
  border-radius:9px;
  color:#4d5668;
  font-size:.79rem;
  font-weight:550;
}

.mobile-third-link i{
  width:20px;
  color:var(--or);
  font-size:.92rem;
}

.mobile-third-link:hover{
  background:var(--cream);
  color:var(--or);
}

.mobile-top-cta{
  margin-top:.55rem;
  justify-content:center!important;
  background:var(--or)!important;
  color:#fff!important;
  font-weight:700!important;
}

.mobile-top-cta > i{
  color:#fff!important;
  width:auto!important;
  margin-right:.2rem!important;
}

@media(min-width:992px){
  .mobile-top-actions,
  .mobile-top-offcanvas{
    display:none!important;
  }
}

@media(max-width:575.98px){
  .mobile-top-actions{
    gap:.3rem;
  }
  .mobile-top-search,
  .mobile-top-menu{
    width:40px;
    height:40px;
  }
  .mobile-top-offcanvas{
    height:90vh!important;
  }
}

/* mobile bottom bar with floating centre button */
.mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:1030;display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;padding:.7rem .2rem .55rem;background:#fff;border-radius:22px;box-shadow:0 10px 40px rgba(16,27,61,.3)}
.mbar a:not(.mfab){display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.66rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--navy)}
.mbar a:not(.mfab) i{font-size:1.45rem}.mbar a.active:not(.mfab){color:var(--or)}
.mfab{position:absolute;left:50%;top:-30px;transform:translateX(-50%);display:grid;place-items:center;width:70px;height:70px;border-radius:50%;border:5px solid #fff;background:linear-gradient(145deg,var(--or-l),var(--or-d));color:#fff;text-align:center;font-size:.72rem;font-weight:800;line-height:1.15;box-shadow:0 8px 20px rgba(244,119,33,.5)}
.mfab:hover{color:#fff}
.oc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.oc-g a{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.95rem .3rem;border-radius:14px;background:var(--cream);color:var(--navy);font-weight:600;font-size:.78rem;text-align:center}.oc-g i{font-size:1.5rem;color:var(--or)}

/* admin dashboard */
.adm{background:#f4f6fb}
.adm-col{flex:none;width:0}
.adm-side{--bs-offcanvas-width:280px}
.adm-in{height:100%;background:var(--navy);padding:1.2rem 1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}
.adm-in a{display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;border-radius:12px;color:#c5cff0;font-weight:500;font-size:.92rem}
.adm-in a:hover,.adm-in a.on{background:rgba(244,119,33,.18);color:#fff}.adm-in a.on i{color:var(--or-l)}
.adm-brand{display:flex;align-items:center;gap:.6rem;padding:.2rem .5rem 1.2rem;color:#fff!important;font-weight:800;letter-spacing:.05em}.adm-brand img{height:38px;background:#fff;border-radius:10px;padding:3px}.adm-brand b{color:var(--or)}
.adm-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;padding:.7rem 1.2rem;background:#fff;border-bottom:1px solid var(--line)}
.kpi{display:flex;align-items:center;gap:1rem}.kpi .ic{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:14px;color:#fff;font-size:1.4rem}
.kpi b{display:block;font-size:1.65rem;line-height:1.1}.kpi small{color:var(--mut)}.up{color:#1a7f3c;font-weight:600;font-size:.78rem}
@media(min-width:992px){.adm-col{width:252px;position:sticky;top:0;height:100vh}.adm-col .adm-side{height:100%!important}}

@media(max-width:575.98px){
  .sec{padding:2.4rem 0}
  .sg-b{height:440px}
  .seg-h small{display:none}
  .hero{padding:1.8rem 0 2.2rem}
  .cta{padding:1.6rem}
  .app-qr{left:2px;bottom:54px}
}
@media(prefers-reduced-motion:reduce){.mq-in{animation:none}.mq{overflow-x:auto}html{scroll-behavior:auto}}

/* === FULL-PAGE TEMPLATE SUPPORT ===
   Only makes shorter pages occupy the full viewport.
   Existing colors, spacing, components, layout and design are unchanged.
*/
html, body{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* =========================================================
   BIZZBOX MOBILE APP DOWNLOAD
   Additive section only — existing template styling untouched.
   ========================================================= */
.app-download{
  position:relative;
  padding:3.6rem 0;
  overflow:hidden;
  background:#fff;
}

.app-download-card{
  position:relative;
  overflow:hidden;
  min-height:470px;
  padding:3rem 3.4rem;
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(520px 320px at 88% 18%,rgba(244,119,33,.30),transparent 65%),
    radial-gradient(520px 340px at 8% 110%,rgba(28,126,214,.25),transparent 65%),
    linear-gradient(135deg,#0c1634 0%,#101B3D 55%,#18244d 100%);
  box-shadow:0 22px 55px rgba(16,27,61,.18);
  isolation:isolate;
}

.app-download-card:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.24;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 92%);
  mask-image:linear-gradient(90deg,#000,transparent 92%);
  pointer-events:none;
}

.app-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(4px);
  pointer-events:none;
}

.app-glow-1{
  width:220px;
  height:220px;
  right:-80px;
  bottom:-90px;
  background:rgba(244,119,33,.22);
}

.app-glow-2{
  width:170px;
  height:170px;
  left:-80px;
  top:-70px;
  background:rgba(28,126,214,.18);
}

.app-copy{
  position:relative;
  z-index:2;
  max-width:650px;
}

.app-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  padding:.42rem .8rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:99px;
  background:rgba(255,255,255,.07);
  color:#ffb16d;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
}

.app-kicker i{font-size:.95rem}

.app-copy h2{
  margin:0 0 1rem;
  color:#fff;
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.035em;
}

.app-copy h2 span{
  color:#ff913f;
}

.app-lead{
  max-width:580px;
  margin:0 0 1.35rem;
  color:#cbd5ee;
  font-size:1rem;
  line-height:1.75;
}

.app-points{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem .9rem;
  margin-bottom:1.55rem;
}

.app-points span{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#eef2ff;
  font-size:.78rem;
  font-weight:500;
}

.app-points i{
  color:#ff913f;
}

.app-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}

.play-store-btn{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  min-width:190px;
  padding:.65rem 1rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:13px;
  color:#fff;
  background:#050505;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  transition:transform .2s,box-shadow .2s,background .2s;
}

.play-store-btn:hover{
  color:#fff;
  background:#111;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.32);
}

.play-store-btn>i{
  font-size:2rem;
  line-height:1;
}

.play-store-btn span{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.play-store-btn small{
  margin-bottom:.22rem;
  font-size:.52rem;
  font-weight:600;
  letter-spacing:.06em;
  color:#d7d7d7;
}

.play-store-btn strong{
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:-.02em;
}

.app-availability{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:#d6def4;
  font-size:.75rem;
  line-height:1.35;
}

.app-availability>i{
  color:#8fda76;
  font-size:1.65rem;
}

.app-availability small{
  color:#909dbc;
}

.app-visual{
  position:relative;
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
  z-index:2;
}

.app-phone{
  position:relative;
  z-index:3;
  width:214px;
  height:410px;
  transform:rotateY(-13deg) rotateX(3deg) rotateZ(1deg);
  transform-style:preserve-3d;
  filter:drop-shadow(25px 28px 25px rgba(0,0,0,.35));
}

.app-phone:before{
  content:"";
  position:absolute;
  inset:5px -12px 5px 8px;
  border-radius:36px;
  background:#080d1b;
  transform:translateZ(-24px);
  opacity:.65;
}

.app-phone-frame{
  position:absolute;
  inset:0;
  padding:7px;
  border:2px solid #606a82;
  border-radius:35px;
  background:linear-gradient(145deg,#1f2637,#070b13 55%,#343d51);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.18),
    inset -3px -4px 7px rgba(0,0,0,.65),
    8px 10px 0 rgba(0,0,0,.2);
}

.app-phone-screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:28px;
  background:#f8fafc;
  color:var(--ink);
}

.app-phone-speaker{
  position:absolute;
  z-index:10;
  top:13px;
  left:50%;
  width:62px;
  height:16px;
  border-radius:99px;
  background:#05070b;
  transform:translateX(-50%);
}

.app-phone-camera{
  position:absolute;
  z-index:11;
  top:17px;
  left:calc(50% + 25px);
  width:7px;
  height:7px;
  border-radius:50%;
  background:#202c46;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.4);
}

.app-screen-top{
  display:flex;
  justify-content:space-between;
  padding:10px 14px 0;
  color:#1c2741;
  font-size:.48rem;
  font-weight:700;
}

.app-screen-brand{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:24px 13px 11px;
}

.app-screen-brand img{
  width:32px;
  height:32px;
  object-fit:contain;
}

.app-screen-brand strong{
  display:block;
  font-size:.88rem;
  line-height:1;
  letter-spacing:.02em;
}

.app-screen-brand strong span{color:var(--or)}

.app-screen-brand small{
  display:block;
  margin-top:3px;
  color:#798296;
  font-size:.39rem;
  font-weight:600;
}

.app-search{
  display:flex;
  align-items:center;
  gap:.35rem;
  margin:0 12px;
  padding:.55rem .65rem;
  border:1px solid #e2e6ee;
  border-radius:10px;
  background:#fff;
  color:#8992a4;
  font-size:.48rem;
  box-shadow:0 4px 10px rgba(16,27,61,.06);
}

.app-search i{color:var(--or);font-size:.6rem}

.app-screen-title{
  padding:15px 13px 7px;
  color:#101b3d;
  font-size:.65rem;
  font-weight:800;
}

.app-mini-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  padding:0 10px;
}

.app-mini-grid div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:7px 2px;
  border-radius:9px;
  background:#fff3e9;
  color:#1b2642;
  font-size:.38rem;
  font-weight:700;
}

.app-mini-grid i{
  color:var(--or);
  font-size:.8rem;
}

.app-business-card{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:10px;
  padding:8px;
  border-radius:11px;
  background:#101b3d;
  color:#fff;
  box-shadow:0 7px 15px rgba(16,27,61,.2);
}

.app-business-icon{
  display:grid;
  place-items:center;
  flex:none;
  width:30px;
  height:30px;
  border-radius:8px;
  background:var(--or);
}

.app-business-icon i{font-size:.85rem}

.app-business-card div:nth-child(2){
  flex:1;
  min-width:0;
}

.app-business-card strong{
  display:block;
  font-size:.44rem;
  white-space:nowrap;
}

.app-business-card small{
  display:block;
  margin-top:2px;
  color:#c3cce1;
  font-size:.36rem;
}

.app-business-card>i{
  color:#ff9b3d;
  font-size:.65rem;
}

.app-phone-nav{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:7px 5px 8px;
  border-top:1px solid #e5e8ee;
  background:#fff;
}

.app-phone-nav span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:#7c8494;
  font-size:.35rem;
  font-weight:700;
}

.app-phone-nav i{font-size:.72rem}

.app-phone-nav .active{color:var(--or)}

/* QR code — positioned only in the unused space beside the phone */
.app-qr{
  position:absolute;
  z-index:6;
  left:0;
  top:50%;
  width:108px;
  padding:7px 7px 8px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:16px;
  background:rgba(10,18,43,.76);
  box-shadow:0 16px 32px rgba(0,0,0,.26);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  text-align:center;
  transform:translateY(-50%);
  transition:transform .2s,box-shadow .2s;
}

.app-qr:hover{
  color:#fff;
  transform:translateY(calc(-50% - 3px));
  box-shadow:0 20px 38px rgba(0,0,0,.34);
}

.app-qr-image{
  display:block;
  width:94px;
  height:94px;
  padding:5px;
  border-radius:10px;
  background:#fff;
}

.app-qr-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.app-qr-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.28rem;
  margin-top:.42rem;
  color:#eef2ff;
  font-size:.56rem;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
}

.app-qr-label i{
  color:#ff913f;
  font-size:.65rem;
}

.app-float{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem .75rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.1);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:.68rem;
  font-weight:700;
}

.app-float i{
  color:#ff9b3d;
  font-size:1rem;
}

.app-float-top{
  top:44px;
  right:4px;
  transform:rotate(5deg);
}

.app-float-bottom{
  bottom:42px;
  left:0;
  transform:rotate(-5deg);
}

.app-orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  transform:rotateX(68deg) rotateZ(-12deg);
}

.app-orbit-1{
  width:390px;
  height:150px;
}

.app-orbit-2{
  width:320px;
  height:125px;
  border-color:rgba(244,119,33,.2);
  transform:rotateX(68deg) rotateZ(25deg);
}

@media(max-width:991.98px){
  .app-download{padding:2.5rem 0}
  .app-download-card{padding:2.3rem 1.5rem}
  .app-copy{text-align:center;margin:auto}
  .app-points{justify-content:center}
  .app-actions{justify-content:center}
  .app-visual{height:410px;margin-top:.5rem}
}

@media(max-width:575.98px){
  .app-download-card{
    border-radius:22px;
    padding:2rem 1rem 1.2rem;
  }

  .app-copy h2{font-size:2rem}
  .app-lead{font-size:.9rem;line-height:1.6}
  .app-points{
    display:grid;
    gap:.45rem;
    justify-items:start;
    width:max-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }

  .app-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .play-store-btn{
    justify-content:center;
    width:100%;
  }

  .app-availability{justify-content:center}

  .app-visual{
    height:385px;
    margin-top:.2rem;
  }

  .app-phone{
    width:190px;
    height:365px;
  }

  .app-float{
    font-size:.58rem;
    padding:.5rem .6rem;
  }

  .app-float-top{right:-2px;top:42px}
  .app-float-bottom{left:-2px;bottom:35px}
  .app-orbit-1{width:330px;height:130px}
  .app-orbit-2{width:280px;height:110px}
  .app-qr{left:8px;top:auto;bottom:58px;transform:none;width:94px;padding:5px 5px 6px}
  .app-qr:hover{transform:translateY(-3px)}
  .app-qr-image{width:82px;height:82px}
  .app-qr-label{font-size:.49rem}
}


/* ============================================================
   MOBILE HERO ORDER
   Mobile:
   1. Business image slider
   2. Search
   3. Hero text slider
   Desktop is unchanged.
   ============================================================ */
@media (max-width: 991.98px){
  .hero .row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:
      "hero-image"
      "hero-search"
      "hero-text" !important;
    gap:1rem !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hero .row > .col-lg-8,
  .hero .row > .col-lg-4{
    display:contents !important;
  }

  .hero .hero-img-w{
    grid-area:hero-image !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }

  .hero .search-card{
    grid-area:hero-search !important;
    width:100% !important;
    margin-top:0 !important;
  }

  .hero .hero-text{
    grid-area:hero-text !important;
    width:100% !important;
    order:initial !important;
  }
}

/* ============================================================
   MOBILE TOP MENU — STREAMLINED
   Only the new top menu is adjusted.
   Existing bottom .mbar remains untouched.
   ============================================================ */
@media (max-width:991.98px){

  .mobile-top-links{
    gap:.15rem !important;
  }

  /* Main menu rows: icon + text together, not pushed apart */
  .mobile-top-links > a,
  .mobile-top-link{
    min-height:46px !important;
    padding:.62rem .72rem !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:10px !important;
    background:transparent !important;
    color:var(--ink) !important;
    justify-content:flex-start !important;
    font-size:.91rem !important;
    font-weight:700 !important;
  }

  .mobile-top-links > a > i,
  .mobile-top-link > span > i{
    flex:0 0 25px !important;
    width:25px !important;
    margin-right:.55rem !important;
    text-align:center !important;
    color:var(--or) !important;
  }

  .mobile-top-link > span{
    flex:1 1 auto !important;
    align-items:center !important;
  }

  .mobile-top-link > .mobile-chevron{
    flex:0 0 auto !important;
    width:auto !important;
    margin-left:auto !important;
    margin-right:.1rem !important;
    color:#788196 !important;
  }

  .mobile-top-links > a:hover,
  .mobile-top-link:hover,
  .mobile-top-links > a:focus,
  .mobile-top-link:focus{
    background:var(--cream) !important;
    color:var(--ink) !important;
  }

  /* Business type level */
  .mobile-business-levels{
    margin:.1rem 0 .35rem .65rem !important;
    padding:.2rem 0 .2rem .65rem !important;
    border-left:2px solid #f5c9a9 !important;
  }

  .mobile-sub-link{
    min-height:42px !important;
    padding:.55rem .65rem !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#25304a !important;
    font-size:.84rem !important;
    font-weight:700 !important;
  }

  /* Category rows are buttons, so remove browser button borders */
  .mobile-third-link{
    width:100% !important;
    min-height:40px !important;
    margin:1px 0 !important;
    padding:.5rem .6rem !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#4c566b !important;
    font-size:.8rem !important;
    font-weight:650 !important;
    text-align:left !important;
    justify-content:flex-start !important;
  }

  .mobile-third-link > span{
    display:flex;
    align-items:center;
    flex:1 1 auto;
  }

  .mobile-third-link > span > i,
  .mobile-third-link > i:first-child{
    flex:0 0 20px;
    width:20px !important;
    margin-right:.45rem;
    color:var(--or) !important;
  }

  .mobile-third-link .mobile-chevron{
    flex:0 0 auto !important;
    width:auto !important;
    margin-left:auto !important;
    color:#7c8595 !important;
  }

  .mobile-subcategories{
    margin:.05rem 0 .25rem .55rem !important;
    padding:.15rem 0 .1rem .55rem !important;
    border-left:1px solid #e8edf5 !important;
  }

  /* Sub-category links */
  .mobile-fourth-link{
    min-height:37px !important;
    padding:.42rem .55rem !important;
    border-radius:7px !important;
    color:#5c6678 !important;
    font-size:.76rem !important;
    font-weight:550 !important;
  }

  .mobile-fourth-link i{
    flex:0 0 18px !important;
    width:18px !important;
    color:var(--or) !important;
  }

  .mobile-level-4{
    margin:.05rem 0 .25rem .45rem !important;
    padding:.1rem 0 .1rem .5rem !important;
    border-left:1px solid #edf0f5 !important;
  }

  /* All rows are visually consistent, with only "All" lightly highlighted */
  .mobile-all-link{
    background:rgba(255,248,242,.8) !important;
    color:var(--navy) !important;
    border-radius:8px !important;
  }

  .mobile-category{
    margin-top:.1rem !important;
  }

  .mobile-top-cta{
    margin-top:.5rem !important;
    min-height:48px !important;
    justify-content:center !important;
    background:var(--or) !important;
    color:#fff !important;
  }
}


/* ============================================================
   BIZZBOX FIRST-LOAD WELCOME MODAL
   Additive only. Existing site components are not modified.
   ============================================================ */

.bb-welcome-modal{
  --bb-modal-navy:#101b3d;
  --bb-modal-orange:#f47721;
  --bb-modal-cream:#fff8f2;
  --bb-modal-ink:#161616;
  --bb-modal-muted:#68728a;
  z-index:1090;
}

.bb-welcome-modal .modal-backdrop{
  z-index:1080;
}

.bb-welcome-dialog{
  width:calc(100% - 2rem);
  max-width:760px;
  margin-top:4.5rem;
  margin-bottom:2rem;
}

.bb-welcome-dialog .modal-content{
  position:relative;
  overflow:visible;
  border:0;
  border-radius:30px;
  background:#fff;
  box-shadow:
    0 35px 90px rgba(16,27,61,.30),
    0 10px 30px rgba(0,0,0,.10);
}

/* Dark premium top/art area */
.bb-welcome-art{
  position:absolute;
  inset:0 0 auto 0;
  height:225px;
  overflow:hidden;
  border-radius:30px 30px 0 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(244,119,33,.32), transparent 27%),
    radial-gradient(circle at 85% 45%, rgba(28,126,214,.20), transparent 32%),
    linear-gradient(135deg,#101b3d 0%,#152752 56%,#0d1734 100%);
}

.bb-welcome-art:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:18px 18px;
  mask-image:linear-gradient(to bottom,black,transparent);
  -webkit-mask-image:linear-gradient(to bottom,black,transparent);
}

.bb-art-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(3px);
  opacity:.7;
}

.bb-art-glow-1{
  width:210px;
  height:210px;
  right:-70px;
  top:-85px;
  background:rgba(244,119,33,.28);
}

.bb-art-glow-2{
  width:170px;
  height:170px;
  left:-70px;
  bottom:-105px;
  background:rgba(28,126,214,.24);
}

.bb-art-orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  transform:rotate(-16deg);
}

.bb-art-orbit-1{
  width:470px;
  height:145px;
  right:-85px;
  top:38px;
}

.bb-art-orbit-2{
  width:350px;
  height:110px;
  right:-10px;
  top:63px;
}

.bb-art-cube{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.04));
  color:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.bb-art-cube i{
  color:#ff9a51;
  font-size:1.2rem;
}

.bb-art-cube-1{
  right:105px;
  top:54px;
  transform:rotate(10deg) perspective(300px) rotateY(-12deg);
}

.bb-art-cube-2{
  right:46px;
  top:118px;
  width:38px;
  height:38px;
  transform:rotate(-13deg) perspective(300px) rotateY(15deg);
}

.bb-art-cube-3{
  right:205px;
  top:128px;
  width:40px;
  height:40px;
  transform:rotate(7deg) perspective(300px) rotateY(-16deg);
}

.bb-welcome-badge{
  position:absolute;
  z-index:12;
  top:-58px;
  left:50%;
  width:126px;
  height:126px;
  transform:translateX(-50%);
  pointer-events:none;
}

.bb-badge-logo{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border:5px solid #fff;
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#f6f7fa);
  box-shadow:
    0 18px 30px rgba(16,27,61,.25),
    inset 0 -7px 12px rgba(16,27,61,.08);
}

.bb-badge-logo:after{
  content:"";
  position:absolute;
  inset:-9px;
  z-index:-1;
  border-radius:50%;
  border:2px solid rgba(244,119,33,.65);
  transform:rotate(18deg);
}

.bb-badge-logo img{
  width:67px;
  height:67px;
  object-fit:contain;
}

.bb-badge-ring{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px dashed rgba(244,119,33,.5);
  transform:translate(-50%,-50%);
}

.bb-badge-ring-1{
  width:116px;
  height:116px;
}

.bb-badge-ring-2{
  width:106px;
  height:106px;
  border-color:rgba(28,126,214,.32);
  transform:translate(-50%,-50%) rotate(35deg);
}

.bb-badge-spark{
  position:absolute;
  z-index:8;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f47721;
  box-shadow:0 0 12px rgba(244,119,33,.75);
}

.bb-spark-1{left:5px;top:54px}
.bb-spark-2{right:7px;top:24px;width:5px;height:5px}
.bb-spark-3{right:17px;bottom:8px;width:4px;height:4px;background:#1c7ed6}

.bb-welcome-close{
  position:absolute;
  z-index:20;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:.9rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:all .2s ease;
}

.bb-welcome-close:hover,
.bb-welcome-close:focus{
  background:#fff;
  color:var(--or);
  border-color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.bb-welcome-body{
  position:relative;
  z-index:3;
  padding:150px 48px 34px;
}

.bb-welcome-brand{
  display:flex;
  align-items:baseline;
  gap:.65rem;
  margin-bottom:.35rem;
}

.bb-welcome-kicker{
  color:var(--bb-modal-orange);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.16em;
}

.bb-welcome-wordmark{
  color:var(--bb-modal-navy);
  font-size:.95rem;
  font-weight:900;
  letter-spacing:.06em;
}

.bb-welcome-wordmark span{color:var(--bb-modal-orange)}

.bb-welcome-body h2{
  position:relative;
  margin:.2rem 0 .75rem;
  color:var(--bb-modal-navy);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.045em;
}

.bb-welcome-body h2 span{
  color:var(--bb-modal-orange);
}

.bb-welcome-intro{
  max-width:640px;
  margin:0 0 1.25rem;
  color:var(--bb-modal-muted);
  font-size:.91rem;
  line-height:1.65;
}

.bb-welcome-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
}

.bb-welcome-feature{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  min-height:72px;
  padding:.72rem;
  border:1px solid #edf0f5;
  border-radius:14px;
  background:#fbfcfe;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.bb-welcome-feature:hover{
  transform:translateY(-2px);
  border-color:#f5d2b9;
  box-shadow:0 10px 25px rgba(16,27,61,.08);
}

.bb-feature-icon{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--bb-modal-cream);
  color:var(--bb-modal-orange);
  font-size:.95rem;
}

.bb-welcome-feature strong{
  display:block;
  margin-top:1px;
  color:var(--bb-modal-navy);
  font-size:.76rem;
  font-weight:800;
  line-height:1.2;
}

.bb-welcome-feature small{
  display:block;
  margin-top:.2rem;
  color:#7a8395;
  font-size:.66rem;
  line-height:1.35;
}

.bb-welcome-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.35rem;
  padding-top:1rem;
  border-top:1px solid #edf0f5;
}

.bb-welcome-tagline{
  display:flex;
  align-items:center;
  gap:.4rem;
  color:#697286;
  font-size:.68rem;
  font-weight:650;
}

.bb-welcome-tagline i{
  color:var(--bb-modal-orange);
}

.bb-welcome-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.bb-welcome-play{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-height:46px;
  padding:.48rem .85rem;
  border-radius:11px;
  background:#050505;
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.bb-welcome-play:hover{
  color:#fff;
  transform:translateY(-1px);
}

.bb-welcome-play > i{
  font-size:1.25rem;
}

.bb-welcome-play small,
.bb-welcome-play strong{
  display:block;
  line-height:1.05;
}

.bb-welcome-play small{
  font-size:.48rem;
  letter-spacing:.04em;
}

.bb-welcome-play strong{
  margin-top:2px;
  font-size:.78rem;
}

.bb-welcome-explore{
  min-height:46px;
  padding:.55rem .9rem;
  border:1px solid #e5e9f0;
  border-radius:11px;
  background:#fff;
  color:var(--bb-modal-navy);
  font-size:.7rem;
  font-weight:800;
}

.bb-welcome-explore:hover{
  border-color:#f4c4a0;
  background:var(--bb-modal-cream);
  color:var(--bb-modal-orange);
}

@media(max-width:767.98px){
  .bb-welcome-dialog{
    width:calc(100% - 1.2rem);
    margin-top:4.2rem;
    margin-bottom:1rem;
  }

  .bb-welcome-dialog .modal-content{
    border-radius:24px;
  }

  .bb-welcome-art{
    height:190px;
    border-radius:24px 24px 0 0;
  }

  .bb-welcome-body{
    padding:128px 20px 22px;
  }

  .bb-welcome-brand{
    justify-content:center;
  }

  .bb-welcome-body h2{
    text-align:center;
    font-size:2rem;
  }

  .bb-welcome-intro{
    text-align:center;
    font-size:.82rem;
    line-height:1.55;
  }

  .bb-welcome-features{
    grid-template-columns:1fr;
    gap:.5rem;
  }

  .bb-welcome-feature{
    min-height:62px;
    padding:.58rem;
  }

  .bb-welcome-feature small{
    font-size:.63rem;
  }

  .bb-welcome-bottom{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }

  .bb-welcome-tagline{
    justify-content:center;
  }

  .bb-welcome-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .bb-welcome-play,
  .bb-welcome-explore{
    justify-content:center;
    width:100%;
  }

  .bb-welcome-close{
    top:10px;
    right:10px;
    width:36px;
    height:36px;
  }

  .bb-art-cube-1{right:70px}
  .bb-art-cube-2{right:22px}
  .bb-art-cube-3{right:145px}
}

@media(max-width:420px){
  .bb-welcome-dialog{
    width:calc(100% - .8rem);
  }

  .bb-welcome-body{
    padding-left:15px;
    padding-right:15px;
  }

  .bb-welcome-body h2{
    font-size:1.75rem;
  }

  .bb-welcome-actions{
    grid-template-columns:1fr;
  }

  .bb-welcome-badge{
    top:-51px;
    transform:translateX(-50%) scale(.9);
  }
}



/* ============================================================
   BIZZBOX WELCOME MODAL — REFINED COLOR + EXTRA BRAND STORY
   Small visual refinement only; all existing layout/behaviour stays intact.
   ============================================================ */
.bb-welcome-modal{
  --bb-modal-navy:#102a5c;
  --bb-modal-orange:#ff7a1a;
  --bb-modal-cream:#fff6ec;
  --bb-modal-ink:#16203a;
  --bb-modal-muted:#69758e;
}

.bb-welcome-dialog .modal-content{
  background:#fffdfb;
  box-shadow:
    0 35px 90px rgba(16,42,92,.27),
    0 10px 30px rgba(0,0,0,.09);
}

.bb-welcome-art{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,122,26,.38), transparent 27%),
    radial-gradient(circle at 84% 42%, rgba(47,128,237,.25), transparent 33%),
    linear-gradient(135deg,#0c1d46 0%,#17396f 56%,#101b3d 100%);
}

.bb-art-glow-1{background:rgba(255,122,26,.32)}
.bb-art-glow-2{background:rgba(47,128,237,.28)}
.bb-art-cube i{color:#ffad68}

.bb-badge-logo{
  box-shadow:
    0 18px 30px rgba(16,42,92,.23),
    inset 0 -7px 12px rgba(16,42,92,.08);
}

.bb-badge-logo:after{border-color:rgba(255,122,26,.72)}
.bb-badge-ring{border-color:rgba(255,122,26,.56)}
.bb-badge-ring-2{border-color:rgba(47,128,237,.38)}
.bb-badge-spark{background:#ff7a1a;box-shadow:0 0 12px rgba(255,122,26,.78)}
.bb-spark-3{background:#2f80ed}

.bb-welcome-story{
  max-width:650px;
  margin:-.35rem 0 1.05rem;
  padding-left:.8rem;
  border-left:3px solid rgba(255,122,26,.55);
  color:#7a8499;
  font-size:.76rem;
  line-height:1.55;
}

.bb-welcome-feature{
  background:#fffaf5;
  border-color:#f0ebe5;
}

.bb-feature-icon{
  background:linear-gradient(145deg,#fff3e7,#fff9f4);
}

.bb-welcome-tagline{color:#667189}
.bb-welcome-play{
  background:#111827;
  box-shadow:0 8px 20px rgba(16,42,92,.16);
}
.bb-welcome-explore{
  border-color:#e6e8ed;
}

@media(max-width:767.98px){
  .bb-welcome-story{
    margin-top:-.2rem;
    font-size:.72rem;
    line-height:1.5;
  }
}