/* BLACKGSM PREMIUM • Modern Dashboard Skin (Level 1) */
:root{
  --accent:#0d6efd;
  --bg0:#0b1220;
  --bg1:#0f1a33;
  --surface:rgba(255,255,255,.78);
  --surface2:rgba(255,255,255,.92);
  --text:#0b1220;
  --muted:#6c757d;
  --shadow: 0 20px 60px rgba(15, 23, 42, .12);
  --shadow2: 0 12px 24px rgba(15, 23, 42, .14);
  --ring: 0 0 0 .25rem rgba(13,110,253,.18);
  --radius: 18px;
}
html,body{height:100%}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
body{
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(168,85,247,.14), transparent 65%),
    linear-gradient(180deg,#f7f8fb 0%,#ffffff 40%);
}
a{ text-decoration:none }
.container-fluid{max-width:1280px}

.card, .table, .alert, .dropdown-menu, .modal-content{
  border-radius:var(--radius)!important;
}
.card{
  border:1px solid rgba(15,23,42,.08)!important;
  background:var(--surface2)!important;
  box-shadow: var(--shadow2);
}
.card.soft{
  background:var(--surface)!important;
  backdrop-filter: blur(10px) saturate(140%);
}
.card.lift, .btn.lift{
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.lift:hover, .btn.lift:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.kpi{
  position:relative;
  overflow:hidden;
}
.kpi:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 160px at 10% 10%, rgba(59,130,246,.22), transparent 60%),
              radial-gradient(520px 180px at 90% 20%, rgba(168,85,247,.18), transparent 60%);
  filter: blur(0px);
  pointer-events:none;
}
.kpi .kpi-icon{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,18,32,.92); color:#fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.kpi .kpi-value{ font-size:1.6rem; font-weight:800; letter-spacing:-.02em;}
.kpi .kpi-label{ color:var(--muted); font-size:.92rem; }

.navbar{
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 36px rgba(2,6,23,.18);
  background: linear-gradient(135deg, rgba(11,18,32,.94) 0%, rgba(36,59,107,.88) 55%, rgba(11,18,32,.94) 100%);
  backdrop-filter:saturate(160%) blur(10px);
}
.navbar .form-control{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.12);
  color:#fff;
}
.navbar .form-control::placeholder{ color: rgba(255,255,255,.7); }
.navbar .btn{
  border-radius: 14px;
}
.navbar .nav-link{
  opacity:.92;
  position:relative;
}
.navbar .nav-link:after{
  content:"";
  position:absolute; left:.6rem; right:.6rem; bottom:.35rem;
  height:2px; border-radius:999px;
  background: linear-gradient(90deg, rgba(59,130,246,.0), rgba(59,130,246,.75), rgba(168,85,247,.65), rgba(59,130,246,.0));
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .22s ease;
}
.navbar .nav-link:hover:after,
.navbar .nav-link.active:after{ transform: scaleX(1); }

/* Live animations (subtle, fast, everywhere) */
.reveal{opacity:0; transform: translateY(14px) scale(.985); filter: blur(2px); transition: opacity .5s ease, transform .5s ease, filter .5s ease;}
.reveal.in{opacity:1; transform:none; filter:none;}
.btn, .card, .table, .form-control, .form-select{transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.btn:active{transform: translateY(1px) scale(.99);}

.glow{
  box-shadow: 0 18px 40px rgba(59,130,246,.18);
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; filter:none; transition:none;}
  .card.lift, .btn.lift{transition:none;}
  .bg-dots{animation:none;}
}
.navbar .nav-link.active, .navbar .nav-link:hover{ opacity:1; }

.table{
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
}
.table thead th{
  background: rgba(15,23,42,.04);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.form-control, .form-select{
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.12);
}
.form-control:focus, .form-select:focus{
  box-shadow: var(--ring);
  border-color: rgba(13,110,253,.45);
}
.btn{
  border-radius: 14px;
}
.btn.btn-primary{
  box-shadow: 0 10px 18px rgba(13,110,253,.22);
}

.badge{
  border-radius: 999px;
  padding:.5em .75em;
}

/* Dark mode */
body.theme-dark{
  --surface: rgba(17, 24, 39, .62);
  --surface2: rgba(17, 24, 39, .85);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(168,85,247,.16), transparent 65%),
    linear-gradient(180deg, #050814 0%, #0b1220 40%, #0b1220 100%);
}
body.theme-dark .card,
body.theme-dark .table,
body.theme-dark .modal-content,
body.theme-dark .dropdown-menu{
  border-color: rgba(255,255,255,.10)!important;
}
body.theme-dark .table thead th{ background: rgba(255,255,255,.06); }
body.theme-dark .form-control,
body.theme-dark .form-select{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.12);
}
body.theme-dark .form-control::placeholder{ color: rgba(255,255,255,.66); }

/* Tiny floating 3D-ish background dots */
.bg-dots{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(59,130,246,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 20%, rgba(168,85,247,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 80%, rgba(34,197,94,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 75%, rgba(234,179,8,.45) 0 2px, transparent 3px);
  filter: blur(.2px);
  animation: floatDots 10s ease-in-out infinite alternate;
}
@keyframes floatDots{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(0,-10px,0); }
}

/* ===== Premium Color + Glow Upgrade (2026-03) ===== */
:root{
  --accent2:#a855f7; /* purple */
  --accent3:#22c55e; /* green */
  --accentWarm:#f59e0b; /* amber */
  --grad-accent: linear-gradient(135deg, rgba(59,130,246,1) 0%, rgba(168,85,247,1) 55%, rgba(34,197,94,1) 110%);
  --grad-dark: linear-gradient(135deg, #0b1220 0%, #162a52 55%, #0b1220 100%);
  --border: rgba(15,23,42,.10);
}

body::before, body::after{
  content:"";
  position:fixed;
  z-index:-1;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(50px);
  opacity:.18;
  pointer-events:none;
}
body::before{ left:-140px; top:-180px; background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.95), transparent 60%); }
body::after{ right:-160px; top:10px; background: radial-gradient(circle at 30% 30%, rgba(168,85,247,.95), transparent 60%); }

.navbar{
  background: rgba(11,18,32,.86)!important;
  backdrop-filter: saturate(170%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar .navbar-brand, .navbar .nav-link{ color:#fff!important; }
.navbar .nav-link{
  opacity:.92;
  border-radius: 14px;
  padding:.45rem .8rem;
}
.navbar .nav-link:hover{ opacity:1; background: rgba(255,255,255,.08); }
.navbar .nav-link.active{ background: rgba(255,255,255,.12); opacity:1; }

.badge.bg-accent, .badge.accent{
  background: var(--grad-accent)!important;
  color:#fff!important;
  border: 1px solid rgba(255,255,255,.18);
}
.badge.soft-accent{
  background: rgba(59,130,246,.10)!important;
  color:#1d4ed8!important;
  border:1px solid rgba(59,130,246,.18);
}

.btn{
  border-radius: 16px!important;
}
.btn-primary{
  background: var(--grad-accent)!important;
  border: 0!important;
  box-shadow: 0 14px 30px rgba(59,130,246,.22);
}
.btn-primary:hover{
  filter: brightness(1.04);
  box-shadow: 0 18px 38px rgba(168,85,247,.22);
}
.btn-dark{
  background: var(--grad-dark)!important;
  border: 0!important;
}
.btn-outline-dark{
  border-color: rgba(11,18,32,.22)!important;
}
.btn-outline-dark:hover{
  background: rgba(11,18,32,.92)!important;
  color:#fff!important;
}

.form-control, .form-select, .input-group-text{
  border-radius: 16px!important;
  border-color: var(--border)!important;
}
.form-control:focus, .form-select:focus{
  box-shadow: var(--ring)!important;
  border-color: rgba(13,110,253,.45)!important;
}

.table{
  overflow:hidden;
  border:1px solid var(--border)!important;
}
.table thead th{
  background: rgba(11,18,32,.92)!important;
  color:#fff!important;
  border-bottom: 1px solid rgba(255,255,255,.10)!important;
}
.table tbody tr:hover{ background: rgba(59,130,246,.06); }

.page-hero{
  background: var(--grad-dark);
  color:#fff;
  border-radius: 24px;
  padding: 22px;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
}
.page-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(700px 260px at 10% 10%, rgba(59,130,246,.35), transparent 60%),
              radial-gradient(620px 260px at 90% 30%, rgba(168,85,247,.28), transparent 60%),
              radial-gradient(560px 220px at 70% 90%, rgba(34,197,94,.20), transparent 60%);
  pointer-events:none;
}
.page-hero > *{ position:relative; }

.icon-pill{
  width:46px;height:46px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}

.glass{
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(15,23,42,.08);
}


:root{
  --accent-soft:#3b82f6;
}
body a:not(.btn), .text-accent{ color: var(--accent); }
.btn-dark, .btn.btn-primary, .theme-toggle, .btn-get-started, .bg-dark, .text-bg-dark, .badge.text-bg-dark{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%) !important;
  border-color: var(--accent) !important;
  color:#fff !important;
}
.btn-outline-dark{
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 70%, #000 30%) !important;
}
.btn-outline-dark:hover{ background: var(--accent) !important; color:#fff !important; }
.form-control:focus, .form-select:focus{ box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 18%, transparent) !important; border-color: var(--accent) !important; }
.header .logo h1, .sitename, .navmenu a.active, .navmenu a:hover{ color: var(--accent) !important; }
.theme-accent-select{ min-width: 135px; border-radius: 999px; }
.theme-toggle{ border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; border-radius:999px; width:42px; height:42px; }
.theme-toggle:hover{ transform: translateY(-1px); }
html[data-accent="blue"]{ --accent:#0d6efd; --accent-soft:#3b82f6; }
html[data-accent="purple"]{ --accent:#7c3aed; --accent-soft:#a855f7; }
html[data-accent="green"]{ --accent:#16a34a; --accent-soft:#22c55e; }
html[data-accent="amber"]{ --accent:#d97706; --accent-soft:#f59e0b; }
html[data-accent="rose"]{ --accent:#e11d48; --accent-soft:#fb7185; }
html[data-accent="cyan"]{ --accent:#0891b2; --accent-soft:#06b6d4; }


.dropdown-item.active[data-color-preset]{font-weight:700;background:rgba(0,0,0,.06);}
:root{--accent:var(--bgsm-accent, #7c3aed);}
.btn-dark{background:linear-gradient(135deg,var(--bgsm-accent, #7c3aed),var(--bgsm-accent2, #06b6d4))!important;border:0!important;}
.btn-outline-dark:hover{background:var(--bgsm-accent, #7c3aed)!important;border-color:var(--bgsm-accent, #7c3aed)!important;color:#fff!important;}


:root{
  --accent: var(--bgsm-accent, #7c3aed);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, white);
  --accent2: var(--bgsm-accent2, #06b6d4);
}
body{
  background:
    radial-gradient(1200px 600px at 10% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 65%),
    linear-gradient(180deg,#f7f8fb 0%,#ffffff 40%);
}
body.theme-dark{
  background:
    radial-gradient(1200px 600px at 10% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 65%),
    linear-gradient(180deg, #050814 0%, #0b1220 40%, #0b1220 100%);
}
.navbar .nav-link:after{ background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent); }
.btn-dark,
.btn-primary{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%)!important;
  border-color: transparent!important;
}
.btn-outline-dark:hover,
.page-link:hover,
.page-item.active .page-link{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%)!important;
  border-color: transparent!important;
  color:#fff!important;
}
.form-control:focus, .form-select:focus{
  border-color: color-mix(in srgb, var(--accent) 45%, white)!important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 20%, transparent)!important;
}
.page-link{ color: var(--accent); border-radius: 999px!important; }
.dropdown-item.active, .dropdown-item:active{ background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); color:#fff; }
body::before{ background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 90%, transparent), transparent 60%); }
body::after{ background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent2) 90%, transparent), transparent 60%); }


/* v23 premium widgets */
.premium-mini-stat{
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}
.premium-mini-stat span{display:block;font-size:.85rem;color:var(--muted)}
.premium-mini-stat strong{display:block;font-size:1rem}
.premium-feature-list{display:grid;gap:14px}
.premium-feature-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.72); border:1px solid rgba(15,23,42,.08);
}
.premium-feature-item i{
  width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(168,85,247,.16));
}
.premium-feature-item strong{display:block;margin-bottom:2px}
.premium-feature-item span{display:block;color:var(--muted);font-size:.92rem}

.payment-method-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;
}
.payment-method-card{
  border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.82); color:var(--text);
  border-radius:18px; padding:14px 14px; text-align:left;
  box-shadow:0 10px 24px rgba(15,23,42,.06); cursor:pointer;
}
.payment-method-card .pm-title{display:block;font-weight:800}
.payment-method-card .pm-sub{display:block;font-size:.85rem;color:var(--muted)}
.payment-method-card.active{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.12), 0 12px 30px rgba(59,130,246,.14);
  transform: translateY(-1px);
}

.mix-bar-list{display:grid;gap:12px}
.mix-head{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;margin-bottom:6px}
.mix-track{height:12px;border-radius:999px;background:rgba(15,23,42,.08);overflow:hidden}
.mix-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#3b82f6,#8b5cf6)}
.mix-fill.secondary{background:linear-gradient(90deg,#22c55e,#14b8a6)}
.mix-fill.tertiary{background:linear-gradient(90deg,#f59e0b,#ef4444)}

body.theme-dark .premium-mini-stat,
body.theme-dark .premium-feature-item,
body.theme-dark .payment-method-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}
body.theme-dark .premium-feature-item span,
body.theme-dark .premium-mini-stat span,
body.theme-dark .payment-method-card .pm-sub{color:rgba(255,255,255,.68)}
body.theme-dark .mix-track{background:rgba(255,255,255,.10)}


/* Touch-friendly improvements */
@media (hover:none), (pointer:coarse){
  .btn, .form-control, .form-select, .page-link, .payment-method-card{
    min-height:52px;
  }
  .btn{padding:.8rem 1rem;border-radius:16px}
  .form-control, .form-select{font-size:16px;border-radius:16px;padding:.85rem 1rem}
  .payment-method-card{padding:16px 16px}
  .card, .service-premium-card{border-radius:20px}
  .table-responsive table td input.form-control{min-width:84px}
}


/* ===== Responsive + Touch Upgrade (2026-03) ===== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  overflow-x:hidden;
}
img, video, canvas, svg{
  max-width:100%;
  height:auto;
}
a, button, .btn, .page-link, .dropdown-item, .form-control, .form-select, .theme-toggle, .mobile-nav-toggle{
  touch-action: manipulation;
}
.btn,
.page-link,
.theme-toggle,
.navbar-toggler,
.mobile-nav-toggle,
.dropdown-item,
.form-control,
.form-select{
  min-height:44px;
}
.form-control,
.form-select,
.input-group-text{
  min-height:48px;
}
textarea.form-control{
  min-height:120px;
}
.table-responsive{
  border-radius:18px;
  -webkit-overflow-scrolling:touch;
}
.table-responsive::-webkit-scrollbar{
  height:8px;
}
.table-responsive::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.18);
  border-radius:999px;
}
.offcanvas{
  max-width:min(92vw, 360px);
}
.card img,
.card-img-top,
.object-fit-cover{
  object-fit:cover;
}
.pagination{
  flex-wrap:wrap;
}
.modal-dialog{
  margin:1rem auto;
}
#scroll-top,
.bgsm-wa-fab{
  width:56px;
  height:56px;
}

@media (max-width: 991.98px){
  .container-fluid,
  .container,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm{
    padding-left:14px;
    padding-right:14px;
  }
  .navbar .btn,
  .header .btn{
    min-height:44px;
    padding:.65rem .9rem;
  }
  .card{
    border-radius:16px!important;
  }
  .card-body,
  .modal-body,
  .offcanvas-body{
    padding:1rem!important;
  }
  .hero,
  .saas-hero{
    padding:1rem!important;
  }
  .display-1,.display-2,.display-3,.display-4,.display-5{
    line-height:1.12;
  }
}

@media (max-width: 767.98px){
  body{
    font-size:.97rem;
  }
  h1,.h1{font-size:1.6rem;}
  h2,.h2{font-size:1.35rem;}
  h3,.h3{font-size:1.15rem;}
  .btn,
  .page-link,
  .theme-toggle,
  .dropdown-item,
  input,
  select,
  textarea{
    font-size:16px!important;
  }
  .d-flex.flex-wrap.mobile-column,
  .mobile-column{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .table.bgsm-mobile-table thead{
    display:none;
  }
  .table.bgsm-mobile-table,
  .table.bgsm-mobile-table tbody,
  .table.bgsm-mobile-table tr,
  .table.bgsm-mobile-table td{
    display:block;
    width:100%;
  }
  .table.bgsm-mobile-table tr{
    background:rgba(255,255,255,.88);
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    padding:.55rem .8rem;
    margin-bottom:.8rem;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
  }
  body.theme-dark .table.bgsm-mobile-table tr{
    background:rgba(17,24,39,.88);
    border-color:rgba(255,255,255,.1);
  }
  .table.bgsm-mobile-table td{
    border:0!important;
    padding:.42rem 0!important;
    text-align:left!important;
  }
  .table.bgsm-mobile-table td::before{
    content:attr(data-label);
    display:block;
    font-size:.76rem;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--muted);
    margin-bottom:.18rem;
    font-weight:700;
  }
  .table.bgsm-mobile-table td:last-child{
    padding-bottom:0!important;
  }
  .bgsm-mobile-stack,
  .bgsm-mobile-stack > .row,
  .bgsm-mobile-stack > .d-flex{
    gap:.75rem!important;
  }
  .bgsm-mobile-stack .btn,
  .bgsm-mobile-stack .form-control,
  .bgsm-mobile-stack .form-select{
    width:100%;
  }
}

@media (max-width: 575.98px){
  .container.py-4,
  .container.py-5,
  .container.py-lg-5,
  .container-fluid.py-4,
  .container-fluid.py-5{
    padding-top:1rem!important;
    padding-bottom:1rem!important;
  }
  .hero,
  .saas-hero,
  .card-body{
    padding:.95rem!important;
  }
  .btn-group,
  .input-group{
    flex-wrap:wrap;
  }
  .btn-group > .btn,
  .input-group > .form-control,
  .input-group > .form-select,
  .input-group > .btn{
    border-radius:14px!important;
  }
  .navbar-brand,
  .logo .sitename{
    max-width:150px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* Global 3D cards, social dock and back button */
.card,
.service-item,
.kpi-card,
.premium-mini-stat,
.gateway-badge,
.checkout-card,
.hero,
.ai-widget{
  box-shadow:0 18px 45px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .28s ease, box-shadow .28s ease;
}
.card:hover,
.service-item:hover,
.kpi-card:hover,
.premium-mini-stat:hover,
.gateway-badge:hover,
.checkout-card:hover,
.hero:hover,
.ai-widget:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 28px 70px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.32);
}
.location-map-card iframe{filter:contrast(1.04) saturate(1.05);}
.bgsm-social-dock{
  position:fixed;left:18px;bottom:18px;z-index:9998;display:flex;flex-direction:column;gap:12px;
}
.bgsm-social-fab,.bgsm-back-fab{
  width:58px;height:58px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff!important;text-decoration:none;border:0;box-shadow:0 16px 35px rgba(15,23,42,.22);font-size:1.55rem;
  backdrop-filter:blur(10px);transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.bgsm-social-fab:hover,.bgsm-back-fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 22px 42px rgba(15,23,42,.28)}
.bgsm-social-facebook{background:#1877f2}.bgsm-social-instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.bgsm-social-whatsapp{background:#25d366}.bgsm-social-youtube{background:#ff0000}.bgsm-social-telegram{background:#229ED9}.bgsm-social-tiktok{background:#111827}
.bgsm-back-fab{position:fixed;right:18px;bottom:86px;z-index:9998;background:linear-gradient(135deg,#111827,#374151)}
.bgsm-back-fab-admin{bottom:18px}
@media (max-width: 767.98px){
  .bgsm-social-dock{left:12px;bottom:12px;gap:10px}
  .bgsm-social-fab,.bgsm-back-fab{width:52px;height:52px;border-radius:16px;font-size:1.35rem}
  .bgsm-back-fab{right:12px;bottom:78px}
  .bgsm-back-fab-admin{bottom:12px}
}


/* ===== Mobile readability + responsive type fit ===== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  overflow-x:hidden;
}
img,svg,iframe,video{
  max-width:100%;
  height:auto;
}
h1,.h1,
.hero h1,
#hero h1{
  font-size:clamp(1.9rem, 5vw, 4.2rem);
  line-height:1.08;
  letter-spacing:-0.03em;
}
h2,.h2{
  font-size:clamp(1.45rem, 3.8vw, 2.8rem);
  line-height:1.12;
}
h3,.h3{
  font-size:clamp(1.2rem, 3vw, 2rem);
  line-height:1.18;
}
h4,.h4{
  font-size:clamp(1.05rem, 2.4vw, 1.45rem);
  line-height:1.22;
}
h5,.h5{
  font-size:clamp(1rem, 2vw, 1.2rem);
}
h1,h2,h3,h4,h5,h6,
.card-title,.fw-bold,.fw-semibold,.hero p,.lead,.btn,.nav-link,.form-label,
.table td,.table th,.small-muted,.premium-feature-item strong,.premium-feature-item span{
  overflow-wrap:anywhere;
  word-break:normal;
  text-wrap:balance;
}
p,li,label,input,select,textarea,button{
  line-height:1.5;
}
.btn,.nav-link{
  white-space:normal;
}
.form-control,.form-select{
  min-height:48px;
  font-size:1rem;
}
.hero .btn,
.saas-hero .btn{
  min-height:50px;
}
@media (max-width: 991.98px){
  #hero .row,
  .hero .row{
    row-gap:1rem;
  }
}
@media (max-width: 767.98px){
  .hero,
  .saas-hero,
  .page-hero{
    border-radius:22px;
  }
  .hero .btn,
  .saas-hero .btn,
  #hero .btn{
    width:100%;
  }
  .hero .card,
  #hero .card{
    margin-top:.5rem;
  }
}

/* ===== Social menu (single animated launcher) ===== */
.bgsm-social-dock{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:9998;
}
.bgsm-social-trigger{
  width:60px;
  height:60px;
  border:0;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#111827,#2563eb,#8b5cf6);
  box-shadow:0 18px 40px rgba(15,23,42,.24);
  font-size:1.45rem;
  transition:transform .22s ease, box-shadow .22s ease;
}
.bgsm-social-trigger:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 24px 46px rgba(15,23,42,.3);
}
.bgsm-social-panel{
  position:absolute;
  left:0;
  bottom:74px;
  display:flex;
  flex-direction:column;
  gap:10px;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.94);
  transition:opacity .22s ease, transform .22s ease;
}
.bgsm-social-dock.open .bgsm-social-panel{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.bgsm-social-panel .bgsm-social-fab{
  transform:translateY(12px) scale(.88);
  opacity:0;
}
.bgsm-social-dock.open .bgsm-social-panel .bgsm-social-fab{
  transform:translateY(0) scale(1);
  opacity:1;
}
.bgsm-social-dock.open .bgsm-social-trigger i{
  transform:rotate(45deg);
}
.bgsm-social-trigger i{
  transition:transform .2s ease;
}
.bgsm-social-panel .bgsm-social-fab:nth-child(1){transition-delay:.02s}
.bgsm-social-panel .bgsm-social-fab:nth-child(2){transition-delay:.05s}
.bgsm-social-panel .bgsm-social-fab:nth-child(3){transition-delay:.08s}
.bgsm-social-panel .bgsm-social-fab:nth-child(4){transition-delay:.11s}
.bgsm-social-panel .bgsm-social-fab:nth-child(5){transition-delay:.14s}
.bgsm-social-panel .bgsm-social-fab:nth-child(6){transition-delay:.17s}
.bgsm-social-panel .bgsm-social-fab:nth-child(7){transition-delay:.2s}
@media (max-width: 767.98px){
  .bgsm-social-dock{
    left:12px;
    bottom:12px;
  }
  .bgsm-social-trigger{
    width:54px;
    height:54px;
    border-radius:18px;
    font-size:1.3rem;
  }
  .bgsm-social-panel{
    bottom:66px;
    gap:8px;
  }
}

/* ===== Repair tables / cards on small screens ===== */
.repair-summary-card .fs-5,
.kpi .value,
.kpi .kpi-value{
  font-size:clamp(1rem, 2.4vw, 1.5rem);
}

/* ===== V60 QA polish pass ===== */
:root{
  --bgsm-safe-bottom:max(14px, env(safe-area-inset-bottom));
}
html{overflow-x:hidden}
body{overflow-x:hidden; text-rendering:optimizeLegibility;}
.container, .container-fluid{min-width:0}
.row > *{min-width:0}
.card-body, .modal-body, .offcanvas-body{min-width:0}
.navbar .container, .navbar .container-fluid{row-gap:.75rem}
.navbar .navbar-brand{
  max-width:min(72vw, 320px);
  white-space:normal;
  line-height:1.1;
}
.navbar .navbar-nav{
  row-gap:.35rem;
}
.navbar .nav-link{
  line-height:1.25;
  overflow-wrap:anywhere;
}
.navbar .dropdown-menu{
  max-width:min(94vw, 360px);
}
.navbar-collapse{
  max-height:min(78vh, 720px);
  overflow:auto;
}
.page-hero,
.hero,
.saas-hero,
.kpi,
.premium-mini-stat,
.premium-feature-item,
.payment-method-card{
  overflow:hidden;
}
.kpi .label,
.kpi .kpi-label,
.small-muted,
.text-muted{
  overflow-wrap:anywhere;
}
.btn{
  line-height:1.25;
  text-wrap:pretty;
}
.btn-group.flex-wrap,
.d-flex.flex-wrap.gap-2,
.d-flex.flex-wrap.gap-3{
  row-gap:.65rem;
}
.footer .social-links a,
.footer .footer-links a,
.footer .footer-contact a{
  overflow-wrap:anywhere;
}
.bgsm-social-dock{
  left:18px;
  bottom:var(--bgsm-safe-bottom);
}
.bgsm-back-fab{
  bottom:calc(var(--bgsm-safe-bottom) + 68px);
}
.bgsm-back-fab-admin{
  bottom:var(--bgsm-safe-bottom);
}
.bgsm-social-panel .bgsm-social-fab,
.bgsm-social-trigger,
.bgsm-back-fab{
  will-change:transform, opacity;
}
.table-responsive > .table{
  margin-bottom:0;
}
@media (max-width: 1199.98px){
  .display-1,.display-2,.display-3,.display-4,.display-5{word-break:normal}
}
@media (max-width: 991.98px){
  .navbar .navbar-brand{max-width:min(66vw, 260px)}
  .page-hero,
  .hero,
  .saas-hero{padding:1rem!important}
  .kpi{padding:1rem}
  .table-responsive{font-size:.96rem}
}
@media (max-width: 767.98px){
  h1,.h1,.display-1,.display-2,.display-3,.display-4,.display-5{font-size:clamp(1.45rem, 6.8vw, 2rem)!important; line-height:1.12}
  h2,.h2{font-size:clamp(1.2rem, 5.2vw, 1.6rem)!important}
  h3,.h3{font-size:clamp(1.05rem, 4.4vw, 1.3rem)!important}
  .lead{font-size:1rem!important}
  .navbar .btn,
  .navbar .form-control,
  .navbar .form-select{width:100%}
  .page-hero .d-flex,
  .hero .d-flex,
  .card-body .d-flex.flex-wrap{align-items:stretch!important}
  .page-hero .btn,
  .hero .btn,
  .card-body .btn{max-width:100%}
  .bgsm-social-dock{left:12px; bottom:calc(var(--bgsm-safe-bottom) + 2px)}
  .bgsm-back-fab{right:12px; bottom:calc(var(--bgsm-safe-bottom) + 68px)}
  .footer .social-links{justify-content:center}
}
@media (max-width: 575.98px){
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl{padding-left:12px!important; padding-right:12px!important}
  .page-hero,
  .hero,
  .saas-hero,
  .card,
  .modal-content{border-radius:18px!important}
  .card-body,
  .modal-body,
  .offcanvas-body{padding:.9rem!important}
  .btn-group,
  .input-group,
  .d-flex.flex-wrap{gap:.55rem!important}
  .btn-group > .btn,
  .input-group > .btn,
  .input-group > .form-control,
  .input-group > .form-select{width:100%}
  .table-responsive{font-size:.92rem}
}
@media print{
  .bgsm-social-dock,
  .bgsm-back-fab,
  #scroll-top,
  #preloader{display:none!important}
}