@charset "utf-8";
/* =====================================================================
   Best Classified Script — Modern UI Overlay
   Pure design layer. Loaded LAST so it restyles existing markup only.
   No content/markup is added or removed by this file.
   ===================================================================== */

:root {
  --bcs-green: #55bf39;
  --bcs-green-dark: #43ac27;
  --bcs-amber: #ffa726;
  --bcs-amber-dark: #f2960b;
  --bcs-ink: #0f2333;
  --bcs-head: #142b3d;
  --bcs-body: #4a5a6b;
  --bcs-muted: #7488a0;
  --bcs-line: #e7edf3;
  --bcs-soft: #f4f7fb;
  --bcs-soft-2: #eef3f9;
  --bcs-white: #ffffff;
  --bcs-radius: 16px;
  --bcs-radius-lg: 26px;
  --bcs-radius-xl: 34px;
  --bcs-shadow-xs: 0 1px 3px rgba(16, 35, 51, .06);
  --bcs-shadow-sm: 0 6px 18px -8px rgba(16, 35, 51, .18);
  --bcs-shadow: 0 18px 44px -20px rgba(16, 35, 51, .28);
  --bcs-shadow-lg: 0 34px 70px -28px rgba(16, 35, 51, .35);
  --bcs-grad: linear-gradient(135deg, #55bf39 0%, #7ed957 45%, #f3b42d 100%);
  --bcs-grad-green: linear-gradient(135deg, #55bf39 0%, #43ac27 100%);
  --bcs-grad-amber: linear-gradient(135deg, #ffb648 0%, #f2960b 100%);
  --bcs-font: "Poppins", "Muli", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --bcs-font-head: "Poppins", "Muli", "Segoe UI", system-ui, sans-serif;
  --bcs-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------ *
 * 1. Base typography & rhythm
 * ------------------------------------------------------------------ */
body {
  font-family: var(--bcs-font) !important;
  color: var(--bcs-body);
  background-color: var(--bcs-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: .1px;
}

h1, h2, h3, h4, h5, h6,
.title, .card-title, .section-header h2 {
  font-family: var(--bcs-font-head) !important;
  color: var(--bcs-head);
  letter-spacing: -.02em;
  line-height: 1.2;
}

h2, .title {
  font-weight: 700;
}

p {
  line-height: 1.72;
  color: var(--bcs-body);
}

img {
  max-width: 100%;
}

/* Section rhythm — more breathing room, modern scale */
.sec, section.section {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.sec.gray, section.gray {
  background-color: var(--bcs-soft);
}

/* Section titles with modern gradient underline accent */
.title,
.section-headline .title,
.section-header h2,
.multivendor .title,
.faqs h2,
.installnguide h2 {
  position: relative;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  margin-bottom: 1rem;
}

.section-headline.center .title::after,
.multivendor > .container > .title::after,
.faqs > .container > h2.center::after,
.installnguide h2.center::after,
.revenuegrid .title::after,
.section-header h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: var(--bcs-grad);
}

.section-headline p,
.multivendor > .container > p.center,
.faqs > .container > p.center,
.installnguide p.center,
.section-header p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--bcs-muted);
  font-size: 1.02rem;
}

/* ------------------------------------------------------------------ *
 * 2. Buttons — modern pill style with soft depth
 * ------------------------------------------------------------------ */
.btn-site,
.click-btn.btn-style-bubble,
.click-btn.btn-style-bubble-full,
.btn-style-bubble-go,
.bubblebtn-nav .btn-style-bubble {
  border-radius: 999px !important;
  font-family: var(--bcs-font-head);
  font-weight: 600 !important;
  letter-spacing: .2px;
  text-transform: none;
  padding: 0 26px !important;
  height: auto;
  line-height: 2.9 !important;
  box-shadow: 0 10px 22px -12px rgba(85, 191, 57, .8);
  transition: transform .25s var(--bcs-ease), box-shadow .25s var(--bcs-ease), filter .25s var(--bcs-ease);
}

.btn-site {
  background: var(--bcs-grad-green) !important;
}

.btn-site:hover,
.btn-site:focus {
  background: var(--bcs-grad-green) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(85, 191, 57, .95);
  filter: saturate(1.08);
}

.click-btn.btn-style-bubble-full,
.bubblebtn-all .btn-style-bubble-full {
  box-shadow: 0 10px 22px -12px rgba(255, 167, 38, .85);
}

.click-btn:hover {
  transform: translateY(-2px);
}

/* Nav "Contact" bubble → solid gradient pill */
.bubblebtn-nav .click-btn.btn-style-bubble {
  background: var(--bcs-grad-green) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -12px rgba(85, 191, 57, .9);
}

.bubblebtn-nav .click-btn.btn-style-bubble:hover {
  box-shadow: 0 16px 30px -12px rgba(85, 191, 57, 1);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------ *
 * 3. Navbar — clean glass header
 * ------------------------------------------------------------------ */
header.top-nav nav,
header.top-nav .nav-wrapper {
  background: rgba(255, 255, 255, .88) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 4px 24px -14px rgba(16, 35, 51, .28);
}

header.top-nav .brand-logo img {
  transition: transform .3s var(--bcs-ease);
}

header.top-nav .brand-logo:hover img {
  transform: scale(1.03);
}

header.top-nav ul#nav-mobile > li > a {
  color: var(--bcs-head);
  font-family: var(--bcs-font-head);
  font-weight: 500;
  font-size: .96rem;
  border-radius: 10px;
  transition: color .2s var(--bcs-ease), background .2s var(--bcs-ease);
}

header.top-nav ul#nav-mobile > li > a:hover {
  color: var(--bcs-green);
  background: rgba(85, 191, 57, .08);
}

header.top-nav .dropdown-trigger .material-icons.right {
  transition: transform .25s var(--bcs-ease);
}

/* Dropdown menu — modern card */
#dropdown2.dropdown-content,
.dropdown-content {
  border-radius: 14px !important;
  box-shadow: var(--bcs-shadow) !important;
  overflow: hidden;
  border: 1px solid var(--bcs-line);
  padding: 6px !important;
}

.dropdown-content li > a {
  border-radius: 10px;
  font-weight: 500;
  color: var(--bcs-head) !important;
  transition: background .2s var(--bcs-ease), color .2s var(--bcs-ease);
}

.dropdown-content li > a:hover {
  background: var(--bcs-soft) !important;
  color: var(--bcs-green) !important;
}

.dropdown-content li.divider {
  margin: 2px 10px;
}

header.top-nav a.button-collapse {
  color: var(--bcs-head);
}

/* Mobile side-nav — modern panel */
.side-nav {
  border-radius: 0 !important;
}

.side-nav li > a {
  font-family: var(--bcs-font-head);
  font-weight: 500;
  color: var(--bcs-head) !important;
}

.side-nav li > a:hover {
  background: var(--bcs-soft) !important;
  color: var(--bcs-green) !important;
}

/* ------------------------------------------------------------------ *
 * 4. Hero banner
 * ------------------------------------------------------------------ */
.home-banner {
  position: relative;
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(4rem, 9vw, 7rem);
}

.home-banner h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .28);
  margin-bottom: 1.25rem;
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}

.home-banner p {
  color: rgba(255, 255, 255, .94);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto 1rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.home-banner .btnGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 1.75rem;
}

.home-banner .btnGroup .bubblebtn-all {
  margin: 0;
}

.home-banner .click-btn {
  font-size: 1rem;
  padding: 0 32px !important;
  line-height: 3.1 !important;
}

/* ------------------------------------------------------------------ *
 * 5. Cards (global modern surface)
 * ------------------------------------------------------------------ */
.card {
  border-radius: var(--bcs-radius-lg);
  box-shadow: var(--bcs-shadow-sm);
  border: 1px solid var(--bcs-line);
  transition: transform .3s var(--bcs-ease), box-shadow .3s var(--bcs-ease);
}

/* Two-column "What is" + product rows: card wrappers should be seamless */
.whatisclassifiedscript .card,
.multivendor .card,
.ctaSeo .card {
  box-shadow: none;
  border: none;
  background: transparent;
}

.whatisclassifiedscript .whatclassifiedimg,
.multivendor .whatclassifiedimg {
  border-radius: var(--bcs-radius-lg);
  box-shadow: var(--bcs-shadow);
}

.whatisclassifiedscript h2,
.multivendor h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.multivendor .card h2 {
  position: relative;
  padding-bottom: .6rem;
}

.multivendor .card h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: var(--bcs-grad);
}

.multivendor .jobmodule,
.multivendor .mobilesmodule,
.multivendor .vehiclesmodule,
.multivendor .realestatemodule,
.multivendor .petsmodule {
  align-items: center;
  background: var(--bcs-white);
  border: 1px solid var(--bcs-line);
  border-radius: var(--bcs-radius-xl);
  box-shadow: var(--bcs-shadow-sm);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: 1.75rem;
  transition: box-shadow .3s var(--bcs-ease), transform .3s var(--bcs-ease);
}

.multivendor .jobmodule:hover,
.multivendor .mobilesmodule:hover,
.multivendor .vehiclesmodule:hover,
.multivendor .realestatemodule:hover,
.multivendor .petsmodule:hover {
  box-shadow: var(--bcs-shadow);
  transform: translateY(-3px);
}

/* ------------------------------------------------------------------ *
 * 6. Why-choose revenue grid (icon feature cards)
 * ------------------------------------------------------------------ */
.revenuegrid .row > article > .card {
  height: 100%;
  border-radius: var(--bcs-radius-lg);
  border: 1px solid var(--bcs-line);
  background: var(--bcs-white);
  box-shadow: var(--bcs-shadow-sm);
  overflow: hidden;
}

.revenuegrid .row > article > .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bcs-shadow);
  border-color: rgba(85, 191, 57, .4);
}

.revenuegrid .card .card-body {
  padding: 0;
}

.revenuegrid .revenuesecondcard {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 26px 26px 24px !important;
  height: auto !important;
}

.revenuegrid .flexrevenueCrd {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 6px;
  padding: 0 !important;
}

.revenuegrid .flexrevenueCrd .icon {
  order: -1;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(85, 191, 57, .16), rgba(243, 180, 45, .16));
}

.revenuegrid .flexrevenueCrd .icon img {
  height: 30px;
  width: 30px;
}

.revenuegrid .flexrevenueCrd h5 {
  font-family: var(--bcs-font-head);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--bcs-head);
  margin: 0;
}

.revenuegrid .revenuesecondcard p,
.revenuegrid .flexrevenueCrd + div p {
  margin-left: 0 !important;
  color: var(--bcs-body);
  font-size: .96rem;
  line-height: 1.6;
}

.revenuegrid > .container > p:last-child {
  max-width: 900px;
  margin: 2.25rem auto 0;
  text-align: center;
  color: var(--bcs-muted);
}

/* ------------------------------------------------------------------ *
 * 7. Support badges
 * ------------------------------------------------------------------ */
.whatSupport .card {
  border-radius: var(--bcs-radius-lg);
  padding: 2rem 1rem;
  text-align: center;
  background: var(--bcs-white);
  border: 1px solid var(--bcs-line);
  box-shadow: var(--bcs-shadow-sm);
  height: 100%;
}

.whatSupport .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bcs-shadow);
}

.whatSupport .card img {
  margin-bottom: .75rem;
}

.whatSupport .card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * 8. Installation guide — numbered steps
 * ------------------------------------------------------------------ */
.installnguide .card.center {
  border-radius: var(--bcs-radius-lg);
  padding: 2.25rem 1.5rem 1.75rem;
  background: var(--bcs-white);
  border: 1px solid var(--bcs-line);
  box-shadow: var(--bcs-shadow-sm);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.installnguide .card.center:hover {
  transform: translateY(-4px);
  box-shadow: var(--bcs-shadow);
}

.installnguide .installicon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-family: var(--bcs-font-head);
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
  background: var(--bcs-grad);
  box-shadow: 0 12px 24px -12px rgba(85, 191, 57, .8);
}

.installnguide .card.center h5 {
  font-weight: 700;
  font-size: 1.12rem;
  margin-bottom: .5rem;
}

/* ------------------------------------------------------------------ *
 * 9. Tools section cards (complement existing inline styles)
 * ------------------------------------------------------------------ */
.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 10. CTA band
 * ------------------------------------------------------------------ */
.ctaSeo .card {
  background: var(--bcs-grad) !important;
  border-radius: var(--bcs-radius-xl);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--bcs-shadow-lg);
  overflow: hidden;
}

.ctaSeo .detailRow {
  align-items: center;
}

.ctaSeo .card-body h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.ctaSeo .card-body p {
  color: rgba(255, 255, 255, .95);
}

.ctaSeo .card-body .click-btn.btn-style-bubble {
  background: #fff !important;
  color: var(--bcs-green-dark) !important;
  border: none !important;
  font-weight: 700 !important;
}

.ctaSeo .card-body .click-btn.btn-style-bubble:hover {
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------ *
 * 11. FAQ accordion
 * ------------------------------------------------------------------ */
.faqs .collapsible.faq-list {
  border: none;
  box-shadow: none;
  margin: 0 0 14px;
  border-radius: var(--bcs-radius);
  overflow: hidden;
}

.faqs .collapsible.faq-list > li {
  background: var(--bcs-white);
  border: 1px solid var(--bcs-line);
  border-radius: var(--bcs-radius);
  transition: box-shadow .25s var(--bcs-ease), border-color .25s var(--bcs-ease);
}

.faqs .collapsible.faq-list > li:hover {
  box-shadow: var(--bcs-shadow-sm);
  border-color: rgba(85, 191, 57, .4);
}

.faqs .collapsible-header {
  border: none !important;
  padding: 18px 22px;
  align-items: center;
  gap: 12px;
}

.faqs .collapsible-header h4 {
  font-size: 1.05rem !important;
  font-weight: 600;
  margin: 0;
  color: var(--bcs-head) !important;
}

.faqs .collapsible-body {
  border: none !important;
  padding: 0 22px 20px;
}

.faqs .collapsible-body span {
  color: var(--bcs-body);
  line-height: 1.7;
}

/* ------------------------------------------------------------------ *
 * 12. Footer
 * ------------------------------------------------------------------ */
.footer-top {
  background: #101a24;
  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
}

.footer-top h4 {
  color: #fff;
  font-family: var(--bcs-font-head);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.footer-top ul.foot-nav > li > a,
.footer-top ul.foot-nav-two > li > a {
  color: #b8c4d0;
  transition: color .2s var(--bcs-ease), padding-left .2s var(--bcs-ease);
}

.footer-top ul.foot-nav > li > a:hover,
.footer-top ul.foot-nav-two > li > a:hover {
  color: var(--bcs-green);
  padding-left: 4px;
}

.footer-top .socialIcons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  transition: transform .25s var(--bcs-ease), background .25s var(--bcs-ease);
}

.footer-top .socialIcons a:hover {
  background: var(--bcs-green);
  transform: translateY(-3px);
}

.footer-top p small {
  color: #8b99a8;
}

.footer-bottom {
  background: #0a121a;
  padding: 1rem 0;
}

.footer-bottom p,
.footer-bottom a {
  color: #9fb0c0;
}

.footer-bottom a:hover {
  color: var(--bcs-green);
}

/* ------------------------------------------------------------------ *
 * 13. Floating helpers (WhatsApp, demo tab, mobile footer)
 * ------------------------------------------------------------------ */
.whatsapp a {
  border-radius: 999px;
  box-shadow: var(--bcs-shadow);
}

.getQuote a {
  border-radius: 10px 10px 0 0;
  font-family: var(--bcs-font-head);
  font-weight: 600;
}

.small-footer {
  box-shadow: 0 -6px 20px -12px rgba(16, 35, 51, .3);
  border-top: 1px solid var(--bcs-line);
}

/* ------------------------------------------------------------------ *
 * 14. Responsive refinements
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 992px) {
  .home-banner {
    padding: 6rem 0 4rem;
  }
  .multivendor .jobmodule,
  .multivendor .mobilesmodule,
  .multivendor .vehiclesmodule,
  .multivendor .realestatemodule,
  .multivendor .petsmodule {
    margin-bottom: 1.25rem;
  }
  /* keep image above text on stacked product rows for natural reading */
  .multivendor .row > article:first-child {
    margin-bottom: .5rem;
  }
}

@media only screen and (max-width: 600px) {
  .sec, section.section {
    padding: 2.75rem 0;
  }
  .home-banner h1 {
    font-size: 2rem;
    max-width: 100%;
  }
  .home-banner p {
    font-size: 1rem;
  }
  .home-banner .btnGroup {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 8px;
  }
  .home-banner .btnGroup .bubblebtn-all,
  .home-banner .click-btn {
    width: 100%;
    text-align: center;
  }
  .title,
  .section-header h2,
  .installnguide h2,
  .faqs h2 {
    font-size: 1.55rem;
  }
  .revenuegrid .revenuesecondcard {
    padding: 22px !important;
  }
  .whatSupport .card {
    padding: 1.5rem .75rem;
  }
  .footer-top {
    text-align: center;
  }
  .footer-top ul.foot-nav {
    columns: 1;
  }
  .footer-top .socialIcons {
    justify-content: center;
  }
  .faqs .collapsible-header h4 {
    font-size: .98rem !important;
  }
}

@media only screen and (max-width: 360px) {
  .home-banner h1 {
    font-size: 1.72rem;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* =====================================================================
   v2 — BOLD structural pass (clearly-different modern layout)
   Still content-preserving; restyles existing markup only.
   ===================================================================== */

/* Page background rhythm — soft alternating tints */
.whatisclassifiedscript { background: linear-gradient(180deg,#f4f7fb 0%,#eef3f9 100%) !important; }
.revenuegrid { background: radial-gradient(1200px 400px at 50% -10%, rgba(85,191,57,.08), transparent 70%), #fff; }
.installnguide { background: linear-gradient(180deg,#fbfdff 0%,#f4f7fb 100%); }

/* ---- Hero: decorative depth + eyebrow-less polish ---- */
.home-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 15% 20%, rgba(85,191,57,.20), transparent 60%),
              radial-gradient(50% 70% at 90% 80%, rgba(243,180,45,.18), transparent 60%);
  pointer-events: none; mix-blend-mode: screen;
}
.home-banner .container { position: relative; z-index: 2; }

/* ---- "One Stop" split: framed hero image + accent ---- */
.whatisclassifiedscript .whatclassifiedimg {
  border: 8px solid #fff;
  box-shadow: 0 30px 60px -28px rgba(16,35,51,.4);
}
.whatisclassifiedscript .col.xl7 .card,
.whatisclassifiedscript article:last-child .card { padding-left: 8px; }

/* ---- Our Ready Products: premium color-coded cards ---- */
.multivendor .row.jobmodule,
.multivendor .row.mobilesmodule,
.multivendor .row.vehiclesmodule,
.multivendor .row.realestatemodule,
.multivendor .row.petsmodule {
  position: relative;
  padding: clamp(1.5rem,3vw,2.75rem) !important;
  border: 1px solid var(--bcs-line);
  overflow: hidden;
}
/* top gradient accent bar */
.multivendor .row.jobmodule::before,
.multivendor .row.mobilesmodule::before,
.multivendor .row.vehiclesmodule::before,
.multivendor .row.realestatemodule::before,
.multivendor .row.petsmodule::before {
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
}
.multivendor .row.jobmodule       { background:linear-gradient(120deg,rgba(85,191,57,.07),#fff 55%); }
.multivendor .row.jobmodule::before{ background:linear-gradient(90deg,#55bf39,#7ed957); }
.multivendor .row.mobilesmodule    { background:linear-gradient(120deg,rgba(255,167,38,.09),#fff 55%); }
.multivendor .row.mobilesmodule::before{ background:linear-gradient(90deg,#ffb648,#f2960b); }
.multivendor .row.vehiclesmodule   { background:linear-gradient(120deg,rgba(43,110,240,.07),#fff 55%); }
.multivendor .row.vehiclesmodule::before{ background:linear-gradient(90deg,#2b6ef0,#4f8bff); }
.multivendor .row.realestatemodule { background:linear-gradient(120deg,rgba(20,184,166,.08),#fff 55%); }
.multivendor .row.realestatemodule::before{ background:linear-gradient(90deg,#14b8a6,#2dd4bf); }
.multivendor .row.petsmodule       { background:linear-gradient(120deg,rgba(139,92,246,.08),#fff 55%); }
.multivendor .row.petsmodule::before{ background:linear-gradient(90deg,#8b5cf6,#a78bfa); }

/* heading marker chip per product */
.multivendor .card h2 { padding-left: 0; }
.multivendor .card h2::after { display:none; }
.multivendor .card h2::before {
  content:""; display:inline-block; width:26px; height:4px; border-radius:4px;
  vertical-align: middle; margin-right:12px; margin-bottom:5px;
  background: var(--bcs-grad);
}
.multivendor .card p { font-size: .98rem; }
/* product CTA → arrow pill */
.multivendor .bubblebtn-all { justify-content:flex-start; }
.multivendor .click-btn.btn-style-bubble::after { content:" →"; font-weight:700; }

/* ---- Why businesses pick: crisp uniform icon cards ---- */
.revenuegrid .row { align-items: stretch; }
.revenuegrid .row > article { display:flex; }
.revenuegrid .flexrevenueCrd .icon {
  box-shadow: 0 10px 22px -12px rgba(85,191,57,.5);
}

/* ---- Support: gradient strip with circular icon badges ---- */
.whatSupport .section-headline > .row {
  background: linear-gradient(120deg,#101a24,#183042);
  border-radius: var(--bcs-radius-xl);
  padding: clamp(1.5rem,3vw,2.5rem) 1rem;
  margin-top: 1.5rem;
  box-shadow: var(--bcs-shadow);
}
.whatSupport .section-headline > .row .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff;
}
.whatSupport .section-headline > .row .card img {
  background: rgba(255,255,255,.10);
  border-radius: 50%;
  padding: 16px;
  width: 84px; height: 84px; object-fit: contain;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.whatSupport .section-headline > .row .card h4 { color:#fff; margin-top:.9rem; }
.whatSupport .section-headline > .row .card h4 .orange-text { color: var(--bcs-amber) !important; }

/* ---- Install guide: connector line behind numbered steps ---- */
.installnguide .row { position: relative; }
@media only screen and (min-width: 993px) {
  .installnguide .row::before {
    content:""; position:absolute; top:56px; left:12%; right:12%; height:2px;
    background: repeating-linear-gradient(90deg,#c9d6e5 0 10px,transparent 10px 20px);
    z-index:0;
  }
}
.installnguide .card.center { position: relative; z-index:1; background:#fff; }

/* ---- Tools section: colored icon tiles ---- */
.tool-card .card-icon {
  width: 62px; height: 62px; line-height: 62px; text-align:center;
  border-radius: 18px; font-size: 1.8rem;
  background: linear-gradient(135deg,rgba(85,191,57,.15),rgba(243,180,45,.15));
}

/* ---- CTA band: decorative shapes ---- */
.ctaSeo .card { position: relative; }
.ctaSeo .card::before,
.ctaSeo .card::after {
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  background: rgba(255,255,255,.12);
}
.ctaSeo .card::before { width:220px; height:220px; top:-90px; right:-60px; }
.ctaSeo .card::after  { width:140px; height:140px; bottom:-70px; left:20%; }
.ctaSeo .detailRow { position: relative; z-index:1; }

/* ---- FAQ: +/- toggle indicator ---- */
.faqs .collapsible-header .faq-toggle-icon {
  width: 26px; height: 26px; flex: 0 0 26px; position: relative; border-radius: 8px;
  background: rgba(85,191,57,.12); margin-right: 4px;
}
.faqs .collapsible-header .faq-toggle-icon::before,
.faqs .collapsible-header .faq-toggle-icon::after {
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background: var(--bcs-green-dark);
}
.faqs .collapsible-header .faq-toggle-icon::before { width:12px; height:2px; }
.faqs .collapsible-header .faq-toggle-icon::after  { width:2px; height:12px; transition: transform .25s var(--bcs-ease); }
.faqs .collapsible-header.active .faq-toggle-icon::after { transform: translate(-50%,-50%) scaleY(0); }

@media only screen and (max-width: 600px) {
  .multivendor .click-btn.btn-style-bubble { width:auto; }
  .whatSupport .section-headline > .row .card img { width:72px; height:72px; }
}

/* v3 — clean up "Why Businesses Pick" cards (remove heavy inner gradient) */
.revenuegrid .card .revenuesecondcard {
  background: transparent !important;
  border-radius: 0 !important;
}
.revenuegrid .row > article > .card { padding: 4px; }
.revenuegrid .flexrevenueCrd h5 { margin-top: 2px; }

/* v4 — revenue icon tiles: solid green so white PNG glyphs are visible */
.revenuegrid .flexrevenueCrd .icon {
  background: var(--bcs-grad-green) !important;
  box-shadow: 0 12px 22px -12px rgba(85,191,57,.7) !important;
}
.revenuegrid .flexrevenueCrd .icon img { filter: brightness(0) invert(1); }

/* =====================================================================
   v5 — UNIQUE homepage: "Our Ready Products" numbered showcase
   (new markup: .mv-showcase / .mv-item / .mv-media / .mv-body)
   ===================================================================== */
.multivendor .mv-head { max-width: 760px; margin: 0 auto 3rem; }

.mv-showcase { counter-reset: mv; display: flex; flex-direction: column; gap: clamp(2.5rem,6vw,5rem); }

.mv-item {
  counter-increment: mv;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem,5vw,4.5rem);
  /* per-item theme */
  --c: #55bf39; --c2: #7ed957;
}
.mv-item:nth-child(2){ --c:#ff9f1c; --c2:#ffbf69; }
.mv-item:nth-child(3){ --c:#2b6ef0; --c2:#5b8def; }
.mv-item:nth-child(4){ --c:#14b8a6; --c2:#2dd4bf; }
.mv-item:nth-child(5){ --c:#8b5cf6; --c2:#a78bfa; }
.mv-item:nth-child(even) .mv-media { order: 2; }

/* media with colored blob + floating screenshot */
.mv-media { position: relative; display: flex; justify-content: center; }
.mv-media::before {
  content:""; position:absolute; inset:auto; width:78%; padding-top:60%; border-radius:40% 60% 55% 45%/55% 45% 55% 45%;
  background: linear-gradient(135deg, var(--c), var(--c2));
  filter: blur(6px); opacity:.22; z-index:0;
  animation: mvblob 12s ease-in-out infinite;
}
@keyframes mvblob { 0%,100%{border-radius:42% 58% 55% 45%/55% 45% 55% 45%;} 50%{border-radius:58% 42% 45% 55%/45% 55% 45% 55%;} }
.mv-media .whatclassifiedimg {
  position: relative; z-index:1; width: 100%; max-width: 520px;
  border-radius: 20px;
  box-shadow: 0 30px 60px -22px rgba(16,35,51,.4);
}

/* body with big watermark number + heading dot */
.mv-body { position: relative; padding-top: .5rem; }
.mv-body::before {
  content: counter(mv, decimal-leading-zero);
  position: absolute; top: -3.2rem; right: 0;
  font-family: var(--bcs-font-head); font-weight: 800;
  font-size: clamp(4.5rem,11vw,8rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(16,35,51,.08);
  z-index: 0; pointer-events: none;
}
.mv-body h2 {
  position: relative; z-index: 1;
  font-size: clamp(1.5rem,2.6vw,2.15rem); font-weight: 700; margin: 0 0 1rem;
  padding-left: 18px;
}
.mv-body h2::before {
  content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:6px; border-radius:6px;
  background: linear-gradient(180deg, var(--c), var(--c2));
}
.mv-body p { color: var(--bcs-body); font-size: 1rem; line-height: 1.75; }
.mv-body .bubblebtn-all { justify-content: flex-start; margin-top: 1.25rem; }
.mv-body .click-btn.btn-style-bubble {
  background: linear-gradient(135deg, var(--c), var(--c2)) !important;
  border: none !important; color:#fff !important;
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--c) 80%, transparent);
}

@media only screen and (max-width: 900px) {
  .mv-item { grid-template-columns: 1fr; gap: 1.25rem; }
  .mv-item:nth-child(even) .mv-media { order: 0; }
  .mv-body::before { top:-2.4rem; font-size: 4.2rem; }
  .mv-media .whatclassifiedimg { max-width: 420px; }
}

/* =====================================================================
   v6 — One-Stop about-split + hero polish
   ===================================================================== */
.whatisclassifiedscript .about-split {
  display: grid; grid-template-columns: .92fr 1.08fr; align-items: center;
  gap: clamp(1.75rem,5vw,4.5rem);
}
.whatisclassifiedscript .about-media { position: relative; }
.whatisclassifiedscript .about-media::before {
  content:""; position:absolute; left:-20px; top:-20px; width:130px; height:130px; border-radius:24px;
  background: var(--bcs-grad); opacity:.16; z-index:0;
}
.whatisclassifiedscript .about-media::after {
  content:""; position:absolute; right:-16px; bottom:-16px; width:90px; height:90px; border-radius:50%;
  background: var(--bcs-grad-amber); opacity:.14; z-index:0;
}
.whatisclassifiedscript .about-media .whatclassifiedimg {
  position: relative; z-index:1; width:100%; border-radius:22px; border:8px solid #fff;
  box-shadow: 0 32px 64px -26px rgba(16,35,51,.42);
}
.whatisclassifiedscript .about-body { position: relative; padding-left: 24px; }
.whatisclassifiedscript .about-body::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:5px; border-radius:5px; background: var(--bcs-grad);
}
.whatisclassifiedscript .about-body h2 { margin-top:0; }

@media only screen and (max-width: 900px) {
  .whatisclassifiedscript .about-split { grid-template-columns: 1fr; }
  .whatisclassifiedscript .about-body { padding-left: 18px; }
}

/* Hero: contain width + subtle glass lift for readability */
.home-banner .col.center { max-width: 920px; margin: 0 auto; }

/* =====================================================================
   v7 — HEADER redesign (solid, defined, branded)
   Overrides the earlier glass header (loads later → wins).
   ===================================================================== */
header.top-nav .navbar-fixed { height: 78px; }
header.top-nav nav,
header.top-nav .nav-wrapper {
  height: 78px; line-height: 78px;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 8px 26px -16px rgba(16,35,51,.4);
  border-bottom: 1px solid var(--bcs-line);
}
/* sticky header — pin nav to the top on scroll (Materialize navbar-fixed) */
header.top-nav .navbar-fixed nav,
header.top-nav nav {
  position: fixed !important; top: 0; left: 0; right: 0; width: 100%;
}
header.top-nav .navbar-fixed { z-index: 997; }
/* gradient accent line across the very top */
header.top-nav nav::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--bcs-grad); z-index: 6;
}
header.top-nav .nav-wrapper .container {
  display: flex; align-items: center; justify-content: space-between;
}
/* logo */
header.top-nav .brand-logo { position: static; transform: none; display: inline-flex; align-items: center; height: 78px; }
header.top-nav .brand-logo img { height: 46px !important; width: auto !important; }

/* nav list — flex-center visible items only; must NOT override the
   homepage's intentional `header .list1home,.deviderr{display:none}` hide,
   so we exclude those and avoid setting display on <li> directly. */
header.top-nav ul#nav-mobile { display: flex; align-items: center; height: 78px; }
header.top-nav ul#nav-mobile > li > a {
  position: relative; height: 78px; line-height: 78px;
  padding: 0 18px !important;
  color: var(--bcs-head); font-family: var(--bcs-font-head); font-weight: 500; font-size: .98rem;
  background: transparent !important;
}
header.top-nav ul#nav-mobile > li > a .material-icons { line-height: 78px; }
/* animated gradient underline */
header.top-nav ul#nav-mobile > li > a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 20px; height: 2px; border-radius: 2px;
  background: var(--bcs-grad); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--bcs-ease);
}
header.top-nav ul#nav-mobile > li > a:hover { color: var(--bcs-green-dark); }
header.top-nav ul#nav-mobile > li > a:hover::after { transform: scaleX(1); }
/* dropdown trigger chevron */
header.top-nav .dropdown-trigger .material-icons.right { transition: transform .25s var(--bcs-ease); margin-left: 2px; }

/* Contact pill — stronger presence */
header.top-nav .bubblebtn-nav { display: inline-flex; align-items: center; }
header.top-nav .bubblebtn-nav .click-btn.btn-style-bubble {
  height: 46px; line-height: 46px !important; padding: 0 30px !important;
  border-radius: 999px !important;
  background: var(--bcs-grad-green) !important; border: none !important; color: #fff !important;
  font-weight: 600 !important; letter-spacing: .2px;
  box-shadow: 0 14px 26px -12px rgba(85,191,57,.95);
}
header.top-nav .bubblebtn-nav .click-btn.btn-style-bubble:hover {
  transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(85,191,57,1);
}

/* hamburger — hidden on desktop, shown on tablet/mobile only */
header.top-nav a.button-collapse { display: none; }
header.top-nav a.button-collapse i {
  color: var(--bcs-head); background: var(--bcs-soft); border-radius: 12px;
  width: 44px; height: 44px; line-height: 44px; text-align: center; font-size: 26px;
}

@media only screen and (max-width: 992px) {
  header.top-nav .navbar-fixed,
  header.top-nav nav,
  header.top-nav .nav-wrapper { height: 66px; line-height: 66px; }
  header.top-nav .brand-logo { height: 66px; }
  header.top-nav .brand-logo img { height: 40px !important; }
  header.top-nav a.button-collapse { display: flex; align-items: center; height: 66px; }
}

/* =====================================================================
   v9 — products shown directly in the top menu (.navProduct)
   ===================================================================== */
header.top-nav ul#nav-mobile > li.navProduct > a {
  padding: 0 15px !important;
  font-size: .96rem; font-weight: 500;
}
/* tighten so 5 product links + CTA fit comfortably on smaller desktops */
@media only screen and (max-width: 1200px) {
  header.top-nav ul#nav-mobile > li > a { padding: 0 11px !important; font-size: .9rem; }
  header.top-nav ul#nav-mobile > li > a::after { left: 11px; right: 11px; }
  header.top-nav .bubblebtn-nav .click-btn.btn-style-bubble { padding: 0 22px !important; }
}

/* v10 — keep product menu labels on one line */
header.top-nav ul#nav-mobile > li > a { white-space: nowrap; }
header.top-nav ul#nav-mobile { flex-wrap: nowrap; }

/* v11 — the 5-product bar needs room; below 1200px use the hamburger menu
   (the mobile side-nav already lists every product), so nothing overflows */
@media only screen and (max-width: 1200px) {
  header.top-nav ul#nav-mobile { display: none !important; }
  header.top-nav a.button-collapse { display: flex !important; align-items: center; }
  header.top-nav .navbar-fixed,
  header.top-nav nav,
  header.top-nav .nav-wrapper { height: 66px; line-height: 66px; }
  header.top-nav .brand-logo { height: 66px; }
  header.top-nav .brand-logo img { height: 40px !important; }
}

/* =====================================================================
   v12 — product menu icons + per-type color
   ===================================================================== */
header.top-nav .navProduct > a { display: inline-flex; align-items: center; gap: 8px; }
.side-nav li > a { display: flex; align-items: center; }
.nav-ico { font-size: 20px !important; line-height: 1; height: auto; width: auto; margin-right: 6px; }

/* per-type icon color (desktop nav + mobile side-nav) */
.nav-general .nav-ico   { color: #55bf39 !important; }
.nav-car .nav-ico       { color: #2b6ef0 !important; }
.nav-pet .nav-ico       { color: #ff9f1c !important; }
.nav-realestate .nav-ico{ color: #14b8a6 !important; }
.nav-business .nav-ico  { color: #8b5cf6 !important; }

/* soft tinted icon chip in the side-nav */
.side-nav .nav-ico {
  width: 34px !important; height: 34px !important; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px !important;
}
.side-nav .nav-general .nav-ico   { background: rgba(85,191,57,.12); }
.side-nav .nav-car .nav-ico       { background: rgba(43,110,240,.12); }
.side-nav .nav-pet .nav-ico       { background: rgba(255,159,28,.14); }
.side-nav .nav-realestate .nav-ico{ background: rgba(20,184,166,.14); }
.side-nav .nav-business .nav-ico  { background: rgba(139,92,246,.14); }

/* desktop hover: label tint + matching underline per type */
header.top-nav .nav-general:hover > a    { color: #43ac27; }
header.top-nav .nav-car:hover > a        { color: #2b6ef0; }
header.top-nav .nav-pet:hover > a        { color: #e88a00; }
header.top-nav .nav-realestate:hover > a { color: #0e9488; }
header.top-nav .nav-business:hover > a   { color: #7c3aed; }
header.top-nav .nav-general > a::after    { background: #55bf39; }
header.top-nav .nav-car > a::after        { background: #2b6ef0; }
header.top-nav .nav-pet > a::after        { background: #ff9f1c; }
header.top-nav .nav-realestate > a::after { background: #14b8a6; }
header.top-nav .nav-business > a::after   { background: #8b5cf6; }

/* v13 — fit the icon+label product bar: wider header container, compact items,
   pin logo & Contact so they never get squeezed out */
header.top-nav .nav-wrapper .container { width: 96%; max-width: 1440px; }
header.top-nav .brand-logo,
header.top-nav .bubblebtn-nav { flex-shrink: 0; }
header.top-nav ul#nav-mobile { flex-shrink: 1; min-width: 0; }
header.top-nav ul#nav-mobile > li.navProduct > a {
  padding: 0 12px !important; font-size: .92rem; gap: 6px;
}
header.top-nav .navProduct .nav-ico { font-size: 19px !important; margin-right: 0; }
header.top-nav ul#nav-mobile > li.navProduct > a::after { left: 12px; right: 12px; }
@media only screen and (max-width: 1340px) {
  header.top-nav ul#nav-mobile > li.navProduct > a { padding: 0 9px !important; font-size: .86rem; }
  header.top-nav ul#nav-mobile > li.navProduct > a::after { left: 9px; right: 9px; }
  header.top-nav .navProduct .nav-ico { font-size: 17px !important; }
  header.top-nav .bubblebtn-nav .click-btn.btn-style-bubble { padding: 0 20px !important; }
}

/* =====================================================================
   v14 — HERO side-by-side (readable text + fully-visible banner)
   ===================================================================== */
.home-banner { position: relative; padding: clamp(2.5rem,6vw,5rem) 0 clamp(2.5rem,6vw,4.5rem) !important; }
.home-banner::after { display: none !important; }           /* remove old dark scrim */

.home-banner .hero-split {
  display: grid; grid-template-columns: 1.02fr 1fr; align-items: center;
  gap: clamp(2rem,5vw,4.5rem);
}
.home-banner .hero-text h1 {
  color: var(--bcs-head) !important; text-shadow: none !important;
  font-size: clamp(1.9rem,3.4vw,3rem); font-weight: 800; line-height: 1.12;
  max-width: none; margin: 0 0 1.15rem;
}
.home-banner .hero-text p {
  color: var(--bcs-body) !important; text-shadow: none !important;
  font-size: 1.05rem; line-height: 1.7; max-width: 560px; margin: 0 0 .9rem;
}
.home-banner .btnGroup { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; margin-top: 1.6rem; }
.home-banner .btnGroup .bubblebtn-all { margin: 0; }

.home-banner .hero-media { position: relative; }
.home-banner .hero-media::before {
  content: ""; position: absolute; inset: -7% -5%; border-radius: 34px;
  background: var(--bcs-grad); opacity: .16; filter: blur(10px); z-index: 0;
}
.home-banner .hero-media::after {
  content: ""; position: absolute; right: -14px; bottom: -14px; width: 96px; height: 96px;
  border-radius: 50%; background: var(--bcs-grad-amber); opacity: .18; z-index: 0;
}
.home-banner .hero-media img {
  position: relative; z-index: 1; width: 100%; display: block;
  border-radius: 22px; border: 6px solid #fff;
  box-shadow: 0 34px 70px -28px rgba(16,35,51,.5);
}

@media only screen and (max-width: 900px) {
  .home-banner .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .home-banner .hero-text { text-align: center; }
  .home-banner .hero-text p { margin-left: auto; margin-right: auto; }
  .home-banner .btnGroup { justify-content: center; }
}
@media only screen and (max-width: 600px) {
  .home-banner .btnGroup { flex-direction: column; align-items: stretch; }
  .home-banner .btnGroup .bubblebtn-all, .home-banner .btnGroup .click-btn { width: 100%; text-align: center; }
}

/* v15 — hero banner is a wide panorama; on desktop make it fill the column
   height (aligned to the text block) via a centered cover-crop */
@media only screen and (min-width: 901px) {
  .home-banner .hero-split { align-items: stretch; grid-template-columns: 1.05fr 1fr; }
  .home-banner .hero-media { display: flex; align-items: stretch; }
  .home-banner .hero-media img {
    height: 100%; width: 100%; min-height: 380px;
    object-fit: cover; object-position: center;
  }
}

/* v16 — icons on utility menu items (Features / Screen / Demo / About / Customize / Blog) */
header.top-nav .list1home > a { display: inline-flex; align-items: center; gap: 8px; }
.navUtil .nav-ico { color: #64748b !important; }
header.top-nav .navUtil:hover > a { color: var(--bcs-green-dark); }
header.top-nav .navUtil:hover .nav-ico { color: var(--bcs-green) !important; }
header.top-nav .navUtil > a::after { background: var(--bcs-grad); }
.side-nav .navUtil .nav-ico {
  width: 34px !important; height: 34px !important; border-radius: 10px; font-size: 19px !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(100,116,139,.12);
}

/* v17 — inner pages carry more items (products + Features/Screen/Demo);
   compact the desktop nav so the Contact pill never gets pushed off */
@media only screen and (min-width: 1201px) {
  header.top-nav .nav-wrapper .container { width: 97%; max-width: 1520px; }
  header.top-nav ul#nav-mobile > li > a { padding: 0 9px !important; font-size: .88rem; }
  header.top-nav ul#nav-mobile > li > a::after { left: 9px; right: 9px; }
  header.top-nav .nav-ico { font-size: 18px !important; }
  header.top-nav .bubblebtn-nav .click-btn.btn-style-bubble { padding: 0 18px !important; }
}

/* v18 — fix nav icon/text vertical alignment: an earlier rule forced
   line-height:78px on .material-icons, inflating the icon box so the glyph
   sat off-centre. Collapse the icon box to glyph size and flex-centre it. */
header.top-nav ul#nav-mobile > li > a .nav-ico {
  line-height: 1 !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
}

/* v19 — space between icon chip and text in the mobile side-menu */
.side-nav li > a { gap: 5px; }
.side-nav .nav-ico { margin-right: 0 !important; }

/* =====================================================================
   v21 — floating product badges orbiting the hero image
   ===================================================================== */
.home-banner .hero-media { overflow: visible; }
.hero-chip {
  position: absolute; z-index: 3;
  width: 58px; height: 58px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 14px 28px -10px rgba(16,35,51,.38);
  animation: heroFloat 4.5s var(--bcs-ease) infinite;
}
.hero-chip i { font-size: 27px !important; line-height: 1 !important; height: auto !important; }
.hero-chip::before {                       /* pulsing ring */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor; opacity: .55;
  animation: heroPulse 2.6s ease-out infinite;
}
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes heroPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }

.chip-general    { top: -24px;    left: 6%;    color: #55bf39; }
.chip-general i    { color: #55bf39; }
.chip-car        { top: 14%;      right: -26px; color: #2b6ef0; animation-delay: .7s; }
.chip-car i        { color: #2b6ef0; }
.chip-pet        { bottom: 12%;   left: -26px;  color: #ff9f1c; animation-delay: 1.3s; }
.chip-pet i        { color: #ff9f1c; }
.chip-realestate { bottom: -24px; left: 32%;   color: #14b8a6; animation-delay: 1s; }
.chip-realestate i { color: #14b8a6; }
.chip-business   { bottom: -20px; right: 12%;  color: #8b5cf6; animation-delay: 1.7s; }
.chip-business i   { color: #8b5cf6; }

@media only screen and (max-width: 600px) {
  .hero-chip { width: 46px; height: 46px; }
  .hero-chip i { font-size: 22px !important; }
  .chip-car { right: -14px; }
  .chip-pet { left: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chip, .hero-chip::before { animation: none !important; }
}

/* v22 — mobile: keep hero badges INSIDE the image (no negative offsets that
   bled into the next section / caused horizontal scroll) */
@media only screen and (max-width: 900px) {
  .home-banner { overflow: hidden; }
  .hero-chip { width: 44px; height: 44px; }
  .hero-chip i { font-size: 21px !important; }
  .chip-general    { top: 10px;    left: 10px;  right: auto; bottom: auto; }
  .chip-car        { top: 10px;    right: 10px;  left: auto; bottom: auto; }
  .chip-pet        { bottom: 10px; left: 10px;   top: auto;  right: auto; }
  .chip-business   { bottom: 10px; right: 10px;  top: auto;  left: auto; }
  .chip-realestate { bottom: 10px; left: 50%; margin-left: -22px; top: auto; right: auto; }
}

/* v23 — better hero image height on MOBILE only (taller than the thin
   panorama strip); desktop is unchanged */
@media only screen and (max-width: 900px) {
  .home-banner .hero-media img {
    aspect-ratio: 16 / 10; height: auto; width: 100%;
    object-fit: cover; object-position: center;
  }
}

/* v25 — hero buttons gap 5px */
.home-banner .btnGroup { gap: 5px; }

/* v26 — mobile side-menu Contact button: white text on green (was inheriting dark) */
.side-nav li > a.btn-site,
.side-nav li > a.btn-site:hover,
.side-nav li > a.btn-site:focus {
  color: #fff !important;
  background: var(--bcs-grad-green) !important;
}

/* =====================================================================
   v27 — "Tools You Need to Manage" 3-card section, modern redesign
   ===================================================================== */
.section .tool-row { align-items: flex-start !important; gap: 28px; }
.section .tool-row > .tool-card {
  position: relative;
  padding: 34px 26px 30px !important;
  border-radius: 22px !important;
  border: 1px solid var(--bcs-line) !important;
  box-shadow: 0 14px 34px -20px rgba(16,35,51,.26) !important;
  background: #fff !important;
  transition: transform .3s var(--bcs-ease), box-shadow .3s var(--bcs-ease), border-color .3s var(--bcs-ease);
}
.section .tool-row > .tool-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  border-radius: 22px 22px 0 0;
}
.section .tool-row > .tool-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 48px -22px rgba(16,35,51,.34) !important;
}

/* per-card theme: accent bar, icon tile, checkmarks, hover border */
.section .tool-row > .tool-card:nth-child(1)::before { background: linear-gradient(90deg,#55bf39,#7ed957); }
.section .tool-row > .tool-card:nth-child(2)::before { background: linear-gradient(90deg,#2b6ef0,#5b8def); }
.section .tool-row > .tool-card:nth-child(3)::before { background: linear-gradient(90deg,#14b8a6,#2dd4bf); }

.section .tool-row > .tool-card .card-icon {
  width: 66px; height: 66px; border-radius: 18px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.section .tool-row > .tool-card:nth-child(1) .card-icon { background: rgba(85,191,57,.14);  box-shadow: 0 14px 24px -14px rgba(85,191,57,.9); }
.section .tool-row > .tool-card:nth-child(2) .card-icon { background: rgba(43,110,240,.12); box-shadow: 0 14px 24px -14px rgba(43,110,240,.9); }
.section .tool-row > .tool-card:nth-child(3) .card-icon { background: rgba(20,184,166,.14); box-shadow: 0 14px 24px -14px rgba(20,184,166,.9); }

.section .tool-row > .tool-card:nth-child(1) .feature-list li::before { color: #55bf39; }
.section .tool-row > .tool-card:nth-child(2) .feature-list li::before { color: #2b6ef0; }
.section .tool-row > .tool-card:nth-child(3) .feature-list li::before { color: #14b8a6; }
.section .tool-row > .tool-card:nth-child(1):hover { border-color: rgba(85,191,57,.5) !important; }
.section .tool-row > .tool-card:nth-child(2):hover { border-color: rgba(43,110,240,.5) !important; }
.section .tool-row > .tool-card:nth-child(3):hover { border-color: rgba(20,184,166,.5) !important; }

/* badges */
.section .tool-row .mini-badge {
  background: rgba(85,191,57,.10); color: #2f6d1f; font-weight: 600;
}

/* =====================================================================
   v28 — Tools section restructured: horizontal feature blocks
   (sticky icon+title left, 2-column checklist right)
   ===================================================================== */
.toolsSection .tools-stack { display: flex; flex-direction: column; gap: 24px; }

.tool-block {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.5rem,4vw,3.5rem);
  background: #fff; border: 1px solid var(--bcs-line); border-radius: 24px;
  padding: clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.8rem) clamp(1.6rem,3vw,2.6rem) clamp(2rem,3.5vw,3.2rem);
  box-shadow: 0 14px 34px -22px rgba(16,35,51,.26);
  transition: box-shadow .3s var(--bcs-ease), transform .3s var(--bcs-ease), border-color .3s var(--bcs-ease);
  --tc: #55bf39; --tc2: #7ed957;
}
.tb-2 { --tc: #2b6ef0; --tc2: #5b8def; }
.tb-3 { --tc: #14b8a6; --tc2: #2dd4bf; }
.tool-block::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--tc), var(--tc2));
}
.tool-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 48px -24px rgba(16,35,51,.34);
  border-color: color-mix(in srgb, var(--tc) 45%, transparent);
}

.tool-aside .card-icon {
  width: 66px; height: 66px; border-radius: 18px; margin: 0 0 16px;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  background: color-mix(in srgb, var(--tc) 15%, #fff);
  box-shadow: 0 14px 24px -14px var(--tc);
}
.tool-aside h3 {
  font-size: 1.32rem; font-weight: 700; color: var(--bcs-head); margin: 0; line-height: 1.25;
}

.tool-content > p:first-child { margin-top: 0; font-weight: 500; color: var(--bcs-head); }
.tool-content .feature-list { columns: 2; column-gap: 34px; margin: 14px 0 8px; }
.tool-content .feature-list li { break-inside: avoid; margin-bottom: 11px; }
.tool-content .feature-list li::before { color: var(--tc); }
.tool-content .badge-group { margin-top: 16px; }

@media only screen and (min-width: 993px) {
  .tool-aside { position: sticky; top: 104px; align-self: start; }
}
@media only screen and (max-width: 820px) {
  .tool-block { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.5rem 1.4rem 1.5rem 1.6rem; }
  .tool-content .feature-list { columns: 1; }
}

/* =====================================================================
   v29 — Tools blocks styled to reference: centered aside w/ round icon,
   filled circular checkmarks, soft pill badges
   ===================================================================== */
.tool-aside {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: center;
}
.tool-aside .card-icon {
  width: 92px; height: 92px; border-radius: 50%;
  font-size: 2.4rem; margin-bottom: 22px;
  background: color-mix(in srgb, var(--tc) 12%, #fff);
  box-shadow: 0 18px 30px -18px var(--tc);
}
.tool-aside h3 { font-size: 1.28rem; max-width: 230px; }

/* filled circular checkmarks */
.tool-content .feature-list li { padding-left: 30px; }
.tool-content .feature-list li::before {
  content: "✓"; color: #fff !important; font-size: .68rem; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%; top: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tc);
  box-shadow: 0 4px 10px -3px var(--tc);
}

/* soft pill badges (as in reference) */
.tool-content .mini-badge {
  background: color-mix(in srgb, var(--tc) 10%, #fff) !important;
  color: var(--bcs-head) !important;
  border-radius: 10px; padding: 8px 16px; font-size: .85rem;
}

@media only screen and (max-width: 820px) {
  .tool-aside { flex-direction: column; }
  .tool-aside .card-icon { width: 76px; height: 76px; font-size: 2rem; margin-bottom: 14px; }
}

/* v30 — vertical divider between icon column and content */
@media only screen and (min-width: 821px) {
  .tool-block .tool-aside { border-right: 1px solid var(--bcs-line); padding-right: clamp(1.2rem,2.5vw,2.2rem); }
}

/* v31 — tool-aside title: no fixed max-width, follow the column */
.tool-aside h3 { max-width: none; }

/* =====================================================================
   v32 — "What support you will get?" cards matched to reference
   (overrides the earlier dark-strip design)
   ===================================================================== */
.whatSupport .section-headline > .row.support-row {
  background: none; border-radius: 0; padding: 0; box-shadow: none; margin-top: 2rem;
  display: flex; flex-wrap: wrap;
}
.support-card {
  --sc: #55bf39;
  position: relative; overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--bcs-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px -20px rgba(16,35,51,.25) !important;
  padding: 2.2rem 1.2rem 2rem !important;
  text-align: center; height: 100%;
  transition: transform .3s var(--bcs-ease), box-shadow .3s var(--bcs-ease);
}
.sp-2 { --sc: #2b6ef0; }
.sp-3 { --sc: #f2960b; }
.sp-4 { --sc: #8b5cf6; }
.support-card:hover { transform: translateY(-5px); box-shadow: 0 26px 44px -22px rgba(16,35,51,.35) !important; }

/* colored bottom bar */
.support-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, var(--sc), color-mix(in srgb, var(--sc) 55%, #fff));
}

/* circular tinted icon with dashed ring */
.support-card .sp-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 118px; height: 118px; border-radius: 50%;
  background: color-mix(in srgb, var(--sc) 10%, #fff);
  margin-bottom: 1.2rem;
}
.support-card .sp-icon::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1.6px dashed color-mix(in srgb, var(--sc) 45%, transparent);
}
.support-card .sp-icon img { width: 62px; height: auto; margin: 0; }

/* title: colored first word + small underline below */
.support-card h4 {
  font-size: 1.12rem; font-weight: 700; color: var(--bcs-head); margin: 0;
  padding-bottom: 14px; position: relative;
}
.support-card h4 .sp-accent { color: var(--sc); }
.support-card h4::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 34px; height: 3px; border-radius: 3px; background: var(--sc);
}

/* the old dark-strip rules forced transparent cards — restore */
.whatSupport .section-headline > .row .card.support-card { background: #fff !important; border: 1px solid var(--bcs-line) !important; }
.whatSupport .section-headline > .row .card.support-card img { background: none; border-radius: 0; padding: 0; box-shadow: none; width: 62px; height: auto; }
.whatSupport .section-headline > .row .card.support-card h4 { color: var(--bcs-head); margin-top: 0; }

@media only screen and (max-width: 600px) {
  .support-card .sp-icon { width: 96px; height: 96px; }
  .support-card .sp-icon img { width: 50px; }
  .support-card h4 { font-size: 1rem; }
}

/* v33 — support icons: glyphs tinted exactly to each card color */
.support-card .sp-glyph {
  font-size: 52px !important; line-height: 1 !important; height: auto !important;
  color: var(--sc) !important;
}
@media only screen and (max-width: 600px) {
  .support-card .sp-glyph { font-size: 42px !important; }
}

/* v34 — support card sub-heading */
.support-card .sp-desc {
  margin: 12px 0 0; font-size: .93rem; line-height: 1.6; color: var(--bcs-muted);
}

/* v35 — reference-style outline SVG icons for support cards */
.support-card .sp-svg { width: 54px; height: 54px; color: var(--sc); }
@media only screen and (max-width: 600px) {
  .support-card .sp-svg { width: 44px; height: 44px; }
}

/* v36 — two small bubble dots on the icon ring (as in reference) */
.support-card .sp-icon::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, #fff 0 2.1px, var(--sc) 2.2px 3.6px, transparent 3.8px),
    radial-gradient(circle at 99% 62%, #fff 0 2.1px, var(--sc) 2.2px 3.6px, transparent 3.8px);
}

/* =====================================================================
   v38 — Installation Guide redesigned to reference
   ===================================================================== */
/* neutralize old bg image + old icon style */
.installnguide .container { background: none !important; }

.install-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  margin-top: 2.25rem; position: relative;
}
.install-step {
  --ic: #55bf39;
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--bcs-line); border-radius: 18px;
  box-shadow: 0 14px 30px -20px rgba(16,35,51,.25);
  padding: 2.1rem 1.4rem 2rem; text-align: center;
  transition: transform .3s var(--bcs-ease), box-shadow .3s var(--bcs-ease);
}
.is-2 { --ic: #2b6ef0; }
.is-3 { --ic: #f2960b; }
.is-4 { --ic: #55bf39; }
.install-step:hover { transform: translateY(-5px); box-shadow: 0 26px 44px -22px rgba(16,35,51,.35); }
/* colored bottom bar */
.install-step::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, var(--ic), color-mix(in srgb, var(--ic) 55%, #fff));
}
/* chevron connector between cards (desktop) */
.install-step:not(:last-child)::after {
  content: "\203A"; position: absolute; top: 50%; right: -31px; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  background: #fff; box-shadow: 0 8px 18px -8px rgba(16,35,51,.35);
  color: var(--ic); font-size: 22px; font-weight: 700; line-height: 32px; text-align: center;
}

/* number circle with partial arc */
.step-num {
  position: relative; width: 64px; height: 64px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.step-num::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--ic) 0 100deg, #e8eef5 100deg 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.step-num span {
  font-family: var(--bcs-font-head); font-weight: 800; font-size: 1.35rem; color: var(--ic);
}

/* icon circle */
.step-icon {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ic) 11%, #fff);
}
.step-icon .material-icons {
  font-size: 42px !important; line-height: 1 !important; height: auto !important;
  color: var(--ic) !important;
}

/* underline + title + text */
.install-step h5 {
  position: relative; font-size: 1.12rem; font-weight: 700; color: var(--bcs-head);
  margin: 0 0 .8rem; padding-top: 16px;
}
.install-step h5::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 3px; border-radius: 3px; background: var(--ic);
}
.install-step p { font-size: .92rem; line-height: 1.65; color: var(--bcs-muted); margin: 0; }

@media only screen and (max-width: 1100px) {
  .install-steps { grid-template-columns: 1fr 1fr; }
  .install-step:nth-child(2)::after { display: none; }
}
@media only screen and (max-width: 640px) {
  .install-steps { grid-template-columns: 1fr; gap: 26px; }
  .install-step::after { display: none !important; }
}

/* v38b — support ring bubbles: sit OUTSIDE the dashed circle, not touching */
.support-card .sp-icon::after {
  inset: -21px;
  background:
    radial-gradient(circle at 24% 8%, #fff 0 2.1px, var(--sc) 2.2px 3.6px, transparent 3.8px),
    radial-gradient(circle at 97% 63%, #fff 0 2.1px, var(--sc) 2.2px 3.6px, transparent 3.8px);
}

/* v39 — unclip the chevron connectors (overflow was hiding them);
   round the bottom bar corners explicitly instead */
.install-step { overflow: visible; }
.install-step::before {
  border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
}

/* v40 — bubbles were clipped at the box edge; enlarge canvas so both render
   as complete circles, still just outside the dashed ring */
.support-card .sp-icon::after {
  inset: -26px;
  background:
    radial-gradient(circle at 28% 12%, #fff 0 2.1px, var(--sc) 2.2px 3.6px, transparent 3.9px),
    radial-gradient(circle at 92% 61%, #fff 0 2.1px, var(--sc) 2.2px 3.6px, transparent 3.9px);
}

/* v41 — install steps: progress arcs 25/50/75/100% + proper arrow glyph */
.install-step { --arc: 90deg; }
.is-2 { --arc: 180deg; }
.is-3 { --arc: 270deg; }
.is-4 { --arc: 360deg; }
.step-num::before {
  background: conic-gradient(var(--ic) 0 var(--arc), #e8eef5 var(--arc) 360deg);
}
/* connector: crisp material chevron glyph, centered */
.install-step:not(:last-child)::after {
  content: "\e5cc";
  font-family: "Material Icons";
  font-weight: 400; font-size: 20px; line-height: 34px;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
}

/* v42 — rocket icon for Launch step */
.step-icon .step-svg { width: 42px; height: 42px; color: var(--ic); }

/* v44 — support icon circles slightly smaller */
.support-card .sp-icon { width: 98px; height: 98px; margin-bottom: 1rem; }
.support-card .sp-glyph { font-size: 42px !important; }
.support-card .sp-icon::before { inset: -8px; }
.support-card .sp-icon::after { inset: -22px; }
@media only screen and (max-width: 600px) {
  .support-card .sp-icon { width: 84px; height: 84px; }
  .support-card .sp-glyph { font-size: 36px !important; }
}

/* v45 — support icon circle ~78px */
.support-card .sp-icon { width: 78px; height: 78px; }
.support-card .sp-glyph { font-size: 34px !important; }
.support-card .sp-icon::before { inset: -7px; }
.support-card .sp-icon::after { inset: -19px; }
@media only screen and (max-width: 600px) {
  .support-card .sp-icon { width: 72px; height: 72px; }
  .support-card .sp-glyph { font-size: 30px !important; }
}

/* ------------------------------------------------------------------ *
 * Angular demo/contact form — brand the shared build for this site.
 * The build ships a realestate-blue default; every other site pins its
 * own accent. Main site was missing this and rendered blue.
 * ------------------------------------------------------------------ */
.contactForm, app-contactus {
  --pf-accent: var(--bcs-green);
  --pf-accent-dark: var(--bcs-green-dark);
}