/* =========================================================
   Modern Dark Theme — SocialBazar24
   Custom overrides on top of Bootstrap 3.
   Scope: visuals, dark mode, responsiveness, perf-friendly.
   Functionality / markup unchanged.
   ========================================================= */

:root{
  /* Surfaces */
  --bg-base:#0e1116;
  --bg-elevated:#161b22;
  --bg-elevated-2:#1c232d;
  --bg-input:#0f141a;
  --border:#2a323d;
  --border-soft:#222933;

  /* Text */
  --text:#e6edf3;
  --text-muted:#9aa7b4;
  --text-dim:#6b7785;

  /* Brand / accents */
  --accent:#4f8cff;
  --accent-hover:#3a78f0;
  --accent-soft:rgba(79,140,255,.14);
  --success:#3fb950;
  --danger:#f85149;
  --warning:#d29922;
  --info:#3993d4;

  /* Shape */
  --radius:12px;
  --radius-sm:8px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 14px 40px rgba(0,0,0,.45);
  --trans:200ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(79,140,255,.08), transparent 60%),
    var(--bg-base);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{ color:var(--text); font-weight:700; letter-spacing:-.01em; }
a{ color:var(--accent); transition:color var(--trans); }
a:hover,a:focus{ color:var(--accent-hover); text-decoration:none; }
p{ color:var(--text); }
small,.text-muted{ color:var(--text-muted)!important; }
hr{ border-top:1px solid var(--border-soft); }
::selection{ background:var(--accent-soft); }
code,pre{ background:var(--bg-elevated-2); color:#e6edf3; border:1px solid var(--border-soft); border-radius:var(--radius-sm); }

/* ---------- Scrollbars ---------- */
*{ scrollbar-width:thin; scrollbar-color:#39414d transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#39414d; border-radius:var(--radius-pill); border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#4a5462; background-clip:content-box; }

/* ---------- Navbars ---------- */
.navbar{
  background:rgba(22,27,34,.85);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border:0;
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  margin-bottom:24px;
  border-radius:0;
  min-height:60px;
}
.navbar-default{ background:rgba(22,27,34,.85); }
.navbar-brand{ color:var(--text)!important; font-weight:700; height:auto; padding-top:18px; padding-bottom:18px; }
.navbar-brand img{ max-height:32px; width:auto; }
.navbar-nav>li>a{
  color:var(--text-muted)!important;
  font-weight:600;
  padding:20px 16px;
  position:relative;
  transition:color var(--trans),background var(--trans);
}
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus,
.navbar-nav>.active>a,
.navbar-nav>.open>a{
  color:var(--text)!important;
  background:var(--accent-soft)!important;
}
.navbar-nav>.active>a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:10px; height:2px;
  background:var(--accent); border-radius:2px;
}
.navbar-icon{ margin-right:6px; }

/* Hamburger */
.navbar-toggle{ border:1px solid var(--border); border-radius:var(--radius-sm); }
.navbar-toggle:hover,.navbar-toggle:focus{ background:var(--bg-elevated-2); }
.navbar-toggle .icon-bar{ background:var(--text-muted); }

/* ---------- Dropdowns ---------- */
.dropdown-menu{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:6px;
  margin-top:8px;
}
.dropdown-menu>li>a{
  color:var(--text-muted);
  border-radius:var(--radius-sm);
  padding:8px 14px;
  transition:background var(--trans),color var(--trans);
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a{
  background:var(--accent-soft);
  color:var(--text);
}
.dropdown-menu .divider{ background:var(--border-soft); }
.dropdown-max-height{ max-height:360px; overflow-y:auto; }
.caret{ border-top-color:currentColor; }

/* ---------- Cards / panels / wells ---------- */
.panel,.well,.thumbnail,.list-group{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  color:var(--text);
}
.panel{ overflow:hidden; }
.panel-heading{
  background:var(--bg-elevated-2);
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-weight:700;
  padding:16px 20px;
}
.panel-body{ padding:20px; }
.panel-footer{ background:var(--bg-elevated-2); border-top:1px solid var(--border); color:var(--text-muted); }
.panel-default>.panel-heading{ color:var(--text); }
.well{ box-shadow:none; }
.list-group-item{ background:transparent; border-color:var(--border-soft); color:var(--text); }
.list-group-item:hover{ background:var(--bg-elevated-2); }

/* ---------- Buttons ---------- */
.btn{
  border-radius:var(--radius-sm);
  font-weight:600;
  padding:9px 18px;
  border:1px solid transparent;
  transition:transform var(--trans),background var(--trans),box-shadow var(--trans),border-color var(--trans);
}
.btn:active{ transform:translateY(1px); }
.btn:focus,.btn:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.btn-primary{ background:var(--accent); border-color:var(--accent); box-shadow:0 4px 14px rgba(79,140,255,.3); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-default{ background:var(--bg-elevated-2); border-color:var(--border); color:var(--text); }
.btn-default:hover,.btn-default:focus{ background:#222a35; border-color:#3a434f; color:var(--text); }
.btn-success{ background:var(--success); border-color:var(--success); }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
.btn-warning{ background:var(--warning); border-color:var(--warning); color:#1a1300; }
.btn-info{ background:var(--info); border-color:var(--info); }
.btn-link{ color:var(--accent); }

/* ---------- Forms ---------- */
.form-control{
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  box-shadow:none;
  height:auto;
  padding:10px 14px;
  transition:border-color var(--trans),box-shadow var(--trans);
}
.form-control:focus{
  background:var(--bg-input);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  color:var(--text);
}
.form-control::placeholder{ color:var(--text-dim); }
.form-control[disabled],.form-control[readonly]{ background:var(--bg-elevated-2); opacity:.7; }
label,.control-label{ color:var(--text); font-weight:600; }
.input-group-addon{ background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text-muted); border-radius:var(--radius-sm); }
select.form-control{ background-image:none; }
.help-block{ color:var(--text-dim); }
.checkbox label,.radio label{ color:var(--text-muted); }

/* ---------- Tables ---------- */
.table{ color:var(--text); }
.table>thead>tr>th{
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.04em;
  font-weight:700;
  padding:14px 16px;
}
.table>tbody>tr>td{ border-top:1px solid var(--border-soft); padding:14px 16px; vertical-align:middle; }
.table-hover>tbody>tr:hover{ background:var(--bg-elevated-2); }
.table-striped>tbody>tr:nth-of-type(odd){ background:rgba(255,255,255,.02); }
.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{ border-color:var(--border); }
.table-responsive{ border:0; border-radius:var(--radius); }

/* ---------- Alerts / notifications ---------- */
.alert{ border:1px solid var(--border); border-radius:var(--radius); color:var(--text); background:var(--bg-elevated); }
.alert-success{ background:rgba(63,185,80,.12); border-color:rgba(63,185,80,.4); color:#8ce39a; }
.alert-danger{ background:rgba(248,81,73,.12); border-color:rgba(248,81,73,.4); color:#ff9d97; }
.alert-warning{ background:rgba(210,153,34,.12); border-color:rgba(210,153,34,.4); color:#e3c168; }
.alert-info{ background:rgba(57,147,212,.12); border-color:rgba(57,147,212,.4); color:#82c0ec; }
#notify-wrapper{ position:fixed; top:80px; right:20px; z-index:1080; max-width:360px; border-radius:var(--radius); box-shadow:var(--shadow-lg); }

/* ---------- Badges / labels / pagination ---------- */
.badge{ background:var(--accent); border-radius:var(--radius-pill); padding:4px 9px; font-weight:600; }
.label{ border-radius:var(--radius-pill); padding:.3em .7em; font-weight:600; }
.label-default{ background:var(--bg-elevated-2); }
.pagination>li>a,.pagination>li>span{
  background:var(--bg-elevated); border-color:var(--border); color:var(--text-muted);
}
.pagination>li>a:hover{ background:var(--bg-elevated-2); border-color:var(--border); color:var(--text); }
.pagination>.active>a,.pagination>.active>span{ background:var(--accent); border-color:var(--accent); }

/* ---------- Modals ---------- */
.modal-content{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); color:var(--text); }
.modal-header,.modal-footer{ border-color:var(--border); }
.modal-backdrop.in{ opacity:.6; }
.close{ color:var(--text); opacity:.6; text-shadow:none; }
.close:hover{ color:var(--text); opacity:1; }

/* ---------- Tabs / nav-pills ---------- */
.nav-tabs{ border-bottom:1px solid var(--border); }
.nav-tabs>li>a{ color:var(--text-muted); border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs>li>a:hover{ background:var(--bg-elevated-2); border-color:transparent; }
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{
  background:var(--bg-elevated); border-color:var(--border) var(--border) var(--bg-elevated); color:var(--text);
}
.nav-pills>li.active>a{ background:var(--accent); }
.nav-pills>li>a{ border-radius:var(--radius-pill); color:var(--text-muted); }

/* ---------- Progress / breadcrumb ---------- */
.progress{ background:var(--bg-elevated-2); border-radius:var(--radius-pill); height:10px; box-shadow:none; }
.progress-bar{ background:var(--accent); }
.breadcrumb{ background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius); }
.breadcrumb>li+li:before{ color:var(--text-dim); }

/* ---------- Utility ---------- */
.container,.container-fluid{ max-width:1280px; }
img{ max-width:100%; height:auto; }
.shadow-card{ box-shadow:var(--shadow); }

/* ---------- Responsiveness ---------- */
@media (max-width:991px){
  .container,.container-fluid{ padding-left:18px; padding-right:18px; }
}
@media (max-width:767px){
  body{ font-size:14.5px; }
  .navbar{ margin-bottom:16px; }
  .navbar-nav{ margin:6px 0; }
  .navbar-nav>li>a{ padding:12px 14px; }
  .navbar-nav>.active>a::after{ display:none; }
  .navbar-collapse{ border-top:1px solid var(--border-soft); box-shadow:none; }
  .panel-body{ padding:16px; }
  .btn{ padding:10px 16px; }
  /* Make wide tables scroll horizontally on phones */
  .table-responsive{ -webkit-overflow-scrolling:touch; }
  #notify-wrapper{ left:12px; right:12px; max-width:none; top:70px; }
  .dropdown-menu{ box-shadow:none; border:0; background:transparent; }
  .dropdown-menu>li>a{ color:var(--text-muted); }
}
@media (max-width:480px){
  h1{ font-size:24px; } h2{ font-size:21px; } h3{ font-size:18px; }
  .btn-block-xs{ display:block; width:100%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none!important; animation:none!important; }
}


/* =========================================================
   CMS content legibility fix
   Legacy WYSIWYG content uses hardcoded light inline
   backgrounds/colors (white bg + near-white text) that
   become unreadable on a dark theme. Neutralize them so
   text inherits the theme's readable colors.
   Scoped to content areas to avoid touching UI chrome.
   ========================================================= */
.panel-body, .well, .container .panel, .blog-post, .page-content, article{
  color:var(--text);
}
/* Strip hardcoded white / near-white inline backgrounds from inline text tags */
.panel-body font[style*="background"],
.panel-body span[style*="background"],
.panel-body p[style*="background"],
.panel-body div[style*="background"],
.well font[style*="background"],
.well span[style*="background"],
.well p[style*="background"],
.well div[style*="background"]{
  background-color:transparent !important;
  background:transparent !important;
}
/* Force near-white text inside content to use theme text color (handles white-on-white) */
.panel-body font, .panel-body span, .panel-body p, .panel-body li, .panel-body td,
.well font, .well span, .well p, .well li, .well td{
  color:var(--text) !important;
}
/* Preserve genuine accent/brand colored text (e.g. orange headings) by NOT overriding strong/headings,
   and allow links to keep accent color */
.panel-body a, .well a{ color:var(--accent) !important; }
.panel-body h1, .panel-body h2, .panel-body h3, .panel-body h4,
.well h1, .well h2, .well h3, .well h4{ color:var(--text) !important; }


/* =========================================================
   SocialBazar24 logo + landing page
   ========================================================= */

/* ---------- Brand logo (text + SVG) ---------- */
.navbar-brand{ display:flex; align-items:center; padding-top:10px; padding-bottom:10px; }
.sb-logo{
  display:inline-flex; flex-direction:column; line-height:.92;
  font-weight:800; letter-spacing:.2px; user-select:none;
}
.sb-logo__row{ display:inline-flex; align-items:center; color:var(--accent); }
.sb-logo__row--top{ font-size:20px; }
.sb-logo__row--bottom{ font-size:22px; margin-top:1px; }
.sb-logo__heart{
  display:inline-flex; width:.72em; height:.72em; margin:0 1px;
  color:#ff7a18; transform:translateY(1px);
}
.sb-logo__heart svg{ width:100%; height:100%; }
.sb-logo__24{
  position:relative; display:inline-flex; align-items:center;
  margin-left:6px; color:#ff7a18; font-weight:800;
}
.sb-logo__arrow{
  position:absolute; left:-7px; top:50%; width:1.7em; height:1.7em;
  transform:translateY(-50%); color:#ff7a18; pointer-events:none; opacity:.95;
}
/* underline accent connecting the two rows */
.sb-logo__row--top{ position:relative; }
.sb-logo__row--top::after{
  content:""; position:absolute; left:2px; right:-4px; bottom:-3px; height:2px;
  background:linear-gradient(90deg,#ff7a18,rgba(255,122,24,0)); border-radius:2px;
}

/* ---------- Landing layout ---------- */
.sb-landing{ color:var(--text); }
.sb-grad{
  background:linear-gradient(90deg,var(--accent),#7aa7ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Hero */
.sb-hero{
  padding:56px 0 40px;
  background:
    radial-gradient(800px 400px at 12% 0%, rgba(79,140,255,.12), transparent 60%),
    radial-gradient(700px 380px at 100% 10%, rgba(255,122,24,.08), transparent 55%);
  border-bottom:1px solid var(--border-soft);
}
.sb-hero__inner{ display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; }
.sb-hero__copy{ flex:1 1 420px; min-width:300px; }
.sb-hero__form{ flex:1 1 360px; min-width:300px; }
.sb-hero__form .well{ margin-bottom:0; box-shadow:var(--shadow); }
.sb-badge{
  display:inline-block; padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--accent-soft); color:#a9c6ff; font-weight:600; font-size:13px;
  border:1px solid rgba(79,140,255,.25); margin-bottom:18px;
}
.sb-hero__title{ font-size:42px; line-height:1.1; margin:0 0 16px; }
.sb-hero__lead{ font-size:17px; color:var(--text-muted); max-width:560px; margin:0 0 26px; }
.sb-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.btn-lg{ padding:13px 26px; font-size:16px; border-radius:var(--radius); }
.sb-hero__stats{ list-style:none; padding:0; margin:0; display:flex; gap:32px; flex-wrap:wrap; }
.sb-hero__stats li{ display:flex; flex-direction:column; }
.sb-hero__stats strong{ font-size:26px; color:var(--text); }
.sb-hero__stats span{ font-size:13px; color:var(--text-dim); }

/* Sections */
.sb-section{ padding:56px 0; }
.sb-section--alt{ background:var(--bg-elevated); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.sb-section__title{ text-align:center; font-size:30px; margin:0 0 10px; }
.sb-section__sub{ text-align:center; color:var(--text-muted); margin:0 auto 36px; max-width:620px; }

/* Features */
.sb-features{ margin-top:8px; }
.sb-feature{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 22px; height:100%; margin-bottom:24px; transition:transform var(--trans),border-color var(--trans),box-shadow var(--trans);
}
.sb-feature:hover{ transform:translateY(-4px); border-color:rgba(79,140,255,.4); box-shadow:var(--shadow); }
.sb-feature__icon{ font-size:30px; margin-bottom:14px; }
.sb-feature h3{ font-size:18px; margin:0 0 8px; }
.sb-feature p{ color:var(--text-muted); margin:0; font-size:14.5px; }

/* Services */
.sb-service{
  position:relative; background:var(--bg-base); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 22px; height:100%; margin-bottom:24px; overflow:hidden;
  transition:transform var(--trans),border-color var(--trans),box-shadow var(--trans);
}
.sb-section--alt .sb-service{ background:var(--bg-base); }
.sb-service:hover{ transform:translateY(-4px); border-color:rgba(79,140,255,.45); box-shadow:var(--shadow); }
.sb-service::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg,var(--accent),#ff7a18); opacity:.9; }
.sb-service__tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.sb-service h3{ font-size:19px; margin:0 0 8px; }
.sb-service p{ color:var(--text-muted); margin:0; font-size:14.5px; }

/* Steps */
.sb-step{ text-align:center; padding:18px; margin-bottom:24px; }
.sb-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; font-size:22px; font-weight:800;
  color:#fff; background:linear-gradient(135deg,var(--accent),#7aa7ff);
  box-shadow:0 8px 20px rgba(79,140,255,.35); margin-bottom:16px;
}
.sb-step h3{ font-size:17px; margin:0 0 6px; }
.sb-step p{ color:var(--text-muted); font-size:14px; margin:0; }

/* FAQ */
.sb-faq{
  background:var(--bg-base); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:22px;
}
.sb-section--alt .sb-faq{ background:var(--bg-base); }
.sb-faq h3{ font-size:16px; margin:0 0 8px; color:var(--text); }
.sb-faq p{ color:var(--text-muted); margin:0; font-size:14.5px; }

/* Final CTA */
.sb-cta-final{
  text-align:center; margin-top:30px; padding:40px 24px; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(79,140,255,.16), rgba(255,122,24,.10));
  border:1px solid rgba(79,140,255,.3);
}
.sb-cta-final h2{ margin:0 0 8px; font-size:26px; }
.sb-cta-final p{ color:var(--text-muted); margin:0 0 20px; }

/* Hero login card heading helper (attach only to the login form, not other wells) */
.sb-hero__form .well form::before{
  content:"Sign in to your panel"; display:block; font-size:18px; font-weight:700;
  color:var(--text); margin-bottom:16px;
}
/* Hide the empty secondary content well that the template renders when authText is empty */
.sb-hero__form .well:empty{ display:none; }
/* Tighten the login card spacing inside the hero */
.sb-hero__form .col-md-8{ width:100%; margin:0; padding:0; }
.sb-hero__form .row{ margin:0; }

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .sb-hero__title{ font-size:34px; }
}
@media (max-width:767px){
  .sb-hero{ padding:36px 0 28px; }
  .sb-hero__inner{ gap:28px; }
  .sb-hero__title{ font-size:28px; }
  .sb-hero__lead{ font-size:15.5px; }
  .sb-hero__stats{ gap:20px; }
  .sb-hero__stats strong{ font-size:22px; }
  .sb-section{ padding:40px 0; }
  .sb-section__title{ font-size:24px; }
  .sb-logo__row--top{ font-size:17px; }
  .sb-logo__row--bottom{ font-size:19px; }
  .btn-lg{ width:100%; }
  .sb-hero__cta{ flex-direction:column; }
}


/* =========================================================
   Brand logo fallback (cached pages still rendering old <img>)
   Hide the broken/old logo image and render a clean text logo.
   Works whether the page outputs .sb-logo (new) or <img> (cached).
   ========================================================= */
.navbar-brand img{ display:none !important; }      /* hide broken/old image */
.navbar-brand{ font-size:0; }                        /* collapse stray alt text/whitespace */
/* If the rich SVG logo isn't present (cached layout), show a CSS text logo */
.navbar-brand:not(:has(.sb-logo))::after{
  content:"SocialBazar24";
  font-size:21px; font-weight:800; letter-spacing:.2px;
  color:var(--accent);
}
.navbar-brand:not(:has(.sb-logo))::after{ white-space:nowrap; }
/* keep the real SVG logo full-size when present */
.navbar-brand .sb-logo{ font-size:20px; }

/* Tidy: hide the empty trailing content well in the hero (whitespace-only) */
.sb-hero__form .well:last-child:not(:has(form)){ display:none; }


/* =========================================================
   Modern visual lift — fresh, vibrant, glassy
   Layered on top of the existing dark theme. Visual only.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Fresher, more vibrant accent ramp */
  --accent:#5b8cff;
  --accent-hover:#4a7bf5;
  --accent-2:#22d3ee;        /* cyan */
  --accent-3:#a855f7;        /* violet */
  --accent-warm:#ff8a3d;     /* warm orange (brand) */
  --accent-soft:rgba(91,140,255,.16);

  /* Slightly richer surfaces with more contrast/depth */
  --bg-base:#0b0f17;
  --bg-elevated:#141a24;
  --bg-elevated-2:#1b2230;
  --border:#28313f;
  --border-soft:#1f2733;

  --radius:16px;
  --radius-sm:10px;

  --grad-brand:linear-gradient(135deg,#5b8cff 0%,#22d3ee 100%);
  --grad-brand-warm:linear-gradient(135deg,#5b8cff 0%,#a855f7 55%,#ff8a3d 100%);
  --glow:0 0 0 1px rgba(91,140,255,.18), 0 18px 50px -12px rgba(91,140,255,.35);
}

body{
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(900px 500px at 85% -8%, rgba(91,140,255,.10), transparent 60%),
    radial-gradient(700px 480px at -5% 8%, rgba(168,85,247,.08), transparent 55%),
    var(--bg-base);
  letter-spacing:-.005em;
}
h1,h2,h3,h4,h5,h6{ letter-spacing:-.02em; }

/* ---------- Navbar: glassier, with subtle glow line ---------- */
.navbar{
  background:rgba(13,18,27,.72);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 30px -18px rgba(0,0,0,.8);
}
.navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,140,255,.5),rgba(34,211,238,.4),transparent);
  opacity:.6;
}
.navbar-nav>.active>a::after{ background:var(--grad-brand); height:3px; border-radius:3px; }

/* Brand logo: gradient text fill for the CSS fallback */
.navbar-brand:not(:has(.sb-logo))::after{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sb-logo__row{ color:var(--accent); }

/* ---------- Buttons: gradient primary + shine ---------- */
.btn{ border-radius:var(--radius-sm); letter-spacing:.01em; }
.btn-primary{
  background:var(--grad-brand); border:0;
  box-shadow:0 10px 24px -8px rgba(91,140,255,.55);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background:var(--grad-brand); filter:brightness(1.07);
  box-shadow:0 14px 30px -8px rgba(91,140,255,.65);
}
.btn-lg{ border-radius:14px; }
.btn-default{ background:rgba(255,255,255,.04); border:1px solid var(--border); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.btn-default:hover{ background:rgba(255,255,255,.08); border-color:rgba(91,140,255,.5); }

/* ---------- Cards / panels: glass + hover glow ---------- */
.panel,.well{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) , var(--bg-elevated);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -28px rgba(0,0,0,.9);
}

/* ---------- Inputs: softer, glowing focus ---------- */
.form-control{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
}
.form-control:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(91,140,255,.16);
  background:rgba(255,255,255,.05);
}

/* =========================================================
   LANDING — refreshed
   ========================================================= */
/* Fix login card being cut off on the right + give it presence */
.sb-hero__form{ max-width:440px; margin-left:auto; width:100%; }
/* Neutralize Bootstrap grid (container/row/col/offset) that the original form
   markup carries, so the login card fits its hero column cleanly */
.sb-hero__form .container,
.sb-hero__form .container-fluid{ width:100% !important; max-width:100% !important; padding:0 !important; margin:0 !important; }
.sb-hero__form .row{ margin:0 !important; }
.sb-hero__form [class*="col-"]{
  width:100% !important; max-width:100% !important;
  float:none !important; margin-left:0 !important; margin-right:0 !important;
  left:auto !important; right:auto !important; padding:0 !important;
}
.sb-hero__form .well{ width:100%; }
/* login-card-presence: premium glow + accent border for the login card */
.sb-hero__form .well{
  box-shadow:var(--glow) !important;
  border:1px solid rgba(91,140,255,.22) !important;
  background:linear-gradient(180deg, rgba(91,140,255,.07), rgba(255,255,255,0)), var(--bg-elevated) !important;
}

/* Hero: animated aurora background */
.sb-hero{
  position:relative; overflow:hidden;
  padding:72px 0 56px;
  background:transparent;
  border-bottom:1px solid var(--border-soft);
}
.sb-hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:140%;
  background:
    radial-gradient(600px 320px at 20% 20%, rgba(91,140,255,.22), transparent 60%),
    radial-gradient(520px 300px at 80% 10%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(480px 320px at 60% 90%, rgba(168,85,247,.16), transparent 60%);
  filter:blur(8px); opacity:.9; z-index:0;
  animation:sb-aurora 18s ease-in-out infinite alternate;
}
.sb-hero .container{ position:relative; z-index:1; }
@keyframes sb-aurora{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-3%,2%,0) scale(1.08); }
}
.sb-badge{
  background:rgba(91,140,255,.12); color:#bcd0ff;
  border:1px solid rgba(91,140,255,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -10px rgba(91,140,255,.6);
}
.sb-hero__title{ font-weight:800; letter-spacing:-.03em; }
.sb-grad{ background:var(--grad-brand-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-hero__stats strong{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }

/* Section titles with gradient accent */
.sb-section__title{ font-weight:800; }
.sb-section__title::after{
  content:""; display:block; width:54px; height:4px; margin:14px auto 0;
  background:var(--grad-brand); border-radius:4px;
}
.sb-section--alt{
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--bg-elevated);
}

/* Feature/service/faq cards: glass + lift + glow border on hover */
.sb-feature,.sb-service,.sb-faq{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--bg-elevated);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  box-shadow:0 20px 50px -34px rgba(0,0,0,.9);
}
.sb-feature:hover,.sb-service:hover{
  transform:translateY(-6px);
  border-color:rgba(91,140,255,.45);
  box-shadow:0 28px 60px -28px rgba(91,140,255,.4);
}
.sb-feature__icon{
  display:inline-flex; width:54px; height:54px; align-items:center; justify-content:center;
  border-radius:14px; font-size:26px;
  background:rgba(91,140,255,.12); border:1px solid rgba(91,140,255,.22);
}
.sb-service::before{ background:var(--grad-brand-warm); width:4px; }
.sb-service__tag{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Steps: gradient number with glow */
.sb-step__num{
  background:var(--grad-brand);
  box-shadow:0 12px 28px -8px rgba(91,140,255,.6);
}
.sb-step__num::after{
  content:""; position:absolute; /* connector handled below */
}

/* Final CTA: vivid gradient panel */
.sb-cta-final{
  position:relative; overflow:hidden;
  background:
    radial-gradient(500px 200px at 20% 0%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(135deg, rgba(91,140,255,.22), rgba(168,85,247,.14) 60%, rgba(255,138,61,.12));
  border:1px solid rgba(91,140,255,.32);
  box-shadow:0 30px 60px -30px rgba(91,140,255,.5);
}
.sb-cta-final h2{ font-weight:800; }

/* ---------- Entrance animations ---------- */
@keyframes sb-rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
.sb-hero__copy>*{ animation:sb-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.sb-hero__copy>*:nth-child(1){ animation-delay:.02s; }
.sb-hero__copy>*:nth-child(2){ animation-delay:.08s; }
.sb-hero__copy>*:nth-child(3){ animation-delay:.14s; }
.sb-hero__copy>*:nth-child(4){ animation-delay:.20s; }
.sb-hero__copy>*:nth-child(5){ animation-delay:.26s; }
.sb-hero__form{ animation:sb-rise .7s cubic-bezier(.2,.7,.2,1) both .18s; }
.sb-feature,.sb-service,.sb-step,.sb-faq{ animation:sb-rise .6s cubic-bezier(.2,.7,.2,1) both; }

/* Smooth anchor scrolling for CTA links */
html{ scroll-behavior:smooth; }

/* Custom scrollbar accent */
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#3a4658,#2b3340); background-clip:content-box; }

/* ---------- Responsive tweaks for the lift ---------- */
@media (max-width:991px){
  .sb-hero__form{ margin:0; max-width:none; }
}
@media (max-width:767px){
  .sb-hero{ padding:44px 0 32px; }
  .sb-hero::before{ filter:blur(14px); }
  .sb-feature__icon{ width:46px; height:46px; font-size:22px; }
}
@media (prefers-reduced-motion:reduce){
  .sb-hero::before, .sb-hero__copy>*, .sb-hero__form,
  .sb-feature,.sb-service,.sb-step,.sb-faq{ animation:none !important; }
  html{ scroll-behavior:auto; }
}


/* =========================================================
   Blue-Orange theme override (primary brand direction)
   Recolors accent tokens + gradients to blue/orange.
   Placed last so it wins the cascade.
   ========================================================= */
:root{
  --accent:#2f7bff;          /* brand blue */
  --accent-hover:#1f6af0;
  --accent-2:#ff8a3d;        /* brand orange */
  --accent-3:#ffb169;        /* light orange */
  --accent-warm:#ff7a18;     /* deep orange */
  --accent-soft:rgba(47,123,255,.16);

  --grad-brand:linear-gradient(135deg,#2f7bff 0%,#ff8a3d 100%);
  --grad-brand-warm:linear-gradient(135deg,#2f7bff 0%,#5b9bff 35%,#ff8a3d 100%);
  --grad-orange:linear-gradient(135deg,#ff7a18 0%,#ffb169 100%);
  --glow:0 0 0 1px rgba(47,123,255,.20), 0 18px 50px -12px rgba(47,123,255,.35);
}

body{
  background:
    radial-gradient(900px 500px at 85% -8%, rgba(47,123,255,.12), transparent 60%),
    radial-gradient(700px 480px at -5% 8%, rgba(255,138,61,.09), transparent 55%),
    var(--bg-base);
}

/* Links & active states back to blue */
a{ color:var(--accent); }
a:hover{ color:var(--accent-hover); }
.navbar-nav>.active>a::after{ background:var(--grad-brand); }
.navbar::after{ background:linear-gradient(90deg,transparent,rgba(47,123,255,.55),rgba(255,138,61,.5),transparent); }

/* Brand logo gradient (blue->orange) */
.navbar-brand:not(:has(.sb-logo))::after{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-logo__row{ color:var(--accent); }
.sb-logo__heart, .sb-logo__24, .sb-logo__arrow{ color:var(--accent-warm); }

/* Hero aurora -> blue/orange */
.sb-hero::before{
  background:
    radial-gradient(600px 320px at 20% 20%, rgba(47,123,255,.24), transparent 60%),
    radial-gradient(520px 300px at 80% 10%, rgba(255,138,61,.18), transparent 60%),
    radial-gradient(480px 320px at 60% 90%, rgba(47,123,255,.16), transparent 60%);
}

/* Gradients that were violet/cyan -> blue/orange everywhere they appear */
.sb-grad{ background:var(--grad-brand-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-hero__stats strong{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-section__title::after{ background:var(--grad-brand); }
.sb-service::before{ background:var(--grad-orange); }
.sb-service__tag{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-step__num{ background:var(--grad-brand); box-shadow:0 12px 28px -8px rgba(47,123,255,.6); }
.btn-primary{ background:var(--grad-brand); box-shadow:0 10px 24px -8px rgba(47,123,255,.55); }
.btn-primary:hover{ box-shadow:0 14px 30px -8px rgba(255,138,61,.55); }

.sb-cta-final{
  background:
    radial-gradient(500px 200px at 20% 0%, rgba(255,138,61,.18), transparent 60%),
    linear-gradient(135deg, rgba(47,123,255,.22), rgba(255,138,61,.16));
  border:1px solid rgba(47,123,255,.32);
  box-shadow:0 30px 60px -30px rgba(47,123,255,.5);
}
.sb-feature__icon{ background:rgba(47,123,255,.14); border-color:rgba(47,123,255,.28); }
.sb-feature:hover,.sb-service:hover{ border-color:rgba(255,138,61,.45); box-shadow:0 28px 60px -28px rgba(255,138,61,.35); }
.sb-badge{ background:rgba(47,123,255,.12); color:#bcd2ff; border-color:rgba(47,123,255,.3); }
.form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(47,123,255,.16); }

/* =========================================================
   Decorative graphics + extra animations
   ========================================================= */
/* Floating decorative blobs in the hero */
.sb-hero{ }
.sb-hero__deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sb-blob{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.5; mix-blend-mode:screen; }
.sb-blob--1{ width:230px; height:230px; top:8%; right:14%; background:radial-gradient(circle at 30% 30%, #2f7bff, transparent 70%); animation:sb-float1 12s ease-in-out infinite; }
.sb-blob--2{ width:170px; height:170px; bottom:6%; left:8%; background:radial-gradient(circle at 30% 30%, #ff8a3d, transparent 70%); animation:sb-float2 15s ease-in-out infinite; }
.sb-blob--3{ width:120px; height:120px; top:42%; left:42%; background:radial-gradient(circle at 30% 30%, #5b9bff, transparent 70%); animation:sb-float1 10s ease-in-out infinite reverse; }
@keyframes sb-float1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(20px,-26px); } }
@keyframes sb-float2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-24px,18px); } }

/* Decorative SVG dot-grid pattern behind services section */
.sb-section--alt{ position:relative; overflow:hidden; }
.sb-section--alt::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(47,123,255,.10) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.sb-section--alt .container{ position:relative; z-index:1; }

/* Platform icon chip inside service cards (decorative SVG via background) */
.sb-service{ position:relative; }
.sb-service__icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; background:rgba(47,123,255,.12); border:1px solid rgba(47,123,255,.22);
}
.sb-service__icon svg{ width:24px; height:24px; }

/* Animated gradient ring on the final CTA button */
.sb-cta-final .btn-primary{ position:relative; }

/* Shine sweep on primary buttons */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-primary:hover::after{ left:140%; }

/* Count-up style emphasis pulse on hero stats */
.sb-hero__stats li{ position:relative; }
.sb-hero__stats strong{ display:inline-block; animation:sb-pop .6s cubic-bezier(.2,1.4,.4,1) both; }
.sb-hero__stats li:nth-child(1) strong{ animation-delay:.35s; }
.sb-hero__stats li:nth-child(2) strong{ animation-delay:.45s; }
.sb-hero__stats li:nth-child(3) strong{ animation-delay:.55s; }
@keyframes sb-pop{ from{ opacity:0; transform:scale(.6);} to{ opacity:1; transform:scale(1);} }

/* Feature icons gentle bob on hover */
.sb-feature:hover .sb-feature__icon{ animation:sb-bob .8s ease; }
@keyframes sb-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

@media (prefers-reduced-motion:reduce){
  .sb-blob, .sb-hero__stats strong, .btn-primary::after{ animation:none !important; transition:none !important; }
}


/* =========================================================
   Google Translate widget styling + banner neutralization
   ========================================================= */
/* Kill Google's top banner that shifts the page down */
.goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame{ display:none !important; }
.skiptranslate iframe{ visibility:hidden !important; }
body{ top:0 !important; position:static !important; }
#goog-gt-tt, .goog-te-balloon-frame{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

/* Our floating language switcher */
.sb-translate{
  position:fixed; right:18px; bottom:88px; z-index:1090;
  display:flex; align-items:center; gap:8px;
  background:rgba(20,26,36,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(47,123,255,.3); border-radius:999px;
  padding:8px 14px; box-shadow:0 12px 30px -12px rgba(0,0,0,.7);
}
.sb-translate__icon{ font-size:16px; line-height:1; }
/* Tidy the default Google dropdown look */
.sb-translate .goog-te-gadget{ color:transparent !important; font-size:0 !important; }
.sb-translate .goog-te-gadget .goog-te-combo{
  margin:0 !important; background:transparent; color:var(--text);
  border:0; font-size:13px; font-weight:600; cursor:pointer; outline:none;
}
.sb-translate .goog-te-gadget .goog-te-combo option{ color:#111; }
.sb-translate img{ display:none !important; }
.sb-translate span{ color:var(--text-muted); }

@media (max-width:767px){
  .sb-translate{ right:12px; bottom:80px; padding:7px 12px; }
}


/* =========================================================
   WOW layer: Floating social icons + intro animation
   ========================================================= */

/* --- Soft brand glows (depth) --- */
.sb-glow{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; }
.sb-glow--blue{ width:420px; height:420px; top:-80px; right:6%; background:radial-gradient(circle, rgba(47,123,255,.55), transparent 70%); animation:sb-drift 16s ease-in-out infinite alternate; }
.sb-glow--orange{ width:340px; height:340px; bottom:-90px; left:2%; background:radial-gradient(circle, rgba(255,138,61,.45), transparent 70%); animation:sb-drift 20s ease-in-out infinite alternate-reverse; }
@keyframes sb-drift{ 0%{ transform:translate(0,0);} 100%{ transform:translate(40px,-30px);} }

/* --- Floating social-media icons --- */
.sb-float-icons{ position:absolute; inset:0; pointer-events:none; }
.sb-fi{
  position:absolute; display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:16px; color:#cfe0ff;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px -14px rgba(47,123,255,.55), inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0;
  animation:sb-fi-in .7s cubic-bezier(.2,1,.3,1) forwards, sb-fi-float 9s ease-in-out infinite;
}
.sb-fi svg{ width:28px; height:28px; }

/* Distinct sizes, positions, colors, timings for organic feel */
.sb-fi--1{ top:10%;  left:46%;  color:#ff9a5a; width:64px; height:64px; animation-delay:.20s, .9s;  animation-duration:.7s, 8s; }
.sb-fi--2{ top:20%;  left:30%;  color:#ff7a18; width:46px; height:46px; animation-delay:.32s, 1.2s; animation-duration:.7s, 11s; }
.sb-fi--3{ top:62%;  left:24%;  color:#7ab0ff; width:56px; height:56px; animation-delay:.40s, .4s;  animation-duration:.7s, 10s; }
.sb-fi--4{ top:74%;  left:40%;  color:#ff9a5a; width:50px; height:50px; animation-delay:.50s, 1.6s; animation-duration:.7s, 9s; }
.sb-fi--5{ top:14%;  left:62%;  color:#7ab0ff; width:60px; height:60px; animation-delay:.28s, .7s;  animation-duration:.7s, 12s; }
.sb-fi--6{ top:54%;  left:60%;  color:#ffb169; width:48px; height:48px; animation-delay:.58s, 1.1s; animation-duration:.7s, 8.5s; }
.sb-fi--7{ top:40%;  left:14%;  color:#9cc0ff; width:52px; height:52px; animation-delay:.46s, .5s;  animation-duration:.7s, 10.5s; }
.sb-fi--8{ top:80%;  left:66%;  color:#ff8a3d; width:54px; height:54px; animation-delay:.62s, 1.4s; animation-duration:.7s, 9.5s; }

@keyframes sb-fi-in{ from{ opacity:0; transform:translateY(24px) scale(.6) rotate(-8deg);} to{ opacity:.9; transform:translateY(0) scale(1) rotate(0);} }
@keyframes sb-fi-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-18px) rotate(4deg); }
}
.sb-fi:hover{ } /* pointer-events none, decorative only */

/* Hide floating icons on small screens to avoid clutter, keep glows */
@media (max-width:991px){ .sb-fi--7,.sb-fi--8{ display:none; } }
/* Mobile: keep floating icons as ambient decoration, repositioned to corners/edges so they sit behind content */
@media (max-width:767px){
  .sb-float-icons{ display:block; opacity:.55; }
  .sb-fi{ width:42px !important; height:42px !important; border-radius:13px; }
  .sb-fi svg{ width:21px; height:21px; }
  .sb-fi--7,.sb-fi--8{ display:none; }
  .sb-fi--1{ top:3%;   left:6%;  }
  .sb-fi--2{ top:5%;   left:78%; }
  .sb-fi--3{ top:30%;  left:4%;  }
  .sb-fi--4{ top:32%;  left:82%; }
  .sb-fi--5{ bottom:6%; top:auto; left:8%;  }
  .sb-fi--6{ bottom:4%; top:auto; left:80%; }
}
@media (max-width:480px){
  .sb-float-icons{ opacity:.45; }
  .sb-fi{ width:36px !important; height:36px !important; }
  .sb-fi svg{ width:18px; height:18px; }
}

/* =========================================================
   Intro / preloader overlay
   ========================================================= */
.sb-intro{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:
    radial-gradient(700px 400px at 50% 35%, rgba(47,123,255,.18), transparent 60%),
    #0b0f17;
  animation:sb-intro-out .7s ease forwards;
  animation-delay:1.8s;
}
.sb-intro__logo{
  display:flex; flex-direction:column; line-height:.92; font-weight:800;
  transform:translateY(6px); animation:sb-intro-pop .7s cubic-bezier(.2,1.4,.3,1) both .1s;
}
.sb-intro__row{ display:inline-flex; align-items:center; font-size:46px;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-intro__row--b{ font-size:50px; margin-top:2px; }
.sb-intro__heart{ display:inline-flex; width:.72em; height:.72em; margin:0 2px; color:#ff7a18; }
.sb-intro__heart svg{ width:100%; height:100%; }
.sb-intro__24{ color:#ff7a18; margin-left:4px; -webkit-text-fill-color:#ff7a18; }
.sb-intro__bar{ width:180px; height:5px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; }
.sb-intro__bar span{ display:block; height:100%; width:0; border-radius:999px;
  background:var(--grad-brand); animation:sb-intro-load 1.7s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sb-intro-load{ from{ width:0; } to{ width:100%; } }
@keyframes sb-intro-pop{ from{ opacity:0; transform:translateY(20px) scale(.9);} to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes sb-intro-out{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* Don't keep the overlay occupying space after it fades (it's fixed, so fine),
   but ensure it never blocks clicks after animation */
.sb-intro{ pointer-events:none; }

/* Reduced motion: no intro, no floating */
@media (prefers-reduced-motion:reduce){
  .sb-intro{ display:none !important; }
  .sb-fi{ animation:none !important; opacity:.85 !important; }
  .sb-glow{ animation:none !important; }
}


/* === Global floating social-media icons (all pages, behind content) === */
.sb-global-icons{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
body > .container, body > .container-fluid, .navbar, .sb-hero, main, .content, footer{ position:relative; z-index:1; }
.sb-gi{
  position:fixed; display:inline-flex; align-items:center; justify-content:center;
  border-radius:16px; color:#cfe0ff;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 34px -16px rgba(47,123,255,.50), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0;
  animation:sb-fi-in .7s cubic-bezier(.2,1,.3,1) forwards, sb-fi-float 9s ease-in-out infinite;
}
.sb-gi svg{ width:54%; height:54%; }
/* settle the entrance to a calm resting opacity so they stay visible while scrolling */
.sb-global-icons .sb-gi{ }
/* On the landing hero the local hero icons already shine, so soften the global layer there */
body:has(.sb-hero) .sb-global-icons{ opacity:.7; }
@media (max-width:991px){
  .sb-gi{ transform:scale(.85); }
}
@media (max-width:767px){
  .sb-global-icons{ opacity:.5; }
  .sb-gi{ transform:scale(.7); }
  .sb-gi:nth-child(2n){ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .sb-gi{ animation:none !important; opacity:.6 !important; }
}


/* === Floating brand wordmark badges (S + heart + cialBazar24) === */
.sb-gi-logo{
  width:auto !important; height:auto !important;
  padding:9px 16px; border-radius:var(--radius-pill, 999px);
  background:linear-gradient(180deg, rgba(79,140,255,.16), rgba(255,122,24,.10)), rgba(12,18,32,.6);
  border:1px solid rgba(120,170,255,.3);
  box-shadow:0 18px 44px -16px rgba(79,140,255,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.sb-gi-logo .sb-gi-logo__mark{
  display:inline-flex; align-items:center; line-height:.9;
  font-weight:800; letter-spacing:.2px; white-space:nowrap; user-select:none;
  font-size:1.05rem;
}
.sb-gi-logo__s{ color:var(--accent); }
.sb-gi-logo__txt{ color:var(--accent); }
.sb-gi-logo__heart{
  display:inline-flex; width:.74em; height:.74em; margin:0 1px;
  color:#ff7a18; transform:translateY(1px);
}
.sb-gi-logo__heart svg{ width:100%; height:100%; }
.sb-gi-logo__24{ color:#ff7a18; margin-left:0; font-weight:800; }
/* per-badge scale via inline width hint */
.sb-gi-logo[style*='64px'] .sb-gi-logo__mark{ font-size:1.15rem; }
.sb-gi-logo[style*='52px'] .sb-gi-logo__mark{ font-size:.95rem; }
@media (max-width:991px){
  .sb-gi-logo .sb-gi-logo__mark{ font-size:.95rem; }
  .sb-gi-logo{ padding:7px 13px; }
}
@media (max-width:767px){
  .sb-gi-logo .sb-gi-logo__mark{ font-size:.85rem !important; }
  .sb-gi-logo{ padding:6px 11px; }
}