/*
Theme Name: BetterSEO Theme
Theme URI: https://betterseo.bg/
Author: BetterSEO
Author URI: https://betterseo.bg/
Description: Coalition-inspired service landing theme for BetterSEO.
Version: 1.3.1
Requires at least: 6.1
Tested up to: 6.1
Text Domain: betterseo
*/

:root {
  /* === COLOR (60-30-10) === */
  /* 60% dominant - white/cream surfaces */
  --bs-white: #ffffff;
  --bs-cream: #f3f6f9;
  /* 30% secondary - blue tones */
  --bs-blue: #07a4f3;
  --bs-blue-2: #00a6fa;
  --bs-light: #e1ecf2;
  --bs-ice: #f4f9fc;
  --bs-dark: #0c1f31;
  --bs-dark-2: #081522;
  /* 10% accent - lime, only on buttons and key actions */
  --bs-lime: #cdff16;
  /* Text */
  --bs-text: #0c1f31;
  --bs-body: #2c4051;
  --bs-muted: #667888;
  --bs-border: #c9dbe6;

  /* === MODULAR TYPE SCALE === */
  /* Unbounded is chunky - sizes tuned smaller to feel balanced */
  --bs-fs-caption: 13px;
  --bs-fs-body: 17px;
  --bs-fs-heading: clamp(24px, 2.6vw, 36px);
  --bs-fs-display: clamp(32px, 3.6vw, 52px);

  /* === 8PT SPACING SCALE === */
  --bs-xs: 8px;
  --bs-sm: 16px;
  --bs-md: 24px;
  --bs-lg: 32px;
  --bs-xl: 48px;
  --bs-2xl: 72px;
  --bs-3xl: 96px;

  /* === RADII === */
  --bs-radius: 8px;
  --bs-radius-lg: 16px;
  --bs-radius-pill: 999px;

  /* === SHADOWS === */
  --bs-shadow: 0 18px 55px rgba(0, 47, 82, .17);
  --bs-shadow-sm: 0 4px 12px rgba(0, 47, 82, .08);
  --bs-shadow-md: 0 12px 32px rgba(0, 47, 82, .12);
  --bs-shadow-lg: 0 32px 80px rgba(0, 47, 82, .22);
  --bs-shadow-glow: 0 0 0 4px rgba(7, 164, 243, .12);
  --bs-shadow-glass: 0 8px 32px rgba(7, 164, 243, .15);

  /* === EASING === */
  --bs-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --bs-ease-out: cubic-bezier(.16, .84, .32, 1);
  --bs-ease-bounce: cubic-bezier(.68, -.55, .27, 1.55);

  /* === FONTS === */
  --bs-font-display: "Unbounded", var(--bs-font-body);
  --bs-font-body: "Montserrat", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* === LAYOUT === */
  --bs-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--bs-body);
  background: var(--bs-white);
  font-family: var(--bs-font-body);
  font-size: var(--bs-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
small, .bs-caption { font-size: var(--bs-fs-caption); }
/* Body/UI text uses Montserrat. Unbounded is reserved for headings. */
h1 { font-family: var(--bs-font-display); letter-spacing: 0; font-weight: 700; font-size: 34px !important; line-height: 1.5 !important; }
h2 { font-family: var(--bs-font-display); letter-spacing: 0; font-weight: 700; font-size: 26px !important; }
h3, h4, h5, h6 { font-family: var(--bs-font-display); letter-spacing: 0; font-weight: 700; }
.bs-eyebrow, .bs-kicker, .bs-button, .bs-header-cta, .bs-nav { font-family: var(--bs-font-body); letter-spacing: 0; font-weight: 700; }
.bs-hero h1 { font-family: var(--bs-font-display); letter-spacing: 0; }

a { color: var(--bs-blue); text-decoration: none; }
a:hover { color: #004f80; }
img { max-width: 100%; height: auto; display: block; }

.bs-container { max-width: var(--bs-max); margin: 0 auto; padding: 0 22px; }

.bs-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--bs-border);
  box-shadow: 0 8px 24px rgba(7, 23, 37, .06);
}
/* === TOPBAR (Coalition-style top_banner) ===
   Reference: coalitiontechnologies.com - dark navy bg #0c3d5d, white body text,
   lime accent #cdff16 for primary/CTA links. Slim 38px row with subtle hairline. */
.bs-topbar { background: #07a4f3; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em; border-bottom: 1px solid rgba(255,255,255,.08); }
/* 3-zone topbar grid: ⬅ left | ⬇ center | ➡ right (each zone independent) */
.bs-topbar-inner,
.bs-topbar-inner--3zone {
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
.bs-topbar-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bs-topbar-zone--left   { justify-content: flex-start; }
.bs-topbar-zone--center { justify-content: center; }
.bs-topbar-zone--right  { justify-content: flex-end; }
.bs-topbar-spacer { display: block; }
/* Legacy aliases (back-compat) */
.bs-topbar-center {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.bs-topbar-login {
  display: inline-flex; align-items: center; gap: 6px;
}
/* v1.27.3: removed translateX hover - all 3 topbar links now have same plain
   color-only hover (matches the others). */

.bs-topbar-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff;
  transition: color .2s ease, opacity .15s;
  text-decoration: none;
}
.bs-topbar-link:hover { color: var(--bs-lime); }
.bs-topbar-text { cursor: default; }
.bs-topbar-text:hover { color: inherit; }
.bs-topbar-link--primary { font-weight: 700; }
.bs-topbar-link--cta { font-weight: 800; }

/* Topbar icon - uses CSS mask-image so we can recolor on :hover.
   The icon URL is set inline via `--bs-topbar-icon-url` (header.php). */
.bs-topbar-icon {
  width: 16px; height: 16px;
  display: inline-block;
  flex-shrink: 0;
  background-color: #fff;                 /* white by default */
  -webkit-mask-image: var(--bs-topbar-icon-url);
          mask-image: var(--bs-topbar-icon-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background-color .2s ease;
}
.bs-topbar-link:hover .bs-topbar-icon { background-color: var(--bs-lime); }

@media (max-width: 720px) {
  .bs-topbar-inner--3zone { grid-template-columns: 1fr; gap: 6px; padding: 8px 0; }
  .bs-topbar-zone { justify-content: center; }
}

.bs-header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.bs-logo {
  display: inline-flex;
  align-items: center;
  padding: 16px 0;                /* breathing room top/bottom (15-20px) */
  color: var(--bs-text);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0;
  white-space: nowrap;
}
.bs-logo:hover { color: var(--bs-text); }
.bs-logo-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--bs-blue); color: var(--bs-lime); border-radius: 7px; font-weight: 900; }
.bs-logo-img {
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 60px;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;   /* visible SVG content hugs the left edge */
}
/* Inline-SVG logo (rendered directly into the page). The <svg class="bs-logo-svg">
   is injected by header.php / footer.php from /wp-content/uploads/logo.svg. */
.bs-logo-svg {
  display: block;
  width: 100%;
  max-width: 215px;
  height: auto;
  max-height: 60px;
}
.bs-logo--footer { padding: 0; }
.bs-logo--footer .bs-logo-svg { max-width: 215px; }
/* On the dark footer, swap the dark "Better" wordmark to white so it stays
   legible against the navy background. */
.bs-logo--footer .bs-logo-svg text:first-of-type { fill: #ffffff; }
.bs-nav { display: flex; align-items: center; gap: 20px; font-family: var(--bs-font-body); font-size: 15px; font-weight: 700; }
.bs-nav ul { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.bs-nav a { color: var(--bs-text); }
.bs-nav a:hover,
.bs-nav a.is-active { color: var(--bs-blue); }
/* JS clones the header CTA into the nav for the mobile overlay's bottom button.
   On desktop that clone must stay invisible - otherwise it shows as another
   text link next to the regular menu items. (Mobile media query re-shows it
   styled as a button.) */
.bs-nav-cta { display: none; }
/* Top-level: current page (exact) and current section (parent of /uslugi/<slug>/) */
.bs-nav > a[aria-current="page"],
.bs-nav-item > a[aria-current="page"],
.bs-nav-item > a.is-section-active,
.bs-nav > a.is-section-active { color: var(--bs-blue); }
.bs-nav-item { position: relative; min-height: 76px; display: flex; align-items: center; }
.bs-mega {
  position: fixed;
  top: 76px;
  left: 50%;
  /* Same width as the page container's content area: var(--bs-max) - 2*22px
     padding. Aligns the mega panel with the .bs-container grid below it,
     so left/right edges line up with section content (cards, headings). */
  width: min(calc(var(--bs-max) - 44px), calc(100vw - 44px));
  /* Cap height to the viewport so long link lists scroll inside the panel
     instead of running off-screen on short monitors. 96px = top offset +
     a small breathing buffer below the panel. */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain; /* don't propagate scroll to the page body */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--bs-border);
  border-top: 3px solid var(--bs-blue);
  border-radius: var(--bs-radius);
  box-shadow: 0 18px 44px rgba(0, 47, 82, .14);
  transform: translate(-50%, 12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--bs-ease-out), transform .25s var(--bs-ease-out), visibility .25s ease;
  /* Slim, branded scrollbar (Webkit + Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 106, 172, .35) transparent;
}
.bs-mega::-webkit-scrollbar { width: 8px; }
.bs-mega::-webkit-scrollbar-track { background: transparent; }
.bs-mega::-webkit-scrollbar-thumb {
  background: rgba(0, 106, 172, .35);
  border-radius: 4px;
}
.bs-mega::-webkit-scrollbar-thumb:hover { background: rgba(0, 106, 172, .55); }
.bs-mega--small { width: min(640px, calc(100vw - 44px)); grid-template-columns: 1fr 1fr; }
.bs-mega::before {
  content: "";
  position: absolute;
  top: -22px;
  left: -20px;
  right: -20px;
  height: 22px;
  background: transparent;
}
/* Open via .is-open class (JS-controlled, with hover fallback) */
.bs-nav-item.is-open > .bs-mega,
.bs-nav-item:hover > .bs-mega,
.bs-nav-item:focus-within > .bs-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Blur на фона зад мега менюто, докато е отворено (hover/focus/open).
   Backdrop е fixed ::after на хедъра; стои зад хедъра и мега панела,
   но над съдържанието на страницата. Изисква CSS :has(). */
.bs-site-header::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 32, .18);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
  z-index: -1;
}
.bs-site-header:has(.bs-nav-item:hover > .bs-mega)::after,
.bs-site-header:has(.bs-nav-item:focus-within > .bs-mega)::after,
.bs-site-header:has(.bs-nav-item.is-open > .bs-mega)::after {
  opacity: 1;
  visibility: visible;
}
/* While a mega panel is open, drop the scrolled-header's own backdrop-filter -
   иначе хедърът става backdrop-root и blur-ът на ::after няма какво да блърне. */
.bs-site-header:has(.bs-nav-item:hover > .bs-mega),
.bs-site-header:has(.bs-nav-item:focus-within > .bs-mega),
.bs-site-header:has(.bs-nav-item.is-open > .bs-mega) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #fff !important;
}
.bs-mega strong {
  font-family: var(--bs-font-display);
  display: block;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bs-border);
  color: var(--bs-text);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* Sub-section header inside a mega column - used to stack two link lists
   (e.g. "SEO по бизнес" + "SEO по локация") visually separated. */
.bs-mega strong.bs-mega-col-sub {
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--bs-border);
  border-bottom: 0;
  padding-bottom: 0;
}
/* Compact link styling - soft pill-bg on hover, plain color on current page.
   white-space: nowrap + text-overflow keeps each link on a single line; long
   service titles get truncated with "..." rather than wrapping to a second
   row and breaking the column rhythm. Hover reveals the full title via the
   browser's native title attribute. */
.bs-mega a {
  display: block;
  position: relative;
  padding: 4px 10px;
  margin: 0 -10px;             /* offset so text aligns with parent left edge */
  border-radius: 6px;
  color: var(--bs-text);
  font-family: var(--bs-font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease, padding-left .2s ease;
}
/* Hover-arrow: a "›" prefix that slides in from the left, communicating
   "you'll go to that page". Hidden until hover. */
.bs-mega a::before {
  content: "›";
  position: absolute;
  left: 8px;                   /* sits inside the hover padding zone */
  top: 50%;
  width: 12px;
  text-align: center;
  transform: translateY(-50%) translateX(-6px);
  color: var(--bs-blue);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity .18s ease, transform .2s ease;
  pointer-events: none;
}
.bs-mega a:hover,
.bs-mega a:focus-visible {
  background: var(--bs-light, #eef4f7);
  color: var(--bs-blue);
  padding-left: 24px;          /* room for arrow + clean gap before text */
}
.bs-mega a:hover::before,
.bs-mega a:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* Active page link - brand blue + chevron always visible (not just
   on hover). Communicates "you are here" via color + indicator, NOT bold
   weight (felt too heavy in mega panel context). */
.bs-mega a.is-current,
.bs-mega a[aria-current="page"] {
  background: transparent;
  color: var(--bs-blue);
  font-weight: 500;
  padding-left: 24px;
}
.bs-mega a.is-current::before,
.bs-mega a[aria-current="page"]::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.bs-mega-feature {
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--bs-dark), var(--bs-blue));
  border-radius: 8px;
  color: #fff;
}
.bs-mega-feature span { display: block; margin-bottom: 6px; color: var(--bs-lime); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.bs-mega-feature p { margin: 0; color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.5; }
/* 1 казус карта (image отгоре, пълно заглавие отдолу).
   Override-ва глобалното `.bs-mega a` (текст-линк стил) с висока специфичност. */
.bs-mega .bs-mega-feature-case {
  display: block;
  margin: 14px 0 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.2);
  color: #fff;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bs-mega .bs-mega-feature-case::before { content: none; }   /* убива „›" стрелката */
.bs-mega .bs-mega-feature-case:hover,
.bs-mega .bs-mega-feature-case:focus-visible {
  background: rgba(0,0,0,.2);
  color: #fff;
  padding: 0;                                /* без padding-shift */
  border-color: var(--bs-lime, #cdff16);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.bs-mega-feature .bs-mega-feature-case .bs-mega-feature-case-media {
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,.25);
  line-height: 0;
}
.bs-mega-feature .bs-mega-feature-case .bs-mega-feature-case-media img {
  display: block;
  width: 100%;
  /* Fixed thumb height keeps col 4 close to col 1's natural size without
     clipping the title text below. cover-crop preserves focal area. */
  height: 90px;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}
.bs-mega-feature .bs-mega-feature-case .bs-mega-feature-case-title {
  display: block;
  margin: 0;
  padding: 9px 12px 11px;
  color: rgba(255, 255, 255, .85) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}

/* Growth chart - барове растящи от bottom 0 нагоре, ЕДНОКРАТНО, остават горе.
   Запълва наличното пространство под казуса. */
.bs-mega-growth {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
}
.bs-mega-growth-caption {
  margin-top: 10px;
  color: rgba(255,255,255,.8);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .01em;
}
.bs-mega-growth-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  width: 100%;
  /* Compact growth chart - leaves vertical room for the case-study image
     to flex-grow into. Kept fixed so the bar animation stays predictable. */
  height: 90px;
}
.bs-mega-growth-bar {
  position: relative;
  flex: 1;
  height: 0;                          /* анимира се до var(--bs-bar-h) */
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--bs-lime, #cdff16), rgba(205,255,22,.45));
  overflow: hidden;
  animation: bsMegaGrow .7s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--bs-bar-i, 0) * .14s);
}
/* Месечен етикет ВЪТРЕ в бара, долу, хоризонтално, малки букви */
.bs-mega-growth-tick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  color: rgba(0,0,0,.7);
  font-size: 6px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 1;
}
.bs-mega-growth-label {
  align-self: flex-end;
  color: var(--bs-lime, #cdff16);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
@keyframes bsMegaGrow {
  from { height: 0;                 opacity: .4; }
  to   { height: var(--bs-bar-h, 50%); opacity: 1; }
}
/* Replay клас - JS го маха/добавя при отваряне на менюто за re-trigger */
.bs-mega-growth.is-replay .bs-mega-growth-bar { animation: none; height: 0; }
@media (prefers-reduced-motion: reduce) {
  .bs-mega-growth-bar { animation: none; height: var(--bs-bar-h, 50%); }
}

.bs-header-cta,
.bs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid var(--bs-blue);
  background: var(--bs-blue);
  color: #fff;
  border-radius: 4px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  box-shadow: none;
}
.bs-header-cta:hover, .bs-button:hover { background: #068bc1; border-color: #068bc1; color: #fff; }
.bs-button--accent { border-color: var(--bs-lime); background: var(--bs-lime); color: var(--bs-text); }
.bs-button--accent:hover { border-color: #b8ed0f; background: #b8ed0f; color: var(--bs-text); }
.bs-button--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.bs-button--ghost-dark:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.bs-button--ghost { background: #fff; color: var(--bs-blue); }

.bs-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 130px;
  background: linear-gradient(160deg, #060d18 0%, #0a1626 55%, #081320 100%);
  color: #fff;
}
.bs-hero:not(.bs-hero--compact) { min-height: clamp(560px, 78vh, 760px); }
/* Mesh grid texture (faded toward edges), slow drift */
.bs-hero::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: 0;
  background-image:
    linear-gradient(rgba(7,164,243,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,164,243,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 60% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 62% at 60% 45%, #000 35%, transparent 100%);
  animation: bs-hero-mesh 34s linear infinite;
  pointer-events: none;
}
@keyframes bs-hero-mesh {
  from { transform: translate(0, 0); }
  to   { transform: translate(64px, 64px); }
}
.bs-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 58px; align-items: center; }
.bs-hero-copy { max-width: 720px; }
.bs-eyebrow, .bs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: var(--bs-blue);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* Eyebrow/kicker dot removed by request - no ::before marker anywhere.
   Kept the selector neutralised so later color overrides have nothing
   to render. */
.bs-eyebrow::before, .bs-kicker::before {
  content: none;
}
.bs-kicker { color: var(--bs-blue); }
.bs-hero h1 {
  max-width: 720px;
  margin: 0 0 var(--bs-md);
  color: #fff;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: 0;
  font-family: var(--bs-font-display);
}
.bs-hero p { max-width: 720px; margin: 0 0 28px; color: rgba(255,255,255,.88); font-size: 19px; line-height: 1.72; }
.bs-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 34px; }
.bs-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 720px; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.bs-hero-stat { padding: 22px 18px 20px 0; }
.bs-hero-stat strong { display: block; color: var(--bs-lime); font-size: 38px; line-height: 1; font-weight: 900; }
.bs-hero-stat span { display: block; margin-top: 8px; color: rgba(255,255,255,.76); font-size: 13px; font-weight: 800; line-height: 1.35; }
.bs-hero-aside { justify-self: stretch; }

.bs-form-card {
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 32px;
  box-shadow: var(--bs-shadow);
}
.bs-form-card--hero { padding: 36px 34px; }
.bs-form-card h2 { margin: 0 0 8px; color: var(--bs-text); font-size: 22px; line-height: 1.22; font-weight: 900; }
.bs-form-card p { margin: 0 0 20px; color: var(--bs-muted); font-size: 15px; }
.bs-field { margin-bottom: 12px; }
.bs-field input, .bs-field textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--bs-border);
  border-radius: 7px;
  padding: 12px 14px;
  color: var(--bs-text);
  font: inherit;
  background: #fff;
}
.bs-field textarea { min-height: 108px; resize: vertical; }

.bs-trust-strip { position: relative; z-index: 2; margin-top: -52px; padding: 0 0 36px; }
.bs-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 47, 82, .13);
}
.bs-trust-grid div { min-height: 104px; padding: 24px 26px; border-right: 1px solid var(--bs-border); }
.bs-trust-grid div:last-child { border-right: 0; }
.bs-trust-grid strong { display: block; color: var(--bs-blue); font-size: 28px; line-height: 1; font-weight: 900; }
.bs-trust-grid span { display: block; margin-top: 8px; color: var(--bs-muted); font-size: 13px; font-weight: 800; line-height: 1.35; }

.bs-media-rail { padding: 18px 0 34px; background: #fff; }
.bs-media-grid { display: grid; grid-template-columns: 1.1fr 1.1fr .8fr; gap: 22px; }
.bs-media-card,
.bs-shot {
  position: relative;
  min-height: 188px;
  overflow: hidden;
  border: 1px dashed #9bb9c9;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7,164,243,.1), rgba(225,236,242,.72)),
    repeating-linear-gradient(45deg, rgba(7,164,243,.08) 0 10px, transparent 10px 20px);
}
.bs-media-card { padding: 28px; display: grid; align-content: end; }
.bs-media-card::before,
.bs-shot::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(7,164,243,.18);
  border-radius: 6px;
}
.bs-media-card--video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bs-lime);
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
}
.bs-media-card span,
.bs-shot span { position: relative; z-index: 1; color: var(--bs-blue); font-family: var(--bs-font-body); font-size: 12px; font-weight: 900; letter-spacing: .05em; }
.bs-media-card strong { position: relative; z-index: 1; margin-top: 8px; color: var(--bs-text); font-family: var(--bs-font-body); font-size: 22px; line-height: 1.15; }
.bs-media-card small { position: relative; z-index: 1; color: var(--bs-muted); font-weight: 800; }

.bs-section { padding: 86px 0; background: #fff; }
.bs-section--cream {
  background:
    linear-gradient(180deg, transparent, rgba(7, 164, 243, .025)),
    var(--bs-cream);
}
.bs-section--light {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 166, 250, .08), transparent 60%),
    var(--bs-light);
}
.bs-section--blue { background: linear-gradient(135deg, var(--bs-dark), var(--bs-blue)); color: #fff; }
.bs-section--blue h2 { color: #fff; }.bs-section--blue h3 { color: #fff; }
.bs-section--blue p { color: rgba(255,255,255,.86); }
.bs-section--narrative { padding-top: 58px; }
.bs-section--dark { background: var(--bs-dark); color: #dce8f0; }
.bs-section--dark h2, .bs-section--dark h3 { color: #fff; }
.bs-section-head { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.bs-section-head h2, .bs-copy-block h2 { margin: 0 0 16px; color: var(--bs-text); font-size: clamp(32px, 4vw, 52px); line-height: 1.08; font-weight: 900; letter-spacing: 0; }
.bs-section-head h2, .bs-copy-block h2, .bs-service-card h3, .bs-form-card h2 { font-family: var(--bs-font-display); }
.bs-section-head p, .bs-copy-block p { margin: 0; color: var(--bs-body); font-size: 18px; }
.bs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: 58px; align-items: center; }
.bs-split--top { align-items: start; }
.bs-copy-block { max-width: 680px; }
.bs-check-list { margin: 26px 0 0; padding: 0; list-style: none; text-align: left; }
.bs-check-list li { position: relative; margin: 0 0 13px; padding-left: 20px; color: var(--bs-body); font-weight: 700; text-align: left; }
.bs-check-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: #07a4f3; border-radius: 50%; }
.bs-inline-cta { display: inline-flex; margin-top: 28px; color: var(--bs-blue); font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }

.bs-device-card {
  position: relative;
  min-height: 360px;
  padding: 34px;
  border-radius: 8px;
  background: #fff;
  color: var(--bs-text);
  border: 1px solid var(--bs-border);
  box-shadow: 0 18px 44px rgba(0, 47, 82, .08);
  overflow: hidden;
}
.bs-device-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--bs-blue); }
.bs-device-top { position: relative; width: 58px; height: 5px; margin: 0 0 34px; border-radius: 999px; background: var(--bs-lime); }
.bs-ai-grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bs-ai-grid span { min-height: 72px; display: grid; place-items: center; border-radius: 8px; background: var(--bs-ice); border: 1px solid var(--bs-border); color: var(--bs-blue); font-weight: 900; }
.bs-search-result { position: relative; margin-top: 24px; padding: 24px; border-radius: 8px; background: var(--bs-light); color: var(--bs-text); }
.bs-search-result small { display: block; color: var(--bs-blue); font-weight: 900; text-transform: uppercase; }
.bs-search-result strong { display: block; margin: 6px 0; font-size: 26px; }
.bs-search-result p { margin: 0; color: var(--bs-body); font-size: 15px; }

.bs-showcase-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  grid-auto-rows: 180px;
  gap: 22px;
}
.bs-shot { display: grid; place-items: center; min-height: auto; background-color: #fff; }
.bs-shot--large { grid-row: span 2; }
.bs-shot:nth-child(4) { background: linear-gradient(135deg, var(--bs-dark), var(--bs-blue)); }
.bs-shot:nth-child(4) span { color: #fff; }
.bs-shot:nth-child(5) { background: var(--bs-lime); }

/* v1.34.1: legacy joined-cells border removed (conflicted with .bs-feature-grid div
   card-style border + radius defined later in this file at line ~2279). */
.bs-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bs-feature-grid div { min-height: 170px; padding: 30px; }
.bs-feature-grid strong { display: block; color: var(--bs-text); font-size: 22px; line-height: 1.16; font-weight: 700; }
.bs-feature-grid span { display: block; margin-top: 12px; color: var(--bs-body); }
.bs-feature-grid .bs-icon--inline {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--bs-md);
  border-radius: var(--bs-radius);
  background: linear-gradient(135deg, var(--bs-light), #fff);
  color: var(--bs-blue);
  border: 1px solid var(--bs-border);
  transition: transform .35s var(--bs-ease-spring), background .25s ease, color .25s ease;
}
.bs-feature-grid .bs-icon--inline svg { width: 22px; height: 22px; stroke-width: 2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.bs-feature-grid div:hover .bs-icon--inline { transform: scale(1.08) rotate(-4deg); background: var(--bs-blue); color: var(--bs-lime); }

.bs-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bs-service-card {
  position: relative;
  min-height: 246px;
  padding: 34px 30px;
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 47, 82, .08);
}
.bs-service-card::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  background: var(--bs-light);
  border-radius: 8px;
  border: 10px solid var(--bs-light);
  box-shadow: inset 0 0 0 2px var(--bs-blue);
}
.bs-service-card h3 { margin: 0 0 12px; color: var(--bs-text); font-size: 25px; line-height: 1.16; font-weight: 900; }
.bs-service-card p { margin: 0; color: var(--bs-body); }
.bs-mini-media {
  height: 74px;
  display: grid;
  place-items: center;
  margin-top: 22px;
  border: 1px dashed #a9c3d1;
  border-radius: 7px;
  background: var(--bs-ice);
  color: var(--bs-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bs-timeline { counter-reset: bs-step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 2px solid var(--bs-blue); padding-top: 24px; }
.bs-timeline .bs-service-card { counter-increment: bs-step; }
.bs-card-mark { display: none; }

.bs-proof { display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: center; }
.bs-proof-box {
  min-height: 260px;
  display: grid;
  align-content: center;
  padding: 38px;
  background: var(--bs-blue);
  color: #fff;
  border-radius: 8px;
  box-shadow: var(--bs-shadow);
}
.bs-proof-box strong { display: block; color: var(--bs-lime); font-size: clamp(40px, 5vw, 64px); line-height: .92; font-weight: 700; letter-spacing: 0; font-family: var(--bs-font-body); }
.bs-proof-box span { display: block; margin-top: 16px; color: #fff; font-weight: 900; }

/* Proof block stat card (PB `proof` widget - rendered inside bs-section--blue).
   Contrast card with a large lime figure, since the section background is blue. */
.bs-proof-stat {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 220px;
  padding: 40px 32px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(7, 22, 38, .22);
}
.bs-proof-stat strong {
  display: block;
  color: var(--bs-lime);
  font-size: clamp(48px, 6vw, 78px);
  line-height: .88;
  font-weight: 800;
  letter-spacing: -.01em;
  font-family: var(--bs-font-body);
}
.bs-proof-stat span {
  display: block;
  margin-top: 14px;
  max-width: 320px;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.bs-section--faq { background: var(--bs-ice); }
.bs-faq details { background: #fff; border: 1px solid var(--bs-border); border-radius: 8px; padding: 22px 24px; margin-bottom: 12px; }
.bs-faq summary { cursor: pointer; color: var(--bs-text); font-weight: 900; font-size: 18px; }
.bs-faq p { margin: 12px 0 0; color: var(--bs-body); }
.bs-final-cta .bs-form-card { box-shadow: none; }

.bs-site-footer { background: var(--bs-dark); color: #b8c6cf; padding: 0; }
.bs-footer-cta { padding: 70px 0; background: #07a4f3; color: #fff; }
.bs-footer-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 38px; align-items: center; }
.bs-footer-cta h2 { max-width: 780px; margin: 0; color: #fff; font-family: var(--bs-font-display); font-size: clamp(32px, 4vw, 54px); line-height: 1.05; }
.bs-footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, .7fr); gap: 42px; padding-top: 58px; padding-bottom: 58px; }
.bs-site-footer h3 { margin: 0 0 14px; color: #fff; font-size: 15px; letter-spacing: .02em; }
.bs-site-footer p { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; }
.bs-site-footer a { color: #fff; }
/* Footer column links - compact, single-line, ellipsis on overflow.
   Smaller font + nowrap keeps long service titles ("SEO оптимизация на
   онлайн магазин") on ONE row instead of wrapping and breaking the
   vertical rhythm of the column. Hover reveals full label via title attr. */
.bs-site-footer div > a:not(.bs-logo):not(.bs-button) {
  display: block;
  margin-bottom: 7px;
  color: #dce8f0;
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color .15s ease;
}
.bs-site-footer div > a:not(.bs-logo):not(.bs-button):hover { color: #fff; }
/* Sub-section header inside a footer column (used for "Локации" under
   "Индустрии" in col 3). Matches the H3 column-title styling so the
   stacked sections read as equally-weighted lists, just separated by
   a hairline. */
.bs-footer-col-sub {
  display: block;
  margin: 22px 0 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--bs-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

/* "Виж всички ..." link at the bottom of a footer sub-section.
   Same soft tone as regular column links - just slightly heavier weight
   and an arrow on the right to read as "see all" rather than another
   service item. White on hover, like the rest of the footer links. */
.bs-site-footer div > a.bs-footer-col-foot {
  margin-top: 6px;
  margin-bottom: 4px;
  color: #dce8f0 !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: color .15s ease;
  white-space: nowrap;
  opacity: .85;
}
.bs-site-footer div > a.bs-footer-col-foot span {
  display: inline-block;
  margin-left: 4px;
  transition: transform .2s ease;
}
.bs-site-footer div > a.bs-footer-col-foot:hover {
  color: #fff !important;
  opacity: 1;
}
.bs-site-footer div > a.bs-footer-col-foot:hover span {
  transform: translateX(4px);
}

/* ─── In-page filter for .bs-services-linklist (archive long lists) ── */
.bs-list-filter {
  position: relative;
  max-width: 460px;
  margin: 0 auto 28px;  /* centered horizontally above the list */
}
.bs-list-filter-input {
  width: 100%;
  padding: 10px 110px 10px 38px;
  font-size: 14px;
  font-family: var(--bs-font-body);
  color: var(--bs-text);
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(12, 31, 49, .03);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.bs-list-filter-input:focus {
  outline: none;
  border-color: var(--bs-blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 172, .15);
}
.bs-list-filter-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bs-list-filter-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-blue);
  pointer-events: none;
  display: inline-flex;
}
.bs-list-filter-count {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #586a78;
  pointer-events: none;
}
.bs-services-linklist .bs-list-filter-empty {
  color: #586a78;
  font-style: italic;
  list-style: none;
  padding: 14px 0;
}
@media (max-width: 640px) {
  .bs-list-filter-input { padding-right: 14px; }
  .bs-list-filter-count { display: none; }
}
.bs-logo--footer { color: #fff; }
/* Footer badge row - supports both legacy <span> placeholders and the
   image badges set via Customizer (Chrome → Footer brand column → Badge 1-6). */
.bs-footer-media-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin-top: 24px;
}
.bs-footer-media-row span {
  min-height: 46px;
  min-width: 80px;
  display: grid;
  place-items: center;
  padding: 4px 10px;
  border: 1px dashed rgba(255,255,255,.26);
  border-radius: 6px;
  color: var(--bs-lime, #cdff16);
  font-size: 11px;
  font-weight: 900;
}
.bs-footer-media-row .bs-footer-badge {
  display: block;
  height: auto;
  max-height: 50px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  filter: brightness(.95) saturate(.9);
  opacity: .92;
  transition: transform .25s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)), filter .2s ease, opacity .2s ease;
}
.bs-footer-media-row .bs-footer-badge-link { display: inline-flex; align-items: center; }
.bs-footer-media-row .bs-footer-badge-link:hover .bs-footer-badge,
.bs-footer-media-row .bs-footer-badge:hover {
  transform: translateY(-2px) scale(1.04);
  filter: none;
  opacity: 1;
}
/* ─────────────────── Footer partner logos marquee (soft fade) ───────────
 * Двойно подадените лога scroll-ват безкрайно отляво надясно с slow speed.
 * mask-image gradient прави левия/десния край да fade-ват в нищото - усещане
 * за облаци (вместо рязко cropping). Logo-та са в #eee tint, opacity .35
 * за супер ненатрапчив „brand wall". */
.bs-footer-partners {
  padding: 28px 0;
  background: #04111d;
  border-top: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.bs-footer-partners > .bs-container {
  position: relative;
  overflow: hidden;
  /* Soft gradient fade на двата края - „from clouds" ефект. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.bs-footer-partners-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: bsPartnersScroll var(--bs-partners-speed, 40s) linear infinite;
  will-change: transform;
}
.bs-footer-partners:hover .bs-footer-partners-track {
  animation-play-state: paused;
}
.bs-footer-partner,
.bs-footer-partner--dup {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: .35;
  filter: grayscale(1) brightness(1.6);
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
.bs-footer-partner:hover {
  opacity: .85;
  filter: grayscale(0) brightness(1);
  transform: translateY(-2px);
}
.bs-footer-partner img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  /* Lume tint - logo-тата получават #eee tint, не са pure white/colored. */
  filter: brightness(0) invert(.92);
}
@keyframes bsPartnersScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50% защото дублираме списъка */
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bs-footer-partners-track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
  }
  .bs-footer-partner--dup { display: none; } /* при no-motion - покажи само един списък */
}
/* Mobile: smaller gap + height */
@media (max-width: 720px) {
  .bs-footer-partners { padding: 20px 0; }
  .bs-footer-partners-track { gap: 36px; }
  .bs-footer-partner img { height: 28px; max-width: 100px; }
}

.bs-subfooter { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; background: #04111d; }
.bs-subfooter-copy { color: rgba(255,255,255,.65); font-size: 13px; }
.bs-subfooter-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.bs-subfooter-link--dmca { font-weight: 700; }

/* Footer brand row - logo + secondary image над columns. */
.bs-footer-brand-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 24px;
}
.bs-footer-brand-logo { display: inline-flex; align-items: center; opacity: .95; transition: opacity .2s ease; }
.bs-footer-brand-logo:hover { opacity: 1; }
.bs-footer-brand-logo img { display: block; max-height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.bs-footer-secondary-image { display: inline-flex; align-items: center; opacity: .75; transition: opacity .25s ease; }
.bs-footer-secondary-image:hover { opacity: 1; }
.bs-footer-secondary-image img { display: block; max-height: 56px; width: auto; }
@media (max-width: 720px) {
  .bs-footer-brand-row { padding: 22px 0 16px; gap: 16px; }
  .bs-footer-brand-logo img { max-height: 36px; }
  .bs-footer-secondary-image img { max-height: 44px; }
}
.bs-subfooter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #8fa3b1;
  font-size: 13px;
  font-weight: 700;
  flex-wrap: wrap;
  min-height: 56px;          /* keeps row height stable when items wrap */
}
.bs-subfooter-inner > * {
  display: inline-flex;
  align-items: center;        /* vertical center on every direct child */
  margin: 0;
  line-height: 1.3;
}
.bs-subfooter-inner .dmca-badge img { display: block; margin-top: 10px; }
.bs-subfooter-inner .dmca-badge { line-height: 0; }
.bs-subfooter-sep { margin: 0 6px; color: #4d6373; }
.bs-subfooter .bs-subfooter-link,
.bs-site-footer .bs-subfooter-link {
  color: rgba(255, 255, 255, .68) !important;
  text-decoration: none;
  transition: color .15s ease;
  /* A11y: по-голям tap размер + разстояние (Lighthouse touch targets >=24px) */
  display: inline-block;
  padding: 8px 6px;
  min-height: 24px;
  line-height: 1.5;
}
.bs-subfooter .bs-subfooter-link:hover,
.bs-site-footer .bs-subfooter-link:hover { color: #fff !important; text-decoration: underline; }
/* Footer brand-area links - same style as the column links */
.bs-footer-brand-links {
  display: flex;
  flex-direction: column;
  margin: 14px 0 0;
}
.bs-footer-brand-links a {
  display: block;
  margin-bottom: 10px;
  color: #dce8f0;
  text-decoration: none;
  transition: color .15s ease;
}
.bs-footer-brand-links a:hover { color: #fff; }

/* ─── SEO Glossary - Search + Tabbed Letter Navigation ───────────── */
.bs-glossary-controls {
  background: var(--bs-cream, #fffaf5);
  padding: 18px 0 14px;
}
.bs-glossary-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bs-glossary-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  max-width: 540px;
  background: #fff;
  border: 2px solid var(--bs-border, #e1ecf2);
  border-radius: 12px;
  padding: 0 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bs-glossary-search-wrap:focus-within {
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 0 0 4px rgba(7,164,243,.12);
}
.bs-glossary-search-icon { font-size: 18px; opacity: .55; margin-right: 8px; }
#bs-glossary-search {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 14px 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--bs-text, #0f1c25);
}
.bs-glossary-search-clear {
  border: 0;
  background: var(--bs-bg-soft, #f7f9fb);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: var(--bs-muted);
  transition: background .15s ease;
}
.bs-glossary-search-clear:hover { background: var(--bs-blue, #006aac); color: #fff; }
.bs-glossary-search-meta {
  margin: 0;
  color: var(--bs-muted, #586a78);
  font-size: 14px;
  font-weight: 600;
}
.bs-glossary-search-meta span {
  color: var(--bs-blue, #006aac);
  font-weight: 800;
}

.bs-glossary-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.bs-glossary-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid var(--bs-border, #e1ecf2);
  border-radius: 999px;
  color: var(--bs-text, #0f1c25);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s ease;
}
.bs-glossary-tab small { opacity: .65; font-weight: 600; font-size: 12px; }
.bs-glossary-tab:hover:not(.is-disabled) { border-color: var(--bs-blue, #006aac); color: var(--bs-blue, #006aac); }
.bs-glossary-tab.is-active {
  background: var(--bs-blue, #006aac);
  border-color: var(--bs-blue, #006aac);
  color: #fff;
}
.bs-glossary-tab.is-active small { opacity: .85; color: #fff; }
.bs-glossary-tab.is-disabled { opacity: .4; cursor: not-allowed; }

.bs-glossary-letters {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 0;
}
.bs-glossary-letters .bs-alpha-chip {
  display: inline-flex !important;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 38px;
  height: 38px;
  margin: 0 !important;
}
.bs-glossary-letters[hidden] { display: none !important; }

/* Letter blocks - all uses bs-services-linklist (consistent with services group). */
.bs-glossary-letter-block {
  margin-bottom: 32px;
  scroll-margin-top: 24px;
}
.bs-glossary-letter-title {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--bs-blue, #006aac);
  color: var(--bs-blue, #006aac);
  font-size: 28px;
  font-weight: 900;
}

/* Glossary linklist - 3 cols (override 4 col default от .bs-services-linklist) */
.bs-glossary-linklist {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: 18px !important;
}
@media (max-width: 900px) {
  .bs-glossary-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 24px !important; row-gap: 14px !important; }
}
@media (max-width: 560px) {
  .bs-glossary-linklist { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 12px !important; }
}

/* Title + sub-title (translation) на 2 реда */
.bs-glossary-linklist a {
  display: block !important;
  line-height: 1.35 !important;
}
.bs-glossary-link-main {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-blue, #006aac);
}
.bs-glossary-link-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--bs-muted, #586a78);
  font-style: italic;
}
.bs-glossary-linklist a:hover .bs-glossary-link-main,
.bs-glossary-linklist a:focus-visible .bs-glossary-link-main {
  color: var(--bs-text, #0f1c25);
}

/* ─── SEO Encyclopedia (Речник) ──────────────────────────────────── */
.bs-encyclopedia-alphabet {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 0;
  background: #fff;
  border-bottom: 1px solid var(--bs-border, #e1ecf2);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.bs-encyclopedia-alphabet .bs-container {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.bs-alpha-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  background: var(--bs-bg-soft, #f7f9fb);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 999px;
  color: var(--bs-text, #0f1c25);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all .15s ease;
}
.bs-alpha-chip:hover { background: var(--bs-blue, #006aac); border-color: var(--bs-blue); color: #fff; }
.bs-encyclopedia-list { display: flex; flex-direction: column; gap: 36px; }
.bs-encyclopedia-letter-h {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--bs-blue, #006aac);
  color: var(--bs-blue, #006aac);
  font-size: 32px;
  font-weight: 900;
}
.bs-encyclopedia-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  list-style: none; padding: 0; margin: 0;
}
.bs-encyclopedia-term {
  display: block;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 8px;
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
  transition: all .15s ease;
}
.bs-encyclopedia-term:hover {
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 6px 20px rgba(0,106,172,.12);
  transform: translateY(-2px);
}
.bs-encyclopedia-term strong { display: block; font-size: 15px; margin-bottom: 4px; }
.bs-encyclopedia-term span { display: block; color: var(--bs-muted, #586a78); font-size: 13px; line-height: 1.5; }

.bs-encyclopedia-content-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .bs-encyclopedia-content-wrap { grid-template-columns: 1fr; }
}
.bs-encyclopedia-related {
  position: sticky; top: 124px;
  padding: 18px 20px;
  background: var(--bs-bg-soft, #f7f9fb);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 10px;
}
@media screen and (max-width: 782px) {
  .bs-encyclopedia-related { top: 92px; }
}
.bs-encyclopedia-related h3 { margin: 0 0 14px; font-size: 16px; font-weight: 800; }
.bs-encyclopedia-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bs-encyclopedia-related a {
  display: block;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 6px;
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
  transition: all .15s ease;
}
.bs-encyclopedia-related a:hover { border-color: var(--bs-blue, #006aac); background: #f0f6fc; }
.bs-encyclopedia-related a strong { display: block; font-size: 14px; }
.bs-encyclopedia-related a small { display: block; color: var(--bs-muted, #586a78); font-size: 12px; margin-top: 2px; }

/* ─── Transliterator tool ────────────────────────────────────────── */
.bs-transliterator {
  margin: 30px 0;
  padding: 26px;
  background: var(--bs-bg-soft, #f7f9fb);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 12px;
}
.bs-transliterator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .bs-transliterator-grid { grid-template-columns: 1fr; }
}
.bs-transliterator-grid label { display: block; }
.bs-transliterator-grid strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.bs-transliterator-grid textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}
.bs-transliterator-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--bs-border, #e1ecf2);
}
.bs-tr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.bs-tr-slug-row {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 6px;
}
.bs-tr-slug { font-family: Monaco, Consolas, monospace; font-size: 13px; color: var(--bs-blue, #006aac); }

/* ─── Rich author bio card (E-E-A-T) ──────────────────────────────── */
.bs-author-card {
  display: grid;
  grid-template-columns: 144px 1fr;
  gap: 24px;
  max-width: 760px;
  margin: 40px auto 0;
  padding: 26px 28px;
  background: linear-gradient(180deg, #fff, #f7f9fb);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(15,28,37,.04);
}
@media (max-width: 640px) {
  .bs-author-card { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .bs-author-card-photo { max-width: 100px; }
}
.bs-author-card-photo img {
  width: 100%; height: auto;
  border-radius: 50%;
  display: block;
  border: 4px solid #fff;
  box-shadow: 0 6px 20px rgba(0,106,172,.18);
}
.bs-author-card-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.bs-author-card-name {
  font-size: 19px; font-weight: 800;
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
}
.bs-author-card-name:hover { color: var(--bs-blue, #006aac); }
.bs-author-card-title {
  padding: 3px 10px;
  background: var(--bs-blue, #006aac);
  color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bs-author-card-pill {
  padding: 3px 10px;
  background: var(--bs-lime, #cdff16);
  color: #1d2327;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.bs-author-card-bio {
  margin: 0 0 12px;
  color: var(--bs-text, #0f1c25);
  font-size: 15px;
  line-height: 1.65;
}
.bs-author-card-expertise {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 12px;
  font-size: 13px;
}
.bs-author-card-expertise strong { color: var(--bs-muted, #586a78); margin-right: 4px; }
.bs-author-card-tag {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-text, #0f1c25);
}
.bs-author-card-creds {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 6px;
  font-size: 13px;
}
.bs-author-card-creds summary { cursor: pointer; font-weight: 700; }
.bs-author-card-creds ul { margin: 8px 0 0 18px; padding: 0; }
.bs-author-card-creds li { margin-bottom: 4px; }
.bs-author-card-socials {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0;
}
.bs-author-card-socials a {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 8px;
  color: var(--bs-text, #0f1c25);
  font-weight: 700;
  text-decoration: none;
  transition: all .15s ease;
}
.bs-author-card-socials a:hover {
  background: var(--bs-blue, #006aac);
  border-color: var(--bs-blue, #006aac);
  color: #fff;
  transform: translateY(-2px);
}
.bs-author-card-archive {
  display: inline-block;
  margin-top: 8px;
  color: var(--bs-blue, #006aac);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.bs-author-card-archive:hover { text-decoration: underline; }
.bs-author-card--compact {
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 14px 18px;
  margin: 32px auto 0;
  align-items: center;
  background: #fff;
  width: 100%;
  max-width: 760px;
  box-sizing: border-box;
}
.bs-author-card--compact .bs-author-card-photo { max-width: 64px; }
.bs-author-card--compact .bs-author-card-photo img { border-width: 2px; box-shadow: 0 3px 10px rgba(0,106,172,.14); }
.bs-author-card--compact .bs-author-card-body { display: flex; flex-direction: column; gap: 2px; }
.bs-author-card--compact .bs-author-card-header { margin-bottom: 0; }
.bs-author-card--compact .bs-author-card-name { font-size: 15px; font-weight: 700; }
.bs-author-card--compact .bs-author-card-archive { margin-top: 0; font-size: 12px; }
@media (max-width: 640px) {
  .bs-author-card--compact { grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 14px; }
  .bs-author-card--compact .bs-author-card-photo { max-width: 56px; }
}

/* Author hero on /author/<slug>/ */
.bs-author-hero { padding-top: 48px !important; padding-bottom: 32px !important; }
.bs-author-hero .bs-author-card { margin: 0; max-width: 880px; margin-left: auto; margin-right: auto; }

/* Auto-resolved internal "Прочетете повече" link inside cards-grid items
   - only rendered when bs_tool single page exists for that title slug. */
.bs-feature-grid-readmore {
  display: inline-block;
  margin-top: 10px;
  color: var(--bs-blue, #006aac);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.bs-feature-grid-readmore:hover { text-decoration: underline; }

/* Clickable thumbnail in feature grid (tools / solutions) */
.bs-feature-grid-thumb { display: inline-block; cursor: pointer; transition: opacity .15s ease, transform .15s ease; }
.bs-feature-grid-thumb:hover { opacity: .88; transform: translateY(-2px); }
.bs-feature-grid-thumb img { margin-bottom: 0; }

/* ─── SEO Tool cards (/instrumenti/ list) ───────────────────────── */
.bs-tool-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 20px !important;
}
.bs-tool-card-thumb { display: block; margin-bottom: 8px; }
.bs-tool-card-thumb img { max-width: 100%; height: auto; border-radius: 8px; }
.bs-tool-card strong a { color: var(--bs-text, #0f1c25); text-decoration: none; }
.bs-tool-card strong a:hover { color: var(--bs-blue, #006aac); }
.bs-tool-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--bs-lime, #cdff16);
  color: #1d2327;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bs-tool-card-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--bs-border, #e1ecf2);
}
.bs-tool-read-more {
  font-weight: 700;
  color: var(--bs-blue, #006aac);
  text-decoration: none;
}
.bs-tool-read-more:hover { text-decoration: underline; }
.bs-tool-vendor-link {
  margin-left: auto;
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 6px;
  color: var(--bs-muted, #586a78);
  text-decoration: none;
  font-size: 14px;
}
.bs-tool-vendor-link:hover { background: var(--bs-blue, #006aac); color: #fff; border-color: var(--bs-blue); }

/* Single tool page - like /seo-glossary/<slug>/ (left-aligned content + right sidebar) */
.bs-tool-content-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
  text-align: left;
}
@media (max-width: 900px) {
  .bs-tool-content-wrap { grid-template-columns: 1fr; }
}
.bs-tool-content-wrap .bs-prose { text-align: left; }
.bs-tool-content-wrap .bs-prose * { text-align: left; }
.bs-tool-screenshot { display: block; margin: 0 0 24px; border-radius: 12px; }

.bs-tool-sidebar {
  /* Sticky offset = WP toolbar (32px logged-in) + site header (~76px) + breathing room */
  position: sticky; top: 124px;
  padding: 22px 22px;
  background: var(--bs-bg-soft, #f7f9fb);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
}
@media screen and (max-width: 782px) {
  .bs-tool-sidebar { top: 92px; }   /* WP toolbar 46px on mobile + smaller header */
}
.bs-tool-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font-size: 13px;
}
.bs-tool-meta-row strong { color: var(--bs-muted, #586a78); font-weight: 600; }
.bs-tool-meta-row a { color: var(--bs-blue, #006aac); text-decoration: none; }
.bs-solution-services {
  display: block;
  padding-top: 10px;
}
.bs-glossary-categories,
.bs-glossary-services {
  display: block;
  padding-top: 2px;
}
.bs-solution-services strong {
  display: block;
  margin-bottom: 8px;
}
.bs-glossary-categories strong,
.bs-glossary-services strong {
  display: block;
  margin-bottom: 8px;
}
.bs-glossary-services strong + strong {
  display: none;
}
.bs-solution-service-links,
.bs-glossary-category-links,
.bs-glossary-service-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-solution-service-links a,
.bs-glossary-category-links a,
.bs-glossary-service-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(7, 164, 243, .24);
  border-radius: 999px;
  background: #fff;
  color: #0c1f31;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.bs-solution-service-links a:hover,
.bs-glossary-category-links a:hover,
.bs-glossary-service-links a:hover {
  border-color: #07a4f3;
  background: rgba(7, 164, 243, .08);
  color: #006aac;
}
.bs-tool-pricing-pill {
  display: inline-block;
  padding: 3px 10px;
  background: var(--bs-lime, #cdff16);
  color: #1d2327;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.bs-tool-sidebar-note {
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--bs-muted, #586a78);
  line-height: 1.5;
  font-style: italic;
}
.bs-tool-help-box {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--bs-border, #e1ecf2);
  font-size: 13px;
  line-height: 1.55;
}
.bs-tool-help-box strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--bs-text, #0f1c25);
  font-weight: 700;
}
.bs-tool-help-box p { margin: 0 0 12px; color: var(--bs-muted, #586a78); }
.bs-tool-help-box a { color: var(--bs-blue, #006aac); font-weight: 600; }
.bs-tool-sidebar-back {
  display: inline-block;
  margin-top: 6px;
  color: var(--bs-muted, #586a78);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.bs-tool-sidebar-back:hover { color: var(--bs-blue, #006aac); }

/* ─── Tools section hero image (SEO Tools section) ─────────────── */
.bs-tools-image {
  display: block;
  max-width: 880px;
  margin: 0 auto 32px;
  text-align: center;
}
.bs-tools-image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15,28,37,.10);
}

/* ─── Keyword example cards (homepage RESULTS section) ─────────── */
.bs-keyword-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.bs-keyword-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 10px;
  transition: all .2s ease;
}
.bs-keyword-card:hover {
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 6px 22px rgba(0,106,172,.10);
  transform: translateY(-2px);
}
.bs-keyword-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}
.bs-keyword-card-kw {
  font-weight: 800;
  font-size: 16px;
  color: var(--bs-text, #0f1c25);
}
.bs-keyword-card-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bs-keyword-card-pill--medium    { background: #fff3cd; color: #6f4f00; border: 1px solid #dba617; }
.bs-keyword-card-pill--hard      { background: #fee; color: #b32d2d; border: 1px solid #d63638; }
.bs-keyword-card-pill--very-hard { background: #2c0d0d; color: #ff8a8a; border: 1px solid #b32d2d; }
.bs-keyword-card-stat {
  display: flex; align-items: baseline; gap: 6px;
  grid-row: 2; grid-column: 1;
}
.bs-keyword-card-stat strong { font-size: 22px; font-weight: 900; color: var(--bs-blue, #006aac); }
.bs-keyword-card-stat small { color: var(--bs-muted, #586a78); font-size: 12px; }
.bs-keyword-card-note {
  margin: 0;
  grid-row: 3; grid-column: 1 / -1;
  color: var(--bs-text, #0f1c25);
  font-size: 13px;
  line-height: 1.55;
}

/* ─── 404 ──────────────────────────────────────────────────────── */
.bs-404-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 780px;
  margin: 0 auto;
}
@media (max-width: 640px) { .bs-404-grid { grid-template-columns: 1fr; } }
.bs-404-grid h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: var(--bs-blue, #006aac);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bs-404-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bs-404-links a {
  display: block;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 6px;
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
  font-weight: 600;
  transition: all .15s ease;
}
.bs-404-links a:hover {
  border-color: var(--bs-blue, #006aac);
  background: #f0f6fc;
  color: var(--bs-blue, #006aac);
  transform: translateX(3px);
}

/* === 2026 Reveal animations === */
.bs-reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .9s cubic-bezier(.16,.84,.32,1), transform .9s cubic-bezier(.16,.84,.32,1);
  will-change: opacity, transform;
}
.bs-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .bs-reveal, .bs-reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

/* Hero entry */
.bs-landing .bs-hero-copy { animation: bs-hero-rise .9s cubic-bezier(.16,.84,.32,1) both; }
.bs-landing .bs-hero-copy h1 { animation: bs-hero-rise 1s cubic-bezier(.16,.84,.32,1) both; animation-delay: .08s; }
.bs-landing .bs-hero-copy p { animation: bs-hero-rise 1s cubic-bezier(.16,.84,.32,1) both; animation-delay: .16s; }
.bs-landing .bs-hero-copy .bs-actions { animation: bs-hero-rise 1s cubic-bezier(.16,.84,.32,1) both; animation-delay: .22s; }
.bs-landing .bs-hero-copy .bs-hero-stats { animation: bs-hero-rise 1s cubic-bezier(.16,.84,.32,1) both; animation-delay: .28s; }
.bs-landing .bs-form-card--hero { animation: bs-form-rise 1.1s cubic-bezier(.16,.84,.32,1) both; animation-delay: .14s; }
@keyframes bs-hero-rise {
  from { opacity: 0; transform: translateY(36px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes bs-form-rise {
  from { opacity: 0; transform: translateY(40px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero gradient breathing - replaced by mesh-grid drift (see .bs-hero::before). */

/* Hero mouse-follow accent dot - removed per design feedback (felt distracting). */


/* Sticky header shadow when scrolled */
.bs-site-header { transition: box-shadow .3s ease, background .3s ease, backdrop-filter .3s ease; }
.bs-site-header.is-scrolled { box-shadow: 0 12px 32px rgba(7, 23, 37, .08); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); background: rgba(255,255,255,.85); }

/* Card transitions */
.bs-button, .bs-service-card, .bs-media-card, .bs-shot, .bs-device-card,
.bs-stat-card, .bs-testimonial, .bs-case-card {
  transition: transform .35s cubic-bezier(.16,.84,.32,1), box-shadow .35s ease, border-color .25s ease;
  will-change: transform;
}
.bs-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(7, 164, 243, .25); }
.bs-service-card:hover, .bs-media-card:hover, .bs-shot:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 47, 82, .14); border-color: var(--bs-blue); }

/* Stat-card glow on hover */
.bs-stat-card { position: relative; overflow: hidden; }
.bs-stat-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, transparent 0%, transparent 60%, rgba(0,166,250,.18) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  border-radius: inherit;
}
.bs-stat-card:hover::after { opacity: 1; }
.bs-stat-card:hover { box-shadow: 0 22px 60px rgba(7, 164, 243, .18); border-color: rgba(7,164,243,.4); }

/* Testimonial + case-card glow */
.bs-testimonial:hover { box-shadow: 0 22px 60px rgba(0, 47, 82, .14); border-color: var(--bs-blue); }
.bs-case-card { transition: transform .4s cubic-bezier(.16,.84,.32,1), box-shadow .4s ease; }
.bs-case-card:hover { transform: translateY(-4px); box-shadow: 0 32px 80px rgba(0, 47, 82, .22); }

/* FAQ details animation */
.bs-faq details { transition: border-color .25s ease, box-shadow .25s ease; }
.bs-faq details[open] { border-color: var(--bs-blue); box-shadow: 0 12px 28px rgba(7, 164, 243, .08); }
.bs-faq summary { transition: color .2s ease; position: relative; padding-right: 32px; list-style: none; }
.bs-faq summary::-webkit-details-marker { display: none; }
.bs-faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--bs-blue); color: #fff;
  border-radius: 50%;
  font-size: 18px; font-weight: 800; line-height: 1;
  transition: transform .3s cubic-bezier(.16,.84,.32,1);
}
.bs-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.bs-faq details[open] summary { color: var(--bs-blue); }

/* Animated kicker dot pulse */
.bs-eyebrow::before, .bs-kicker::before {
  animation: bs-pulse 2.4s ease-in-out infinite;
}
@keyframes bs-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(205,255,22,.5); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(205,255,22,0); }
}

/* Logo grid hover lift */
.bs-logo-grid div { transition: transform .3s cubic-bezier(.16,.84,.32,1), border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.bs-logo-grid div:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 47, 82, .1); }

/* Trust band number stagger entry handled by JS */
.bs-trust-band-grid > div { transition-delay: 0s; }

/* Button shimmer accent */
.bs-button { position: relative; overflow: hidden; }
.bs-button::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: left .6s ease;
}
.bs-button:hover::before { left: 100%; }

.betterseo-content { padding: 60px 0 0; }
.betterseo-content article > :last-child { margin-bottom: 0; }
.betterseo-content img { border-radius: 8px; }
.section-title { max-width: 800px; margin: 0 auto 36px; text-align: center; }
.section-title h2 { color: var(--bs-text); font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
.section-title.color-white h2, .section-title.color-white { color: #fff; }

.bs-home-content {
  padding: 0;
  background: var(--bs-white);
}
.bs-home-content > .bs-container {
  max-width: none;
  padding: 0;
}
.bs-home-content article {
  overflow: hidden;
}
.bs-home-content article > p,
.bs-home-content article > ul,
.bs-home-content article > ol,
.bs-home-content article > h2,
.bs-home-content article > h3,
.bs-home-content article > h4,
.bs-home-content article > .table-container,
.bs-home-content article > .ml-embedded {
  max-width: var(--bs-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
}
.bs-home-content article > p,
.bs-home-content article > ul,
.bs-home-content article > ol {
  color: var(--bs-body);
  font-size: 17px;
  line-height: 1.75;
}
.bs-home-content article > ul,
.bs-home-content .section-title ul {
  list-style: none;
  padding-left: 22px;
}
.bs-home-content article li {
  position: relative;
  margin-bottom: 10px;
}
.bs-home-content article li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: .65em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bs-lime);
  box-shadow: 0 0 0 3px rgba(7,164,243,.12);
}
.bs-home-content .section-title {
  max-width: none;
  margin: 0;
  padding: 72px 22px 28px;
}
.bs-home-content .section-title > div {
  max-width: 840px;
  margin: 0 auto;
}
.bs-home-content .section-title h2 {
  max-width: 920px;
  margin: 0 auto 16px;
}
.bs-home-content .section-title p {
  margin: 0 auto 14px;
  color: var(--bs-body);
  font-size: 18px;
  line-height: 1.72;
}
.bs-home-hero {
  padding: 86px 0;
  background:
    linear-gradient(135deg, rgba(0,47,82,.92), rgba(7,164,243,.86)),
    var(--bs-dark);
  color: #fff;
}
.bs-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 56px;
  align-items: center;
}
.bs-home-hero h1 {
  max-width: 860px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.06;
}
.bs-home-hero-text,
.bs-home-hero-text p {
  color: rgba(255,255,255,.88);
  font-size: 19px;
  line-height: 1.72;
}
.bs-home-hero-text .act-flex-container,
.bs-home-hero-text .vc_btn3-container {
  display: inline-flex;
  gap: 14px;
  margin-top: 20px;
}
.bs-home-hero-text a,
.bs-home-content .btn,
.bs-home-content .vc_btn3,
.bs-home-content .bs-pricing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 22px;
  border-radius: 6px;
  background: var(--bs-lime);
  color: var(--bs-text) !important;
  font-weight: 800;
  text-decoration: none;
}
.bs-home-hero-panel {
  padding: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}
.bs-home-hero-panel span {
  color: var(--bs-lime);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bs-home-hero-panel strong {
  display: block;
  margin: 10px 0;
  color: #fff;
  font-size: 68px;
  line-height: 1;
}
.bs-home-hero-panel p {
  margin: 0;
  color: rgba(255,255,255,.84);
}
.bs-home-feature-grid,
.betterseo-overviews,
.bs-pricing-row,
.bs-pricing {
  max-width: var(--bs-max);
  margin: 0 auto 28px;
  padding-left: 22px;
  padding-right: 22px;
}
.bs-home-feature-grid {
  border-radius: 8px;
  overflow: hidden;
}
.betterseo-overviews {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.betterseo-overview {
  min-height: 150px;
  padding: 24px;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 47, 82, .06);
}
.betterseo-overview h3 {
  margin: 0 0 10px;
  color: var(--bs-text);
  font-size: 19px;
}
.betterseo-overview p {
  margin: 0;
  color: var(--bs-body);
  font-size: 15px;
}
.bs-home-figure {
  max-width: var(--bs-max);
  margin: 30px auto;
  padding: 0 22px;
}
.bs-home-figure img {
  margin: 0 auto;
  box-shadow: 0 18px 44px rgba(0, 47, 82, .08);
}
.bs-home-figure figcaption {
  margin-top: 10px;
  color: var(--bs-muted);
  text-align: center;
  font-size: 13px;
}
.bs-home-screenshots {
  max-width: var(--bs-max);
  margin: 20px auto 40px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bs-home-screenshots figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 47, 82, .09);
}
.betterseo-plan {
  padding: 24px;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 47, 82, .08);
}
.betterseo-plan h3 {
  margin-top: 0;
  color: var(--bs-text);
}
.betterseo-plan > strong {
  display: block;
  margin: 10px 0 14px;
  color: var(--bs-blue);
  font-size: 30px;
}
.bs-home-content .bs-service-grid {
  max-width: var(--bs-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
}
.bs-home-structured .bs-service-card ul,
.bs-home-structured .betterseo-plan ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.bs-home-structured .bs-service-card li,
.bs-home-structured .betterseo-plan li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 24px;
  color: var(--bs-body);
  font-size: 15px;
}
.bs-home-structured .bs-service-card li::before,
.bs-home-structured .betterseo-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bs-lime);
  box-shadow: 0 0 0 3px rgba(7,164,243,.12);
}
.bs-home-hero-bullets {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255,255,255,.9);
  font-weight: 700;
}
.bs-home-hero-bullets li {
  position: relative;
  padding-left: 24px;
}
.bs-home-hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bs-lime);
}
.bs-home-table {
  max-width: 960px;
  margin: 0 auto;
  overflow-x: auto;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 47, 82, .08);
}
.comparison-table th,
.comparison-table td {
  padding: 16px;
  border-bottom: 1px solid var(--bs-border);
  text-align: left;
}
.comparison-table th {
  color: var(--bs-text);
  background: var(--bs-light);
  font-weight: 900;
}
.comparison-table tr:last-child td {
  border-bottom: 0;
}
.bs-home-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1080px) {
  .bs-nav { display: none; }
  .bs-hero-grid, .bs-split, .bs-proof { grid-template-columns: 1fr; }
  .bs-hero { min-height: auto; }
  .bs-hero-aside { max-width: 560px; }
  .bs-service-grid, .bs-feature-grid, .bs-media-grid, .bs-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-shot--large { grid-row: span 1; }
  .bs-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-home-hero-grid { grid-template-columns: 1fr; }
  .bs-home-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .betterseo-overviews,
  .bs-home-screenshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  body { font-size: 16px; }
  .bs-container { padding: 0 18px; }
  .bs-topbar { font-size: 11px; }
  .bs-topbar-inner, .bs-topbar-inner--3zone { grid-template-columns: 1fr; gap: 0; }
  .bs-topbar-zone--center, .bs-topbar-zone--right { display: none; }
  .bs-topbar-zone--left { justify-content: center; flex-wrap: nowrap; white-space: nowrap; }
  .bs-topbar-zone--left .bs-topbar-link { flex-wrap: nowrap; }
  .bs-topbar-rotor { flex-wrap: nowrap; gap: 4px; }
  .bs-header-inner { min-height: 70px; gap: 14px; }
  .bs-logo { font-size: 20px; }
  .bs-header-cta { display: none; }
  .bs-hero { padding: 58px 0 82px; }
  .bs-hero-grid, .bs-hero-copy, .bs-hero-aside, .bs-form-card { min-width: 0; }
  .bs-hero h1 { font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
  .bs-hero p { font-size: 17px; }
  .bs-hero-stats, .bs-trust-grid, .bs-service-grid, .bs-feature-grid, .bs-timeline, .bs-footer-grid, .bs-footer-cta-grid, .bs-media-grid, .bs-showcase-grid { grid-template-columns: 1fr; }
  .bs-hero-stat { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .bs-hero-stat:last-child { border-bottom: 0; }
  .bs-trust-grid div { border-right: 0; border-bottom: 1px solid var(--bs-border); }
  .bs-trust-grid div:last-child { border-bottom: 0; }
  .bs-form-card { padding: 26px 22px; }
  .bs-section { padding: 64px 0; }
  /* legacy joined-cells border removed in v1.34.1 - single column on phone */
  .bs-device-card { min-height: 380px; padding: 26px; }
  .bs-ai-grid { grid-template-columns: 1fr; }
  .bs-subfooter-inner { display: block; }
  .bs-subfooter-inner span { display: block; margin-bottom: 8px; }
  .bs-home-hero { padding: 56px 0; }
  .bs-home-structured,
  .bs-home-structured .bs-container,
  .bs-home-hero-grid,
  .bs-home-hero-copy,
  .bs-home-structured .bs-split,
  .bs-home-structured .bs-copy-block,
  .bs-home-structured .bs-stat-card,
  .bs-home-structured .bs-service-card,
  .bs-home-structured .betterseo-plan {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .bs-home-structured h1,
  .bs-home-structured h2,
  .bs-home-structured h3,
  .bs-home-structured p,
  .bs-home-structured a,
  .bs-home-structured li {
    width: min(100%, calc(100vw - 36px));
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .bs-home-hero h1 {
    font-size: 24px;
    line-height: 1.12;
  }
  .bs-home-hero-text,
  .bs-home-hero-text p {
    font-size: 16px;
    line-height: 1.65;
  }
  .bs-home-structured .bs-section-head h2,
  .bs-home-structured .bs-copy-block h2 {
    font-size: 24px;
    line-height: 1.16;
  }
  .bs-home-hero-panel { display: none; }
  .bs-home-pricing { grid-template-columns: 1fr; }
  .betterseo-overviews,
  .bs-home-screenshots { grid-template-columns: 1fr; }
  .bs-home-content .section-title { padding-top: 52px; }
}

/* === Coalition-style additions === */

/* Image-text 2-column section (alternating left/right image) */
.bs-imgtext { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bs-imgtext--reverse .bs-imgtext-copy { order: 2; }
.bs-imgtext--reverse .bs-imgtext-media { order: 1; }
.bs-imgtext-copy h2 { margin: 0 0 18px; color: var(--bs-text); font-family: var(--bs-font-display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; font-weight: 900; }
.bs-imgtext-copy h3 { margin: 0 0 14px; color: var(--bs-text); font-family: var(--bs-font-display); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.16; font-weight: 900; }
.bs-imgtext-copy p { margin: 0 0 16px; color: var(--bs-body); font-size: 17px; line-height: 1.7; }
.bs-imgtext-media {
  position: relative;
  min-height: 360px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7,164,243,.12), rgba(225,236,242,.65)),
    repeating-linear-gradient(45deg, rgba(7,164,243,.06) 0 12px, transparent 12px 24px);
  border: 1px dashed #9bb9c9;
  display: grid;
  place-items: center;
}
.bs-imgtext-media span { color: var(--bs-blue); font-family: var(--bs-font-body); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.bs-imgtext-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* Coalition-style blue trust band (replaces white on hero overlap) */
.bs-trust-band {
  background: var(--bs-blue);
  color: #fff;
  padding: 38px 0;
}
.bs-trust-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  align-items: center;
  text-align: center;
}
.bs-trust-band-grid div { padding: 8px 0; }
.bs-trust-band-grid strong { display: block; color: var(--bs-lime); font-size: 22px; line-height: 1.05; font-weight: 900; font-family: var(--bs-font-body); }
.bs-trust-band-grid span { display: block; margin-top: 6px; color: rgba(255,255,255,.85); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* 4-card "We Are The Best" row with stat */
.bs-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.bs-stat-card {
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 32px 26px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 47, 82, .07);
}
.bs-stat-card-num {
  display: block;
  margin: 0 0 12px;
  color: var(--bs-blue);
  font-family: var(--bs-font-body);
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
}
.bs-stat-card h3 { margin: 0 0 10px; color: var(--bs-text); font-family: var(--bs-font-display); font-size: 19px; line-height: 1.18; font-weight: 900; }
.bs-stat-card p { margin: 0; color: var(--bs-body); font-size: 14px; line-height: 1.55; }

/* Audit / checklist split */
.bs-audit { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bs-audit-list { columns: 2; column-gap: 28px; margin: 22px 0 0; padding: 0; list-style: none; }
.bs-audit-list li { break-inside: avoid; position: relative; margin: 0 0 12px; padding-left: 26px; color: var(--bs-body); font-weight: 600; font-size: 15px; line-height: 1.45; }
.bs-audit-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: var(--bs-blue); color: #fff;
  border-radius: 50%; font-size: 11px; font-weight: 900;
}

/* Testimonials grid */
.bs-testimonials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bs-testimonial {
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: 0 10px 28px rgba(0, 47, 82, .06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bs-testimonial-stars { color: var(--bs-lime); -webkit-text-stroke: 1px var(--bs-blue); font-size: 16px; letter-spacing: 2px; }
.bs-testimonial blockquote { margin: 0; padding: 0; color: var(--bs-body); font-size: 15px; line-height: 1.65; font-style: italic; }
.bs-testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bs-border); }
.bs-testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bs-light); display: grid; place-items: center; color: var(--bs-blue); font-weight: 900; font-size: 16px; }
.bs-testimonial-author strong { display: block; color: var(--bs-text); font-size: 14px; font-weight: 900; }
.bs-testimonial-author span { display: block; color: var(--bs-muted); font-size: 12px; font-weight: 700; }

/* Case study highlight card */
.bs-case-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--bs-shadow);
}
.bs-case-copy { padding: 48px 44px; }
.bs-case-copy .bs-kicker { color: var(--bs-blue); }
.bs-case-copy h3 { margin: 0 0 16px; color: var(--bs-text); font-family: var(--bs-font-display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; font-weight: 900; }
.bs-case-copy p { margin: 0 0 18px; color: var(--bs-body); font-size: 16px; line-height: 1.6; }
.bs-case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0 0; }
.bs-case-stats div strong { display: block; color: var(--bs-blue); font-family: var(--bs-font-body); font-size: 28px; line-height: 1; font-weight: 900; }
.bs-case-stats div span { display: block; margin-top: 6px; color: var(--bs-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.bs-case-media {
  background: linear-gradient(135deg, var(--bs-dark), var(--bs-blue));
  display: grid;
  place-items: center;
  color: #fff;
  min-height: 360px;
  position: relative;
}
.bs-case-media::before {
  content: "";
  position: absolute;
  inset: 32px;
  border: 2px dashed rgba(205,255,22,.4);
  border-radius: 8px;
}
.bs-case-media span { position: relative; color: var(--bs-lime); font-family: var(--bs-font-body); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }

/* Logo grid */
.bs-logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bs-logo-grid div {
  min-height: 96px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  color: var(--bs-muted);
  font-family: var(--bs-font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .02em;
  transition: transform .35s var(--bs-ease-spring), color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bs-logo-grid svg { width: 32px; height: 32px; opacity: .7; transition: opacity .25s ease, color .25s ease; }
.bs-logo-grid div:hover { color: var(--bs-blue); border-color: var(--bs-blue); }
.bs-logo-grid div:hover svg { opacity: 1; color: var(--bs-blue); }

/* 6-step extended timeline */
.bs-timeline--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .bs-imgtext, .bs-audit, .bs-case-card { grid-template-columns: 1fr; gap: 32px; }
  .bs-trust-band-grid { grid-template-columns: repeat(3, 1fr); }
  .bs-stat-row, .bs-testimonials { grid-template-columns: repeat(2, 1fr); }
  .bs-logo-grid { grid-template-columns: repeat(3, 1fr); }
  .bs-timeline--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-case-copy { padding: 36px 28px; }
  .bs-case-media { min-height: 240px; }
  .bs-imgtext--reverse .bs-imgtext-copy { order: 1; }
  .bs-imgtext--reverse .bs-imgtext-media { order: 2; }
}
@media (max-width: 720px) {
  /* v1.32: Smaller responsive headings (was: 34px / 28px on phone) */
  h1                     { font-size: 26px !important; line-height: 1.2 !important; }
  h2                     { font-size: 22px !important; line-height: 1.25 !important; }
  h3                     { font-size: 18px !important; }
  .bs-section-head h2,
  .bs-copy-block h2      { font-size: 24px !important; line-height: 1.2 !important; }
  .bs-imgtext-copy h2,
  .bs-imgtext-copy h3    { font-size: 22px; line-height: 1.2; }
  .bs-footer-cta h2      { font-size: 22px; line-height: 1.2; }

  /* Keep 2 columns on mobile where content fits */
  .bs-trust-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .bs-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bs-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bs-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bs-feature-grid div { padding: 18px 14px; }
  .bs-stat-card { padding: 20px 14px; }
  .bs-stat-card-num { font-size: 28px; }
  .bs-stat-card h3 { font-size: 14px; }
  .bs-stat-card p { font-size: 12px; }
  .bs-trust-band-grid strong { font-size: 16px; }
  .bs-trust-band-grid span { font-size: 10px; }
  .bs-logo-grid div { min-height: 80px; padding: 12px 6px; font-size: 10px; }
  .bs-logo-grid svg { width: 24px; height: 24px; }
  /* Single column for things that need full width on phone */
  .bs-testimonials { grid-template-columns: 1fr; }
  .bs-audit-list { columns: 1; }
  .bs-case-stats { grid-template-columns: 1fr 1fr; }
  .bs-case-copy { padding: 28px 22px; }
  /* Section padding tighter on phone */
  .bs-section { padding: 48px 0; }
  .bs-section-head { margin-bottom: 32px; }
  .bs-section-head p { font-size: 14px; }
  /* Hero responsive cleanup */
  .bs-hero { padding: 48px 0 64px; min-height: auto; }
  .bs-hero-grid { gap: 28px; }
  .bs-hero-copy p { font-size: 15px; }
  .bs-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bs-hero-stat { padding: 12px 8px 0 0; border-right: 1px solid rgba(255,255,255,.10); }
  .bs-hero-stat:nth-child(2n) { border-right: 0; }
  .bs-hero-stat strong { font-size: 22px; }
  /* Mega menu disabled on mobile (use simpler nav) */
  .bs-mega { display: none !important; }
  /* Image-text sections */
  .bs-imgtext-media, .bs-case-media { min-height: 220px; }
  .bs-imgtext-copy h2 { font-size: 22px; }
  .bs-imgtext-copy h3 { font-size: 18px; }
  .bs-imgtext-copy p { font-size: 14px; }
  /* Trust band tighter padding */
  .bs-trust-band { padding: 24px 0; }
  /* FAQ tighter */
  .bs-faq summary { font-size: 15px; }
  .bs-faq details { padding: 18px 20px; }
  /* Final CTA */
  .bs-final-cta .bs-form-card { padding: 22px 18px; }
  .bs-footer-cta h2 { font-size: 22px; }
}

@media (max-width: 460px) {
  /* Very small screens - drop to 1 col where 2 is too cramped */
  .bs-stat-row, .bs-feature-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   2026 OVERHAUL: Unbounded + modular scale + glass + spring
   =========================================================== */

/* Modular type rhythm - Unbounded is chunky, sizes tuned down */
.bs-section-head h2, .bs-copy-block h2,
.bs-imgtext-copy h2, .bs-case-copy h3,
.bs-footer-cta h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: 0; }
.bs-imgtext-copy h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 600; }
.bs-section-head p, .bs-copy-block p { font-size: var(--bs-fs-body); }
.bs-eyebrow, .bs-kicker { font-size: var(--bs-fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.bs-service-card h3, .bs-stat-card h3, .bs-imgtext-copy h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
small, .bs-trust-band-grid span, .bs-hero-stat span, .bs-trust-grid span, .bs-mini-media,
.bs-case-stats div span, .bs-stat-card-num + h3 + p { font-size: var(--bs-fs-caption); }
.bs-form-card h2 { font-size: 22px; font-weight: 700; }

/* Heading weights - Unbounded looks chunky at 900, tone down */
h1, h2, h3 { font-weight: 700; }
.bs-stat-card-num, .bs-hero-stat strong, .bs-trust-band-grid strong,
.bs-proof-box strong, .bs-case-stats strong { font-weight: 800; }

/* Section padding via 8pt scale - tighter rhythm */
.bs-section { padding: var(--bs-2xl) 0; }
.bs-section--narrative { padding-top: var(--bs-xl); }
.bs-section-head { margin-bottom: var(--bs-xl); }

/* === 60-30-10 discipline: lime ONLY on buttons + key accents === */
.bs-eyebrow { color: var(--bs-blue); }
.bs-eyebrow::before, .bs-kicker::before { background: var(--bs-blue); border-color: var(--bs-blue); }
.bs-section--blue .bs-eyebrow,
.bs-section--dark .bs-eyebrow,
.bs-hero .bs-eyebrow { color: var(--bs-lime) !important; }
.bs-section--blue .bs-eyebrow::before,
.bs-section--dark .bs-eyebrow::before,
.bs-hero .bs-eyebrow::before { background: var(--bs-lime); border-color: var(--bs-lime); }

/* === GLASSMORPHISM === */
.bs-glass {
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(7, 164, 243, .5);
  box-shadow: var(--bs-shadow-glass);
  border-radius: var(--bs-radius);
}
.bs-glass--blue {
  background: rgba(7, 164, 243, .35);
  border-color: rgba(7, 164, 243, .5);
}
.bs-glass--dark {
  background: rgba(7, 23, 37, .55);
  border-color: rgba(0, 166, 250, .35);
  color: #fff;
}

/* Hero form card → glass */
.bs-form-card--hero {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 8px 32px rgba(7, 164, 243, .25);
}

/* Mega menu - solid white, no opacity */
.bs-mega {
  background: #ffffff;
  border-radius: var(--bs-radius);
  box-shadow: 0 24px 60px rgba(0, 47, 82, .18);
}

/* FAQ panels → glass tint when open */
.bs-faq details[open] {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

/* === SPRING BUTTONS === */
/* Override earlier button rules with spring physics */
.bs-button, .bs-header-cta {
  transition: transform .35s var(--bs-ease-spring), box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
  border-radius: var(--bs-radius);
  position: relative;
  overflow: hidden;
}
.bs-button:hover, .bs-header-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 36px rgba(7, 164, 243, .32), 0 0 0 4px rgba(205, 255, 22, .18);
}
.bs-button:active, .bs-header-cta:active {
  transform: scale(.95);
  transition: transform .12s var(--bs-ease-out);
}
/* Subtitle glow on accent buttons */
.bs-button--accent:hover {
  box-shadow: 0 14px 36px rgba(205, 255, 22, .35), 0 0 30px rgba(205, 255, 22, .35);
}

/* Ripple effect on click */
.bs-button::after, .bs-header-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  width: 6px; height: 6px;
  top: var(--ry, 50%); left: var(--rx, 50%);
}
.bs-button.is-rippling::after, .bs-header-cta.is-rippling::after {
  animation: bs-ripple .65s var(--bs-ease-out);
}
@keyframes bs-ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: .6; }
  100% { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}

/* === SQUASH-AND-BOUNCE on card press === */
.bs-stat-card, .bs-testimonial, .bs-service-card { transition: transform .35s var(--bs-ease-spring), box-shadow .35s ease, border-color .25s ease; }
.bs-stat-card:active, .bs-testimonial:active, .bs-service-card:active { transform: scale(.98); transition-duration: .12s; }

/* === REAL ICONS in service cards (replace empty box) === */
.bs-service-card::before {
  display: none; /* hide the old empty box icon placeholder */
}
.bs-service-card .bs-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--bs-md);
  border-radius: var(--bs-radius);
  background: linear-gradient(135deg, var(--bs-light), #fff);
  color: var(--bs-blue);
  border: 1px solid var(--bs-border);
  transition: transform .35s var(--bs-ease-spring), background .25s ease, color .25s ease;
}
.bs-service-card:hover .bs-icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--bs-blue);
  color: var(--bs-lime);
}
.bs-icon svg { width: 28px; height: 28px; stroke-width: 2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Timeline numbered icon (steps) */
.bs-timeline .bs-service-card .bs-icon {
  background: var(--bs-blue);
  color: var(--bs-lime);
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: 22px;
}
.bs-timeline .bs-service-card .bs-icon::before { content: counter(bs-step, decimal-leading-zero); }
.bs-timeline { counter-reset: bs-step; }
.bs-timeline .bs-service-card { counter-increment: bs-step; }

/* === SVG MOCK MEDIA polish === */
.bs-imgtext-media, .bs-case-media { overflow: hidden; }
.bs-mock-svg { width: 100%; height: 100%; display: block; }
.bs-imgtext-media.bs-mock-dashboard,
.bs-imgtext-media.bs-mock-rankings {
  background: linear-gradient(135deg, #f4f9fc, #e1ecf2);
  border: 1px solid var(--bs-border);
  padding: 16px;
  min-height: 360px;
  display: grid;
  place-items: center;
}
.bs-imgtext-media.bs-mock-chat {
  background: linear-gradient(135deg, var(--bs-dark-2), var(--bs-dark));
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px;
  min-height: 360px;
  display: grid;
  place-items: center;
}
.bs-case-media.bs-mock-growth {
  background: linear-gradient(135deg, var(--bs-dark), var(--bs-blue));
  display: grid; place-items: center;
  min-height: 380px;
}
.bs-case-media.bs-mock-growth::before { display: none; }

/* Skeleton screen pattern (for future loading states) */
.bs-skeleton {
  background: linear-gradient(90deg, var(--bs-cream) 25%, var(--bs-light) 50%, var(--bs-cream) 75%);
  background-size: 200% 100%;
  animation: bs-skeleton 1.4s infinite ease-in-out;
  border-radius: var(--bs-radius);
}
@keyframes bs-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Form fields - modern feel */
.bs-field input, .bs-field textarea {
  border-radius: var(--bs-radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bs-field input:focus, .bs-field textarea:focus {
  outline: none;
  border-color: var(--bs-blue);
  box-shadow: 0 0 0 4px rgba(7, 164, 243, .12);
}

/* Anchor jump offset - account for sticky header.
 * Unconditional (не само при prefers-reduced-motion), за да работи #pricing,
 * #contact, #faq, #lessons и т.н. на всеки клик/permalink. */
.bs-section,
section[id],
[id^="section-"],
[id^="bs-"] {
  scroll-margin-top: 100px;
}
/* WP admin bar adds 32px (desktop) / 46px (mobile <782px). */
.admin-bar .bs-section,
.admin-bar section[id] {
  scroll-margin-top: 132px;
}
@media (max-width: 782px) {
  .admin-bar .bs-section,
  .admin-bar section[id] {
    scroll-margin-top: 146px;
  }
}

/* === BS-PROOF redesign with visual === */
.bs-proof--visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bs-xl);
  align-items: center;
}
.bs-proof-visual {
  border-radius: var(--bs-radius);
  overflow: hidden;
  min-height: 360px;
}
.bs-proof-list {
  list-style: none;
  margin: var(--bs-md) 0;
  padding: 0;
  display: grid;
  gap: var(--bs-sm);
}
.bs-proof-list li {
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,.85);
  font-size: 15px;
  line-height: 1.55;
}
.bs-proof-list li strong { color: var(--bs-lime); font-weight: 700; }
.bs-proof-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--bs-lime); color: var(--bs-dark);
  border-radius: 50%; font-size: 12px; font-weight: 800;
}

/* === STEP CARDS (timeline) - number + icon === */
.bs-step-card { position: relative; padding-top: 36px; }
.bs-step-num {
  position: absolute;
  top: -24px;
  left: 24px;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--bs-blue);
  color: var(--bs-lime);
  border-radius: var(--bs-radius);
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(7, 164, 243, .25);
}
.bs-step-num::before { content: counter(bs-step, decimal-leading-zero); }
.bs-step-card .bs-icon {
  width: 40px; height: 40px;
  margin-bottom: var(--bs-sm);
  background: var(--bs-cream);
  color: var(--bs-blue);
  border-radius: var(--bs-radius);
  border: 1px solid var(--bs-border);
}
.bs-step-card .bs-icon svg { width: 20px; height: 20px; }
.bs-step-card:hover .bs-step-num { transform: translateY(-3px); transition: transform .3s var(--bs-ease-spring); }

/* 4-card stat icons */
.bs-stat-card .bs-icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--bs-sm);
  background: linear-gradient(135deg, var(--bs-dark), var(--bs-blue));
  color: var(--bs-lime);
  border-radius: var(--bs-radius);
  display: grid; place-items: center;
  border: 0;
}
.bs-stat-card .bs-icon svg { width: 22px; height: 22px; }
.bs-stat-card:hover .bs-icon { transform: scale(1.08) rotate(-4deg); transition: transform .3s var(--bs-ease-spring); }

/* === Mobile responsive: tighten hero stats and feature grid === */
@media (max-width: 1080px) {
  .bs-proof--visual { grid-template-columns: 1fr; gap: 32px; }
  .bs-proof-visual { min-height: 280px; }
}
@media (max-width: 720px) {
  /* Hero stats - guaranteed 2x2 grid with proper sizing */
  .bs-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 24px;
    padding-top: 20px;
  }
  .bs-hero-stat {
    padding: 0 !important;
    border: 0 !important;
    background: rgba(255,255,255,.05);
    border-radius: 8px;
    padding: 14px 12px !important;
  }
  .bs-hero-stat strong { font-size: 22px; display: block; margin-bottom: 4px; }
  .bs-hero-stat span { font-size: 11px; }

  /* Feature grid - 2x3 grid with smaller cards */
  .bs-feature-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .bs-feature-grid div { padding: 14px 10px !important; min-height: auto; }
  .bs-feature-grid strong { font-size: 13px !important; line-height: 1.2; }
  .bs-feature-grid span { font-size: 11px !important; line-height: 1.4; margin-top: 6px; }
  .bs-feature-grid .bs-icon--inline { width: 32px !important; height: 32px !important; margin-bottom: 8px; }
  .bs-feature-grid .bs-icon--inline svg { width: 16px !important; height: 16px !important; }

  /* Stat row icons smaller */
  .bs-stat-card .bs-icon { width: 38px; height: 38px; margin-bottom: 8px; }
  .bs-stat-card .bs-icon svg { width: 18px; height: 18px; }

  /* Step cards mobile */
  .bs-step-num { width: 36px; height: 36px; font-size: 14px; top: -18px; left: 16px; }
  .bs-step-card { padding-top: 28px; }

  /* Proof list mobile */
  .bs-proof-list li { font-size: 13px; padding-left: 24px; }
  .bs-proof-list li::before { width: 16px; height: 16px; font-size: 10px; }

  /* Mega menu fixed positioning works on mobile too - but we hide it */
  .bs-mega { display: none !important; }
}

/* === Scroll progress bar === */
.bs-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--bs-blue), var(--bs-lime));
  z-index: 100;
  transition: width .15s linear;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0, 166, 250, .5);
}

/* === Hero animated dot grid === */
.bs-hero {
  position: relative;
}
.bs-hero::after {
  background:
    radial-gradient(circle, rgba(255,255,255,.06) 0.5px, transparent 2.5px) 0 0 / 32px 32px,
    rgba(225, 236, 242, .03);
  inset: 0;
  height: auto;
  opacity: .55;
  transform: none;
  z-index: 0;
  animation: bs-dotgrid 60s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 70%, transparent 100%);
}
@keyframes bs-dotgrid {
  0% { background-position: 0 0; }
  100% { background-position: 32px 32px; }
}
.bs-hero > * { position: relative; z-index: 2; }
.bs-hero > .bs-hero-fx { z-index: 0; }

/* === Hero stats refined === */
.bs-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--bs-lg);
  padding-top: var(--bs-md);
  border-top: 1px solid rgba(255,255,255,.18);
}
.bs-hero-stat {
  padding: var(--bs-sm) var(--bs-sm) 0 0;
  border-right: 1px solid rgba(255,255,255,.10);
}
.bs-hero-stat:last-child { border-right: 0; }
.bs-hero-stat strong { font-size: 28px; font-weight: 700; font-family: var(--bs-font-body); }
.bs-hero-stat span { font-size: 11px; }

/* === Section dividers (subtle SVG wave between major bg changes) === */
.bs-section + .bs-section--blue,
.bs-section + .bs-section--dark { position: relative; }

/* === Hero CTA spacing tighter === */
.bs-actions { margin: var(--bs-md) 0 var(--bs-md); }
.bs-button, .bs-header-cta {
  padding: 0 var(--bs-md);
  min-height: 46px;
  font-size: 14px;
  font-weight: 700;
}

/* Eyebrow spacing/size tighter */
.bs-eyebrow, .bs-kicker { margin-bottom: var(--bs-xs); }

/* Section-head paragraph tighter */
.bs-section-head p { font-size: 16px; max-width: 720px; margin: 0 auto; }
.bs-section-head { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }

/* === Refined service-card === */
.bs-service-card { padding: var(--bs-lg) var(--bs-md); border-radius: var(--bs-radius); }
.bs-service-card h3 { margin-bottom: var(--bs-xs); }

/* Refined feature-grid - looks like cards now, not gridlines */
.bs-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bs-md);
  border: 0;
  background: transparent;
}
.bs-feature-grid div {
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  background: #fff;
  padding: var(--bs-lg) var(--bs-md);
  min-height: auto;
  transition: transform .35s var(--bs-ease-spring), box-shadow .25s ease, border-color .25s ease;
}
.bs-feature-grid div:hover { transform: translateY(-3px); box-shadow: var(--bs-shadow-md); border-color: rgba(7,164,243,.4); }

/* Refined trust band */
.bs-trust-band { padding: var(--bs-lg) 0; }
.bs-trust-band-grid strong { font-size: 18px; }
.bs-trust-band-grid span { font-size: 11px; }

/* Stat card refined */
.bs-stat-card { padding: var(--bs-lg) var(--bs-md); }
.bs-stat-card-num { font-size: 36px; }

/* Better hero copy max width */
.bs-hero-copy p {
  font-size: 17px;
  line-height: 1.65;
  max-width: 620px;
  color: #fff;
  opacity: .92;
  margin: 14px 0 22px;
}
.bs-hero-copy--center p { margin-left: auto; margin-right: auto; }
.bs-hero-copy h1 { color: #fff; }
.bs-hero-copy .bs-eyebrow { color: var(--bs-lime, #cdff16); }
/* Light-bg hero variants (.bs-hero--light) opt back into dark text */
.bs-hero--light .bs-hero-copy p,
.bs-hero--light .bs-hero-copy h1 { color: #1d2327; }
.bs-hero--light .bs-hero-copy .bs-eyebrow { color: var(--bs-blue, #006aac); }

/* Footer cleanup - make it look more modern */
.bs-footer-cta h2 { font-size: clamp(24px, 2.8vw, 36px); }

/* ===========================================================
   CLEANUP PASS: readable UI, no duplicate counters, calmer media
   =========================================================== */

/* Header / mega menu: align below main nav (topbar default disabled). */
.bs-mega {
  top: 76px;
  transform: translate(-50%, 6px);
}
/* Когато topbar е активен (admin го е включил), смъкни mega menu още 38px. */
body.has-topbar .bs-mega {
  top: 114px;
}
.bs-mega::before {
  top: -8px;
  height: 8px;
}
.bs-nav-item.is-open > .bs-mega,
.bs-nav-item:hover > .bs-mega,
.bs-nav-item:focus-within > .bs-mega {
  transform: translate(-50%, 0);
}

/* Hero stats: remove the strange rule/border look. */
.bs-hero-stats {
  border: 0 !important;
  padding-top: 0 !important;
  gap: 12px !important;
}
.bs-hero-stat {
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--bs-radius);
  padding: 14px 14px 12px !important;
  background: rgba(255,255,255,.055);
}
.bs-hero-stat:last-child { border: 1px solid rgba(255,255,255,.14) !important; }

/* Color correctness on dark/blue backgrounds. */
.bs-section--blue,
.bs-section--dark,
.bs-footer-cta {
  color: rgba(255,255,255,.88);
}
.bs-section--blue .bs-copy-block h2,
.bs-section--blue .bs-section-head h2,
.bs-section--dark .bs-copy-block h2,
.bs-section--dark .bs-section-head h2,
.bs-footer-cta h2 {
  color: #fff;
}
.bs-section--blue .bs-copy-block p,
.bs-section--blue .bs-section-head p,
.bs-section--dark .bs-copy-block p,
.bs-section--dark .bs-section-head p {
  color: rgba(255,255,255,.86);
}
.bs-section--blue .bs-kicker,
.bs-section--blue .bs-eyebrow,
.bs-section--dark .bs-kicker,
.bs-section--dark .bs-eyebrow,
.bs-footer-cta .bs-kicker {
  color: var(--bs-lime);
}
.bs-section--blue .bs-kicker::before,
.bs-section--blue .bs-eyebrow::before,
.bs-section--dark .bs-kicker::before,
.bs-section--dark .bs-eyebrow::before,
.bs-footer-cta .bs-kicker::before {
  background: var(--bs-lime);
  border-color: var(--bs-lime);
}
.bs-proof-list li { color: rgba(255,255,255,.88); }
.bs-proof-list li strong { color: #fff; }

/* FAQ: keep it visibly present and readable. */
.bs-section--faq,
.bs-faq-wrap {
  background: var(--bs-ice);
}
.bs-faq {
  max-width: 900px;
}
.bs-faq details {
  background: #fff !important;
  border-color: var(--bs-border);
  box-shadow: var(--bs-shadow-sm);
}
.bs-faq details[open] {
  background: #fff !important;
}

/* Icon backgrounds: calmer and more accessible. */
.bs-stat-card .bs-icon,
.bs-service-card .bs-icon,
.bs-feature-grid .bs-icon--inline,
.bs-step-card .bs-icon {
  background: #fff !important;
  color: var(--bs-blue) !important;
  border: 1px solid var(--bs-border) !important;
  box-shadow: none !important;
}
.bs-stat-card:hover .bs-icon,
.bs-service-card:hover .bs-icon,
.bs-feature-grid div:hover .bs-icon--inline,
.bs-step-card:hover .bs-icon {
  background: var(--bs-light) !important;
  color: var(--bs-blue) !important;
  transform: translateY(-2px) !important;
}

/* Step cards: one visual language only. No floating duplicate numbers. */
.bs-step-num { display: none !important; }
.bs-step-card { padding-top: var(--bs-lg) !important; }
.bs-timeline {
  border-top: 0 !important;
  padding-top: 0 !important;
  gap: 18px !important;
}
.bs-timeline .bs-service-card .bs-icon::before { content: none !important; }
.bs-timeline .bs-service-card {
  counter-increment: bs-step;
}
.bs-timeline .bs-service-card h3::before {
  content: counter(bs-step, decimal-leading-zero) ". ";
  color: var(--bs-blue);
  font-weight: 800;
}

/* === BUTTON HOVER (canonical) ===
   Single source of truth - overrides the spring/ripple variants above.
   Goal: subtle lift, deeper shadow, color shift on the primary; clean accent. */
.bs-button,
.bs-header-cta {
  overflow: visible;
  transition:
    transform .25s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)),
    box-shadow .25s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
  will-change: transform;
}
.bs-button::after,
.bs-header-cta::after,
.bs-button::before,
.bs-header-cta::before {
  content: none !important;
  display: none !important;
}
.bs-button:hover,
.bs-header-cta:hover {
  transform: translateY(-3px);
  background-color: #004f80;
  border-color: #004f80;
  color: #fff;
  box-shadow: 0 14px 30px rgba(7, 164, 243, .28);
}
.bs-button:active,
.bs-header-cta:active {
  transform: translateY(-1px);
  transition-duration: .12s;
  box-shadow: 0 6px 14px rgba(7, 164, 243, .22);
}
.bs-button--accent {
  /* lime accent stays lime on hover, no blue swap */
}
.bs-button--accent:hover {
  background-color: #b8ed0f;
  border-color: #b8ed0f;
  color: var(--bs-text);
  box-shadow: 0 14px 30px rgba(205, 255, 22, .35);
}
.bs-button--ghost-dark:hover {
  background-color: rgba(255,255,255,.14);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.bs-button--ghost:hover {
  background-color: var(--bs-light);
  border-color: var(--bs-blue);
  color: var(--bs-blue);
  box-shadow: 0 10px 26px rgba(0, 47, 82, .12);
}
@media (prefers-reduced-motion: reduce) {
  .bs-button,
  .bs-header-cta { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
  .bs-button:hover,
  .bs-header-cta:hover,
  .bs-button:active,
  .bs-header-cta:active { transform: none; }
}

/* Replace confusing SVG chart visuals with simpler placeholder examples. */
.bs-case-media.bs-mock-growth,
.bs-proof-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px;
  background: linear-gradient(135deg, var(--bs-dark-2), var(--bs-blue));
}
.bs-imgtext-media { position: relative; }
.bs-case-media.bs-mock-growth .bs-mock-svg,
.bs-proof-visual .bs-mock-svg {
  display: none;
}
.bs-case-media.bs-mock-growth::after,
.bs-proof-visual::after {
  content: "Примерен отчет: заявки от органично търсене, позиции в Google, AI цитирания и реални продажби. Тук по-късно ще сложите ваш screenshot или видео.";
  max-width: 360px;
  padding: 26px;
  border: 1px dashed rgba(255,255,255,.45);
  border-radius: var(--bs-radius);
  color: #fff;
  background: rgba(255,255,255,.08);
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}
.bs-imgtext-media.bs-mock-dashboard .bs-mock-svg,
.bs-imgtext-media.bs-mock-rankings .bs-mock-svg,
.bs-imgtext-media.bs-mock-chat .bs-mock-svg {
  opacity: .18;
}
.bs-imgtext-media.bs-mock-dashboard::after,
.bs-imgtext-media.bs-mock-rankings::after,
.bs-imgtext-media.bs-mock-chat::after {
  content: "Тук поставете реален screenshot от Search Console, GA4, SEO одит или кратко видео.";
  position: absolute;
  inset: auto 28px 28px;
  padding: 18px;
  border-radius: var(--bs-radius);
  background: rgba(255,255,255,.92);
  color: var(--bs-text);
  font-weight: 700;
  line-height: 1.45;
  box-shadow: var(--bs-shadow-sm);
}
.bs-imgtext-media.bs-mock-chat::after {
  background: rgba(7,23,37,.84);
  color: #fff;
}

/* Footer accent text/link color on blue background. */
.bs-footer-cta .bs-kicker,
.bs-footer-cta a:not(.bs-button) {
  color: var(--bs-lime);
}
.bs-footer-cta .bs-button--accent {
  color: var(--bs-text);
}

.bs-landing .bs-hero-copy,
.bs-landing .bs-hero-copy h1,
.bs-landing .bs-hero-copy p,
.bs-landing .bs-hero-copy .bs-actions,
.bs-landing .bs-hero-copy .bs-hero-stats {
  filter: none !important;
  -webkit-filter: none !important;
}

@keyframes bs-hero-rise {
  from { opacity: 0; transform: translateY(22px); filter: none; }
  to { opacity: 1; transform: translateY(0); filter: none; }
}

/* Restore visual mockups: keep the sections, use the SVG examples, no "upload screenshot" overlays. */
.bs-case-media.bs-mock-growth,
.bs-proof-visual {
  padding: 0 !important;
}
.bs-case-media.bs-mock-growth .bs-mock-svg,
.bs-proof-visual .bs-mock-svg,
.bs-imgtext-media.bs-mock-dashboard .bs-mock-svg,
.bs-imgtext-media.bs-mock-rankings .bs-mock-svg,
.bs-imgtext-media.bs-mock-chat .bs-mock-svg {
  display: block !important;
  opacity: 1 !important;
}
.bs-case-media.bs-mock-growth::after,
.bs-proof-visual::after,
.bs-imgtext-media.bs-mock-dashboard::after,
.bs-imgtext-media.bs-mock-rankings::after,
.bs-imgtext-media.bs-mock-chat::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 720px) {
  .bs-mega { display: none !important; }
  .bs-hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .bs-hero-stat {
    padding: 12px !important;
  }
  .bs-timeline {
    grid-template-columns: 1fr !important;
  }
  .bs-imgtext-media.bs-mock-dashboard::after,
  .bs-imgtext-media.bs-mock-rankings::after,
  .bs-imgtext-media.bs-mock-chat::after {
    inset: auto 18px 18px;
    font-size: 13px;
  }
}

/* ==========================================================================
   WPBakery layout shortcodes -> proper grid for the homepage (post 300).
   Maps the original aldev.bg/seo/ vc_row / vc_column structure onto a
   responsive flex grid using fractional widths (1/2, 1/3, 1/4, 1/6, 5/12).
   ========================================================================== */

.bs-vc-section { padding: 56px 0; position: relative; }
.bs-vc-section.bg-grey { background: var(--bs-cream, #f3f6f9); }
.bs-vc-section.section-box { padding: 72px 0; }

.bs-vc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 28px;
  align-items: flex-start;
}
.bs-vc-row.vc_row-flex,
.bs-vc-row.align-items-center { align-items: center; }
.bs-vc-row:last-child { margin-bottom: 0; }

.bs-vc-col { flex: 1 1 100%; min-width: 0; }
.bs-vc-col--1-1 { flex-basis: 100%; }
.bs-vc-col--1-2 { flex-basis: calc(50% - 14px); }
.bs-vc-col--1-3 { flex-basis: calc(33.3333% - 19px); }
.bs-vc-col--2-3 { flex-basis: calc(66.6666% - 10px); }
.bs-vc-col--1-4 { flex-basis: calc(25% - 21px); }
.bs-vc-col--3-4 { flex-basis: calc(75% - 7px); }
.bs-vc-col--1-6 { flex-basis: calc(16.6666% - 24px); }
.bs-vc-col--5-12 { flex-basis: calc(41.6666% - 17px); }

@media (max-width: 900px) {
  .bs-vc-col--1-2,
  .bs-vc-col--1-3,
  .bs-vc-col--2-3,
  .bs-vc-col--1-4,
  .bs-vc-col--5-12 { flex-basis: 100%; }
  .bs-vc-col--1-6 { flex-basis: calc(50% - 14px); }
  .bs-vc-col--hide-mobile { display: none !important; }
}
@media (min-width: 901px) {
  .bs-vc-col--hide-desktop { display: none !important; }
}

.bs-vc-text { line-height: 1.7; color: var(--bs-body, #2c4051); }
.bs-vc-text > p:last-child { margin-bottom: 0; }
.bs-vc-text h3, .bs-vc-text h4, .bs-vc-text h5 { margin-top: 1.4em; }
.bs-vc-text ul { padding-left: 1.2em; }
.bs-vc-text ul li { margin-bottom: .5em; line-height: 1.6; }
.bs-vc-text ul li strong { color: var(--bs-text, #0c1f31); }

.bs-vc-spacer { display: block; }

/* === Section title (custom shortcode) === */
.section-title { text-align: center; max-width: 880px; margin: 0 auto 32px; }
.section-title h2 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--bs-text, #0c1f31);
  margin: 0 0 12px;
}
.section-title > div { color: var(--bs-body, #2c4051); font-size: 17px; line-height: 1.7; }
.section-title > div p:last-child { margin-bottom: 0; }
.section-title.color-white h2,
.section-title.color-white > div { color: #fff; }
.section-title.text-lg-start { text-align: left; }

/* === Banner text (hero) - 1:1 with aldev === */
.banner-text { padding: 16px 0; }
.banner-text h1 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.18;
  color: var(--bs-text, #0c1f31);
  margin: 0 0 14px;
}
.banner-text p { font-size: 17px; line-height: 1.65; color: var(--bs-body, #2c4051); margin: 0 0 14px; }

/* === Features (icon list inside aldev.bg's "SEO basic groups") === */
.features-item {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.features-item li { display: block; }
.feature-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 12px;
  padding: 16px 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-box:hover {
  transform: translateY(-2px);
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 14px 30px rgba(0, 47, 82, .08);
}
.feature-box .box-text { flex: 1; }
.feature-box h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--bs-text, #0c1f31);
  margin: 0 0 4px;
  line-height: 1.3;
}
.feature-box p { margin: 0; font-size: 14px; color: var(--bs-body, #2c4051); }
.feature-box p:empty { display: none; }

/* feature-grid - fixed 3 columns on desktop (responsive: 2 on tablet, 1 on phone) */
.bs-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) { .bs-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .bs-feature-grid { grid-template-columns: 1fr; } }
.bs-feature-grid > div {
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 12px;
  padding: 20px 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bs-feature-grid > div:hover {
  transform: translateY(-3px);
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 14px 30px rgba(0, 47, 82, .08);
}
.bs-feature-grid > div strong {
  display: block;
  font-weight: 800;
  font-size: 17px;
  color: var(--bs-text, #0c1f31);
  margin-bottom: 6px;
  letter-spacing: 0;
}
.bs-feature-grid > div p { margin: 0; font-size: 14px; color: var(--bs-body, #2c4051); }

/* === Service cards (📝 Технически анализи etc. with SVG icons) === */
.service-card {
  background: var(--bs-white, #ffffff);
  border: 0;
  box-shadow: 0 4px 16px rgba(0, 47, 82, .04);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--bs-blue);
  box-shadow: 0 12px 32px rgba(7, 164, 243, .18);
  background: var(--bs-ice);
}
.service-card .service-icon {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.service-card h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--bs-text, #0c1f31);
  margin-top: 20px;
  line-height: 1.3;
}
.service-card .service-body { font-size: 14px; color: var(--bs-body, #2c4051); margin-top: 4px; }
.service-card .service-body p:last-child { margin-bottom: 0; }

/* === Blog cards (latest 3 posts) === */
.bs-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.bs-blog-card {
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bs-blog-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 47, 82, .12); }
.bs-blog-card-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bs-cream, #f3f6f9); }
.bs-blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bs-blog-card:hover .bs-blog-card-thumb img { transform: scale(1.04); }
.bs-blog-card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.bs-blog-card-body h3 { font-family: 'Unbounded', system-ui, sans-serif; font-size: 17px; font-weight: 700; margin: 0; line-height: 1.35; }
.bs-blog-card-body h3 a { color: var(--bs-text, #0c1f31); text-decoration: none; }
.bs-blog-card-body h3 a:hover { color: var(--bs-blue, #006aac); }
.bs-blog-card-body p { margin: 0; font-size: 14px; color: var(--bs-body, #2c4051); line-height: 1.55; }

/* === Screenshots gallery (1:1 with aldev "results" section) === */
.bs-screenshots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.bs-screenshots .item {
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bs-screenshots .item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 47, 82, .1);
}
.bs-screenshots .item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
@media (min-width: 700px) {
  .bs-screenshots { grid-template-columns: 1fr; }
}

/* === Pricing plans (plan shortcode wrapper + cards) === */
.naxos-pricing,
.betterseo-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.naxos-plan,
.betterseo-plan {
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 16px;
  padding: 28px 24px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.naxos-plan:hover,
.betterseo-plan:hover {
  transform: translateY(-4px);
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 22px 50px rgba(0, 47, 82, .14);
}
.naxos-plan .bs-eyebrow,
.betterseo-plan .bs-eyebrow {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bs-lime, #cdff16);
  color: var(--bs-text, #0c1f31);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.naxos-plan h3,
.betterseo-plan h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--bs-text, #0c1f31);
}
.naxos-plan strong,
.betterseo-plan strong {
  display: block;
  font-size: 30px;
  font-weight: 900;
  color: var(--bs-blue, #006aac);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.naxos-plan > div,
.betterseo-plan > div { flex: 1; text-align: left; font-size: 14px; color: var(--bs-body, #2c4051); }
.naxos-plan ul,
.betterseo-plan ul { padding-left: 1.1em; margin: 0 0 18px; }
.naxos-plan ul li,
.betterseo-plan ul li { margin-bottom: 6px; line-height: 1.5; }
.naxos-plan p:last-child,
.betterseo-plan p:last-child { margin: 0; }
.naxos-plan p .bs-button,
.betterseo-plan p .bs-button { width: 100%; }

/* === Overviews (SEO tools we use) === */
.naxos-overviews,
.betterseo-overviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.naxos-overview,
.betterseo-overview {
  background: var(--bs-ice, #f4f9fc);
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 12px;
  padding: 18px 20px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.naxos-overview:hover,
.betterseo-overview:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 47, 82, .08); }
.naxos-overview h3,
.betterseo-overview h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--bs-blue, #006aac);
}
.naxos-overview p,
.betterseo-overview p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bs-body, #2c4051); }

/* === Single image figure === */
.bs-home-figure { margin: 40px auto 0; text-align: center; }
.bs-home-image { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 12px; box-shadow: none; }
.bs-home-figure figcaption {
  font-size: 16px !important;
  padding-top: 10px !important;
  color: var(--bs-muted, #667888);
  font-style: italic;
}
/* Hard rule: no box-shadow on inline images, SVG icons, figures inside content. */
.bs-home-original img,
.bs-home-original .bs-home-figure img,
.bs-home-original figure img,
.bs-home-original .service-icon,
.bs-home-original svg,
.bs-home-original .bs-screenshots .item img,
.bs-home-original .bs-vc-text img { box-shadow: none !important; }

/* === Screenshots gallery === */
.bs-home-screenshots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.bs-home-screenshots figure { margin: 0; }
.bs-home-screenshots img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 47, 82, .08);
  transition: transform .25s ease, box-shadow .25s ease;
  display: block;
}
.bs-home-screenshots img:hover { transform: scale(1.02); box-shadow: 0 18px 40px rgba(0, 47, 82, .15); }

/* === Hero (banner) - 1:1 with aldev, polished === */
.bs-home-original [data-pm-slice] { display: contents; }
#banner {
  padding: 80px 0 70px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(6,13,24,.93) 0%, rgba(10,22,38,.88) 55%, rgba(8,19,32,.93) 100%),
    url('../../uploads/2023/06/banner-background.webp') center/cover no-repeat;
}
#banner::before {
  content: "";
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(rgba(7,164,243,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,164,243,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 60% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 62% at 60% 45%, #000 35%, transparent 100%);
  animation: bs-hero-mesh 34s linear infinite;
  pointer-events: none;
  z-index: 0;
}
#banner > .bs-container { position: relative; z-index: 1; }
#banner .bs-vc-row { align-items: center; }
.banner-text { padding: 16px 0; animation: bs-fade-up .8s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)) both; }

/* === Image gallery (#results) - clean grid: 2 per row on desktop, 1 on mobile.
   No aspect-ratio (preserve native image proportions). Hover keeps a subtle
   highlight only - drag-slide / pinch-zoom / double-click-zoom all happen
   inside the JS lightbox when an image is clicked. */
#results .bs-screenshots,
.bs-screenshots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
}
.bs-screenshots .item {
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 14px;
  padding: 10px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bs-screenshots .item:hover {
  transform: translateY(-3px);
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 18px 40px rgba(0, 47, 82, .1);
}
.bs-screenshots .item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: zoom-in;
  transition: filter .25s ease;
  /* No aspect-ratio, no transform - keep the picture natural. */
}
.bs-screenshots .item:hover img { filter: brightness(1.02); }
@media (max-width: 700px) {
  #results .bs-screenshots,
  .bs-screenshots { grid-template-columns: 1fr; gap: 16px; }
}

/* (Old #lessons block removed - superseded by 2-col card layout below.) */

/* === Service SVG icons - theme-tinted via mask-image === */
.service-card .service-icon {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto 4px;
  /* Tint the silhouette of the SVG icons with our brand blue using a CSS filter */
  filter: brightness(0) saturate(100%) invert(33%) sepia(85%) saturate(1620%) hue-rotate(184deg) brightness(95%) contrast(101%);
  transition: transform .3s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)), filter .3s ease;
}
.service-card:hover .service-icon {
  /* Hover: gentle motion only, keep the icon in its rest tint. */
  transform: scale(1.08) rotate(-3deg);
}

/* === Scroll-triggered animations === */
@keyframes bs-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bs-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bs-scale-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.bs-home-original .section-title,
.bs-home-original .features-item,
.bs-home-original .bs-feature-grid,
.bs-home-original .bs-screenshots,
.bs-home-original .bs-blog-grid,
.bs-home-original .naxos-overviews,
.bs-home-original .betterseo-overviews,
.bs-home-original .aldev-why-section,
.bs-home-original .bs-pricing,
.bs-home-original video,
.bs-home-original iframe {
  animation: bs-fade-up .8s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .bs-home-original *,
  .bs-home-original *::before,
  .bs-home-original *::after { animation: none !important; transition: none !important; }
}

/* === Bullet list under hero - checkmark style (matches .bs-location-hero-bullets) === */
.bannerlist1 ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.bannerlist1 ul li {
  position: relative;
  padding: 4px 0 4px 30px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 1.55;
}
.bannerlist1 ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  background: var(--bs-lime, #a4c91a);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/></svg>") center/contain no-repeat;
  border-radius: 0;
}

/* === Inline videos (AI mode animation, etc.) === */
.bs-vc-text video,
.bs-home-original video {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 47, 82, .14);
}

/* === Centered text helper used by aldev === */
.bs-vc-text.center,
.bs-vc-text > .center { text-align: center; }

/* === Service grid (blog posts list at the bottom) === */
.bs-home-original .bs-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

/* === Adaptive spacing (banner empty space etc.) === */
.adaptive-space { display: block; }
@media (max-width: 700px) {
  .adaptive-space { height: 24px !important; }
}

/* === Iframes (SEMRUSH widget etc.) === */
.bs-vc-text iframe { max-width: 100%; display: block; margin: 0 auto; border: 0; border-radius: 12px; }

/* === Typography for restored aldev content === */
.bs-home-original h2 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--bs-text, #0c1f31);
  margin: 0 0 18px;
}
.bs-home-original h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 1.4em 0 .5em;
  color: var(--bs-text, #0c1f31);
}
.bs-home-original a { color: var(--bs-blue, #006aac); }
.bs-home-original a:hover { color: #004f80; }

/* === ML embed, signup, btn3 buttons used in aldev banner ===
   1:1 with our bs-button system: lime accent, brand spring transitions. */
.act-flex-container { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.act-column { display: flex; align-items: center; gap: 10px; }
.vc_btn3-container { display: inline-block; }
.vc_btn3,
a.vc_btn3,
a.vc_general.vc_btn3 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 2px solid var(--bs-lime, #cdff16) !important;
  background: var(--bs-lime, #cdff16) !important;
  color: var(--bs-text, #0c1f31) !important;
  border-radius: 6px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease;
  box-shadow: none !important;
}
.vc_btn3::before,
a.vc_btn3::before,
a.vc_general.vc_btn3::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transition: left .6s ease;
}
.vc_btn3:hover::before,
a.vc_btn3:hover::before,
a.vc_general.vc_btn3:hover::before {
  left: 100%;
}
a.vc_btn3:hover,
a.vc_general.vc_btn3:hover {
  background: #b8ed0f !important;
  border-color: #b8ed0f !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(7, 164, 243, .15) !important;
}
/* override the WPBakery sky/modern color modifier the original button has */
.vc_btn3-color-sky,
.vc_btn3-style-modern {
  background: var(--bs-lime, #cdff16) !important;
  color: var(--bs-text, #0c1f31) !important;
}

/* === Inherit landing section vibe on the homepage =====================
   Use the same dressed-up section system we ship on /seo-optimizatsia/.
   Sections alternate cream / white / soft-blue without each one needing
   its own modifier in content - we tag them by id. */
.bs-home-original .bs-vc-section { padding: 88px 0; position: relative; }
.bs-home-original .bs-vc-section + .bs-vc-section { padding-top: 88px; }
@media (max-width: 700px) { .bs-home-original .bs-vc-section { padding: 56px 0; } }

.bs-home-original #how-it-works {
  background: var(--bs-ice, #f4f9fc);
}
.bs-home-original #results {
  background: var(--bs-white, #ffffff);
}
.bs-home-original #lessons {
  background: var(--bs-cream, #f3f6f9);
}
.bs-home-original #overview {
  background: var(--bs-ice, #f4f9fc);
}
.bs-home-original #pricing {
  background: var(--bs-white, #ffffff);
}
.bs-home-original #subscribe {
  background: linear-gradient(135deg, var(--bs-dark-2, #0b2c45), var(--bs-blue, #006aac));
  color: #fff;
}
.bs-home-original #subscribe .section-title h2,
.bs-home-original #subscribe .section-title > div { color: #fff; }
.bs-home-original #subscribe .section-title > div { color: rgba(255,255,255,.85); }
.bs-home-original #blog { background: var(--bs-cream, #f3f6f9); }
.bs-home-original #seo-tools { background: #fff; }
.bs-home-original #contact { background: var(--bs-ice, #f4f9fc); }

/* Section title - match landing's bs-section-head treatment */
.bs-home-original .section-title {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 48px;
}
.bs-home-original .section-title h2 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.18;
  margin: 0 0 14px;
}
.bs-home-original .section-title > div {
  font-size: 17px;
  line-height: 1.7;
  color: var(--bs-body, #2c4051);
}
.bs-home-original .section-title.text-lg-start { text-align: left; }
.bs-home-original .section-title.text-lg-start h2 { font-size: clamp(24px, 2.6vw, 32px); }

/* === FUNNEL SVG color tint (object-style filters) =======================
   Force the SVG funnel to use brand blue + lime instead of its default
   green/orange. Two layers: hue-rotate + brightness for the dark elements,
   then a subtle drop-shadow for depth. */
img[src*="seo-google-organic-funnel"] {
  filter:
    hue-rotate(180deg)
    saturate(1.2)
    contrast(1.05)
    drop-shadow(0 18px 40px rgba(0, 47, 82, .15));
  transition: filter .35s ease;
  border-radius: 16px;
}
img[src*="seo-google-organic-funnel"]:hover {
  filter:
    hue-rotate(180deg)
    saturate(1.4)
    contrast(1.1)
    drop-shadow(0 28px 60px rgba(7, 164, 243, .25));
}

/* === Lessons section (id="lessons") - 2 columns of section-title cards =====
   Original aldev structure: vc_row > 2x vc_column[width=1/2] > section_title.
   The section_title shortcode emits <div class="section-title"><h2>...</h2><div>...content (ul of bullets)...</div></div>.
   We treat each section-title block as a card with a geo-optimization.jpg badge. */
#lessons .bs-vc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
@media (max-width: 900px) { #lessons .bs-vc-row { grid-template-columns: 1fr; } }
#lessons .bs-vc-col { display: flex; flex-direction: column; }

/* Each section-title within a col becomes a card */
#lessons .section-title {
  text-align: left;
  max-width: none;
  background: #fff;
  border: 0;
  border-radius: 14px;
  padding: 24px 28px 26px;
  margin: 0 0 22px;
  flex: 1;
  box-shadow: 0 6px 22px rgba(0, 47, 82, .05);
  transition: transform .25s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .25s ease, border-color .25s ease;
}
#lessons .section-title:last-child { margin-bottom: 0; }
#lessons .section-title:hover {
  transform: translateY(-3px);
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 18px 44px rgba(0, 47, 82, .1);
}

/* Title row - geo badge supplied by inline <img> in markup, no CSS pseudo-badge.
   (Dropping the ::before so cards that already have an inline img don't show
   two badges side by side.) */
#lessons .section-title h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -.005em;
  margin: 0 0 14px;
  padding: 0 0 12px 0;
  background: none;
  color: var(--bs-text, #0c1f31);
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid var(--bs-light, #e1ecf2);
  line-height: 1.25;
}
#lessons .section-title h2 img {
  width: 44px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: none !important;
}

/* Body content of section-title card */
#lessons .section-title > div {
  color: var(--bs-body, #2c4051);
  line-height: 1.65;
  font-size: 15px;
}
#lessons .section-title > div p:empty { display: none; }
#lessons .section-title > div p:last-child { margin-bottom: 0; }

/* Bullet list inside lessons cards */
#lessons .section-title ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
#lessons .section-title ul li {
  position: relative;
  padding: 7px 0 7px 30px;
  color: var(--bs-body, #2c4051);
  line-height: 1.55;
  font-size: 15px;
}
#lessons .section-title ul li:last-child { border-bottom: 0; }
#lessons .section-title ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  /* Match the user's accent (#07a4f3) used in .bs-check-list bullets. */
  background: #07a4f3;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

/* === Comparison table (Защо да ни изберете / Какво не правим) ============
   Was rendering with bad position because the inline <style> only handles
   desktop. Add proper mobile fallback + container alignment. */
.aldev-why-section { max-width: 1200px !important; margin: 0 auto !important; padding: 32px 0 0 !important; }
@media (max-width: 900px) {
  .aldev-why-container { grid-template-columns: 1fr !important; gap: 24px !important; }
  .aldev-why-section { padding: 24px 16px 0 !important; }
}
.comparison-table {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--bs-border, #d4e2ea);
  padding: 22px;
  box-shadow: 0 8px 26px rgba(0, 47, 82, .06);
}

/* === Service card icons - polish hover, theme-correct tint ==============
   The CSS filter math was off (the icon was matching brand blue but
   loosely). Re-tune to a precise match for #006aac and #cdff16 hover. */
.service-card .service-icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1846%) hue-rotate(186deg) brightness(95%) contrast(101%);
  transition: transform .35s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)), filter .3s ease;
}
.service-card:hover .service-icon {
  /* Hover: gentle motion only, keep the icon in its rest tint. */
  transform: scale(1.1) rotate(-4deg);
}
.service-card {
  border-radius: 16px;
  padding: 30px 24px 32px;
}
.service-card > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.service-card > a:hover h3 { color: var(--bs-blue, #006aac); }
.service-card h3 { font-size: 17px; margin: 20px 0px 10px 0px; }
.service-card p { margin: 0; font-size: 14px; color: var(--bs-muted, #586a78); }

#results > .bs-container { position: relative; z-index: 1; }

/* === Gallery - click-to-zoom with JS-driven lightbox =================== */
.bs-screenshots .item img {
  cursor: zoom-in;
  transition: transform .3s ease, filter .3s ease;
}
.bs-screenshots .item:hover img {
  transform: scale(1.02);
  filter: brightness(1.04);
}

.bs-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(7, 23, 37, .92);
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: bs-fade-in .25s ease;
}
.bs-lightbox.is-open { display: flex; }
.bs-lightbox-figure {
  max-width: min(94vw, 1200px);
  max-height: 88vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.bs-lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important;
  display: block;
  background: #fff;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .3s ease;
}
.bs-lightbox-figure img.is-zoomed {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
  transform: scale(2);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
.bs-lightbox-figure figcaption {
  display: block;
  max-width: min(900px, 92vw);
  margin: 18px auto 0;
  padding: 12px 20px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bs-lightbox-figure figcaption:empty {
  display: none;
}
.bs-lightbox-close,
.bs-lightbox-prev,
.bs-lightbox-next {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease, transform .2s ease;
  line-height: 1;
}
.bs-lightbox-close:hover,
.bs-lightbox-prev:hover,
.bs-lightbox-next:hover { background: var(--bs-lime, #cdff16); color: var(--bs-text, #0c1f31); transform: scale(1.05); }

/* Homepage hero eyebrow must override the inline legacy color in front-page.php. */
.bs-home-custom .bs-hero .bs-eyebrow {
  color: var(--bs-lime) !important;
}

.bs-home-custom .bs-hero .bs-eyebrow::before {
  background: var(--bs-lime) !important;
  border-color: var(--bs-lime) !important;
}
.bs-lightbox-close { top: 24px; right: 24px; }
.bs-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.bs-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.bs-lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.bs-lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
.bs-lightbox-counter {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-size: 13px;
  background: rgba(0,0,0,.4);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
}
@media (max-width: 700px) {
  .bs-lightbox-prev, .bs-lightbox-next { width: 40px; height: 40px; font-size: 22px; }
  .bs-lightbox-prev { left: 12px; }
  .bs-lightbox-next { right: 12px; }
  .bs-lightbox-close { top: 12px; right: 12px; }
}

/* === Pricing table polish - use landing card vibe ========================
   The bs-pricing-card cards ship inline CSS but our brand colors should
   override accent/buttons for visual consistency with /seo-optimizatsia/. */
.bs-pricing-card,
.bs-pricing .bs-pricing-card {
  border-radius: 18px !important;
  border: 1px solid var(--bs-border, #d4e2ea) !important;
  box-shadow: 0 6px 22px rgba(0, 47, 82, .06) !important;
  transition: transform .3s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .3s ease, border-color .3s ease !important;
}
.bs-pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--bs-blue, #006aac) !important;
  box-shadow: 0 28px 60px rgba(0, 47, 82, .14) !important;
}
.bs-pricing-card-popular,
.bs-pricing-card.bs-pricing-card-popular {
  border: 2px solid var(--bs-blue, #006aac) !important;
  box-shadow: 0 16px 44px rgba(7, 164, 243, .18) !important;
}
.bs-pricing-popular-badge {
  background: var(--bs-lime, #cdff16) !important;
  color: var(--bs-text, #0c1f31) !important;
  font-weight: 900;
  letter-spacing: .04em;
}
.bs-pricing-price,
.bs-pricing-display { color: var(--bs-blue, #006aac) !important; font-weight: 900; }
.bs-pricing-toggle-btn.active,
.bs-pricing-toggle-bg { background: var(--bs-blue, #006aac) !important; color: #fff !important; }
.bs-pricing-btn,
a.bs-pricing-btn {
  background: var(--bs-lime, #cdff16) !important;
  color: var(--bs-text, #0c1f31) !important;
  font-weight: 800;
  border: 2px solid var(--bs-lime, #cdff16) !important;
  border-radius: 8px !important;
  transition: transform .25s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .25s ease, background .2s ease;
}
a.bs-pricing-btn:hover {
  background: #b8ed0f !important;
  border-color: #b8ed0f !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(205, 255, 22, .35);
}
.bs-pricing-feature-list li::before { color: var(--bs-blue, #006aac) !important; }

/* === Pricing - supplementary structure (toggle pill, academy card,
   promo/coming-soon badges) - colours stay functional (not brand). */
.bs-pricing {
  /* No max-width / padding - .bs-container above already provides them.
     Removing duplicate padding (was: 0 20px) which made cards feel cramped. */
  margin: 0 auto;
  font-family: var(--bs-font-body, "Montserrat", -apple-system, "Segoe UI", system-ui, sans-serif);
}

/* Desktop: премахни inner container padding за pricing section-а - картите
   получават full bleed ширина (минус само section padding-top/bottom). Mobile
   override-ът на ред 4857 продължава да премахва същия padding. */
@media (min-width: 768px) {
  .bs-section:has(> .bs-container > .bs-pricing) > .bs-container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
}

/* Pricing row: default 3 колони */
.bs-pricing-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 30px;
}

/* Точно 2 карти → 2 колони */
.bs-pricing-row:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
  grid-template-columns: repeat(2, 1fr);
}

/* Точно 1 карта → 1 колона (ограничена ширина, центрирана) */
.bs-pricing-row:not(:has(> :nth-child(2))) {
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Tablet: максимум 2 колони */
@media (max-width: 1024px) {
  .bs-pricing-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .bs-pricing-row:not(:has(> :nth-child(2))) {
    grid-template-columns: 1fr;
  }
}

/* Mobile: винаги 1 колона */
@media (max-width: 768px) {
  .bs-pricing-row,
  .bs-pricing-row:has(> :nth-child(2)):not(:has(> :nth-child(3))),
  .bs-pricing-row:not(:has(> :nth-child(2))) {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

.bs-pricing-card {
  background: #ffffff;
  padding: 30px 25px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.bs-pricing-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--bs-blue, #006aac) !important;
  margin: 0 0 14px 0 !important;
  text-align: center !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  letter-spacing: .02em;
}
.bs-pricing-price {
  font-size: 28px !important;
  text-align: center !important;
  margin-bottom: 6px !important;
}
.bs-pricing-period {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-bottom: 14px;
}
.bs-pricing-desc {
  font-size: 14px;
  color: #555;
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.45;
}
.bs-pricing-included-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 18px 0 12px;
  border-bottom: 1px solid var(--bs-blue, #006aac);
  padding-bottom: 6px;
}
.bs-pricing-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
  flex: 1;
}
.bs-pricing-feature-list li {
  font-size: 13.5px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 8px;
  padding-left: 22px;
  position: relative;
}
.bs-pricing-feature-list li:before {
  content: '✓';
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}
.bs-pricing-btn,
a.bs-pricing-btn {
  text-decoration: none;
  padding: 12px 20px;
  font-size: 14px;
  text-align: center;
  display: block;
  border: 2px solid var(--bs-lime, #cdff16) !important;
  cursor: pointer;
  margin-top: auto;
}

/* Popular ribbon corner badge */
.bs-pricing-popular-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 8px 15px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 0 18px 0 12px;
}

/* Academy card variant (muted, "coming soon") */
.bs-pricing-card-academy {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
}
.bs-pricing-card-academy .bs-pricing-name {
  color: #495057 !important;
}
.bs-pricing-card-academy .bs-pricing-price {
  color: #6c757d !important;
  font-size: 24px !important;
}
.bs-pricing-coming-soon-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: #ffc107;
  color: #212529;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 0 18px 0 12px;
}

/* Toggle (1 месец / 6 месеца) - rounded pill with sliding bg */
.bs-pricing-toggle {
  display: flex;
  justify-content: center;
  margin: 28px 0 36px;
}
.bs-pricing-toggle-buttons {
  position: relative;
  background: #f1f4f7;
  border-radius: 50px;
  padding: 4px;
  display: flex;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .08);
}
.bs-pricing-toggle-btn {
  position: relative;
  background: transparent;
  border: 0;
  padding: 11px 22px;
  margin: 0;
  border-radius: 46px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: color .25s ease;
  z-index: 2;
  min-width: 130px;
}
.bs-pricing-toggle-bg {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 42px;
  transition: transform .3s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1));
  z-index: 1;
}
.bs-pricing-toggle-buttons.yearly .bs-pricing-toggle-bg { transform: translateX(100%); }

/* Promo badge (-10% promo) sitting above the yearly toggle */
.bs-pricing-promo-badge {
  position: absolute;
  top: -22px;
  right: -8px;
  background: #ff4757;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 2px 6px rgba(255, 71, 87, .35);
}
.bs-pricing-eur {
  font-size: 18px;
  color: #666;
  font-weight: 400;
}


/* === Subscribe section (newsletter CTA) === */
.bs-section--subscribe {
  background: var(--bs-dark, #0c1f31);
  background-image: url('https://betterseo.bg/wp-content/uploads/2023/06/1669697770_3-45.webp?id=319');
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 100px 0;
  color: #fff;
}
.bs-section--subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 31, 49, .82);
  z-index: 0;
}
.bs-section--subscribe > * { position: relative; z-index: 1; }
.bs-section--subscribe h2 { color: #fff; }
.bs-section--subscribe p { color: rgba(255,255,255,.85); }

/* === SEO Tools grid (2-col list like original aldev) === */
.bs-seo-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px;
}
.bs-seo-tools-grid > div {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border-bottom: 1px solid var(--bs-border);
}
.bs-seo-tools-grid > div strong {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}
.bs-seo-tools-grid > div strong a {
  color: var(--bs-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bs-seo-tools-grid > div strong a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bs-blue);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}
.bs-seo-tools-grid > div strong a:hover {
  color: var(--bs-blue);
}
.bs-seo-tools-grid > div > span {
  font-size: 15px;
  color: var(--bs-body);
}
@media (max-width: 768px) {
  .bs-seo-tools-grid { grid-template-columns: 1fr; }
}

/* === Video 16:9 wrapper === */
.bs-video-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--bs-shadow-md);
}
.bs-video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
}

/* === Screenshots full-width grid === */
.bs-screenshots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.bs-screenshots .item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--bs-shadow-sm);
}
.bs-screenshots .item img {
  width: 100%;
  display: block;
  border-radius: 12px;
  cursor: zoom-in;
  transition: transform .3s ease;
  object-fit: contain;
}

/* SVG funnel: no fill override */
img[src*="seo-google-organic-funnel"] {
  filter: none !important;
}
.bs-screenshots .item img:hover {
  transform: scale(1.02);
}

/* === Comparison table full-width === */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--bs-shadow-sm);
}
.comparison-table th {
  background: var(--bs-blue);
  color: #fff;
  padding: 16px;
  text-align: left;
  font-weight: 700;
}
.comparison-table td {
  padding: 16px;
  border-bottom: 1px solid var(--bs-border);
}
.comparison-table tr:last-child td { border-bottom: none; }

/* === Service cards: 3 per row on desktop === */
@media (max-width: 768px) {
  .bs-service-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .bs-service-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* === Feature grid: remove SVG icon when emoji present === */
.bs-feature-grid > div .bs-icon--inline { display: none; }

/* ==========================================================================
   Contact Form 7 - themed to match BetterSEO (lime accent button, blue focus,
   rounded inputs, soft shadows). Targets the default CF7 markup so any form
   on the site (homepage hero, sub-pages) inherits the same look.
   ========================================================================== */

.wpcf7,
.wpcf7-form { font-family: var(--bs-font-body); }

/* H2 в CF7 контекст (form card title или wrap-нат от админ) - винаги 22px */
.wpcf7 h2,
.bs-form-card h2,
.bs-pb-hero .bs-form-card h2,
.bs-form-card--hero h2 { font-size: 22px !important; line-height: 1.22; }

/* Field rows + labels */
.wpcf7-form p,
.wpcf7-form .bs-field { margin: 0 0 16px; }
.wpcf7-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-text, #0c1f31);
  margin-bottom: 6px;
  letter-spacing: .005em;
}

/* Inputs / textarea / select base */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="search"],
.wpcf7-form input[type="password"],
.wpcf7-form select,
.wpcf7-form textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--bs-border, #d4e2ea);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--bs-text, #0c1f31);
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
}
.wpcf7-form textarea { min-height: 120px; resize: vertical; }
.wpcf7-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23006aac' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--bs-muted, #667888); opacity: .9; }
.wpcf7-form input:hover,
.wpcf7-form textarea:hover,
.wpcf7-form select:hover { border-color: var(--bs-blue, #006aac); }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 0 0 4px rgba(0, 106, 172, .12);
  background: #fff;
}

/* Acceptance / radio / checkbox */
.wpcf7-form .wpcf7-list-item { display: inline-flex; align-items: center; margin: 0 16px 8px 0; }
.wpcf7-form .wpcf7-list-item-label { font-size: 14px; color: var(--bs-body, #2c4051); }
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  margin-top: 20px !important;
  border: 1.5px solid var(--bs-border, #d4e2ea);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.wpcf7-submit.btn {
  margin-top: 20px;
}
.wpcf7-form input[type="checkbox"] { border-radius: 4px; }
.wpcf7-form input[type="radio"]   { border-radius: 50%; }
.wpcf7-form input[type="checkbox"]:checked,
.wpcf7-form input[type="radio"]:checked {
  background: var(--bs-blue, #006aac);
  border-color: var(--bs-blue, #006aac);
}
.wpcf7-form input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  line-height: 14px;
}

/* Submit button - solid brand blue (matches the .bs-button primary look,
   which reads better than lime on light form backgrounds). */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type="submit"],
.wpcf7-form input[type="submit"].btn,
.wpcf7-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 26px;
  border: 2px solid var(--bs-blue, #006aac) !important;
  background: var(--bs-blue, #006aac) !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform .25s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)),
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .25s ease;
  box-shadow: 0 8px 22px rgba(0, 106, 172, .25);
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"].btn:hover,
.wpcf7-form button[type="submit"]:hover {
  background: var(--bs-lime, #cdff16) !important;
  border-color: var(--bs-lime, #cdff16) !important;
  color: var(--bs-text, #0c1f31) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(205, 255, 22, .35);
}
.wpcf7-form .wpcf7-submit:active,
.wpcf7-form input[type="submit"]:active,
.wpcf7-form button[type="submit"]:active { transform: translateY(0); }

/* Disabled / sending state */
.wpcf7-form .wpcf7-submit[disabled] { opacity: .55; cursor: wait; transform: none; box-shadow: none; }

/* Spinner during AJAX submit - hidden by default (CF7 reserves a 24×24
   inline-block by default which leaves a blank rectangle next to the button).
   Show only while the form is actually submitting. */
.wpcf7-spinner {
  display: inline-block !important;
  width: 0;
  height: 0;
  margin: 0;
  border: 0;
  vertical-align: middle;
  visibility: hidden;
  transition: width .15s ease, height .15s ease, margin .15s ease;
}
.wpcf7 form.submitting .wpcf7-spinner {
  visibility: visible;
  width: 18px;
  height: 18px;
  margin-left: 10px;
  border: 2px solid rgba(0, 106, 172, .2);
  border-top-color: var(--bs-blue, #006aac);
  border-radius: 50%;
  animation: bs-spin .7s linear infinite;
}
@keyframes bs-spin { to { transform: rotate(360deg); } }

/* Field-level validation errors */
.wpcf7 .wpcf7-not-valid {
  border-color: #e54848 !important;
  background: rgba(229, 72, 72, .03) !important;
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #c0392b;
  font-size: 12.5px;
  font-weight: 600;
}

/* Form-level response (success / failure) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  border-width: 1.5px;
  border-style: solid;
  font-size: 14px;
  line-height: 1.5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  background: rgba(229, 72, 72, .06);
  border-color: #e54848;
  color: #c0392b;
}
.wpcf7 form.sent .wpcf7-response-output {
  background: rgba(0, 162, 124, .08);
  border-color: #00a27c;
  color: #00805f;
}

/* Inside our hero-form card the inputs sit on a darker bg already - tweak so
   they read clean. */
.bs-form-card .wpcf7-form input,
.bs-form-card .wpcf7-form textarea,
.bs-form-card .wpcf7-form select { background: #fff; }

/* Client login placeholder */
.bs-login-hero { overflow: hidden; }
.bs-login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, .72fr);
  gap: 48px;
  align-items: center;
}
.bs-login-card {
  background: #fff;
  border: 1px solid rgba(12,31,49,.12);
  border-radius: 8px;
  box-shadow: var(--bs-shadow-lg);
  padding: 30px;
}
.bs-login-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(12,31,49,.1);
}
.bs-login-card-head strong,
.bs-login-card-head span { display: block; }
.bs-login-card-head strong { color: var(--bs-text); font-size: 18px; line-height: 1.2; }
.bs-login-card-head span { margin-top: 4px; color: var(--bs-muted); font-size: 14px; }
.bs-login-form { display: grid; gap: 16px; }
.bs-login-form label { display: grid; gap: 7px; color: var(--bs-text); font-weight: 700; }
.bs-login-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(12,31,49,.16);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--bs-muted);
  background: #f5f8fb;
}
.bs-login-form button[disabled] {
  opacity: .62;
  cursor: not-allowed;
}
.bs-login-form p {
  margin: 0;
  color: var(--bs-muted);
  font-size: 13px;
  line-height: 1.45;
}
.bs-login-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bs-login-feature-grid > div {
  min-height: 150px;
  padding: 24px;
  border: 1px solid rgba(12,31,49,.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--bs-shadow-sm);
}
.bs-login-feature-grid strong {
  display: block;
  color: var(--bs-text);
  font-size: 18px;
  line-height: 1.25;
}
.bs-login-feature-grid span {
  display: block;
  margin-top: 10px;
  color: var(--bs-body);
  font-size: 14px;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .bs-login-grid,
  .bs-login-feature-grid { grid-template-columns: 1fr; }
  .bs-login-card { padding: 24px; }
}

/* Subscribe section (dark gradient bg) - invert the form colours */
#subscribe .wpcf7-form input,
#subscribe .wpcf7-form textarea,
#subscribe .wpcf7-form select {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}
#subscribe .wpcf7-form input::placeholder,
#subscribe .wpcf7-form textarea::placeholder { color: rgba(255, 255, 255, .55); }
#subscribe .wpcf7-form input:focus,
#subscribe .wpcf7-form textarea:focus {
  border-color: var(--bs-lime, #cdff16);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 4px rgba(205, 255, 22, .18);
}
#subscribe .wpcf7-form label { color: #fff; }

/* ==========================================================================
   v1.4.6 polish pass - addresses items 4-16 from the latest review.
   ========================================================================== */

/* (4) Lessons cards - auto-show geo-optimization.jpg badge as ::before, but
       suppress it on cards that already include an inline <img> in the h2
       (so we never get a duplicate badge). */
#lessons .section-title h2 { position: relative; }
#lessons .section-title h2::before {
  content: "";
  display: inline-block;
  width: 44px;
  height: 32px;
  flex: 0 0 auto;
  background-image: url('../../uploads/2025/01/geo-optimization.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  vertical-align: middle;
}
#lessons .section-title h2:has(img)::before { display: none; }

/* (5) bs-check-list weight 400 + tighter row spacing inside lessons cards. */
.bs-check-list li { font-weight: 400; }
#lessons .section-title ul.bs-check-list,
#lessons .section-title ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
#lessons .section-title ul.bs-check-list li,
#lessons .section-title ul li {
  padding: 4px 0 4px 24px;
  border-bottom: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
}
#lessons .section-title ul.bs-check-list li::before,
#lessons .section-title ul li::before {
  width: 9px;
  height: 9px;
  top: .55em;
  left: 0;
  margin-top: 6px;
  border-radius: 50%;
  background: #07a4f3;
  color: transparent; /* drop the ✓ glyph for the dense list */
  content: "";
  font-size: 0;
  display: block;
}

/* (6) Service-card hover - no bg/ice fill, just the lift + border. */
.service-card { background: #fff; }
.service-card:hover { background: #fff !important; }

/* (7) Pricing - price uses brand text color (not blue/lime). */
.bs-pricing-price,
.bs-pricing-display,
.bs-pricing-card .bs-pricing-price,
.bs-pricing-card .bs-pricing-display { color: var(--bs-text, #0c1f31) !important; }

/* (8a) Plan name - extra top margin so popular badges don't crowd it. */
.bs-pricing-name,
.bs-pricing-card .bs-pricing-name { margin-top: 25px !important; }

/* (9) Pricing buttons - match .bs-button--accent system but tuned for
       white card backgrounds: solid blue fill is the readable answer
       on white; lime is reserved for hero / dark backgrounds. */
.bs-pricing-btn,
a.bs-pricing-btn,
.bs-pricing-card .bs-pricing-btn,
a.bs-pricing-btn {
  display: block !important;
  width: 100%;
  text-align: center;
  margin-top: auto;
  padding: 14px 22px !important;
  border-radius: 10px !important;
  background: var(--bs-blue, #006aac) !important;
  color: #fff !important;
  border: 2px solid var(--bs-blue, #006aac) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition:
    transform .25s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)),
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .25s ease !important;
  box-shadow: 0 8px 22px rgba(0, 106, 172, .25) !important;
}
.bs-pricing-btn:hover,
a.bs-pricing-btn:hover,
.bs-pricing-card .bs-pricing-btn:hover {
  background: var(--bs-lime, #cdff16) !important;
  color: var(--bs-text, #0c1f31) !important;
  border-color: var(--bs-lime, #cdff16) !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(205, 255, 22, .35) !important;
}

/* (10) Symmetric bs-split - equal columns. */
.bs-split { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 900px) { .bs-split { grid-template-columns: 1fr !important; } }

/* (12) Feature grid items - much richer than the bare "icon + label + span". */
.bs-feature-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 16px;
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  transition:
    transform .35s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)),
    border-color .25s ease,
    box-shadow .25s ease;
}
.bs-feature-grid > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 106, 172, 0) 0%, rgba(7, 164, 243, 0) 100%);
  transition: background .3s ease;
  z-index: 0;
}
.bs-feature-grid > div:hover {
  transform: translateY(-4px);
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 22px 50px rgba(0, 47, 82, .12);
}
.bs-feature-grid > div:hover::before {
  background: linear-gradient(135deg, rgba(0, 106, 172, .04) 0%, rgba(205, 255, 22, .06) 100%);
}
.bs-feature-grid > div > * { position: relative; z-index: 1; }
.bs-feature-grid > div .bs-icon--inline {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(7, 164, 243, .12), rgba(0, 106, 172, .08));
  border-radius: 12px;
  color: var(--bs-blue, #006aac);
  flex: 0 0 auto;
  transition: transform .35s var(--bs-ease-spring, cubic-bezier(.34,1.56,.64,1)), background .25s ease;
}
.bs-feature-grid > div .bs-icon--inline svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bs-feature-grid > div:hover .bs-icon--inline {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, var(--bs-blue, #006aac), #07a4f3);
  color: var(--bs-lime, #cdff16);
}
.bs-feature-grid > div strong {
  display: block;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--bs-text, #0c1f31);
  letter-spacing: -.005em;
  line-height: 1.3;
}
.bs-feature-grid > div span:not(.bs-icon--inline) {
  display: block;
  font-size: 14.5px;
  color: var(--bs-body, #2c4051);
  line-height: 1.55;
}

/* (14) imgtext-media - strip the chrome (no bg/border/min-height); used by
        the "AI Mode" videos which must read as raw players. */
.bs-home-original .bs-imgtext-media,
.bs-imgtext-media.bs-imgtext-media--bare {
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
  padding: 0;
}
.bs-imgtext-media .bs-video-wrapper {
  margin: 0 auto;
  background: transparent;
}

/* (14) Stack the AI section vertically - title+text full width, then video. */
.bs-imgtext.bs-imgtext--stack {
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}
.bs-imgtext.bs-imgtext--stack .bs-imgtext-copy {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.bs-imgtext.bs-imgtext--stack .bs-imgtext-media {
  max-width: 100%;
  margin: 0 auto;
}
.bs-imgtext.bs-imgtext--stack .bs-imgtext-media video,
.bs-imgtext.bs-imgtext--stack .bs-imgtext-media iframe {
  display: block;
  width: 100%;
  border-radius: 14px;
}

/* (15) .bounce-effect - soft, slow floating loop (chatgpt-chatbot image etc.) */
.bounce-effect {
  display: block;
  margin-left: auto;
  margin-right: auto;
  animation: bs-float 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes bs-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .bounce-effect { animation: none; } }

/* (16) Subscribe section background - relevant theme gradient, not a noisy
        rainbow. Using the dark navy + brand blue gradient. */
.bs-section--subscribe,
.bs-home-original #subscribe {
  background: linear-gradient(135deg, var(--bs-dark-2, #0b2c45) 0%, var(--bs-blue, #006aac) 100%) !important;
  position: relative;
  color: #fff;
  overflow: hidden;
}
.bs-section--subscribe::before,
.bs-home-original #subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(205, 255, 22, .12) 0, transparent 35%),
    radial-gradient(circle at 88% 80%, rgba(7, 164, 243, .25) 0, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.bs-section--subscribe > .bs-container,
.bs-home-original #subscribe > .bs-container { position: relative; z-index: 1; }

/* Anchor list helper used by JS (#17) - link name + grey description below */
.bs-check-list li .bs-link-desc {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--bs-muted, #667888);
  line-height: 1.5;
}
.bs-check-list li a {
  font-weight: 700;
  text-decoration: none;
  color: var(--bs-blue, #006aac);
  transition: color .2s ease;
}
.bs-check-list li a:hover { color: #07a4f3; text-decoration: underline; }

/* ==========================================================================
   v1.4.7 - mobile responsiveness pass + table + chatbot fixes.
   ========================================================================== */

/* (2) Comparison table - horizontal scroll on small viewports + clean styling */
.table-container,
.bs-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--bs-border, #d4e2ea);
  background: #fff;
  box-shadow: 0 6px 22px rgba(0, 47, 82, .05);
  margin: 0 0 24px;
}
.comparison-table,
.bs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 600px;
}
.comparison-table thead th,
.bs-table thead th {
  background: linear-gradient(135deg, var(--bs-blue, #006aac), #07a4f3);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 14px 16px;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.comparison-table tbody td,
.bs-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid var(--bs-border, #d4e2ea);
  color: var(--bs-body, #2c4051);
  vertical-align: top;
  line-height: 1.55;
}
.comparison-table tbody tr:nth-child(even) td,
.bs-table tbody tr:nth-child(even) td { background: var(--bs-ice, #f4f9fc); }
.comparison-table tbody tr:hover td,
.bs-table tbody tr:hover td { background: rgba(7, 164, 243, .04); }

/* <code> елементи в .bs-table получават monospace style + цветово маркиране
   на „проблем (#1)" vs „решение (#2)" колоните. Третата колона остава неутрална. */
.bs-table code {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
}
.bs-table tbody td:nth-child(1) code {
  background: rgba(220, 38, 38, .08);
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, .15);
}
.bs-table tbody td:nth-child(2) code {
  background: rgba(7, 164, 243, .1);
  color: var(--bs-blue, #006aac);
  border: 1px solid rgba(7, 164, 243, .2);
  margin-bottom: 4px;
}
.bs-table tbody td:nth-child(2) code:last-child { margin-bottom: 0; }
.bs-table tbody td:nth-child(2) br { line-height: 8px; }

/* ─── .bs-table responsive - mobile stacks rows като карти ─────── */

/* Tablet - намалена типография, по-стегнато padding, но table layout остава */
@media (max-width: 980px) {
  .bs-table { font-size: 14px; min-width: 540px; }
  .bs-table thead th { padding: 12px 14px; font-size: 12px; }
  .bs-table tbody td { padding: 12px 14px; }
  .bs-table code { font-size: 12.5px; padding: 3px 7px; }
}

/* Mobile - thead hidden, rows стават отделни cards с vertical stack */
@media (max-width: 640px) {
  .bs-table-wrap {
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    border-radius: 0;
  }
  .bs-table {
    min-width: 0;
    width: 100%;
    font-size: 14px;
    display: block;
  }
  .bs-table thead { display: none; }
  .bs-table tbody { display: block; }
  .bs-table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid var(--bs-border, #d4e2ea);
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(0, 47, 82, .05);
  }
  .bs-table tbody tr:nth-child(even) td,
  .bs-table tbody tr:hover td { background: transparent; }
  .bs-table tbody td {
    display: block;
    padding: 10px 0;
    border-top: none;
    border-bottom: 1px solid #f0f4f7;
    line-height: 1.5;
  }
  .bs-table tbody td:first-child { padding-top: 0; }
  .bs-table tbody td:last-child {
    border-bottom: none;
    padding-bottom: 0;
    color: var(--bs-muted, #667888);
    font-size: 13.5px;
    font-style: italic;
  }
  .bs-table code {
    display: block;
    margin: 0 0 6px;
    word-break: break-all;
    font-size: 12.5px;
  }
  .bs-table tbody td:nth-child(2) code { margin: 0 0 6px; }
  .bs-table tbody td:nth-child(2) code:last-child { margin-bottom: 0; }
  /* Малки visual cues с emoji-style icons за разпознаване на типа */
  .bs-table tbody td:nth-child(1)::before {
    content: "✕";
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #991b1b;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    margin-right: 8px;
    margin-bottom: 6px;
    vertical-align: top;
  }
  .bs-table tbody td:nth-child(2)::before {
    content: "✓";
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: var(--bs-blue, #006aac);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
    margin-bottom: 6px;
    vertical-align: top;
  }
}

/* (3) bs-check-list - word-wrap and mobile spacing */
.bs-check-list li { word-wrap: break-word; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .bs-check-list { margin-top: 16px; padding-left: 0; }
  .bs-check-list li { padding-left: 22px; margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }
  .bs-check-list li::before { left: 4px; }
}

/* (4) chatbot-chatgpt bounce image - constrain on mobile */
.bounce-effect { max-width: 100%; height: auto; }
@media (max-width: 700px) {
  img.bounce-effect[src*="chatbot-chatgpt"] {
    max-width: min(80vw, 320px);
    margin: 24px auto;
    display: block;
  }
}

/* (5) MOBILE PADDING RESET - homepage sections honour 10px L/R only */
@media (max-width: 700px) {
  .bs-home-original .bs-container,
  .bs-home-custom .bs-container,
  .bs-landing .bs-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
  }
  .bs-home-original .bs-section,
  .bs-home-original .bs-vc-section,
  .bs-home-custom .bs-section {
    padding-left: 0;
    padding-right: 0;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .bs-pricing { padding: 0 !important; max-width: 100% !important; }
  .bs-pricing-row { padding: 0 !important; gap: 14px !important; }
  .bs-pricing-card { padding: 22px 16px !important; }
  .bs-home-original .bs-section > .bs-container > .bs-split,
  .bs-home-original .bs-section > .bs-container > div[style*="padding"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .bs-form-card,
  .bs-form-card--centered { padding: 18px 14px !important; }
  #subscribe .bs-container > div[style] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  #lessons .section-title[style*="padding"] { padding: 18px 16px !important; }
  .table-container { margin-left: 0; margin-right: 0; }
}

/* (1) Lightbox cursor states for pan-when-zoomed (JS toggles classes) */
.bs-lightbox-figure img.is-zoomed { cursor: grab; }
.bs-lightbox-figure img.is-zoomed.is-panning { cursor: grabbing; }

/* ==========================================================================
   v1.4.9 polish: table mobile, bullet alignment, academy opacity.
   ========================================================================== */

/* (2) Comparison table - stacked card layout on mobile (no ugly scrollbar). */
@media (max-width: 700px) {
  .table-container {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .comparison-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
  }
  .comparison-table thead { display: none; }
  .comparison-table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid var(--bs-border, #d4e2ea);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px; /* gap between mobile "card" rows */
    box-shadow: 0 6px 18px rgba(0, 47, 82, .05);
  }
  .comparison-table tbody tr:last-child { margin-bottom: 0; }
  .comparison-table tbody tr:nth-child(even) td { background: transparent; }
  .comparison-table tbody td {
    display: block;
    padding: 6px 0;
    border: 0;
    text-align: left;
    font-size: 14px;
  }
  .comparison-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: 'Unbounded', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--bs-blue, #006aac);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
  }
  /* Fallback: if td has no data-label, hide the label space cleanly. */
  .comparison-table tbody td:empty { display: none; }
}

/* (3) Lessons bullets - center the dot on the first text row, not on .55em. */
#lessons .section-title ul.bs-check-list li,
#lessons .section-title ul li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0 5px 0;
  border-bottom: 0;
}
#lessons .section-title ul.bs-check-list li::before,
#lessons .section-title ul li::before {
  position: static;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: .55em;     /* aligns the dot with the cap-line of the first row */
  background: #07a4f3;
  border-radius: 50%;
  content: "";
  display: block;
}
#lessons .section-title ul.bs-check-list li > *,
#lessons .section-title ul li > * { flex: 1 1 auto; min-width: 0; }

/* (4) Academy plan ("предстоящ" - coming soon) - softer/dim look. */
.bs-pricing-card-academy {
  opacity: .65;
  filter: saturate(.9);
  transition: opacity .25s ease, filter .25s ease, transform .3s ease, box-shadow .3s ease;
}
.bs-pricing-card-academy:hover {
  opacity: 1;
  filter: saturate(1);
}
.bs-pricing-card-academy .bs-pricing-coming-soon-badge {
  /* keep the badge fully readable even when the card is dimmed */
  opacity: 1;
}

/* ==========================================================================
   v1.5.6 SEO polish - breadcrumb + microdata visual cleanups.
   ========================================================================== */

/* Visible breadcrumb (use `<?php betterseo_breadcrumbs(); ?>` in templates) */
.bs-breadcrumb { padding: 14px 0; font-size: 13px; }
.bs-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  color: var(--bs-muted, #667888);
}
.bs-breadcrumb li { display: inline-flex; align-items: center; }
.bs-breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--bs-muted, #667888);
}
.bs-breadcrumb a {
  color: var(--bs-muted, #667888);
  text-decoration: none;
  transition: color .2s ease;
}
.bs-breadcrumb a:hover { color: var(--bs-blue, #006aac); }
.bs-breadcrumb li:last-child span { color: var(--bs-text, #0c1f31); font-weight: 600; }

/* Footer brand <address> reset */
address.bs-footer-brand { font-style: normal; }

/* Blog-card meta (date + author) */
.bs-blog-card-meta { font-size: 12.5px; color: var(--bs-muted, #667888); margin: 0 0 10px; }
.bs-blog-card-meta time { font-weight: 600; }

/* ==========================================================================
   v1.5.7 polish - alignment guarantees + Useful Links 6/6 split.
   ========================================================================== */

/* (5) Hard guarantee that every .bs-container - topbar, header, mega menu
   wrapper, hero, sections - uses the SAME max-width and gutter so left edges
   line up perfectly with the rest of the homepage. */
:root { --bs-gutter: 22px; }
.bs-container { box-sizing: border-box; padding-left: var(--bs-gutter); padding-right: var(--bs-gutter); }
.bs-topbar > .bs-container,
.bs-site-header > .bs-container { padding-left: var(--bs-gutter); padding-right: var(--bs-gutter); }

/* (7) Useful Links 6/6 split */
.bs-useful-links-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: var(--bs-max);
  margin: 0 auto;
}
@media (max-width: 900px) {
  .bs-useful-links-split { grid-template-columns: 1fr; gap: 28px; }
}
.bs-useful-links-left {
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 6px 22px rgba(0, 47, 82, .05);
}
.bs-useful-links-image {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 10px;
}
.bs-useful-links-left h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--bs-text, #0c1f31);
  line-height: 1.25;
}
.bs-useful-links-left p {
  margin: 0 0 12px;
  color: var(--bs-body, #2c4051);
  line-height: 1.65;
  font-size: 15.5px;
}
.bs-useful-links-left .bs-button { margin-top: 18px; }

.bs-useful-links-right {
  background: var(--bs-ice, #f4f9fc);
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 14px;
  padding: 26px 28px;
}
.bs-useful-links-right h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--bs-text, #0c1f31);
}

/* Make the topbar bg consistent with the rest of the navy band - fall back
   to brand blue if the user picked a custom color via Customizer. */
.bs-topbar { background: var(--bs-blue, #006aac); }

/* ==========================================================================
   v1.5.8 a11y - skip-to-content link + screen-reader text utility.
   ========================================================================== */

/* Visually hidden by default; visible on focus (keyboard tab from URL bar) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
/* ==========================================================================
   v1.10.0 - Mobile menu (hamburger toggle + fullscreen overlay + accordion)
   ----------------------------------------------------------------------------
   Pattern reference: agency sites like braindonors.agency. Mobile (<1080px)
   hides the desktop horizontal nav, shows a hamburger button. Tap → body
   gets `.bs-menu-open` class, the existing <nav class="bs-nav"> becomes a
   fullscreen overlay. Mega panels become inline accordion sections (no
   fixed positioning on mobile).
   ========================================================================== */

/* Hamburger button - hidden on desktop, visible on mobile */
.bs-menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--bs-text, #0f1c25);
  z-index: 1100;
}
.bs-menu-toggle-bars {
  position: relative;
  display: block;
  width: 26px;
  height: 18px;
  margin: 0 auto;
}
.bs-menu-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.16,.84,.32,1), opacity .2s ease, top .3s ease;
}
.bs-menu-toggle-bars span:nth-child(1) { top: 0; }
.bs-menu-toggle-bars span:nth-child(2) { top: 8px; }
.bs-menu-toggle-bars span:nth-child(3) { top: 16px; }

/* X state when menu open */
body.bs-menu-open .bs-menu-toggle-bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
body.bs-menu-open .bs-menu-toggle-bars span:nth-child(2) { opacity: 0; }
body.bs-menu-open .bs-menu-toggle-bars span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* Lock body scroll when menu open */
body.bs-menu-open { overflow: hidden; }

/* Hide cloned-into-nav elements on desktop (only for mobile overlay) */
.bs-nav-logo,
.bs-nav-foot { display: none; }

/* ===== Mobile breakpoint ===== */
@media (max-width: 1080px) {
  .bs-menu-toggle { display: inline-flex; align-items: center; justify-content: center; z-index: 1100; }

  /* Hide standalone header CTA on mobile - moved into the overlay's foot. */
  .bs-header-inner > .bs-header-cta { display: none !important; }

  /* The <nav> becomes a slide-in panel from the right. No backdrop, no
     entrance staggers - just the panel itself transforms into view. */
  .bs-nav {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    z-index: 1050;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 22px 24px;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    box-shadow: -24px 0 60px rgba(15, 28, 37, .14);
    transition: transform .35s cubic-bezier(.22,1,.36,1), visibility .35s ease;
  }
  body.bs-menu-open .bs-nav {
    transform: translateX(0);
    visibility: visible;
  }

  /* Logo cloned at the top of the overlay (mobile only - see default `display:none` above) */
  .bs-nav-logo {
    display: flex;
    align-items: center;
    padding: 4px 0 18px;
    margin-bottom: 6px;
    border-bottom: 0;  /* v1.27.2: removed - duplicates header divider */
  }
  .bs-nav-logo .bs-logo-svg { max-width: 180px; max-height: 48px; }

  /* Top-level menu links - visible immediately, no entrance animation */
  .bs-nav .bs-nav-home,
  .bs-nav-item > a,
  .bs-nav > a {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid var(--bs-border, #d4e2ea);
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-text, #0f1c25);
    text-decoration: none;
  }

  /* Item with mega panel: anchor becomes accordion trigger.
     Override desktop's `min-height: 76px` (line 173) which would otherwise
     make this item taller than the flat top-level links. */
  .bs-nav-item {
    display: block;
    min-height: 0;
    border-bottom: 1px solid var(--bs-border, #d4e2ea);
  }
  .bs-nav-item > a {
    border-bottom: 0;
    position: relative;
    padding-right: 36px;
  }
  .bs-nav-item > a::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--bs-blue, #006aac);
    border-bottom: 2px solid var(--bs-blue, #006aac);
    transform: translateY(-75%) rotate(45deg);
    transition: transform .25s ease;
  }
  .bs-nav-item.is-open > a::after { transform: translateY(-25%) rotate(-135deg); }
  .bs-nav-item.is-open > a,
  .bs-nav a[aria-current="page"] { color: var(--bs-blue, #006aac); }

  /* Mega columns - stacked accordion content, plain show/hide (no animation) */
  .bs-mega > div {
    padding: 10px 14px;
    margin-bottom: 8px;
    background: var(--bs-light, #eef4f7);
    border-radius: 10px;
  }
  .bs-mega > div:last-child { margin-bottom: 0; }
  .bs-mega > div strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bs-blue, #006aac);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .bs-mega a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 8px 6px 8px 0 !important;
    margin: 0 !important;
    border-radius: 6px;
    font-size: 15px !important;
    color: var(--bs-text, #0f1c25) !important;
    background: transparent !important;
  }
  /* Feature card (Портфолио highlight) - специфичен селектор > .bs-mega > div.
   * Specificity 0,2,1 печели над .bs-mega > div (0,1,1) light-bg правилото. */
  .bs-mega > div.bs-mega-feature,
  .bs-mega-feature {
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--bs-dark, #0c1f31), var(--bs-blue, #07a4f3)) !important;
    border-radius: 10px;
    color: #fff;
  }
  .bs-mega > div.bs-mega-feature span,
  .bs-mega-feature span { color: var(--bs-lime, #cdff16); }

  /* Case card mobile - override .bs-mega a flex (space-between го разкривяваше).
     Връщаме block layout: снимка отгоре, заглавие отдолу. */
  .bs-mega .bs-mega-feature-case {
    display: block !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    background: rgba(0,0,0,.2) !important;
  }
  .bs-mega .bs-mega-feature .bs-mega-feature-case-media { display: block; width: 100%; }
  .bs-mega .bs-mega-feature .bs-mega-feature-case-title {
    color: rgba(255,255,255,.85) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    /* Mobile-only overrides for long case study titles - explicit wrap
       prevents overflow when the title can't fit a single line. Removes
       the desktop ellipsis/nowrap rules that bled in via the .bs-mega a
       selector. */
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
  }
  /* Ensure the parent <a> doesn't trap the title either. */
  .bs-mega .bs-mega-feature-case {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .bs-mega .bs-mega-feature-case .bs-mega-feature-case-media {
    max-width: 100% !important;
  }
  .bs-mega .bs-mega-feature-case .bs-mega-feature-case-media img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Growth chart mobile - по-нисък за да не разтяга менюто */
  .bs-mega-growth-bars { height: 90px; }
  .bs-mega-growth-tick { color: rgba(0,0,0,.7); }

  /* Foot block - sits right after the menu links (no margin-top:auto push) */
  .bs-nav-foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 22px;
    margin-top: 18px;
    border-top: 0;  /* v1.27.2: removed - last menu item already has bottom border */
  }
  .bs-nav-contact { display: flex; flex-direction: column; gap: 6px; }
  .bs-nav-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bs-muted, #586a78);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
  }
  .bs-nav-contact-link:hover { color: var(--bs-blue, #006aac); }
  .bs-nav-contact-link span { color: var(--bs-blue, #006aac); font-size: 16px; }

  /* CTA in the overlay foot - smaller than the desktop button */
  .bs-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bs-blue, #006aac);
    color: #fff !important;
    border: 2px solid var(--bs-blue, #006aac);
    border-radius: 999px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    transition: background .15s ease, border-color .15s ease;
  }
  .bs-nav-cta:hover { background: var(--bs-text, #0f1c25); border-color: var(--bs-text, #0f1c25); color: #fff !important; }
}

/* Below 720px - tighter paddings */
@media (max-width: 720px) {
  .bs-nav { padding: 14px 18px 22px; }
  .bs-nav .bs-nav-home,
  .bs-nav-item > a { font-size: 17px; padding: 12px 4px; padding-right: 36px; }
}

/* ==========================================================================
   v1.10.13 - Mobile chrome tightening
   - Topbar + main header containers: 10px horizontal padding on phones.
   - Mobile mega menu: reset everything aggressively with !important so the
     desktop's fixed/transformed/animated `.bs-mega` rules can't bleed through.
   ========================================================================== */
@media (max-width: 768px) {
  /* Tighter chrome (topbar + main header) on mobile only */
  .bs-topbar > .bs-container,
  .bs-site-header > .bs-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Inline images shouldn't have a giant top margin on mobile */
  .bs-home-figure { margin: 18px auto 0 !important; padding: 0 !important; }
  .bs-home-figure img { max-width: 100%; height: auto; }
  .bs-home-figcaption { padding: 6px 4px 0; font-size: 13px; }
}

@media (max-width: 1080px) {
  /* Mega panel on mobile: collapsible inline content. !important to neutralise
     every desktop rule (position:fixed, transform, opacity 0, visibility hidden,
     box-shadow, etc.) that would otherwise hide the accordion. */
  .bs-mega {
    display: none !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    /* Reset the desktop viewport-cap rules so the accordion mega doesn't
       become a nested scroll container inside .bs-nav (which already has
       its own overflow-y:auto). Without these, swipe on mobile gets
       trapped inside the mega panel and the parent doesn't scroll. */
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    grid-template-columns: 1fr !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 12px !important;
  }
  .bs-nav-item.is-open > .bs-mega { display: block !important; }
  .bs-mega::before { display: none !important; }

  /* FORCE: .bs-nav-item трябва да има height = anchor height, не 0.
   * Високая specificity (body nav.bs-nav .bs-nav-item) гарантира override на
   * всички предишни правила (включително desktop display:flex с min-height:76px). */
  body nav.bs-nav .bs-nav-item {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  body nav.bs-nav .bs-nav-item > a {
    display: block !important;
    padding: 14px 36px 14px 4px !important;
    line-height: 1.4 !important;
    font-size: 18px !important;
  }

  /* FORCE: Logo-то се cloning-ва в .bs-nav и e <a class="bs-logo bs-nav-logo">.
   * Правилото .bs-nav > a (specificity 0,1,1) го хваща и налага неправилно
   * padding 14px 4px + border-bottom. Тук с висока specificity възстановяваме
   * логовото оригинално оформление - НЯМА border-bottom, padding и margin
   * специфични за логото, font-weight normal. */
  body nav.bs-nav > a.bs-nav-logo {
    display: flex !important;
    align-items: center !important;
    padding: 4px 0 18px !important;
    margin: 0 0 6px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    background: transparent !important;
  }

  /* ─── SMOOTH MOBILE MENU EFFECTS ────────────────────────────────────────
   * Removes default mobile browser tap highlight (the gray flash on tap),
   * adds subtle press feedback, smooth accordion expand for mega panel.
   */

  /* Премахни default browser tap-highlight (синьо/сиво петно при тап). */
  .bs-nav a,
  .bs-nav-item > a,
  .bs-menu-toggle,
  .bs-nav .bs-mega a {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
  }

  /* Smooth color/background transitions при hover/active на menu links. */
  .bs-nav .bs-nav-home,
  .bs-nav > a:not(.bs-nav-logo),
  .bs-nav-item > a,
  .bs-mega a {
    transition: color .2s ease, background-color .25s ease, padding-left .2s ease;
  }

  /* Дискретен press effect (тап-обратна връзка), вместо browser flash. */
  .bs-nav .bs-nav-home:active,
  .bs-nav > a:not(.bs-nav-logo):active,
  .bs-nav-item > a:active,
  .bs-mega a:active {
    background-color: rgba(0, 106, 172, .06);
    color: var(--bs-blue, #006aac);
  }

  /* Accordion открива/затваря mega panel-а гладко чрез max-height + opacity.
   * По-дълга duration (650ms) + малък delay (80ms) преди opacity-то да започне,
   * за да усеща deliberate, не rushed. */
  .bs-nav-item > .bs-mega {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    overflow: hidden !important;
    transition: max-height .65s cubic-bezier(.22, 1, .36, 1),
                opacity .4s ease .08s,
                transform .5s cubic-bezier(.22, 1, .36, 1) .08s,
                padding .5s ease !important;
    padding: 0 !important;
    will-change: max-height, opacity, transform;
  }
  .bs-nav-item.is-open > .bs-mega {
    max-height: 4000px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding: 6px 0 14px !important;
  }

  /* Stagger fade на отделните mega columns + linkове - всеки следващ
   * се появява с малък delay, за по-органичен expand ефект. */
  .bs-nav-item.is-open > .bs-mega > div {
    animation: bsMegaColumnFade .55s cubic-bezier(.22, 1, .36, 1) both;
  }
  .bs-nav-item.is-open > .bs-mega > div:nth-child(1) { animation-delay: .18s; }
  .bs-nav-item.is-open > .bs-mega > div:nth-child(2) { animation-delay: .26s; }
  .bs-nav-item.is-open > .bs-mega > div:nth-child(3) { animation-delay: .34s; }
  .bs-nav-item.is-open > .bs-mega > div:nth-child(4) { animation-delay: .42s; }
  .bs-nav-item.is-open > .bs-mega > div:nth-child(5) { animation-delay: .50s; }
  .bs-nav-item.is-open > .bs-mega > div:nth-child(6) { animation-delay: .58s; }

  /* Smooth fade-in за overlay съдържанието (logo + menu links + foot). */
  body.bs-menu-open .bs-nav > * {
    animation: bsNavItemFadeIn .45s cubic-bezier(.22, 1, .36, 1) both;
  }
  body.bs-menu-open .bs-nav > *:nth-child(1)  { animation-delay: .05s; }
  body.bs-menu-open .bs-nav > *:nth-child(2)  { animation-delay: .10s; }
  body.bs-menu-open .bs-nav > *:nth-child(3)  { animation-delay: .14s; }
  body.bs-menu-open .bs-nav > *:nth-child(4)  { animation-delay: .17s; }
  body.bs-menu-open .bs-nav > *:nth-child(5)  { animation-delay: .20s; }
  body.bs-menu-open .bs-nav > *:nth-child(6)  { animation-delay: .22s; }
  body.bs-menu-open .bs-nav > *:nth-child(7)  { animation-delay: .24s; }
  body.bs-menu-open .bs-nav > *:nth-child(8)  { animation-delay: .26s; }
  body.bs-menu-open .bs-nav > *:nth-child(9)  { animation-delay: .28s; }
  body.bs-menu-open .bs-nav > *:nth-child(10) { animation-delay: .30s; }

  /* Smooth-rotating chevron - вече има transition, тук я подсилваме. */
  .bs-nav-item > a::after {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1) !important;
  }

  /* Smooth slide-in за overlay-а (вече има, но удължаваме duration за по-нежно). */
  .bs-nav {
    transition: transform .42s cubic-bezier(.22, 1, .36, 1),
                visibility .42s ease !important;
  }
}

/* Keyframe за fade-in на menu items (извън @media за глобален reach). */
@keyframes bsNavItemFadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Keyframe за stagger fade на mega columns (slide-down + fade). */
@keyframes bsMegaColumnFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Респект към prefers-reduced-motion - изключи всички анимации за hover/focus. */
@media (prefers-reduced-motion: reduce) {
  body.bs-menu-open .bs-nav > * { animation: none !important; }
  .bs-nav-item > .bs-mega,
  .bs-nav-item.is-open > .bs-mega > div { transition: none !important; animation: none !important; }
  .bs-nav { transition: none !important; }
}

/* ==========================================================================
   v1.11.2 - Targeted polish batch (mobile-scoped)
   ========================================================================== */

/* (1) Mobile-only nav-logo + nav-foot rules live in the v1.10.0 mobile-menu block below. */

/* (2) White text on dark hero - breadcrumb + post-single meta */
.bs-hero .bs-breadcrumb,
.bs-hero .bs-breadcrumb a,
.bs-hero .bs-breadcrumb span,
.bs-hero .bs-post-single-meta,
.bs-hero .bs-post-single-meta * { color: rgba(255, 255, 255, .85); }
.bs-hero .bs-breadcrumb a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.65); }

/* (3) Form card title on hero - force dark text (the white-bg card overrides hero color) */
.bs-form-card .bs-form-card-title,
.bs-form-card-title { color: var(--bs-text, #0f1c25) !important; }

/* (4) Footer link hover */
.bs-site-footer { transition: color .15s ease; }
.bs-site-footer div > a:not(.bs-logo):not(.bs-button):not(.bs-button--accent) {
  transition: color .15s ease;
}
.bs-site-footer div > a:not(.bs-logo):not(.bs-button):not(.bs-button--accent):hover {
  color: var(--bs-blue, #006aac);
}

/* (5) Post single figure - no longer overlaps hero, sits cleanly after section */
.bs-post-single-figure { margin: 30px auto 0 !important; }

/* (6) Easy TOC plugin styling - subtle bg + bold title */
#ez-toc-container {
  background: var(--bs-light, #eef4f7) !important;
  border: 1px solid var(--bs-border, #d4e2ea) !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
}
div#ez-toc-container p.ez-toc-title { font-weight: 700 !important; color: var(--bs-text, #0f1c25) !important; }

/* (7) Lessons bullets margin-top + icon size - reapplied with !important to win specificity wars */
#lessons .section-title ul.bs-check-list li::before,
#lessons .section-title ul li::before { margin-top: 6px !important; }
.bs-lessons-card-icon { width: 75px !important; height: 75px !important; border-radius: 8px !important; }

/* (8) Footer-grid mobile: vertical breathing room around the first/only column */
@media (max-width: 768px) {
  .bs-footer-grid { padding-top: 36px !important; padding-bottom: 36px !important; gap: 24px !important; }
}

/* (9) Sections mobile padding 15px (was 18px from existing rule, 10px attempt, etc.) */
@media (max-width: 720px) {
  .bs-container { padding: 0 15px; }
}

/* ──────────────────────────────────────────────────────────────────────
   v1.11.5 - Logo subtle animation + narrow-desktop mega + footer tidy
   ────────────────────────────────────────────────────────────────────── */

/* Logo: no hover scale, no entry animation. The SVG runs its own
   continuous shimmer on the SEO letters - adding scale on hover felt
   redundant. */
/* (The "SEO" wordmark + tagline now use SVG-native <animate> for a
   continuous shimmer / fill-pulse - see /wp-content/uploads/logo.svg.
   No CSS flicker needed; the SVG runs the animation 24/7.) */

/* Narrow-desktop mega (1081-1280px): 4 cols too cramped for 14-item lists.
   Drop to 3 columns so the first column ("SEO по тип") fits comfortably. */
@media (min-width: 1081px) and (max-width: 1280px) {
  .bs-mega { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 18px; }
  .bs-mega-feature { grid-column: span 3; }    /* full-width feature card row */
  .bs-mega a { font-size: 13px; padding: 3px 8px; }
}

/* (5) CC badge SVG was redundant - license URL is already in the agency note.
   Hide via CSS in case any cached HTML still shows it. (PHP markup also
   removed, but keep this as belt + braces.) */
.bs-footer-cc-badge { display: none !important; }

/* (7) Agency note → full width row; DMCA moves to the subfooter */
.bs-footer-meta-inner { grid-template-columns: 1fr !important; gap: 14px !important; }

/* (6) DMCA in subfooter - small inline badge next to copyright */
.bs-subfooter-inner .dmca-badge { display: inline-flex; align-items: center; }
.bs-subfooter-inner .dmca-badge img { display: block; height: 28px; width: auto; }
@media (max-width: 768px) {
  .bs-subfooter-inner { flex-wrap: wrap; gap: 10px 14px; }
}

/* ──────────────────────────────────────────────────────────────────────
   v1.11.2 - Footer extras: agency note + license/DMCA badges
   ────────────────────────────────────────────────────────────────────── */
.bs-footer-meta {
  background: rgba(255, 255, 255, .04);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 28px 0;
}
.bs-footer-meta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}
.bs-footer-agency-note {
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
  line-height: 1.7;
}
.bs-footer-agency-note a {
  color: rgba(255, 255, 255, .92);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .25);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.bs-footer-agency-note a:hover {
  color: var(--bs-blue, #07a4f3);
  text-decoration-color: currentColor;
}
.bs-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bs-footer-cc-badge svg,
.bs-footer-badges img { display: block; height: 31px; width: auto; }
@media (max-width: 768px) {
  .bs-footer-meta-inner { grid-template-columns: 1fr; }
  .bs-footer-meta { padding: 22px 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   v1.11.2 - Pure-CSS logos carousel (.bs-marquee)
   Markup: <ul class="bs-marquee"><li><img …></li>×N</ul>
   Doubles the items via [data-doubled] (or use JS), then translates -50%.
   No external library. Pauses on hover.
   ────────────────────────────────────────────────────────────────────── */
.bs-marquee {
  display: flex;
  gap: 60px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: bs-marquee 28s linear infinite;
}
.bs-marquee:hover { animation-play-state: paused; }
.bs-marquee li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.bs-marquee img {
  max-height: 48px;
  width: auto;
  filter: grayscale(1) opacity(.7);
  transition: filter .25s ease;
}
.bs-marquee img:hover { filter: grayscale(0) opacity(1); }

@keyframes bs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.bs-marquee-wrap {
  overflow: hidden;
  position: relative;
  padding: 32px 0;
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* ──────────────────────────────────────────────────────────────────────
   v1.11.2 - Portfolio single: services-we-offer block
   ────────────────────────────────────────────────────────────────────── */
.bs-case-services-block {
  margin-top: 48px;
  padding: 28px;
  background: var(--bs-light, #eef4f7);
  border-radius: 14px;
}
.bs-case-services-block h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  font-family: var(--bs-font-display);
}
.bs-case-services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bs-case-services-list a {
  display: block;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 8px;
  color: var(--bs-text, #0f1c25);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.bs-case-services-list a:hover {
  border-color: var(--bs-blue, #006aac);
  color: var(--bs-blue, #006aac);
}

.bs-skip-link.screen-reader-text:focus {
  background-color: var(--bs-blue, #006aac);
  color: #fff;
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  display: block;
  font-size: 14px;
  font-weight: 800;
  height: auto;
  left: 16px;
  line-height: 1;
  padding: 14px 22px;
  text-decoration: none;
  top: 16px;
  width: auto;
  z-index: 100000;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 47, 82, .25);
}

/* ==========================================================================
   v1.5.9 - Inline-style refactor: utility + component classes
   Replaces 30+ inline `style="..."` attributes across front-page.php / footer.php.
   Goals: smaller HTML payload (better Core Web Vitals), CSP-friendly,
   easier to override in child themes / Customizer color panels.
   ========================================================================== */

/* Margin utilities (align with --bs-md/--bs-lg/--bs-xl ladder) */
.bs-mt-0   { margin-top: 0 !important; }
.bs-mt-10  { margin-top: 10px; }
.bs-mt-20  { margin-top: 20px; }
.bs-mt-30  { margin-top: 30px; }
.bs-mt-40  { margin-top: 40px; }
.bs-mt-60  { margin-top: 60px; }
.bs-mt-80  { margin-top: 80px; }
.bs-mb-10  { margin-bottom: 10px; }
.bs-mb-20  { margin-bottom: 20px; }
.bs-mb-40  { margin-bottom: 40px; }
.bs-mb-60  { margin-bottom: 60px; }
.bs-mb-80  { margin-bottom: 80px; }

/* Layout helpers */
.bs-stack-60 { display: flex; flex-direction: column; gap: 60px; }
.bs-center-x { text-align: center; }
.bs-center-flex { display: flex; justify-content: center; align-items: center; }
.bs-trophy-stack { display: flex; flex-direction: column; gap: 40px; align-items: center; text-align: center; margin-top: 80px; }

/* Section variant - flush top (used on lessons after results) */
.bs-section--flush { margin-top: 0; }

/* bs-actions - drop inline overrides; canonical declaration above on line 255 */
.bs-actions--with-stars { align-items: center; gap: 15px; }
.bs-actions--with-stars .bs-stars-img { max-width: 100px; display: block; }

/* Hero form card - replaces the inline shadow/bg */
.bs-form-card--hero { box-shadow: var(--bs-shadow-lg); background: #fff; }
.bs-form-card-intro { margin: 0 0 20px; font-size: 15px; color: var(--bs-muted); }

/* bs-split with bigger gap (Useful Links / SEMRUSH iframes) */
.bs-split--lg-gap { gap: 40px; }
.bs-split--align-start { align-items: start; margin-left: auto; margin-right: auto; }

/* Lessons grid - was inline grid in front-page */
.bs-lessons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
  margin-bottom: 40px;
}
.bs-lessons-grid > .bs-vc-col { display: flex; }
.bs-lesson-card {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  flex: 1;
}
.bs-lessons-card-title {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--bs-light);
  padding-bottom: 12px;
  margin-bottom: 14px;
  font-size: clamp(20px, 2vw, 24px);
}
.bs-lessons-card-icon { border-radius: 6px; }
@media (max-width: 768px) {
  .bs-lessons-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Service grid spacing */
.bs-service-grid--mb { margin-bottom: 60px; }

/* Overview list typography (was inline 17px / 1.7) */
.overview-list { font-size: 17px; line-height: 1.7; }
.overview-list .bs-check-list { margin-top: 20px; }
.overview-list p + p { margin-top: 20px; }
.overview-list .bs-button { margin-top: 30px; }

/* Subscribe section helpers */
.bs-section--subscribe .bs-section-head,
.bs-section--subscribe .bs-section-head h2 { color: #fff; }
.bs-section--subscribe .bs-section-head p { color: rgba(255,255,255,.85); }
.bs-subscribe-form-wrap { max-width: 800px; margin: 0 auto; text-align: center; }
.bs-subscribe-privacy { color: rgba(255,255,255,.6); font-size: 13px; margin-top: 20px; }
.bs-subscribe-privacy a { color: #fff; text-decoration: underline; }

/* Contact form card - was inline */
.bs-form-card--centered {
  max-width: 720px;
  margin: 0 auto 60px;
  padding: 32px 32px 36px;
  background: var(--bs-ice, #f4f9fc);
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 14px;
}

/* Hero feature grid - auto-fit override */
.bs-feature-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Footer brand <address> - kill italic without inline style */
.bs-footer-brand { font-style: normal; }

/* Figure + caption - used by [vc_single_image] / functions.php */
.bs-home-figcaption { margin-top: 10px; font-size: 15px; color: var(--bs-body); }

/* Landing-page modifiers (replace inline styles in inc/render/landing-render.php) */
.bs-faq--narrow { max-width: 880px; margin-left: auto; margin-right: auto; }
.bs-imgtext--mb { margin-bottom: 64px; }

/* ==========================================================================
   v1.6.0 - Mega menu: badge + column footer (Услуги restructure)
   New line syntax in Customizer:  label|URL  •  label|URL|BADGE  •  >>label|URL
   ========================================================================== */
.bs-mega-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--bs-lime, #cdff16);
  color: var(--bs-text, #0f1c25);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}
/* Badge keeps lime on hover - no blue takeover */

/* "Виж всички" footer link - plain look matching the other column items
   (no blue, no bold, no border). Only the trailing → arrow nudges right
   on hover for an affordance cue. */
.bs-mega-col-foot {
  margin-top: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
}
.bs-mega-col-foot span { display: inline-block; transition: transform .2s ease; }
.bs-mega-col-foot:hover span { transform: translateX(4px); }

/* (Old "tighten spacing" override removed in v1.10.1 - superseded by the
   compact mega panel rules at the top of this file. Kept the column flex
   helper so columns inside the mega still stack their links. */
.bs-mega > div { display: flex; flex-direction: column; }

/* ==========================================================================
   v1.8.0 - Archive templates: services / portfolio / blog
   Filter chips + card grids + pagination - all reuse the homepage section
   primitives (.bs-section, .bs-container, .bs-section-head, .bs-button).
   ========================================================================== */

/* --- Hero variants used by archives + singles --- */
.bs-hero-grid--solo { grid-template-columns: 1fr; }
.bs-hero-copy--center { text-align: center; max-width: 760px; margin: 0 auto; }
.bs-actions--center { justify-content: center; }
.bs-section-head .bs-actions--center { margin-top: 24px; }

/* Compact hero - for archive/list pages where the homepage's 720px-tall
   primary hero would feel oversized. Reduces to ~320-360px while keeping
   the brand gradient + eyebrow + h1 hierarchy. */
.bs-hero--compact {
  min-height: auto;
  padding: 64px 0 48px;
}
.bs-hero--compact::after { display: none; }
.bs-hero--compact h1 { font-size: clamp(34px, 4vw, 52px); }
.bs-hero--compact .bs-hero-copy { max-width: 760px; }
@media (max-width: 768px) {
  .bs-hero--compact { padding: 48px 0 36px; }
}

/* (.bs-button--ghost defined earlier in this file at line 200 + 1914 hover.
   v1.8.3 added a duplicate that broke consistency with /uslugi/<slug>/ -
   removed in v1.9.1.) */

/* --- Filter - single dropdown selector (v1.32.0 redesign) --- */
.bs-portfolio-filter {
  padding-top: 18px;
  padding-bottom: 22px;
  background: #fff;
  border-bottom: 1px solid var(--bs-border, #e1ecf2);
}

/* Filter selector bar - clean horizontal layout for both blog & portfolio */
.bs-filter-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;          /* v1.32.1: centered */
  font-family: var(--bs-font-body);
}
.bs-filter-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;                /* match site body text */
  text-transform: none;             /* no uppercase */
  color: var(--bs-text, #0f1c25);
  white-space: nowrap;
  font-family: var(--bs-font-body);
}
.bs-filter-select {
  flex: 0 1 320px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 999px;
  font-family: var(--bs-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-text, #0f1c25);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006aac' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.bs-filter-select:focus {
  outline: none;
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 0 0 3px rgba(0,106,172,.18);
}
.bs-filter-clear {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 999px;
  color: var(--bs-muted, #586a78);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s ease;
}
.bs-filter-clear:hover { background: var(--bs-text, #0f1c25); color: #fff; border-color: var(--bs-text, #0f1c25); }

/* ── Legacy chip layout (fallback, used by /blog/) ─────────────── */
.bs-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
/* If multiple chip rows AND no .is-active is set, hide all but first.
   When filter-tabs are used (portfolio) is-active drives visibility. */
.bs-portfolio-filter:has(.bs-filter-tabs) .bs-chip-row { display: none; }
.bs-portfolio-filter:has(.bs-filter-tabs) .bs-chip-row.is-active { display: flex; }

/* Filter tabs (legacy - kept as fallback for old markup) */
.bs-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--bs-bg-soft, #f7f9fb);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 999px;
  width: fit-content;
}
.bs-filter-tab {
  padding: 8px 18px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-muted, #586a78);
  cursor: pointer;
  transition: all .15s ease;
}
.bs-filter-tab:hover { color: var(--bs-text, #0f1c25); }
.bs-filter-tab.is-active {
  background: var(--bs-text, #0f1c25);
  color: #fff;
}
@media (max-width: 640px) {
  .bs-filter-tabs { width: 100%; justify-content: center; }
  .bs-filter-bar { flex-direction: column; align-items: stretch; }
  .bs-filter-select { flex: 1 1 auto; }
}
.bs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 999px;
  color: var(--bs-text, #0f1c25);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bs-chip small { font-weight: 400; opacity: .65; }
.bs-chip:hover {
  border-color: var(--bs-blue, #006aac);
  color: var(--bs-blue, #006aac);
}
.bs-chip--active {
  background: var(--bs-blue, #006aac);
  border-color: var(--bs-blue, #006aac);
  color: #fff;
}
.bs-chip--active:hover { background: var(--bs-text, #0f1c25); border-color: var(--bs-text, #0f1c25); color: #fff; }

/* --- Generic card grid primitives --- */
.bs-services-grid,
.bs-portfolio-grid,
.bs-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1100px) {
  .bs-services-grid  { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .bs-portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
  .bs-posts-grid     { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Anchor offset - sticky header (~76px) covers the section top when the
   browser jumps to a #fragment. scroll-margin-top pushes the landing
   position down so the section title sits below the header. */
.bs-services-group,
.bs-anchor-target { scroll-margin-top: 120px; }
.bs-anchor-target {
  display: block;
  position: relative;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* ─── Services link-list mode (groups w/ 20+ items: industria, lokatsiya) ── */
.bs-services-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 16px;
}
.bs-services-linklist li { margin: 0; }
.bs-services-linklist a {
  display: inline-block;
  color: var(--bs-blue, #006aac);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: color .15s ease;
}
.bs-services-linklist a:hover {
  color: var(--bs-text, #0f1c25);
  text-decoration: underline;
  text-decoration-color: var(--bs-text, #0f1c25);
  text-underline-offset: 3px;
}
@media (max-width: 1100px) {
  .bs-services-linklist { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 15px; }
}
@media (max-width: 900px) {
  .bs-services-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 14px; }
}
@media (max-width: 560px) {
  .bs-services-linklist { grid-template-columns: 1fr; column-gap: 0; row-gap: 12px; }
}

/* Archive hero stats - reuses the branded .bs-trust-strip + .bs-trust-grid
   from the theme's existing component library so /uslugi/ + /portfolio/
   match the homepage's visual rhythm. No new component needed. */

/* --- Service archive card (with always-visible visual band) --- */
.bs-service-card-item { margin: 0; }
.bs-service-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 14px;
  overflow: hidden;
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.bs-service-card-link:hover {
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 18px 40px rgba(0, 47, 82, .12);
  transform: translateY(-4px);
}

/* Visual band - top strip of every service card */
.bs-service-card-visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: rgba(255, 255, 255, .9);
}
.bs-service-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.18) 0%, transparent 55%);
  pointer-events: none;
}
.bs-service-card-visual--tip       { background: linear-gradient(135deg, #006aac 0%, #003e66 100%); }
.bs-service-card-visual--platforma { background: linear-gradient(135deg, #112233 0%, #0f1c25 100%); }
.bs-service-card-visual--industria { background: linear-gradient(135deg, #07a4f3 0%, #006aac 100%); }
.bs-service-card-link:hover .bs-service-card-visual { filter: saturate(1.15); }

.bs-service-card-img { width: 100%; height: 100%; object-fit: cover; filter: invert(1); }

.bs-service-card-icon {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(2px);
  transition: transform .35s cubic-bezier(.16,.84,.32,1);
}
.bs-service-card-link:hover .bs-service-card-icon { transform: scale(1.08) rotate(-4deg); }
.bs-service-card-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bs-service-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  background: var(--bs-lime, #cdff16);
  color: var(--bs-text, #0f1c25);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  z-index: 1;
}

.bs-service-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  gap: 10px;
  background: #f3f6f9;
}
.bs-service-card-body h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  font-family: var(--bs-font-display);
}
.bs-service-card-body p {
  flex: 1;
  margin: 0;
  font-size: 14px;
  color: var(--bs-muted, #586a78);
  line-height: 1.55;
}
.bs-service-card-cta {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--bs-blue, #006aac);
}

/* --- Portfolio case-study card (renamed from .bs-case-card to avoid the
   homepage's existing 2-col .bs-case-card highlight component which uses
   `grid-template-columns: 1.1fr .9fr`. Different visual purpose, must not
   share the class name.) --- */
.bs-portfolio-card-item { margin: 0; }
.bs-portfolio-card {
  display: block; /* explicit - overrides any inherited grid display */
  height: 100%;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bs-portfolio-card:hover {
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 14px 36px rgba(0, 47, 82, .12);
  transform: translateY(-3px);
}
.bs-portfolio-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
}
.bs-portfolio-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, #f7f9fb, #eef4f7),
    radial-gradient(circle at 30% 30%, rgba(7,164,243,.06), transparent 60%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* "Fit" mode - entire image visible, never cropped. Width-constrained when
   the image is wider than 16:9, height-constrained when taller. */
.bs-portfolio-card-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* No-thumbnail state: gradient background + giant metric overlay */
.bs-portfolio-card-media--metric { color: #fff; }
.bs-portfolio-card-media--metric::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.18) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,.18) 0%, transparent 60%);
  pointer-events: none;
}
.bs-portfolio-card-media--v1 { background: linear-gradient(135deg, #006aac 0%, #003e66 100%); }
.bs-portfolio-card-media--v2 { background: linear-gradient(135deg, #112233 0%, #0f1c25 100%); }
.bs-portfolio-card-media--v3 { background: linear-gradient(135deg, #07a4f3 0%, #006aac 100%); }
.bs-portfolio-card-media--v4 { background: linear-gradient(135deg, #00477a 0%, #07a4f3 100%); }

.bs-portfolio-card-metric-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px;
  text-align: center;
  z-index: 1;
}
.bs-portfolio-card-metric-overlay strong {
  font-family: var(--bs-font-display);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 47, 82, .35);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.bs-portfolio-card-metric-overlay small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .92);
}
.bs-portfolio-card-metric-overlay em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
}

.bs-portfolio-card-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bs-portfolio-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bs-portfolio-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bs-light, #eef4f7);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-blue, #006aac);
}
.bs-portfolio-tag--alt { background: rgba(15, 28, 37, .92); color: #fff; }

.bs-portfolio-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  font-family: var(--bs-font-display);
}
.bs-portfolio-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bs-muted, #586a78);
}
.bs-portfolio-card-client { margin-top: auto; }
.bs-portfolio-card-client small { color: var(--bs-muted, #586a78); font-weight: 600; }
.bs-portfolio-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--bs-blue, #006aac);
  margin-top: 4px;
}
.bs-portfolio-card-cta::after {
  content: "→";
  display: inline-block;
  font-weight: 800;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.bs-portfolio-card:hover .bs-portfolio-card-cta::after { transform: translateX(5px); }

/* Small inline metric badge - used in the "Related cases" cards on the
   case-study single page (smaller cards, no big gradient hero). */
.bs-portfolio-card-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bs-light, #eef4f7);
  border-radius: 8px;
  align-self: flex-start;
}
.bs-portfolio-card-metric strong {
  font-family: var(--bs-font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--bs-blue, #006aac);
}
.bs-portfolio-card-metric small {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-muted, #586a78);
}

/* --- Case study single page --- */
.bs-case-hero-figure-section {
  padding-top: 36px;
  padding-bottom: 0;
}
.bs-case-hero-figure {
  margin: 0 auto;
  max-width: 1100px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bs-bg-soft, #f7f9fb);
  box-shadow: 0 18px 60px rgba(0, 47, 82, .12);
}
.bs-case-single .bs-case-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Metric as a regular meta row (no gradient background) */
.bs-case-meta-value {
  margin: 4px 0 0 !important;
  font-weight: 600;
  color: var(--bs-text, #0f1c25);
}
.bs-case-meta-value strong {
  font: inherit;
  font-weight: 700;
  color: inherit;
}
.bs-case-meta-value small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--bs-muted, #586a78);
  line-height: 1.4;
}
.bs-case-meta-value--accent {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bs-case-meta-value--accent strong {
  font-family: var(--bs-font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bs-blue, #006aac);
}
.bs-case-meta-value--accent small {
  font-size: 12px;
  font-weight: 500;
  color: var(--bs-muted, #586a78);
  line-height: 1.4;
}

/* Inline quote inside the article column - appears right after content */
.bs-case-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.bs-case-content-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px) {
  .bs-case-content-wrap { grid-template-columns: minmax(0, 1fr) 280px; }
}
.bs-case-prose { margin: 0; }
.bs-case-sidebar {
  align-self: start;
  position: sticky;
  top: 100px;
  padding: 22px 24px;
  background: var(--bs-light, #eef4f7);
  border-radius: 14px;
}
.bs-case-meta { margin: 0; }
.bs-case-meta dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-muted, #586a78); margin-top: 14px; }
.bs-case-meta dt:first-child { margin-top: 0; }
.bs-case-meta dd { margin: 4px 0 0; font-weight: 600; }
.bs-case-meta dd a { color: var(--bs-text, #0f1c25); text-decoration: none; border-bottom: 1px dashed var(--bs-border, #d4e2ea); }
.bs-case-meta dd a:hover { color: var(--bs-blue, #006aac); border-bottom-color: var(--bs-blue, #006aac); }

.bs-case-quote {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 36px;
  background: #fff;
  border-left: 4px solid var(--bs-blue, #006aac);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 47, 82, .08);
}
.bs-case-quote p { margin: 0 0 16px; font-size: 22px; line-height: 1.4; font-weight: 600; font-style: italic; color: var(--bs-text, #0f1c25); }
.bs-case-quote cite { display: block; font-style: normal; font-weight: 700; font-size: 15px; }
.bs-case-quote-org { display: block; color: var(--bs-muted, #586a78); font-weight: 400; font-size: 14px; margin-top: 2px; }

/* --- Blog post card --- */
.bs-post-card-item { margin: 0; }
.bs-post-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bs-post-card:hover {
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 12px 32px rgba(0, 47, 82, .1);
  transform: translateY(-3px);
}
.bs-post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
}
.bs-post-card-media {
  aspect-ratio: 16 / 9;
  background: var(--bs-light, #eef4f7);
  overflow: hidden;
}
.bs-post-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bs-post-card:hover .bs-post-card-img { transform: scale(1.04); }
.bs-post-card-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bs-post-card-cat {
  align-self: flex-start;
  padding: 3px 12px;
  background: rgba(0, 106, 172, .1);
  color: var(--bs-blue, #006aac);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bs-post-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--bs-text, #0f1c25);
}
.bs-post-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bs-muted, #586a78);
}
.bs-post-card-meta {
  margin-top: auto;
  font-size: 13px;
  color: var(--bs-muted, #586a78);
}

/* --- Blog single --- */
.bs-post-single-meta { color: var(--bs-muted, #586a78); font-size: 14px; margin-top: 10px; }
.bs-post-single-figure {
  max-width: 1100px;
  margin: -40px auto 0;
  padding: 0 22px;
}
.bs-post-single-img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 47, 82, .15); }
.bs-post-prose { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: var(--bs-text, #0f1c25); }
.bs-post-prose h2 {
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  font-size: 26px !important;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bs-border, #e4ecf2);
}
.bs-post-prose h3 {
  margin-top: 1.5em;
  margin-bottom: 0.4em;
  font-size: 17px !important;
  line-height: 1.35;
  font-weight: 700;
}
.bs-post-prose h4 { margin-top: 1.3em; margin-bottom: 0.3em; font-size: 15.5px !important; font-weight: 700; }
.bs-post-prose p { margin: 0 0 1em; }
.bs-post-prose ul, .bs-post-prose ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.bs-post-prose ul li, .bs-post-prose ol li { margin-bottom: 0.4em; }
.bs-post-prose a { color: var(--bs-blue, #006aac); text-decoration: underline; text-decoration-color: rgba(0, 106, 172, .4); text-underline-offset: 3px; }
.bs-post-prose a:hover { text-decoration-color: currentColor; }
.bs-post-prose strong { color: var(--bs-text, #0f1c25); font-weight: 700; }
.bs-post-prose em { font-style: italic; }

/* Inline mark / highlight */
.bs-post-prose mark {
  background: linear-gradient(180deg, transparent 62%, #f3e6b8 62%);
  color: inherit;
  padding: 0 2px;
}

/* Blockquote */
.bs-post-prose blockquote {
  margin: 1.4em 0;
  padding: 14px 22px;
  border-left: 4px solid var(--bs-blue, #006aac);
  background: #f5f9fc;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #2c3e50;
}
.bs-post-prose blockquote p { margin: 0; }

/* Tables - чисти, четими таблици в блог съдържанието */
.bs-post-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 14.5px;
  line-height: 1.5;
  /* хоризонтален скрол на тесни екрани без да чупи оформлението */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bs-post-prose table thead {
  background: var(--bs-blue, #006aac);
}
.bs-post-prose table thead th {
  color: #fff;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.bs-post-prose table th,
.bs-post-prose table td {
  padding: 11px 14px;
  border: 1px solid #e4ecf2;
  vertical-align: top;
}
.bs-post-prose table tbody tr:nth-child(even) {
  background: #f7fafc;
}
.bs-post-prose table tbody tr:hover {
  background: #eef5fb;
}
.bs-post-prose table td strong { color: var(--bs-text, #0f1c25); }
.bs-post-prose table a { word-break: break-word; }
/* първа колона леко акцентирана (често е етикет/име) */
.bs-post-prose table tbody td:first-child { font-weight: 600; color: var(--bs-text, #0f1c25); }

/* Inline code */
.bs-post-prose :not(pre) > code {
  background: #f1f4f7;
  border: 1px solid #e4ecf2;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  color: #334155;
  white-space: nowrap;
}

/* Code block (pre) */
.bs-post-prose pre {
  margin: 1.5em 0;
  padding: 18px 22px;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 10px;
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.55;
  box-shadow: 0 4px 14px rgba(0, 47, 82, .12);
}
.bs-post-prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

/* Callout boxes — tip / warning / success / stats / intro / examples */
.bs-post-prose .tip,
.bs-post-prose .warning,
.bs-post-prose .success,
.bs-post-prose .stats,
.bs-post-prose .intro-highlight,
.bs-post-prose .example-good,
.bs-post-prose .example-bad {
  margin: 1.4em 0;
  padding: 14px 18px;
  border-radius: 8px;
  border-left: 3px solid;
  position: relative;
  line-height: 1.6;
}
.bs-post-prose .tip::before,
.bs-post-prose .warning::before,
.bs-post-prose .success::before,
.bs-post-prose .stats::before,
.bs-post-prose .intro-highlight::before,
.bs-post-prose .example-good::before,
.bs-post-prose .example-bad::before {
  display: none;
}
/* Calmer, cohesive palette: blue (info) / green (positive) / amber (caution) / red (negative).
   Muted backgrounds + readable dark text for comfortable reading. */
.bs-post-prose .tip            { background: #eef4f9; border-left-color: #5b94c4; color: #25323c; }
.bs-post-prose .tip::before    { content: "💡"; }
.bs-post-prose .warning        { background: #f8f3ea; border-left-color: #c79a52; color: #3d3225; }
.bs-post-prose .warning::before{ content: "⚠️"; }
.bs-post-prose .success        { background: #eef5ef; border-left-color: #5e9b6c; color: #28392d; }
.bs-post-prose .success::before{ content: "✅"; }
.bs-post-prose .stats          { background: #f3f6f9; border-left-color: #8aa0b3; color: #2b3742; }
.bs-post-prose .stats::before  { content: "📊"; }
.bs-post-prose .intro-highlight{ background: #eef4f9; border-left-color: var(--bs-blue, #006aac); color: #25323c; font-size: 17px; }
.bs-post-prose .intro-highlight::before{ content: "📝"; }
.bs-post-prose .example-good   { background: #eef5ef; border-left-color: #5e9b6c; color: #28392d; padding-left: 18px; }
.bs-post-prose .example-good::before { content: ""; }
.bs-post-prose .example-bad    { background: #f8efef; border-left-color: #c06a6a; color: #3e2a2a; padding-left: 18px; }
.bs-post-prose .example-bad::before  { content: ""; }

/* Big-stat number inside .stats */
.bs-post-prose .stats-big {
  display: inline-block;
  font-size: 1.4em;
  font-weight: 800;
  color: #1f5a86;
  margin: 0 4px;
}

/* EZ-TOC table of contents */
.bs-post-prose #ez-toc-container,
.bs-post-prose .ez-toc-v2_0_51_1 {
  background: #f8fafc;
  border: 1px solid var(--bs-border, #e4ecf2);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 1.8em 0 2em;
  box-shadow: 0 2px 8px rgba(0, 47, 82, .04);
}
.bs-post-prose .ez-toc-title-container { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--bs-border, #e4ecf2); }
.bs-post-prose .ez-toc-title {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-muted, #586a78);
}
.bs-post-prose .ez-toc-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; }
.bs-post-prose .ez-toc-list li { margin: 0 0 6px; break-inside: avoid; }
.bs-post-prose .ez-toc-link {
  display: block;
  padding: 3px 0;
  color: var(--bs-text, #0f1c25);
  text-decoration: none !important;
  font-size: 13.5px;
  line-height: 1.4;
  border-bottom: 0 !important;
}
.bs-post-prose .ez-toc-link:hover {
  color: var(--bs-blue, #006aac);
  text-decoration: underline !important;
  text-underline-offset: 3px;
  border-bottom: 0 !important;
}
@media (max-width: 700px) {
  .bs-post-prose .ez-toc-list { columns: 1; }
}

/* Hide ez-toc decorative anchor sections within headings (don't take h2 space) */
.bs-post-prose .ez-toc-section,
.bs-post-prose .ez-toc-section-end { display: inline; padding: 0; }
.bs-post-prose h2 .ez-toc-section { font-size: inherit; font-weight: inherit; }

/* Images inside prose */
.bs-post-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1em 0;
  box-shadow: 0 4px 14px rgba(0, 47, 82, .08);
}
.bs-post-single-tags { max-width: 760px; margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bs-page-links { margin-top: 30px; padding-top: 20px; border-top: 1px dashed var(--bs-border, #d4e2ea); font-size: 14px; }
.bs-page-links span:first-child { font-weight: 700; margin-right: 8px; }
.bs-page-links a, .bs-page-links > span:not(:first-child) {
  display: inline-block;
  margin: 0 2px;
  padding: 4px 10px;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 6px;
  text-decoration: none;
}

/* --- Pagination (used by archives) --- */
.bs-pagination { margin-top: 50px; }
.bs-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bs-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 8px;
  color: var(--bs-text, #0f1c25);
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bs-pagination .page-numbers:hover { border-color: var(--bs-blue, #006aac); color: var(--bs-blue, #006aac); }
.bs-pagination .page-numbers.current {
  background: var(--bs-blue, #006aac);
  border-color: var(--bs-blue, #006aac);
  color: #fff;
}

/* --- Breadcrumb (case study + blog single) --- */
.bs-breadcrumb {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--bs-muted, #586a78);
}
.bs-breadcrumb a {
  color: var(--bs-muted, #586a78);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.bs-breadcrumb a:hover { color: var(--bs-blue, #006aac); border-bottom-color: var(--bs-blue, #006aac); }
.bs-breadcrumb span { margin: 0 6px; }

/* ==========================================================================
   v1.7.0 - Single-service template stub: related services list + prose
   ========================================================================== */
.bs-related-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bs-related-services li { margin: 0; }
.bs-related-services a {
  display: block;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 10px;
  color: var(--bs-text, #0f1c25);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.bs-related-services a:hover {
  border-color: var(--bs-blue, #006aac);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 47, 82, .08);
}
.bs-prose { max-width: 820px; margin-left: auto; margin-right: auto; }
.bs-prose h2 { margin-top: 1.6em; }
.bs-prose p, .bs-prose ul, .bs-prose ol { margin-bottom: 1em; }
.bs-hero-thumb { max-width: 100%; height: auto; border-radius: 14px; }

/* ─── Контакти page (page-template: tpl-kontakti.php) ─────────────── */
.bs-kontakti-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 28px;
  max-width: 720px;
}
.bs-kontakti-quick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.bs-kontakti-quick-card:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--bs-lime, #cdff16);
  transform: translateY(-2px);
  color: #fff;
}
.bs-kontakti-quick-card--info { cursor: default; }
.bs-kontakti-quick-card--info:hover { transform: none; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); }
.bs-kontakti-quick-icon {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
  background: rgba(205, 255, 22, .14);
  color: var(--bs-lime, #cdff16);
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
}
.bs-kontakti-quick-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-kontakti-quick-card strong { color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bs-kontakti-quick-card span { color: rgba(255, 255, 255, .82); font-size: 14px; word-break: break-word; }

.bs-kontakti-links-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
.bs-kontakti-links-grid h3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--bs-text, #0f1c25);
}
.bs-kontakti-links-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.bs-kontakti-links-right ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.bs-kontakti-links-right li { margin: 0; }
.bs-kontakti-links-right a {
  display: inline-block;
  padding: 8px 12px;
  background: var(--bs-bg-soft, #f7f9fb);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 8px;
  color: var(--bs-text, #0f1c25);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.bs-kontakti-links-right a:hover {
  border-color: var(--bs-blue, #006aac);
  color: var(--bs-blue, #006aac);
  background: #fff;
}

.bs-semrush-wrap { margin-top: 24px; }
.bs-semrush-iframe { width: 100%; min-height: 420px; border: 0; border-radius: 12px; background: #fff; }
.bs-semrush-iframe.show-mobile { display: none; }
@media (max-width: 768px) {
  .bs-kontakti-links-grid { grid-template-columns: 1fr; gap: 28px; }
  .bs-semrush-iframe.hide-mobile { display: none; }
  .bs-semrush-iframe.show-mobile { display: block; min-height: 520px; }
  .bs-kontakti-quick { grid-template-columns: 1fr; }
}

/* ─── HTML sitemap (page-template: tpl-sitemap.php) ──────────────── */
.bs-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 28px;
  align-items: start;
}
.bs-sitemap-col h2 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bs-border, #e1ecf2);
  font-size: 20px;
  font-weight: 700;
  color: var(--bs-text, #0f1c25);
}
.bs-sitemap-col h2 a { color: inherit; text-decoration: none; }
.bs-sitemap-col h2 a:hover { color: var(--bs-blue, #006aac); }
.bs-sitemap-col h3 {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-muted, #586a78);
}
.bs-sitemap-col ul { list-style: none; margin: 0; padding: 0; }
.bs-sitemap-col li { margin-bottom: 6px; }
.bs-sitemap-col a {
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.bs-sitemap-col a:hover {
  color: var(--bs-blue, #006aac);
  border-bottom-color: var(--bs-blue, #006aac);
}
.bs-sitemap-col--wide { grid-column: 1 / -1; }
.bs-sitemap-inline {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.bs-sitemap-inline li { margin-bottom: 0; }
@media (max-width: 640px) {
  .bs-sitemap-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Portfolio facet filter CSS removed in v1.37.3 - see
   /_archive/portfolio-filter-v1.37.1.md for restoration. */

/* ─── Trusted-by logo marquee (scroll-parallax) ──────────────────────── */
.bs-trusted {
  padding: 56px 0 64px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bs-bg-soft, #f7f9fb) 0%, #fff 100%);
}
.bs-trusted__title {
  font-family: var(--bs-font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--bs-ink, #07172e);
  margin-bottom: 28px;
  text-align: left;
}
.bs-trusted__rows {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bs-trusted__row {
  overflow: hidden;
  width: 100%;
}
.bs-trusted__track {
  display: flex;
  align-items: center;
  gap: 56px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  /* JS rewrites this on scroll. The transform is lerp-smoothed in JS so
     no CSS transition is needed - adding one would double-buffer and feel
     laggy during fast scroll. */
}
.bs-trusted__row--left .bs-trusted__track { transform: translate3d(-120px, 0, 0); }
.bs-trusted__logo {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}
.bs-trusted__logo:hover { opacity: 1; filter: grayscale(0); transform: translateY(-2px); }
.bs-trusted__logo a { display: inline-flex; align-items: center; }
.bs-trusted__logo img {
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .bs-trusted { padding: 40px 0 44px; }
  .bs-trusted__title { font-size: 18px; margin-bottom: 18px; text-align: center; }
  .bs-trusted__rows { gap: 14px; }
  .bs-trusted__track { gap: 32px; transform: none !important; }
  .bs-trusted__logo { min-width: 90px; }
  .bs-trusted__logo img { height: 32px; max-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-trusted__track { transform: none !important; transition: none !important; }
}

/* ─── Blog category chips (replaces the old dropdown) ─────────────── */
.bs-blog-cat-filter {
  padding: 24px 0 24px;
  background: #fff;
}
.bs-blog-cat-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.bs-blog-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bs-bg-soft, #f7f9fb);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 999px;
  font-family: var(--bs-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-text, #0f1c25);
  text-decoration: none;
  transition: all .15s ease;
}
.bs-blog-cat-chip small {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  padding: 0 5px;
  height: 20px;
  background: #fff;
  border: 1px solid var(--bs-border, #d4e2ea);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bs-muted, #586a78);
}
.bs-blog-cat-chip:hover {
  background: #fff;
  border-color: var(--bs-blue, #006aac);
  color: var(--bs-blue, #006aac);
  transform: translateY(-1px);
}
.bs-blog-cat-chip.is-active {
  background: var(--bs-blue, #006aac);
  border-color: var(--bs-blue, #006aac);
  color: #fff;
}
.bs-blog-cat-chip.is-active small {
  background: rgba(255, 255, 255, .22);
  border-color: transparent;
  color: #fff;
}

/* ─── Table of contents (ez-toc plugin) breathing room ────────────── */
#ez-toc-container {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

/* Mega-feature creative SEO visualization removed in v1.40.2 per design
   feedback. Card stays a clean text-only Портфолио panel. */

/* Per-block .bs-anim system removed in v1.46.1 - the global .bs-reveal
   IntersectionObserver (defined elsewhere) auto-animates section heads
   and cards. Per-section animation control was deemed unnecessary. */

/* ╔═══════════════════════════════════════════════════════════════════╗
 * ║ Step 5 - Per-block style overrides (brand tokens)                ║
 * ╚═══════════════════════════════════════════════════════════════════╝
 * Block JSON can carry `style: { bg, text, pad }`. Render emits modifier
 * classes on the same wrap div as animations. CSS pulls values from the
 * existing :root tokens - admin can't go off-brand by accident.
 *
 * Wrap div sits OUTSIDE the block's own <section>. To make bg/padding
 * land on the right surface we neutralize the inner section's defaults
 * when an override is set (only via direct-child selector - won't leak).
 */

/* Backgrounds */
.bs-block-bg-white  { background: var(--bs-white, #fff); }
.bs-block-bg-cream  { background: var(--bs-cream, #f3f6f9); }
.bs-block-bg-ice    { background: var(--bs-ice,   #f4f9fc); }
.bs-block-bg-light  { background: var(--bs-light, #e1ecf2); }
.bs-block-bg-blue   { background: linear-gradient(135deg, var(--bs-blue, #07a4f3), #00477a); }
.bs-block-bg-dark   { background: linear-gradient(135deg, var(--bs-dark, #0c1f31), var(--bs-dark-2, #081522)); }
.bs-block-bg-lime   { background: var(--bs-lime, #cdff16); }

/* When a wrap has bg, neutralize the inner section's own bg so the wrap's
   bg shows through. Direct-child only - won't affect nested blocks. */
.bs-block-bg-white  > section,
.bs-block-bg-cream  > section,
.bs-block-bg-ice    > section,
.bs-block-bg-light  > section,
.bs-block-bg-blue   > section,
.bs-block-bg-dark   > section,
.bs-block-bg-lime   > section { background: transparent !important; }

/* Auto-flip text colors for dark backgrounds. Admin can still override
   via the text-color picker, but this is the sensible default. */
.bs-block-bg-blue,
.bs-block-bg-dark { color: var(--bs-white, #fff); }
.bs-block-bg-blue h1, .bs-block-bg-blue h2, .bs-block-bg-blue h3, .bs-block-bg-blue p,
.bs-block-bg-dark h1, .bs-block-bg-dark h2, .bs-block-bg-dark h3, .bs-block-bg-dark p { color: inherit; }
.bs-block-bg-lime { color: var(--bs-dark, #0c1f31); }

/* Text colors (explicit admin choice - overrides auto-flip above) */
.bs-block-text-dark,
.bs-block-text-dark h1, .bs-block-text-dark h2, .bs-block-text-dark h3, .bs-block-text-dark p { color: var(--bs-text, #0c1f31); }
.bs-block-text-body,
.bs-block-text-body h1, .bs-block-text-body h2, .bs-block-text-body h3, .bs-block-text-body p { color: var(--bs-body, #2c4051); }
.bs-block-text-muted,
.bs-block-text-muted h1, .bs-block-text-muted h2, .bs-block-text-muted h3, .bs-block-text-muted p { color: var(--bs-muted, #667888); }
.bs-block-text-light,
.bs-block-text-light h1, .bs-block-text-light h2, .bs-block-text-light h3, .bs-block-text-light p { color: var(--bs-white, #fff); }
.bs-block-text-blue,
.bs-block-text-blue h1, .bs-block-text-blue h2, .bs-block-text-blue h3, .bs-block-text-blue p { color: var(--bs-blue, #07a4f3); }

/* Padding overrides - uses 8pt spacing tokens. Applied to wrap (not section
   inside) so combined animations + padding work cleanly. */
.bs-block-pad-sm   { padding-top: var(--bs-sm, 16px); padding-bottom: var(--bs-sm, 16px); }
.bs-block-pad-md   { padding-top: 40px; padding-bottom: 40px; }
.bs-block-pad-lg   { padding-top: var(--bs-2xl, 72px); padding-bottom: var(--bs-2xl, 72px); }
.bs-block-pad-xl   { padding-top: var(--bs-3xl, 96px); padding-bottom: var(--bs-3xl, 96px); }
.bs-block-pad-none { padding-top: 0; padding-bottom: 0; }

/* When admin sets padding override, neutralize inner section's vertical
   padding so total spacing matches the override exactly. */
.bs-block-pad-sm > section,
.bs-block-pad-md > section,
.bs-block-pad-lg > section,
.bs-block-pad-xl > section,
.bs-block-pad-none > section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ╔═════════════════════════════════════════════════════════════════╗
 * ║ Step 2 - Page Builder block PRESETS (visual variants per type) ║
 * ╚═════════════════════════════════════════════════════════════════╝
 * Blocks save `{ type, preset, data }`. Preset → CSS modifier class:
 *   .bs-hero--preset-<key>, .bs-cards--preset-<key>, .bs-steps--preset-<key>
 * Default preset (or missing) = no class = render unchanged.
 */

/* ─── HERO presets ─────────────────────────────────────────────── */

/* preset: centered - solo grid, centered copy, no form aside.
   Render also adds `bs-hero-grid--solo` + `bs-hero-copy--center` so the
   existing rules at line 5598 handle layout. We just tighten max-width. */
.bs-hero--preset-centered .bs-hero-copy { max-width: 760px; margin: 0 auto; }

/* preset: wide-text - like centered but wider container, larger H1. */
.bs-hero--preset-wide-text .bs-hero-copy { max-width: 960px; margin: 0 auto; }
.bs-hero--preset-wide-text h1 { font-size: clamp(34px, 4.2vw, 56px); }
.bs-hero--preset-wide-text p { font-size: 20px; max-width: 760px; margin-left: auto; margin-right: auto; }

/* preset: compact - already adds bs-hero--compact class via render.
   No extra rules needed (existing .bs-hero--compact handles padding). */

/* ─── CARDS presets ────────────────────────────────────────────── */

/* preset: compact-2col - 2 cards per row, wider tiles */
.bs-cards--preset-compact-2col .bs-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 640px) {
  .bs-cards--preset-compact-2col .bs-feature-grid { grid-template-columns: 1fr; }
}

/* preset: minimal - no icon/image, larger text, tighter layout */
.bs-cards--preset-minimal .bs-feature-grid > div {
  padding: 18px 20px;
  background: transparent;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 10px;
}
.bs-cards--preset-minimal .bs-feature-grid > div img { display: none; }
.bs-cards--preset-minimal .bs-feature-grid > div strong { font-size: 17px; }

/* preset: image-left - horizontal layout per card: img on left, text on right */
.bs-cards--preset-image-left .bs-feature-grid > div {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 18px;
  text-align: left;
}
.bs-cards--preset-image-left .bs-feature-grid > div img {
  margin-bottom: 0;
  max-width: 80px !important;
}
.bs-cards--preset-image-left .bs-feature-grid > div strong,
.bs-cards--preset-image-left .bs-feature-grid > div span,
.bs-cards--preset-image-left .bs-feature-grid > div a { grid-column: 2; }
@media (max-width: 560px) {
  .bs-cards--preset-image-left .bs-feature-grid > div { grid-template-columns: 60px 1fr; gap: 14px; }
}

/* ─── STEPS block - default (horizontal grid) ─────────────────── */

.bs-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1180px;
}
@media (max-width: 980px) {
  .bs-process-grid { grid-template-columns: repeat(2, 1fr); }
}
.bs-process-step {
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bs-process-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(12, 31, 49, .08);
  border-color: var(--bs-blue);
}
.bs-process-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bs-blue) 0%, var(--bs-blue-2) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(7, 164, 243, .25);
}
.bs-process-step strong {
  font-size: 17px;
  color: var(--bs-text);
  font-weight: 700;
  line-height: 1.35;
  margin-top: 4px;
}
.bs-process-step > span:not(.bs-process-num) {
  color: var(--bs-body);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .bs-process-grid { grid-template-columns: 1fr; gap: 16px; }
  .bs-process-step { padding: 22px 20px 20px; }
  .bs-process-num { width: 40px; height: 40px; font-size: 16px; }
}

/* ─── STEPS presets ────────────────────────────────────────────── */

/* preset: vertical - stack steps in a single column timeline */
.bs-steps--preset-vertical .bs-process-grid {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}
.bs-steps--preset-vertical .bs-process-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--bs-border, #e1ecf2);
}
.bs-steps--preset-vertical .bs-process-step:last-child { border-bottom: 0; }
.bs-steps--preset-vertical .bs-process-num {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: var(--bs-blue, #006aac);
  color: #fff;
  border-radius: 50%;
  font-weight: 900;
  font-size: 18px;
}
.bs-steps--preset-vertical .bs-process-step strong,
.bs-steps--preset-vertical .bs-process-step span { grid-column: 2; }

/* ═══════════════════════════════════════════════════════════════════════
   Image + Text widget (Page Builder block: image_text)
   ─ Reuses existing .bs-imgtext (1fr 1fr grid) and .bs-imgtext--reverse.
   ─ Adds: --stack (image-top preset) + section wrapper for padding/bg.
   ═══════════════════════════════════════════════════════════════════════ */
.bs-imgtext-wrap {
  padding: clamp(48px, 7vw, 96px) 0;
}
.bs-imgtext-wrap .bs-imgtext-copy .bs-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--bs-blue, #006aac);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bs-imgtext-wrap .bs-imgtext-text { color: var(--bs-body, #4a5560); font-size: 17px; line-height: 1.7; }
.bs-imgtext-wrap .bs-imgtext-text strong { color: var(--bs-text, #1d2327); }
.bs-imgtext-wrap .bs-imgtext-cta { margin-top: 18px; }

.bs-imgtext-wrap .bs-imgtext-media {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bs-ice, #f5f8fb);
  min-height: 280px;
  display: grid;
  place-items: center;
}
.bs-imgtext-wrap .bs-imgtext-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* preset: image-top (vertical stack - media first, copy below) */
.bs-imgtext.bs-imgtext--stack {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
  gap: 36px;
}
.bs-imgtext.bs-imgtext--stack .bs-imgtext-media {
  min-height: 240px;
  max-height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   CTA Banner widget (Page Builder block: cta_banner)
   ═══════════════════════════════════════════════════════════════════════ */
.bs-cta-banner {
  padding: clamp(56px, 8vw, 96px) 0;
  background: linear-gradient(135deg, var(--bs-blue, #006aac) 0%, var(--bs-dark, #0d1a23) 100%);
  color: #fff;
}
.bs-cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.bs-cta-banner__copy { max-width: 720px; }
.bs-cta-banner .bs-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--bs-lime, #a4c91a);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bs-cta-banner h2 {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--bs-font-display, "Manrope", sans-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  font-weight: 900;
}
.bs-cta-banner p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 17px;
  line-height: 1.6;
}
.bs-cta-banner__action { display: flex; justify-content: center; }
.bs-cta-banner .bs-button--accent {
  background: var(--bs-lime, #a4c91a);
  color: var(--bs-dark, #0d1a23);
  font-weight: 900;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bs-cta-banner .bs-button--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(164, 201, 26, .35);
}

/* preset: split - текст вляво, бутон вдясно (по-широка лента) */
.bs-cta-banner--preset-split { padding: clamp(40px, 5vw, 64px) 0; }
.bs-cta-banner--preset-split .bs-cta-banner__inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 32px;
}
.bs-cta-banner--preset-split .bs-cta-banner__copy { max-width: none; flex: 1; }
.bs-cta-banner--preset-split h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 6px; }
.bs-cta-banner--preset-split .bs-eyebrow { margin-bottom: 6px; }
.bs-cta-banner--preset-split .bs-cta-banner__action { flex: 0 0 auto; }

@media (max-width: 720px) {
  .bs-cta-banner--preset-split .bs-cta-banner__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* preset: minimal - transparent bg, border-top/bottom */
.bs-cta-banner--preset-minimal {
  background: transparent;
  color: var(--bs-text, #1d2327);
  border-top: 1px solid var(--bs-border, #e1ecf2);
  border-bottom: 1px solid var(--bs-border, #e1ecf2);
  padding: clamp(40px, 6vw, 64px) 0;
}
.bs-cta-banner--preset-minimal h2 { color: var(--bs-text, #1d2327); }
.bs-cta-banner--preset-minimal p { color: var(--bs-body, #4a5560); }
.bs-cta-banner--preset-minimal .bs-eyebrow { color: var(--bs-blue, #006aac); }
.bs-cta-banner--preset-minimal .bs-button--accent {
  background: var(--bs-blue, #006aac);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   SEO услуги по локация (областни страници)
   Layout: hero-copy + CF7 form aside · pricing reuses homepage section ·
   regional profile compact (map + facts) · single CTA (hero form).
   ═══════════════════════════════════════════════════════════════════════ */
.bs-location-page { background: #fff; }

.bs-location-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
}
.bs-location-breadcrumb a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.bs-location-breadcrumb a:hover { text-decoration: underline; }
.bs-location-breadcrumb span[aria-current] { color: #fff; font-weight: 600; }

/* Hero uses default .bs-hero dark gradient + white text */
.bs-location-hero h1 { color: #fff; }
.bs-location-hero p { color: rgba(255, 255, 255, .88); }

/* Hero bullets - white text + lime check on dark hero bg */
.bs-location-hero-bullets {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-location-hero-bullets li {
  position: relative;
  padding: 4px 0 4px 30px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 1.55;
}
.bs-location-hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  background: var(--bs-lime, #a4c91a);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/></svg>") center/contain no-repeat;
}

/* Hero form card - на dark hero bg */
.bs-location-hero .bs-form-card {
  padding: 24px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  color: var(--bs-text, #1d2327);
}
.bs-location-hero-form-head {
  margin: 0 0 16px;
  padding: 0;
}
.bs-location-hero-form-head strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--bs-text, #1d2327);
  font-family: var(--bs-font-display, "Manrope", sans-serif);
}

/* CF7 form inside location hero - match site form styles */
.bs-location-hero .bs-form-card .wpcf7 { margin: 0; }
.bs-location-hero .bs-form-card .wpcf7-form-control-wrap { display: block; }
.bs-location-hero .bs-form-card .wpcf7 input[type="text"],
.bs-location-hero .bs-form-card .wpcf7 input[type="email"],
.bs-location-hero .bs-form-card .wpcf7 input[type="tel"],
.bs-location-hero .bs-form-card .wpcf7 input[type="url"],
.bs-location-hero .bs-form-card .wpcf7 input[type="number"],
.bs-location-hero .bs-form-card .wpcf7 textarea,
.bs-location-hero .bs-form-card .wpcf7 select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--bs-text, #1d2327);
  font-family: inherit;
  box-sizing: border-box;
}
.bs-location-hero .bs-form-card .wpcf7 textarea { min-height: 80px; resize: vertical; }
.bs-location-hero .bs-form-card .wpcf7 p {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bs-text, #1d2327);
}

/* CF7 submit - falls through to global .wpcf7-form .wpcf7-submit (blue,
   hover-to-lime), за пълна консистентност с останалите CF7 форми. Тук
   само добавяме margin-top за визуален breath спрямо предходните полета. */
.bs-location-hero .bs-form-card .wpcf7 input[type="submit"],
.bs-location-hero .bs-form-card .wpcf7-submit,
.bs-location-hero .bs-form-card .wpcf7 input.btn {
  margin-top: 8px;
}
.bs-location-hero .bs-form-card .wpcf7-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
.bs-location-hero .bs-form-card .wpcf7-response-output {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}

/* Trust strip */
.bs-location-trust {
  background: var(--bs-cream, #faf7f2);
  border-top: 1px solid var(--bs-border, #e1ecf2);
  border-bottom: 1px solid var(--bs-border, #e1ecf2);
  padding: 28px 0;
}

/* Services breakdown (4 numbered tiles) */
.bs-location-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.bs-location-services-grid li {
  position: relative;
  padding: 28px 24px 24px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 14px;
  margin: 0;
}
.bs-location-svc-num {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  background: var(--bs-blue, #006aac);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  font-family: var(--bs-font-display, "Manrope", sans-serif);
}
.bs-location-services-grid h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--bs-text, #1d2327);
  font-family: var(--bs-font-display, "Manrope", sans-serif);
  line-height: 1.25;
}
.bs-location-services-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs-body, #4a5560);
}

/* Стратегия / уникален copy */
.bs-location-strategy-copy {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--bs-body, #4a5560);
}
.bs-location-strategy-copy p { margin: 0 0 16px; }
.bs-location-strategy-copy strong { color: var(--bs-text, #1d2327); }
.bs-location-strategy-copy a { color: var(--bs-blue, #006aac); }

/* Покритие - общините се рендват с bs-services-linklist (минимални inline links) */
.bs-location-nearby-list.bs-services-linklist {
  margin: 28px 0 0;
}
.bs-location-nearby-list.bs-services-linklist a {
  font-weight: 500;
}
.bs-location-nearby-list.bs-services-linklist a span[itemprop="name"] { font-weight: 600; }

/* Регионален профил - map + key facts side-by-side, минимална тежест */
.bs-location-profile { padding: clamp(40px, 5vw, 64px) 0; }
.bs-section-head--small h2 {
  font-size: clamp(20px, 2vw, 26px);
}
.bs-location-profile-intro {
  max-width: 760px;
  margin: 20px auto 32px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--bs-body, #4a5560);
  text-align: center;
}
.bs-location-profile-intro strong {
  color: var(--bs-text, #1d2327);
  font-weight: 700;
}
.bs-location-profile-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  margin: 24px 0 0;
  align-items: stretch;
}
.bs-location-profile-map {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bs-ice, #f1f6fa);
  border: 1px solid var(--bs-border, #e1ecf2);
  min-height: 380px;
}
.bs-location-profile-map iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  display: block;
  filter: saturate(.85) contrast(1.02);
}
.bs-location-profile-side {
  padding: 24px 28px;
  background: var(--bs-ice, #f1f6fa);
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bs-location-profile-data {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 22px;
  align-content: start;
}
.bs-location-profile-data > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bs-location-profile-data > .bs-location-profile-data-wide {
  grid-column: 1 / -1;
}
.bs-location-profile-data dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--bs-body, #4a5560);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bs-location-profile-data dd {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--bs-text, #1d2327);
  font-family: var(--bs-font-display, "Manrope", sans-serif);
  line-height: 1.35;
}
.bs-location-profile-data .bs-location-profile-data-wide dd {
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--bs-body, #4a5560);
}
.bs-location-profile-sources {
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--bs-border, #e1ecf2);
  font-size: 12px;
  color: var(--bs-body, #4a5560);
  line-height: 1.5;
}
.bs-location-profile-sources strong {
  display: block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bs-body, #4a5560);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bs-location-profile-sources p {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--bs-body, #4a5560);
  line-height: 1.5;
}
.bs-location-profile-sources p:last-child { margin-bottom: 0; }
.bs-location-profile-sources a {
  color: var(--bs-blue, #006aac);
  text-decoration: underline;
  text-decoration-color: rgba(0, 106, 172, .35);
  text-underline-offset: 2px;
  word-break: break-all;
  font-weight: 500;
}
.bs-location-profile-sources a:hover {
  color: var(--bs-text, #1d2327);
  text-decoration-color: var(--bs-text, #1d2327);
}

@media (max-width: 860px) {
  .bs-location-profile-grid { grid-template-columns: 1fr; }
  .bs-location-profile-map, .bs-location-profile-map iframe { min-height: 280px; }
}
@media (max-width: 520px) {
  .bs-location-profile-data { grid-template-columns: 1fr; }
}

/* Pricing section wrapper - let homepage pricing styles handle everything */
.bs-location-pricing { padding: 0; }

/* Glossary tooltip - за технически термини в публичен текст (Map Pack,
   E-E-A-T, YMYL и т.н.). Дашед underline + help cursor визуално подсказват
   че термина има пояснение при hover. */
abbr.bs-glossary {
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--bs-blue, #006aac);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-bottom: none;
  font-weight: inherit;
}
abbr.bs-glossary:hover {
  text-decoration-style: solid;
  background: rgba(0, 106, 172, .06);
}

/* ═══════════════════════════════════════════════════════════════════════
   SEO услуги по бизнес-индустрия (пилот зъболекари + 4 други ниши)
   Reuse-ва повечето стилове от .bs-location-page; industry-specific
   секции: keywords cloud + pain points list.
   ═══════════════════════════════════════════════════════════════════════ */

.bs-industry-page { background: #fff; }

/* Top keywords cloud - chip layout (centered) */
.bs-industry-keywords-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 12px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  max-width: 920px;
}
.bs-industry-keywords-cloud li { margin: 0; }
.bs-industry-keyword-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bs-text, #1d2327);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.bs-industry-keyword-chip:hover {
  border-color: var(--bs-blue, #006aac);
  background: rgba(0, 106, 172, .04);
  transform: translateY(-1px);
}

/* Pain points - numbered list */
.bs-industry-pain { padding: clamp(40px, 5vw, 64px) 0; }
.bs-industry-pain-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.bs-industry-pain-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 10px;
  margin: 0;
}
.bs-industry-pain-num {
  flex: 0 0 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--bs-cream, #faf7f2);
  color: var(--bs-blue, #006aac);
  border: 1px solid rgba(0, 106, 172, .15);
  border-radius: 50%;
  font-family: var(--bs-font-display, "Manrope", sans-serif);
  font-size: 14px;
  font-weight: 800;
}
.bs-industry-pain-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--bs-body, #4a5560);
}

/* Industry profile - single-column (no map for industry pages) */
.bs-industry-profile .bs-location-profile-grid {
  grid-template-columns: 1fr;
  max-width: 880px;
  margin: 24px auto 0;
}
.bs-industry-profile .bs-location-profile-side { padding: 24px 28px; }

@media (max-width: 760px) {
  .bs-industry-pain-list { grid-template-columns: 1fr; }
}

/* Общини / Райони grid */
.bs-location-nearby { padding: clamp(48px, 6vw, 72px) 0; }
.bs-location-nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.bs-location-nearby-grid li { margin: 0; }
.bs-location-nearby-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 10px;
  color: var(--bs-text, #1d2327);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bs-location-nearby-grid a:hover {
  border-color: var(--bs-blue, #006aac);
  box-shadow: 0 6px 18px rgba(0, 106, 172, .12);
  transform: translateY(-2px);
}
.bs-location-nearby-icon {
  font-size: 18px;
  flex: 0 0 auto;
}
.bs-location-nearby-name {
  font-size: 14px;
  color: var(--bs-body, #4a5560);
  font-weight: 500;
}
.bs-location-nearby-name strong {
  color: var(--bs-text, #1d2327);
  font-weight: 700;
}

/* Services breakdown (4 numbered tiles) */
.bs-location-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.bs-location-services-grid li {
  position: relative;
  padding: 28px 24px 24px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 14px;
  margin: 0;
}
.bs-location-svc-num {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  background: var(--bs-blue, #006aac);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  font-family: var(--bs-font-display, "Manrope", sans-serif);
}
.bs-location-services-grid h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--bs-text, #1d2327);
  font-family: var(--bs-font-display, "Manrope", sans-serif);
  line-height: 1.25;
}
.bs-location-services-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs-body, #4a5560);
}

/* FAQ - reuse .bs-faq existing styles, just add wrapper context */
.bs-location-faq .bs-faq {
  max-width: 820px;
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-location-faq .bs-faq-item {
  padding: 0;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 10px;
  overflow: hidden;
}
.bs-location-faq .bs-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--bs-text, #1d2327);
  position: relative;
  padding-right: 50px;
}
.bs-location-faq .bs-faq-item summary::-webkit-details-marker { display: none; }
.bs-location-faq .bs-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--bs-ice, #f1f6fa);
  color: var(--bs-blue, #006aac);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
  transition: transform .2s ease;
}
.bs-location-faq .bs-faq-item[open] summary::after {
  content: "-";
  transform: translateY(-50%) rotate(0);
}
.bs-location-faq .bs-faq-answer {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--bs-body, #4a5560);
}
.bs-location-faq .bs-faq-answer p { margin: 0 0 12px; }
.bs-location-faq .bs-faq-answer p:last-child { margin-bottom: 0; }

/* All-области cloud */
.bs-location-all { padding: clamp(56px, 7vw, 80px) 0; background: var(--bs-cream, #faf7f2); }
.bs-location-all-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}
.bs-location-all-cloud li { margin: 0; }
.bs-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 999px;
  color: var(--bs-text, #1d2327);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.bs-location-chip:hover {
  border-color: var(--bs-blue, #006aac);
  color: var(--bs-blue, #006aac);
  box-shadow: 0 4px 12px rgba(0, 106, 172, .12);
}
.bs-location-chip.is-current {
  background: var(--bs-blue, #006aac);
  color: #fff;
  border-color: var(--bs-blue, #006aac);
}
.bs-location-chip.is-soon {
  background: transparent;
  color: var(--bs-body, #4a5560);
  border-style: dashed;
  opacity: .65;
  cursor: not-allowed;
}

/* CTA section with embedded CF7 form */
.bs-location-cta {
  background: linear-gradient(135deg, var(--bs-blue, #006aac) 0%, var(--bs-dark, #0d1a23) 100%);
  color: #fff;
  padding: clamp(56px, 8vw, 96px) 0;
}
.bs-location-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.bs-location-cta-copy h2 {
  margin: 12px 0 16px;
  color: #fff;
  font-family: var(--bs-font-display, "Manrope", sans-serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  font-weight: 900;
}
.bs-location-cta-copy p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .85);
  font-size: 16px;
  line-height: 1.65;
}
.bs-location-cta-copy .bs-eyebrow {
  color: var(--bs-lime, #a4c91a);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.bs-location-cta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bs-location-cta-list li {
  padding: 8px 0;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  font-weight: 500;
}
.bs-location-cta-form {
  padding: 28px;
  background: #fff;
  border-radius: 14px;
  color: var(--bs-text, #1d2327);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.bs-location-cta-form .wpcf7 { margin: 0; }
.bs-location-cta-form .wpcf7 input[type="text"],
.bs-location-cta-form .wpcf7 input[type="email"],
.bs-location-cta-form .wpcf7 input[type="tel"],
.bs-location-cta-form .wpcf7 input[type="url"],
.bs-location-cta-form .wpcf7 textarea,
.bs-location-cta-form .wpcf7 select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--bs-text, #1d2327);
  font-family: inherit;
  box-sizing: border-box;
}
.bs-location-cta-form .wpcf7 textarea { min-height: 90px; }
.bs-location-cta-form .wpcf7 label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-text, #1d2327);
}
.bs-location-cta-form .wpcf7 input[type="submit"],
.bs-location-cta-form .wpcf7-submit {
  width: 100%;
  padding: 14px 22px;
  background: var(--bs-blue, #006aac);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  margin-top: 8px;
}
.bs-location-cta-form .wpcf7 input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 106, 172, .35);
}

@media (max-width: 860px) {
  .bs-location-cta-grid { grid-template-columns: 1fr; gap: 32px; }
  .bs-location-quick-facts { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────── *
 *  Page Builder Testimonials block (.bs-pb-testimonials)
 *  Namespaced под `bs-pb-` за да не collide-ва с pre-existing
 *  `.bs-testimonials` от landing-render.php (homepage 3-col grid).
 *  3 presets: --default (auto-fit), --list (1-col), --slider (h-scroll).
 * ───────────────────────────────────────────────────────────────── */
.bs-pb-testimonials-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.bs-pb-testimonials-head h2 { margin: 12px 0 12px; }
.bs-pb-testimonials-intro { color: var(--bs-body); margin: 0; }

.bs-pb-testimonials-list {
  display: grid;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Default = auto-fit grid - адаптира към броя items (1 = full, 2 = halves, 3 = thirds). */
/* min(420px, 100%) - track-ът никога не надвишава ширината на контейнера,
   затова на телефон (под 420px) не прелива хоризонтално. */
.bs-pb-testimonials--default .bs-pb-testimonials-list {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  justify-content: center;
}

/* List = 1 column, photo на ляво (footer flex) */
.bs-pb-testimonials--list .bs-pb-testimonials-list { grid-template-columns: 1fr; max-width: 780px; }
.bs-pb-testimonials--list .bs-pb-testimonial { padding: 32px 36px; }

/* Slider = horizontal scroll with snap (CSS-only) */
.bs-pb-testimonials--slider .bs-pb-testimonials-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 360px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: thin;
  max-width: none;
}
.bs-pb-testimonials--slider .bs-pb-testimonial { scroll-snap-align: start; }

/* Card */
.bs-pb-testimonial {
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 4px 14px rgba(12, 31, 49, .04);
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 280px;
}
.bs-pb-testimonial:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12, 31, 49, .08); }

.bs-pb-testimonial-stars { display: flex; gap: 3px; font-size: 18px; line-height: 1; }
.bs-pb-testimonial .bs-pb-testimonial-star { color: #e5e7eb; }
.bs-pb-testimonial .bs-pb-testimonial-star.is-on { color: #f5a623; }

.bs-pb-testimonial-quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bs-text);
  font-style: normal;
  position: relative;
  flex: 1;
  padding-left: 6px;
}
.bs-pb-testimonial-quote::before {
  content: "\201C";
  position: absolute;
  top: -32px;
  left: -8px;
  font-size: 72px;
  line-height: 1;
  color: var(--bs-blue);
  opacity: .18;
  font-style: normal;
  font-weight: 700;
  font-family: Georgia, serif;
  pointer-events: none;
}

.bs-pb-testimonial-meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #eef1f5;
}
.bs-pb-testimonial-photo,
.bs-pb-testimonial-initials {
  width: 52px; height: 52px; border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.bs-pb-testimonial-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bs-blue) 0%, var(--bs-blue-2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .5px;
}
.bs-pb-testimonial-id { display: flex; flex-direction: column; line-height: 1.35; gap: 2px; }
.bs-pb-testimonial-author { color: var(--bs-text); font-weight: 700; font-size: 15px; }
.bs-pb-testimonial-role { color: var(--bs-muted); font-size: 13px; }

@media (max-width: 640px) {
  .bs-pb-testimonial { padding: 24px 22px; min-height: 0; }
  .bs-pb-testimonials--list .bs-pb-testimonial { padding: 24px 22px; }
}


/* ── About page: team grid ───────────────────────────────────────── */
.bs-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 8px;
}
.bs-team-card {
  background: #fff;
  border: 1px solid var(--bs-border, #e1ecf2);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(15, 28, 37, .04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bs-team-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 28, 37, .1); }
.bs-team-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: block;
  border: 3px solid var(--bs-light, #eef4f7);
}
.bs-team-name { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--bs-text, #0f1c25); }
.bs-team-role {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-blue, #006aac);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bs-team-bio { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bs-muted, #586a78); }

/* ─────────────────────────────────────────────────────────────────
 * Google "Add as preferred source" CTA - shown at end of single blog posts.
 * Wired in single.php; co-located here for theme-wide reusability.
 * ───────────────────────────────────────────────────────────────── */
.bs-gcta-wrap { margin: 48px 0; padding: 0; }
.bs-gcta {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e5edf2;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.bs-gcta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #006aac, #07a4f3, #cdff16);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.bs-gcta:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(12,31,49,.1);
  border-color: #006aac;
}
.bs-gcta:hover::before { transform: scaleX(1); }
.bs-gcta-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
}
.bs-gcta-logo {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,106,172,.06);
  border-radius: 10px;
  transition: background .25s ease, transform .25s ease;
}
.bs-gcta:hover .bs-gcta-logo {
  background: rgba(0,106,172,.12);
  transform: rotate(-6deg) scale(1.05);
}
.bs-gcta-logo svg { width: 22px; height: 22px; }
.bs-gcta-copy { flex: 1; min-width: 0; }
.bs-gcta-kicker {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #006aac;
  margin: 0 0 4px;
}
.bs-gcta-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0c1f31;
  line-height: 1.3;
  margin: 0;
}
.bs-gcta-arrow {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #0c1f31;
  color: #cdff16;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 900;
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.bs-gcta:hover .bs-gcta-arrow {
  transform: translateX(4px);
  background: #006aac;
  color: #fff;
}
@media (max-width: 560px) {
  .bs-gcta-inner { gap: 12px; padding: 16px 18px; }
  .bs-gcta-title { font-size: 13.5px; }
  .bs-gcta-logo { width: 32px; height: 32px; }
  .bs-gcta-arrow { width: 32px; height: 32px; font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────
   PARTNERS PAGE (page-partnyori.php)
   Grid of partner cards - each card links out to the partner site.
   Cards work with or without a real logo (text-only fallback).
   ───────────────────────────────────────────────────────────────────── */
.bs-partners-page .bs-partners-section { padding: 80px 0; background: #f7fafc; }
.bs-partners-page .bs-partners-section .bs-section-head { margin-bottom: 50px; }
.bs-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bs-partner-card {
  background: #fff;
  border: 1px solid #e5edf2;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.bs-partner-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(12, 31, 49, .1);
  border-color: #006aac;
}
.bs-partner-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.bs-partner-card-media {
  height: 140px;
  background: linear-gradient(135deg, #f0f4f7 0%, #e5edf2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bs-partner-card-media img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.bs-partner-card-name-large {
  font-size: 28px;
  font-weight: 900;
  color: #006aac;
  letter-spacing: -.01em;
  text-transform: lowercase;
}
.bs-partner-card-body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bs-partner-card-name {
  font-size: 17px;
  font-weight: 800;
  color: #0c1f31;
  letter-spacing: -.005em;
}
.bs-partner-card-role {
  font-size: 13px;
  color: #586a78;
  line-height: 1.5;
}
.bs-partner-card-host {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #006aac;
  text-transform: lowercase;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bs-partner-card:hover .bs-partner-card-host { color: #07a4f3; }
@media (max-width: 980px) {
  .bs-partners-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bs-partners-page .bs-partners-section { padding: 60px 0; }
  .bs-partners-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   Scrollbar-gutter + scrollbar-width detection - critical for the
   full-width mega menu math below.

   The problem: `100vw` includes the scrollbar (~15px on Windows), but
   `.bs-container` (which the logo / CTA live in) centers itself in the
   VISIBLE area (without scrollbar). Without compensation, the mega panel
   padding miscalcs by HALF the scrollbar width → columns shifted right
   by ~7-8px.

   `scrollbar-gutter: stable` reserves scrollbar space always, eliminating
   layout shifts when pages get longer than the viewport.

   `--bs-scrollbar-w` exploits the fact that 100% (of body) excludes the
   scrollbar while 100vw includes it. The difference IS the scrollbar
   width. Cascades to descendants so .bs-mega can subtract it from calcs. */
html {
  scrollbar-gutter: stable;
}
body {
  --bs-scrollbar-w: calc(100vw - 100%);
}

/* ════════════════════════════════════════════════════════════════════
   EXPERIMENTAL: Full-width mega panel + backdrop (desktop only)
   ────────────────────────────────────────────────────────────────────
   Replaces the centered "boxed" mega panel with a full-width sheet that
   extends edge-to-edge under the header, plus a dim backdrop over the
   rest of the page for focus. Inner content stays aligned with the
   .bs-container grid (col 1 = where logo starts, col 4 = where the
   header CTA ends).

   Scope: min-width 1081px ONLY. Mobile keeps its accordion behavior
   (max-width: 1080px block at line ~5953 in this file).

   To revert: comment out (or delete) this entire block - the original
   centered-boxed styles at lines 230, 2611, 3032 will take over again.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1081px) {

  /* ─── Full-width mega panel ─── */
  .bs-mega {
    /* Span the entire viewport width, anchored to the header bottom edge.
       Using left:0 + right:0 (NOT width:100vw) so the panel respects the
       scrollbar gutter and aligns with the visible viewport boundaries -
       same coordinate system as .bs-container's center positioning. */
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    /* Sheet-style: no border, no rounded corners, no floating shadow */
    border: 0 !important;
    border-top: 1px solid var(--bs-border, #d4e2ea) !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 24px rgba(0, 47, 82, .08) !important;
    background: #fff;
    /* Position right under the header with no gap */
    top: 76px;
    /* Inner content padding pushes columns inward so they align EXACTLY
       with .bs-container's content edge (where the logo starts on left
       and the CTA button ends on right).

       Math:
         container outer edge = (visible-viewport - bs-max) / 2
         logo edge / CTA edge = outer edge + container's 22px inner padding
         visible-viewport      = 100vw - scrollbar-width

       So the padding formula = (100vw - scrollbar - bs-max) / 2 + 22px.
       Without subtracting the scrollbar, cols shift right by scrollbar/2. */
    padding: 32px
      max(22px, calc((100vw - var(--bs-scrollbar-w, 0px) - var(--bs-max)) / 2 + 22px))
      40px !important;
    /* Grid spacing tuned for the wider canvas */
    gap: 36px;
    /* Keep scroll-on-overflow behavior for short-monitor users */
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Make sure the panel sits above the backdrop */
    z-index: 1020;
  }
  body.has-topbar .bs-mega {
    top: 114px;
    max-height: calc(100vh - 114px);
  }
  /* Reset open-state transforms (we don't translate when full-width) */
  .bs-nav-item.is-open > .bs-mega,
  .bs-nav-item:hover > .bs-mega,
  .bs-nav-item:focus-within > .bs-mega {
    transform: none !important;
  }
  /* Kill the hover-bridge pseudo at the top of the panel - the panel now
     touches the header directly so the gap-bridge isn't needed. */
  .bs-mega::before {
    display: none !important;
  }

  /* ─── Backdrop overlay (dim the rest of the page) ─── */
  /* CSS-only - uses :has() to detect when any mega item is hovered/open.
     Modern browser support is universal (Chrome 105+, Safari 15.4+, FF 121+). */
  .bs-site-header::after {
    content: "";
    position: fixed;
    inset: 76px 0 0 0;
    background: rgba(12, 31, 49, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1010;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
  }
  body.has-topbar .bs-site-header::after {
    inset: 114px 0 0 0;
  }
  /* Activate backdrop when any nav item with a mega is hovered / open /
     keyboard-focused. */
  body:has(.bs-nav-item:hover > .bs-mega)        .bs-site-header::after,
  body:has(.bs-nav-item.is-open > .bs-mega)      .bs-site-header::after,
  body:has(.bs-nav-item:focus-within > .bs-mega) .bs-site-header::after {
    opacity: 1;
    visibility: visible;
  }

  /* ─── Title-wrap fix for the feature case card ─── */
  /* The desktop .bs-mega a rule applies nowrap + ellipsis, which clips long
     case study titles inside the feature column. Reset that here so multi-
     line titles render in full instead of being cut off mid-word. */
  .bs-mega .bs-mega-feature-case {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .bs-mega .bs-mega-feature-case-title {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto;
    line-height: 1.4 !important;
  }

  /* ─── Spacious column titles on the wider canvas ─── */
  .bs-mega > div > strong:first-child {
    font-size: 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
  }
}

/* Smaller laptops (1081-1280px): same alignment formula, just tighter
   vertical padding + smaller gap so columns don't crowd. */
@media (min-width: 1081px) and (max-width: 1280px) {
  .bs-mega {
    padding: 24px
      max(22px, calc((100vw - var(--bs-scrollbar-w, 0px) - var(--bs-max)) / 2 + 22px))
      30px !important;
    gap: 24px;
  }
}


/* ===========================================================
   PB block: team (екип) - v3.9.0. Namespaced .bs-pb-team*
   =========================================================== */
.bs-pb-team{background:#f7fafc}
.bs-pb-team-head{text-align:center;margin-left:auto;margin-right:auto}
.bs-pb-team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1280px;margin:0 auto;list-style:none;padding:0}
@media (max-width:1200px){.bs-pb-team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.bs-pb-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bs-pb-team-grid{grid-template-columns:1fr;gap:18px}}
/* Creative "Join us" card */
.bs-pb-team-join{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;min-height:240px;gap:12px;padding:30px 24px;border:2px dashed #c3d4e0;border-radius:18px;color:var(--bs-text,#0c1f31);text-decoration:none;background:linear-gradient(180deg,rgba(7,164,243,.04),rgba(205,255,22,.05));transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s ease,box-shadow .25s ease}
.bs-pb-team-join:hover{transform:translateY(-6px);border-color:var(--bs-blue,#006aac);border-style:solid;box-shadow:0 22px 50px rgba(12,31,49,.12)}
.bs-pb-team-join__icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bs-blue,#006aac);color:#fff;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}
.bs-pb-team-join__icon svg{width:26px;height:26px}
.bs-pb-team-join:hover .bs-pb-team-join__icon{transform:rotate(90deg) scale(1.08);background:var(--bs-lime,#cdff16);color:var(--bs-text,#0c1f31)}
.bs-pb-team-join__title{font-weight:800;font-size:17px;color:var(--bs-text,#0c1f31)}
.bs-pb-team-join__text{font-size:13.5px;line-height:1.55;color:var(--bs-muted,#586a78);max-width:220px}
.bs-pb-team-join__cta{font-weight:700;font-size:13px;color:var(--bs-blue,#006aac);transition:gap .2s ease}
.bs-pb-team-join:hover .bs-pb-team-join__cta{color:var(--bs-blue,#004f80)}
.bs-pb-team-card{background:#fff;border:1px solid #e5edf2;border-radius:18px;overflow:hidden;cursor:pointer;height:100%;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .25s ease}
.bs-pb-team-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(12,31,49,.12);border-color:var(--bs-blue,#006aac)}
.bs-pb-team-card:focus-visible{outline:3px solid var(--bs-blue,#006aac);outline-offset:4px}
.bs-pb-team-photo{aspect-ratio:4/5;width:100%;background:linear-gradient(135deg,#006aac,#07a4f3);overflow:hidden;position:relative}
.bs-pb-team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bs-pb-team-initials{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:64px;font-weight:800;letter-spacing:-.02em}
.bs-pb-team-body{padding:22px 24px 24px}
.bs-pb-team-name{margin:0 0 4px;font-size:17px;font-weight:800;color:#0c1f31;white-space:nowrap}
.bs-pb-team-role{display:inline-block;margin-bottom:12px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--bs-blue,#006aac)}
.bs-pb-team-bio{margin:0;font-size:13.5px;line-height:1.6;color:#586a78}
.bs-pb-team-socials{margin-top:16px;display:flex;gap:8px}
.bs-pb-team-socials a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#f0f4f7;color:#586a78;transition:background .15s ease,color .15s ease}
.bs-pb-team-socials a:hover{background:var(--bs-blue,#006aac);color:#fff}
.bs-pb-team-socials svg{width:16px;height:16px}
.bs-pb-team-modal{position:fixed;inset:0;background:rgba(12,31,49,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;opacity:0;transition:opacity .22s ease}
.bs-pb-team-modal.is-open{display:flex;opacity:1}
.bs-pb-team-modal__inner{background:#fff;border-radius:18px;max-width:720px;width:100%;min-height:330px;max-height:min(70vh,400px);overflow:hidden;display:flex;align-items:stretch;position:relative;transform:scale(.96);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.bs-pb-team-modal.is-open .bs-pb-team-modal__inner{transform:scale(1)}
.bs-pb-team-modal__photo{flex:0 0 280px;align-self:stretch;position:relative;background:linear-gradient(135deg,#006aac,#07a4f3);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:18px 0 0 18px}
.bs-pb-team-modal__photo img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:50% 18%;display:block}
.bs-pb-team-modal__photo .bs-pb-team-initials{font-size:96px}
.bs-pb-team-modal__body{flex:1 1 auto;min-width:0;overflow-y:auto;padding:36px 34px 30px}
.bs-pb-team-modal__bio.is-clamped{overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.bs-pb-team-readmore{display:inline-block;margin:0 0 22px;background:none;border:0;padding:0;color:var(--bs-blue,#006aac);font-weight:700;font-size:13.5px;cursor:pointer}
.bs-pb-team-readmore:hover{color:var(--bs-blue,#004f80);text-decoration:underline}
@media (max-width:640px){
  .bs-pb-team-modal__inner{flex-direction:column;min-height:0;max-height:90vh}
  .bs-pb-team-modal__photo{flex:0 0 auto;width:100%;aspect-ratio:4/3;border-radius:18px 18px 0 0}
  .bs-pb-team-modal__photo img{position:relative;object-position:50% 22%}
}
.bs-pb-team-modal__close{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border:0;background:#f0f4f7;color:#0c1f31;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.bs-pb-team-modal__close:hover{background:#e5edf2}
.bs-pb-team-modal__name{margin:0 0 6px;font-size:24px;font-weight:800;color:#0c1f31}
.bs-pb-team-modal__role{display:inline-block;margin-bottom:18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--bs-blue,#006aac)}
.bs-pb-team-modal__bio{margin:0 0 22px;font-size:14.5px;line-height:1.7;color:#586a78}
.bs-pb-team-modal__bio p{margin:0 0 12px}
.bs-pb-team-modal__bio p:last-child{margin-bottom:0}
.bs-pb-team-modal__socials{display:flex;gap:10px;flex-wrap:wrap}
.bs-pb-team-modal__socials a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#f0f4f7;color:#0c1f31;border-radius:10px;font-size:13px;font-weight:700;transition:background .15s ease,color .15s ease}
.bs-pb-team-modal__socials a:hover{background:var(--bs-blue,#006aac);color:#fff}
.bs-pb-team-modal__socials svg{width:16px;height:16px}

/* === Header CTA AI robot (sits to the LEFT of the button, vertically centered) === */
.bs-header-cta { position: relative; overflow: visible; }
.bs-header-cta-bot {
  position: absolute;
  left: -35px;
  top: -2px;
  width: 55px;
  height: 44px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(12, 31, 49, .25));
  z-index: 3;
}
/* Hide the robot on responsive (and in the cloned mobile-menu CTA). */
.bs-nav-cta .bs-header-cta-bot { display: none !important; }
@media (max-width: 1080px) {
  .bs-header-cta-bot { display: none !important; }
}

/* === Topbar rotating messages (CSS-only, 3 lines) === */
.bs-topbar-rotor { display: inline-flex; align-items: center; gap: 6px; }
.bs-topbar-brand { color: #fff; font-weight: 700; text-decoration: none; }
.bs-topbar-brand:hover { color: var(--bs-lime, #cdff16); }
.bs-topbar-sep { opacity: .55; }
.bs-topbar-rotor .bs-tbrot {
  --tbrot-h: 18px;
  position: relative;
  display: inline-block;
  height: var(--tbrot-h);
  overflow: hidden;
  vertical-align: middle;
}
.bs-topbar-rotor .bs-tbrot > span {
  display: block;
  height: var(--tbrot-h);
  line-height: var(--tbrot-h);
  white-space: nowrap;
  animation: bsTbRot 9s infinite;
}
@keyframes bsTbRot {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(calc(-1 * var(--tbrot-h))); }
  66%, 94%  { transform: translateY(calc(-2 * var(--tbrot-h))); }
  100%      { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bs-topbar-rotor .bs-tbrot > span { animation: none; }
}

/* === Hero floating keywords (decorative, behind content) === */
.bs-hero-keywords {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 130% 120% at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 130% 120% at 50% 50%, #000 70%, transparent 100%);
}
.bs-hero-keywords span {
  position: absolute;
  white-space: nowrap;
  font-family: var(--bs-font-mono, ui-monospace, "SFMono-Regular", "Consolas", monospace);
  font-weight: 500;
  font-size: clamp(12.5px, 1.25vw, 17px);
  letter-spacing: .02em;
  color: rgba(125,190,255,.44);
  opacity: 0;
  transition: opacity .45s ease;
  will-change: opacity;
}
.bs-hero-keywords span.on { opacity: 1; }
.bs-hero-keywords span::before { content: "</> "; opacity: .42; }
.bs-hero-keywords span:nth-child(3n)  { color: rgba(150,210,255,.42); }
.bs-hero-keywords span:nth-child(5n)  { color: rgba(165,225,175,.36); }
.bs-hero-keywords span:nth-child(1)  { top: 14%; left: 8%;  animation-duration: 5.5s; animation-delay: -0.4s; }
.bs-hero-keywords span:nth-child(2)  { top: 40%; left: 6%;  animation-duration: 7s;   animation-delay: -2.6s; }
.bs-hero-keywords span:nth-child(3)  { top: 64%; left: 10%; animation-duration: 6s;   animation-delay: -4.1s; }
.bs-hero-keywords span:nth-child(4)  { top: 85%; left: 16%; animation-duration: 8s;   animation-delay: -1.2s; }
.bs-hero-keywords span:nth-child(5)  { top: 11%; left: 47%; animation-duration: 5.5s; animation-delay: -3.3s; }
.bs-hero-keywords span:nth-child(6)  { top: 30%; left: 42%; animation-duration: 7s;   animation-delay: -0.9s; }
.bs-hero-keywords span:nth-child(7)  { top: 80%; left: 53%; animation-duration: 6.5s; animation-delay: -5s; }
.bs-hero-keywords span:nth-child(8)  { top: 89%; left: 45%; animation-duration: 6s;   animation-delay: -2.1s; }
.bs-hero-keywords span:nth-child(9)  { top: 16%; left: 82%; animation-duration: 7.5s; animation-delay: -3.8s; }
.bs-hero-keywords span:nth-child(10) { top: 38%; left: 89%; animation-duration: 5.5s; animation-delay: -1.7s; }
.bs-hero-keywords span:nth-child(11) { top: 60%; left: 79%; animation-duration: 7s;   animation-delay: -4.6s; }
.bs-hero-keywords span:nth-child(12) { top: 84%; left: 86%; animation-duration: 8s;   animation-delay: -2.9s; }
@keyframes bsKwFloat {
  0%, 100% { opacity: 0; }
  50%      { opacity: .7; }
}
@media (max-width: 980px) { .bs-hero-keywords { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bs-hero-keywords span { animation: none; }
}

/* === Hero DNA helix (decorative, right margin on wide screens) === */
.bs-dna {
  position: absolute;
  top: 13%;
  left: 2.5%;
  width: 64px;
  height: 66%;
  z-index: 0;
  opacity: .4;
  perspective: 800px;
  pointer-events: none;
}
.bs-dna--right { left: auto; right: 2.5%; }
.bs-dna__strand {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: bsDnaSpin 16s linear infinite;
}
.bs-dna__step {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 5px;
  margin-left: -10px;
  border-radius: 10px;
  background: linear-gradient(90deg, #1f7fb8, #6aa9d6);
}
@keyframes bsDnaSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@media (max-width: 1280px) { .bs-dna { display: none; } }
@media (prefers-reduced-motion: reduce) { .bs-dna__strand { animation: none; } }

/* === Hero logo / image above the title === */
.bs-hero-logo {
  display: block;
  height: auto;
  max-height: 72px;
  width: auto;
  max-width: 240px;
  margin: 0 0 20px;
  object-fit: contain;
}
.bs-hero-copy--center .bs-hero-logo { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .bs-hero-logo { max-height: 56px; margin-bottom: 16px; } }

/* === Visual breadcrumbs hidden (BreadcrumbList JSON-LD stays in <head> for SEO) === */
.bs-breadcrumb { display: none !important; }

/* === Hero PLAIN preset: light background, no FX, title + text + side image === */
.bs-hero--plain {
  background: transparent !important;
  color: var(--bs-text, #0c1f31);
  min-height: 0 !important;
  padding: clamp(40px, 6vw, 84px) 0;
}
.bs-hero--plain::before,
.bs-hero--plain::after { display: none !important; }
.bs-hero--plain .bs-hero-keywords,
.bs-hero--plain .bs-dna { display: none !important; }
.bs-hero--plain .bs-hero-copy { max-width: 940px; margin: 0 auto; text-align: center; }
.bs-hero--plain h1 { color: var(--bs-text, #0c1f31); text-align: center; max-width: 880px; margin-left: auto; margin-right: auto; }
.bs-hero--plain p { color: var(--bs-muted, #586a78); max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.bs-hero--plain .bs-eyebrow { color: var(--bs-blue, #006aac) !important; }
.bs-hero--plain .bs-eyebrow::before { background: var(--bs-blue, #006aac); border-color: var(--bs-blue, #006aac); }
.bs-hero-plain-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 26px 0;
  border-radius: var(--bs-radius-lg, 18px);
  object-fit: cover;
}

/* === Footer CTA rotating headline (vertical rotor) === */
.bs-footer-cta h2 { line-height: 1.2; }
.bs-footer-cta h2 .bs-rot {
  --rot-h: 1.2em;
  position: relative;
  display: inline-block;
  height: var(--rot-h);
  overflow: hidden;
  vertical-align: bottom;
  color: #fff;
}
.bs-footer-cta h2 .bs-rot > span {
  display: block;
  height: var(--rot-h);
  line-height: var(--rot-h);
  white-space: nowrap;
  animation: bsFootRot 9s infinite;
}
@keyframes bsFootRot {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(calc(-1 * var(--rot-h))); }
  66%, 94%  { transform: translateY(calc(-2 * var(--rot-h))); }
  100%      { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bs-footer-cta h2 .bs-rot > span { animation: none; }
}

/* === Typing reveal for the "Числата" title === */
.bs-nums-title .bs-type-ch { opacity: 0; animation: bsTypeReveal 1ms linear forwards; }
@keyframes bsTypeReveal { to { opacity: 1; } }
.bs-nums-title.is-typing::after {
  content: "";
  display: inline-block;
  width: .5ch;
  height: .9em;
  margin-left: 6px;
  background: var(--bs-lime, #cdff16);
  vertical-align: -2px;
  animation: bsTypeCaret .75s steps(1) infinite;
}
@keyframes bsTypeCaret { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bs-nums-title .bs-type-ch { opacity: 1; animation: none; }
  .bs-nums-title.is-typing::after { display: none; }
}

/* === SEO tools archive: logos in a consistent white tile (JPG white-bg safe) === */
.bs-tools-archive .bs-feature-grid-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 7;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #e8eef3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(12,31,49,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bs-tools-archive .bs-feature-grid-thumb img {
  max-width: 100% !important;
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain;
}
.bs-tools-archive .bs-feature-grid > div:hover .bs-feature-grid-thumb {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12,31,49,.10);
  border-color: #d4e3ef;
}

/* === MailerLite subscribe form: brand-blue submit button (override ML default green) === */
html #mlb2-13818608 .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  background-color: #07a4f3 !important;
}
html #mlb2-13818608 .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
  background-color: #068bc1 !important;
}

/* === Hide "current page" dot in mega menu on mobile === */
@media (max-width: 1080px) {
  .bs-mega a.is-current::before,
  .bs-mega a[aria-current="page"]::before { display: none !important; }
}

/* === Topbar: tighter on very small phones === */
@media (max-width: 400px) {
  .bs-topbar { font-size: 9.5px; }
  .bs-topbar .bs-container { padding: 0 8px; }
  .bs-topbar-inner, .bs-topbar-inner--3zone { min-height: 32px; }
  .bs-topbar-rotor { gap: 3px; }
}

/* === Service cards: equal-height description (fixed line count) === */
.bs-service-card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  min-height: 4.5em; /* reserve 3 lines so all cards align */
}

/* === Otzivi page: hide avatar circle, show only name + role === */
.page-id-3019 .bs-pb-testimonial-initials { display: none !important; }

/* === Cookie consent banner === */
.bs-cc{position:fixed;left:0;right:0;bottom:0;z-index:99998;padding:14px;transform:translateY(120%);transition:transform .28s cubic-bezier(.22,1,.36,1);pointer-events:none}
.bs-cc.is-open{transform:translateY(0);pointer-events:auto}
.bs-cc__inner{max-width:1100px;margin:0 auto;background:#fff;border:1px solid #e5edf2;border-radius:14px;box-shadow:0 18px 50px rgba(7,23,37,.18);padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.bs-cc__text{flex:1 1 340px;min-width:0}
.bs-cc__text strong{display:block;font-size:15px;color:#0c1f31;margin-bottom:4px}
.bs-cc__text p{margin:0;font-size:13px;line-height:1.55;color:#586a78}
.bs-cc__text a{color:var(--bs-blue,#006aac);text-decoration:underline}
.bs-cc__opts{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 22px;padding:6px 0 2px;border-top:1px solid #eef2f5}
.bs-cc__opt{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#0c1f31;cursor:pointer}
.bs-cc__opt span{font-weight:400;color:#8a98a4;font-size:12px}
.bs-cc__opt input{width:16px;height:16px;accent-color:var(--bs-blue,#006aac)}
.bs-cc__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bs-cc__btn{border:0;border-radius:9px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease,transform .12s ease}
.bs-cc__btn:active{transform:scale(.97)}
.bs-cc__btn--ghost{background:#f0f4f7;color:#0c1f31}
.bs-cc__btn--ghost:hover{background:#e5edf2}
.bs-cc__btn--save{background:var(--bs-blue,#006aac);color:#fff}
.bs-cc__btn--save:hover{background:#005a92}
.bs-cc__btn--accent{background:var(--bs-lime,#cdff16);color:#0c1f31}
.bs-cc__btn--accent:hover{background:#b8ed0f}
@media(max-width:640px){
  .bs-cc{padding:10px}
  .bs-cc__inner{padding:16px;gap:12px}
  .bs-cc__actions{width:100%}
  .bs-cc__btn{flex:1 1 auto;text-align:center}
}

/* Parallax safety: dark fallback behind hero background layers */
.bs-hero, #banner { background-color: #081320; }

/* Grayscale за bounce-effect центрирани изображения */
img.bounce-effect.aligncenter { filter: grayscale(1); transition: filter .3s ease; }
img.bounce-effect.aligncenter:hover { filter: grayscale(0); }

/* "See all tools" button under dynamic tools grid */
.bs-tools-more { text-align: center; margin-top: 32px; }