/* blue-branch — steel + teal, scoped teal/sketch · forest · volt-dark */

/* Firm signature closer to mockup electric blue (not teal wash) */
:root, [data-theme="steel"] {
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-300: #93c5fd;
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1e40af;
  --brand-rgb: 37, 99, 235;
}

.brand-lockup .brand-logo-badge {
  background: color-mix(in srgb, var(--brand-500) 16%, var(--surface-2));
  color: var(--brand-600);
}

.nav-link.is-active {
  color: var(--brand-600);
  font-weight: 600;
}

.site-header {
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Ветки сравнения */
.hero-branch-rail {
  display: grid;
  gap: .75rem;
}
@media (min-width: 768px) {
  .hero-branch-rail {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }
}
.branch-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, .85rem);
  padding: 1.25rem 1.35rem;
  background: var(--surface);
}
.branch-panel.is-blue {
  border-color: color-mix(in srgb, var(--brand-500) 40%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-500) 12%, transparent);
}
.branch-panel .list-item {
  font-size: .925rem;
  color: var(--ink-3);
  margin: .35rem 0;
}
.fork-divider-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.5rem;
}

/* Плитки-ссылки поверх kit */
.bb-tile {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  height: 100%;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, .85rem);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.bb-tile:hover {
  border-color: color-mix(in srgb, var(--brand-500) 50%, var(--line));
  background: var(--surface-2);
  transform: translateY(-2px);
  color: inherit;
}
.bb-tile-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--brand-500) 14%, var(--surface-2));
  color: var(--brand-600);
}
.bb-tile-body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  flex: 1;
}
.bb-tile-title {
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}
.bb-tile-text {
  font-size: .9rem;
  color: var(--ink-3);
  line-height: 1.4;
}
.bb-tile-arrow {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 2.5rem;
}
.bb-tile--static { cursor: default; }
.bb-tile--static:hover {
  transform: none;
  border-color: var(--line);
  background: var(--surface);
}
.bb-tile--media { align-items: stretch; }
.bb-tile-media {
  flex: 0 0 4.75rem;
  width: 4.75rem;
  border-radius: .65rem;
  overflow: hidden;
  background: var(--surface-2);
  align-self: stretch;
  min-height: 4.5rem;
}
.bb-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-shot {
  border-radius: var(--radius-lg, .85rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.bb-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-group-head { margin-bottom: 1.25rem; }

.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumbs a:hover { color: var(--brand-600); }

/* Лёгкий sketch-вайб на hero без ломания всей страницы */
.theme-scope[data-skin="sketch"] .display-5,
.theme-scope[data-skin="sketch"] .display-6 {
  font-family: "Caveat", "Fraunces", cursive;
  letter-spacing: .01em;
}

/* ============================================================
   blue-branch homepage v2 — light editorial / workshop direction
   ============================================================ */
.py-lg-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.bb-section { background: var(--bg); }
.bb-grid-paper {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.2px),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 5%, transparent), transparent 42%);
  background-size: 24px 24px, 100% 100%;
}
.bb-hero { overflow: hidden; border-bottom: 1px solid var(--line); }
.bb-kicker-row { display:flex; align-items:center; gap:.7rem; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; color:var(--ink-3); }
.bb-live-dot { width:.65rem; height:.65rem; border-radius:50%; background:#1f57c3; box-shadow:0 0 0 .35rem color-mix(in srgb, #1f57c3 12%, transparent); }
.bb-hero-title { max-width: 58rem; font-size:clamp(2.9rem,6vw,5.9rem); line-height:.98; letter-spacing:-.055em; font-weight:800; }
.bb-marker { position:relative; display:inline-block; z-index:0; }
.bb-marker::after { content:""; position:absolute; z-index:-1; left:-.05em; right:-.08em; bottom:.08em; height:.28em; background:color-mix(in srgb, var(--brand-500) 28%, #b9f37a 72%); transform:rotate(-1.2deg); border-radius:4px 12px 4px 8px; }
.bb-hero-lead { max-width:49rem; font-size:clamp(1.08rem,1.8vw,1.28rem); line-height:1.65; }
.bb-hero-notes { display:flex; flex-wrap:wrap; gap:.65rem; }
.bb-hero-notes span { border:1px solid var(--line); border-radius:999px; padding:.48rem .78rem; background:color-mix(in srgb, var(--surface) 78%, transparent); font-size:.8rem; color:var(--ink-2); }
.bb-hero-board { position:relative; padding:1rem; border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--radius-xl); box-shadow:0 28px 70px color-mix(in srgb, var(--ink) 12%, transparent); transform:rotate(1deg); }
.bb-board-photo { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:calc(var(--radius-xl) - .45rem); background:var(--surface-3); }
.bb-board-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(.96); }
.bb-photo-label { position:absolute; left:1rem; bottom:1rem; padding:.48rem .7rem; background:rgba(12,21,24,.82); color:white; border-radius:999px; font-size:.72rem; letter-spacing:.03em; }
.bb-board-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-top:.75rem; }
.bb-board-strip div { min-height:5.4rem; padding:.8rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2); }
.bb-board-strip small, .bb-board-strip strong { display:block; }
.bb-board-strip small { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.bb-board-strip strong { font-size:.82rem; line-height:1.25; margin-top:.3rem; color:var(--ink); }
.bb-board-note { margin:.85rem .25rem .1rem; font-family:"Fraunces",serif; color:#1f57c3; font-size:.9rem; }
.bb-board-note span { color:var(--ink-3); font-family:"Onest",sans-serif; }

.bb-principles { border-bottom:1px solid var(--line); }
.bb-principle-intro { padding:3rem 2rem 3rem 0; }
.bb-principle-list { border-left:1px solid var(--line-strong); }
.bb-principle { display:grid; grid-template-columns:4rem 1fr; gap:1rem; padding:2rem 2.2rem; border-bottom:1px solid var(--line); align-items:start; }
.bb-principle:last-child { border-bottom:0; }
.bb-principle b { font-family:"Fraunces",serif; font-size:1.35rem; color:var(--brand-600); }
.bb-principle span { color:var(--ink-3); line-height:1.6; }
.bb-principle strong { color:var(--ink); }

.bb-bento { display:grid; grid-template-columns:1.25fr .75fr .75fr; grid-template-rows:minmax(250px,auto) minmax(230px,auto); gap:1rem; }
.bb-bento-card { position:relative; display:flex; flex-direction:column; min-height:100%; padding:clamp(1.35rem,2.5vw,2.25rem); border:1px solid var(--line); border-radius:var(--radius-xl); color:var(--ink); text-decoration:none; overflow:hidden; background:var(--surface); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.bb-bento-card > :not(.bb-bento-art) { position:relative; z-index:1; }
a.bb-bento-card:hover { transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 16px 42px color-mix(in srgb, var(--ink) 9%, transparent); color:var(--ink); }
.bb-bento-main { grid-row:1/3; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--brand-100) 42%,var(--surface))); }
.bb-bento-app { grid-column:2/4; background:linear-gradient(120deg,color-mix(in srgb,var(--surface-2) 80%,#daf3e8),var(--surface)); }
.bb-bento-calc { background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 82%,#eef6ff),color-mix(in srgb,var(--surface) 70%,#e8f6f0)); }
.bb-bento-qa {
  background:linear-gradient(145deg,#ecfdf5 0%,#d1fae5 55%,#bbf7d0 100%);
  color:var(--ink);
  border-color:#86efac;
}
.bb-bento-qa h3,.bb-bento-qa .bb-card-index { color:#065f46; }
.bb-bento-card h3 { font-size:clamp(1.55rem,2.6vw,2.6rem); letter-spacing:-.04em; margin:.9rem 0 .7rem; }
.bb-bento-main h3 { font-size:clamp(2.3rem,4vw,4.2rem); max-width:8ch; }
.bb-bento-card p { color:var(--ink-3); max-width:42rem; line-height:1.6; }
.bb-bento-qa p { color:#3f6f5e; }
.bb-card-index { font-size:.69rem; letter-spacing:.12em; font-weight:800; color:var(--brand-700); }
.bb-card-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:2rem; }
.bb-card-tags span { font-size:.75rem; border:1px solid var(--line-strong); border-radius:999px; padding:.35rem .6rem; background:color-mix(in srgb,var(--surface) 70%,transparent); }
.bb-card-link { margin-top:auto; padding-top:1.2rem; font-size:.84rem; color:var(--brand-700); }
.bb-bento-art {
  position:absolute; right:-4%; bottom:-6%; width:min(58%,17rem); max-height:72%;
  object-fit:contain; object-position:right bottom; opacity:.34; pointer-events:none;
  filter:saturate(.95);
  -webkit-mask-image:radial-gradient(ellipse 82% 76% at 68% 78%, #000 22%, transparent 68%);
  mask-image:radial-gradient(ellipse 82% 76% at 68% 78%, #000 22%, transparent 68%);
}
.bb-bento-main .bb-bento-art { width:min(62%,19rem); opacity:.3; }
.bb-bento-app .bb-bento-art { opacity:.32; }
.bb-bento-calc .bb-bento-art { opacity:.36; }
.bb-bento-qa .bb-bento-art { opacity:.32; filter:saturate(.95); }
.bb-code-line { margin-top:auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; color:#4b7c6a; }
.bb-code-line span { color:#047857; }

.bb-section-wash { background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 76%,#eaf5ee)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bb-niche-stack { border-top:1px solid var(--line-strong); }
.bb-niche-row { display:grid; grid-template-columns:4.25rem 1fr 2rem; gap:1rem; align-items:center; padding:1.65rem .4rem; border-bottom:1px solid var(--line-strong); text-decoration:none; color:var(--ink); transition:padding .2s ease,background .2s ease; }
.bb-niche-row:hover { padding-left:1rem; padding-right:1rem; background:color-mix(in srgb,var(--surface) 58%,transparent); color:var(--ink); }
.bb-niche-num { font-family:"Fraunces",serif; font-size:1.45rem; color:var(--brand-600); }
.bb-niche-row small { text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-size:.66rem; }
.bb-niche-row h3 { margin:.25rem 0 .25rem; font-size:1.55rem; letter-spacing:-.03em; }
.bb-niche-row p { margin:0; color:var(--ink-3); }
.bb-niche-row > span { font-size:1.5rem; color:var(--brand-600); }

.bb-digital-section { overflow:hidden; }
.bb-digital-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.bb-digital-copy { padding:2rem 0; }
.bb-flow { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; font-size:.82rem; }
.bb-flow span { border:1px solid var(--line-strong); padding:.45rem .65rem; border-radius:999px; background:var(--surface); }
.bb-flow span.is-accent { background:var(--brand-500); color:var(--on-brand,#fff); border-color:transparent; }
.bb-flow b { color:var(--muted); }
.bb-digital-visual { position:relative; min-height:510px; }
.bb-digital-visual--illustration { min-height:34rem; }
.bb-digital-img { position:absolute; object-fit:cover; border-radius:var(--radius-xl); border:8px solid var(--surface); box-shadow:0 22px 60px color-mix(in srgb,var(--ink) 18%,transparent); }
.bb-digital-visual--illustration .bb-digital-img {
  object-fit:contain; background:linear-gradient(145deg,#f8fafc,#eef2f6);
  border-color:color-mix(in srgb,var(--line) 80%,transparent);
}
.bb-digital-img-main { width:78%; height:72%; right:0; top:2%; }
.bb-digital-img-float { width:48%; height:44%; left:0; bottom:5%; transform:rotate(-3deg); }
.bb-digital-visual--illustration .bb-digital-img-main { width:82%; height:78%; padding:.35rem; }
.bb-digital-visual--illustration .bb-digital-img-float { width:46%; height:48%; padding:.25rem; }
.bb-float-note { position:absolute; right:3%; bottom:2%; max-width:18rem; padding:1rem 1.15rem; background:#162224; color:white; border-radius:var(--radius-lg); box-shadow:0 16px 42px rgba(0,0,0,.18); }
.bb-float-note strong,.bb-float-note span { display:block; }
.bb-float-note strong { font-size:.86rem; }
.bb-float-note span { color:#afc3bf; font-size:.74rem; margin-top:.28rem; }

.bb-format-ladder { display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:.8rem; }
.bb-format-step { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0; padding:1.35rem; min-height:300px; display:flex; flex-direction:column; }
.bb-format-step:nth-child(1){ min-height:270px; }
.bb-format-step:nth-child(2){ min-height:320px; }
.bb-format-step:nth-child(3){ min-height:370px; }
.bb-format-step:nth-child(4){ min-height:420px; }
.bb-format-step.is-featured { background:color-mix(in srgb,var(--surface) 82%,#dff4ec); border-color:color-mix(in srgb,var(--brand-500) 45%,var(--line)); }
.bb-format-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.bb-format-top span { font-family:"Fraunces",serif; font-size:1.3rem; color:var(--brand-600); }
.bb-format-step h3 { font-size:1.55rem; margin:1.2rem 0 .35rem; color:var(--ink); }
.bb-format-price { font-weight:800; font-size:1.05rem; color:var(--ink); }
.bb-format-step p { color:var(--ink-3); line-height:1.5; font-size:.88rem; }
.bb-format-step .btn { margin-top:auto; }

.bb-cases { position:relative; overflow:hidden; }
.bb-cases::before { content:""; position:absolute; width:34rem; height:34rem; border-radius:50%; right:-12rem; top:-15rem; background:color-mix(in srgb,var(--brand-500) 10%,transparent); filter:blur(10px); pointer-events:none; }
.bb-cases--light::before { background:color-mix(in srgb,var(--brand-500) 6%,transparent); }
.bb-case-card { height:100%; border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-xl); overflow:hidden; background:rgba(255,255,255,.04); transition:border-color .25s ease, box-shadow .25s ease; }
.bb-cases--light .bb-case-card {
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 1px 0 color-mix(in srgb,var(--surface) 80%,transparent);
}
.bb-cases--light .bb-case-card:hover {
  border-color:color-mix(in srgb,var(--brand-500) 45%,var(--line));
  box-shadow:0 12px 32px color-mix(in srgb,var(--brand-500) 8%,transparent);
}
.bb-case-media { position:relative; aspect-ratio:16/10; overflow:hidden; }
.bb-case-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.bb-case-card:hover .bb-case-media img { transform:scale(1.035); }
.bb-case-media span { position:absolute; top:1rem; right:1rem; width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:50%; background:rgba(12,18,20,.74); color:white; font-family:"Fraunces",serif; }
.bb-cases--light .bb-case-media span {
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  color:var(--brand-700);
  border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.bb-case-body { padding:1.35rem; }
.bb-case-body small { color:color-mix(in srgb,var(--brand-300) 80%,white); text-transform:uppercase; letter-spacing:.09em; font-size:.64rem; }
.bb-cases--light .bb-case-body small { color:var(--brand-700); }
.bb-case-body h3 { color:var(--on-inverse); margin:.45rem 0 .55rem; font-size:1.35rem; }
.bb-cases--light .bb-case-body h3 { color:var(--ink); }
.bb-case-body p { color:var(--on-inverse-muted); margin:0; line-height:1.6; }
.bb-cases--light .bb-case-body p { color:var(--ink-3); }
.bb-cases--light.bb-section-wash { background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface) 90%,#edf5ff)); }

.bb-portfolio-filters {
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.bb-portfolio-filter {
  padding:.45rem .85rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-3); font-size:.82rem; font-weight:650;
  cursor:pointer; transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.bb-portfolio-filter:hover { border-color:color-mix(in srgb,var(--brand-500) 28%,var(--line)); color:var(--ink); }
.bb-portfolio-filter.is-active {
  border-color:color-mix(in srgb,var(--brand-500) 35%,var(--line));
  background:color-mix(in srgb,var(--brand-500) 10%,var(--surface));
  color:var(--brand-700);
}
a.bb-case-card { color:inherit; transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease; }
a.bb-case-card:hover { color:inherit; transform:translateY(-2px); }
.bb-case-link {
  display:inline-block; margin-top:.75rem;
  color:var(--brand-700); font-size:.82rem; font-weight:700;
}
[data-portfolio-item].is-hidden { display:none !important; }

.bb-route { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; padding-top:2.5rem; }
.bb-route-line { position:absolute; top:3.7rem; left:7%; right:7%; height:2px; background:linear-gradient(90deg,#1f57c3,var(--brand-500),#b9df58); opacity:.42; }
.bb-route article { position:relative; z-index:1; padding:0 .4rem; text-align:center; }
.bb-route article > span { width:2.5rem; height:2.5rem; display:grid; place-items:center; margin:0 auto 1.1rem; border-radius:50%; background:var(--surface); border:2px solid var(--brand-500); font-family:"Fraunces",serif; color:var(--brand-700); box-shadow:0 0 0 .45rem var(--bg); }
.bb-route h3 { color:var(--ink); font-size:1.1rem; }
.bb-route p { color:var(--ink-3); font-size:.86rem; line-height:1.55; }

.bb-faq-section { border-top:1px solid var(--line); }

.bb-faq-visual {
  width:min(100%, 25rem);
  margin-top:2rem;
}
.bb-faq-visual svg {
  display:block;
  width:100%;
  height:auto;
}
.bb-faq-visual img {
  display:block;
  width:100%;
  height:auto;
  opacity:.92;
}
.faq-item p + p { margin-top:.75rem; }

@media (max-width:767.98px) {
  .bb-faq-visual {
    width:16rem;
    margin:1.5rem auto 0;
    opacity:.9;
  }
}

.bb-final-cta { position:relative; overflow:hidden; }
.bb-final-cta::after { content:""; position:absolute; width:32rem; height:32rem; border-radius:50%; right:-8rem; bottom:-18rem; background:color-mix(in srgb,var(--brand-500) 18%,transparent); filter:blur(10px); }

/* Light CTA card — replaces volt-dark final bands */
.bb-final-card-section { border-top:1px solid var(--line); }
.bb-final-card {
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--brand-500) 12%,var(--line));
  border-radius:clamp(1.35rem,2.5vw,2rem);
  background:linear-gradient(135deg,#f8fbff 0%,#edf5ff 55%,#edf9f5 100%);
  padding:clamp(1.75rem,4vw,3.25rem);
  box-shadow:0 18px 50px color-mix(in srgb,var(--brand-500) 7%,transparent);
}
.bb-final-card-deco {
  position:absolute;
  right:1.5rem;
  top:1.25rem;
  width:min(28%,7rem);
  opacity:.85;
  pointer-events:none;
}
.bb-final-card-deco svg { display:block; width:100%; height:auto; }
.bb-final-card-title {
  max-width:42rem;
  font-size:clamp(1.65rem,3.2vw,2.35rem);
  letter-spacing:-.03em;
  line-height:1.12;
}

/* Mid callout — light alternative to mid-cta.is-inverse */
.bb-mid-callout {
  border:1px solid var(--line);
  border-radius:var(--radius-2xl);
  background:color-mix(in srgb,var(--surface) 88%,#edf5ff);
  padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 4%,transparent);
}

/* Ink card — dark accent inside light sections */
.bb-ink-card {
  border-radius:clamp(1rem,2vw,1.35rem);
  border:1px solid color-mix(in srgb,#fff 8%,transparent);
  background:linear-gradient(145deg,#172334,#15252c 55%,#182735);
  color:#cfe0eb;
  padding:clamp(1.35rem,3vw,2rem);
  box-shadow:0 20px 50px color-mix(in srgb,var(--ink) 18%,transparent);
}
.bb-ink-card h2, .bb-ink-card h3, .bb-ink-card strong { color:#f1f5f9; }
.bb-ink-card p, .bb-ink-card li { color:#b8c9d9; }
.bb-final-title { max-width:54rem; font-size:clamp(2rem,4vw,4rem); letter-spacing:-.045em; line-height:1.06; }

@media (max-width: 991.98px) {
  .py-lg-6 { padding-top:4rem !important; padding-bottom:4rem !important; }
  .bb-hero-title { font-size:clamp(2.7rem,10vw,4.8rem); }
  .bb-principle-intro { padding:2.5rem 0 1.5rem; }
  .bb-principle-list { border-left:0; border-top:1px solid var(--line-strong); }
  .bb-principle { padding:1.5rem 0; }
  .bb-bento { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .bb-bento-main { grid-row:auto; grid-column:1/3; }
  .bb-bento-app { grid-column:1/3; }
  .position-lg-sticky { position:static !important; }
  .bb-digital-grid { grid-template-columns:1fr; }
  .bb-digital-visual { min-height:430px; }
  .bb-format-ladder { grid-template-columns:1fr 1fr; align-items:stretch; }
  .bb-format-step,.bb-format-step:nth-child(n){ min-height:310px; border-radius:var(--radius-xl); }
  .bb-route { grid-template-columns:1fr 1fr; }
  .bb-route-line { display:none; }
}
@media (max-width: 575.98px) {
  .bb-board-strip { grid-template-columns:1fr; }
  .bb-niche-row { grid-template-columns:3rem 1fr 1.2rem; }
  .bb-niche-row p { font-size:.86rem; }
  .bb-digital-visual { min-height:360px; }
  .bb-digital-img-main { width:88%; height:66%; }
  .bb-digital-img-float { width:55%; height:40%; }
  .bb-float-note { right:0; max-width:15rem; }
  .bb-format-ladder { grid-template-columns:1fr; }
  .bb-format-step,.bb-format-step:nth-child(n){ min-height:auto; }
  .bb-route { grid-template-columns:1fr; gap:1.8rem; }
}

/* Bento — uniform stacked cards on mobile (desktop grid unchanged) */
@media (max-width: 767.98px) {
  .bb-bento {
    display:flex;
    flex-direction:column;
    gap:.75rem;
  }
  .bb-bento-main,
  .bb-bento-app {
    grid-row:auto;
    grid-column:auto;
  }
  .bb-bento-card {
    min-height:11.25rem;
    margin-bottom:0;
    padding:1.15rem 1.2rem 1.05rem;
  }
  .bb-bento-card h3,
  .bb-bento-main h3 {
    font-size:1.42rem;
    max-width:none;
    margin:.5rem 0 .4rem;
    letter-spacing:-.03em;
  }
  .bb-bento-card p {
    margin:0;
    font-size:.86rem;
    line-height:1.5;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .bb-bento-card:has(.bb-bento-art) p { max-width:58%; }
  .bb-bento-card:not(:has(.bb-bento-art)) p { max-width:none; }
  .bb-card-tags { display:none; }
  .bb-card-link,
  .bb-code-line {
    margin-top:auto;
    padding-top:.85rem;
    font-size:.8rem;
  }
  .bb-bento-art {
    width:42%;
    max-width:9.5rem;
    max-height:58%;
    right:-2%;
    bottom:.35rem;
    opacity:.26;
  }
  .bb-bento-main .bb-bento-art { width:44%; max-width:10rem; opacity:.24; }
  .bb-bento-qa .bb-bento-art { opacity:.28; }
}


/* v3: mobile PWA-like action dock */
.bb-mobile-dock { display:none; }
@media (max-width: 991.98px) {
  body { padding-bottom: calc(5.3rem + env(safe-area-inset-bottom)); }
  .site-header { position:sticky; top:0; z-index:1020; backdrop-filter:blur(16px); background:color-mix(in srgb,var(--bg) 88%,transparent); }
  .site-header .btn-brand { display:none; }
  .bb-mobile-dock { position:fixed; z-index:1040; left:50%; bottom:max(.7rem,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(calc(100% - 1rem),31rem); min-height:4.25rem; padding:.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.25rem; border:1px solid color-mix(in srgb,var(--line-strong) 72%,transparent); border-radius:1.35rem; background:color-mix(in srgb,var(--surface) 91%,transparent); box-shadow:0 18px 55px rgba(17,29,31,.2); backdrop-filter:blur(20px) saturate(1.25); }
  .bb-mobile-dock-item { border:0; background:transparent; color:var(--ink-3); min-width:0; min-height:3.4rem; border-radius:1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.12rem; text-decoration:none; font-family:inherit; }
  .bb-mobile-dock-item small { font-size:.64rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
  .bb-mobile-dock-icon { height:1.45rem; display:grid; place-items:center; font-size:1.22rem; line-height:1; font-weight:700; }
  .bb-mobile-dock-item.is-primary { background:var(--brand-500); color:var(--on-brand,#fff); box-shadow:0 8px 20px color-mix(in srgb,var(--brand-500) 28%,transparent); }
  .bb-mobile-sheet { position:fixed; inset:0; z-index:1050; pointer-events:none; visibility:hidden; }
  .bb-mobile-sheet.is-open { pointer-events:auto; visibility:visible; }
  .bb-mobile-sheet-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(12,20,21,.36); opacity:0; transition:opacity .22s ease; }
  .bb-mobile-sheet.is-open .bb-mobile-sheet-backdrop { opacity:1; }
  .bb-mobile-sheet-panel { position:absolute; left:.5rem; right:.5rem; bottom:.5rem; padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); box-shadow:0 22px 70px rgba(0,0,0,.25); transform:translateY(105%); transition:transform .25s ease; }
  .bb-mobile-sheet.is-open .bb-mobile-sheet-panel { transform:translateY(0); }
  .bb-mobile-sheet-handle { width:2.7rem; height:.28rem; border-radius:99px; background:var(--line-strong); margin:-.35rem auto .8rem; }
  .bb-mobile-sheet-links { border-top:1px solid var(--line); }
  .bb-mobile-sheet-links a { display:flex; justify-content:space-between; align-items:center; padding:.9rem .15rem; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:650; }
  .bb-hero { overflow:hidden; }
  .bb-hero-board { margin-top:.5rem; }
}
@media (max-width: 575.98px) {
  .site-header .brand-lockup small { display:none; }
  .site-header .container-xxl { padding-top:.7rem !important; padding-bottom:.7rem !important; }
  .bb-hero-title { font-size:clamp(2.55rem,13vw,4rem); line-height:.98; }
  .bb-hero-lead { font-size:1rem; }
  .bb-hero-notes { margin-top:2rem !important; }
  .bb-principle { grid-template-columns:3rem 1fr; }
  .bb-niche-row h3 { font-size:1.25rem; }
  .bb-niche-row small { letter-spacing:.06em; }
  .bb-final-title { font-size:clamp(2.15rem,11vw,3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-mobile-sheet-panel,.bb-mobile-sheet-backdrop { transition:none; }
}

/* =========================================================
   HERO V4 — copy + desktop monitor visual
   ========================================================= */
.bb-hero-v4 {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--brand-100) 55%, transparent), transparent 28rem),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.2px),
    linear-gradient(180deg, #f7fafb, #eef3f5);
  background-size: auto, 22px 22px, auto;
}
.bb-hero-v4-grid {
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
  min-height:min(38rem, calc(100vh - 7rem));
}
.bb-hero-v4-copy {
  min-width:0;
  max-width:36.5rem;
  padding-block:.35rem 1.25rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.bb-hero-v4-kicker {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .7rem; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--brand-300) 45%,var(--line));
  background:color-mix(in srgb,var(--brand-50) 70%,#fff);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--brand-700);
}
.bb-hero-v4-title {
  margin:1.25rem 0 0;
  font-size:clamp(2.45rem,3.85vw,4rem);
  line-height:1.04;
  letter-spacing:-.042em;
  font-weight:820;
  color:var(--ink);
  max-width:15.5ch;
}
.bb-hero-v4-title-line { display:block; }
.bb-marker-v4 { position:relative; display:inline; z-index:0; white-space:nowrap; }
.bb-marker-v4::after {
  content:""; position:absolute; z-index:-1; left:-.04em; right:-.04em; bottom:.05em; height:.2em;
  background:linear-gradient(90deg,#7be06a,#c8f26a); border-radius:999px; transform:rotate(-.8deg);
}
.bb-hero-v4-lead { margin:1.45rem 0 0; max-width:32rem; font-size:1rem; line-height:1.62; }
.bb-hero-v4-benefits {
  margin-top:1.65rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;
  max-width:100%;
}
.bb-hero-v4-benefit {
  display:flex; gap:.55rem; align-items:flex-start; min-width:0;
  padding:.62rem .65rem; border:1px solid var(--line); border-radius:.95rem;
  background:rgba(255,255,255,.88); box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.bb-hero-v4-benefit>span {
  flex:0 0 1.75rem; width:1.75rem; height:1.75rem; display:grid; place-items:center;
  border-radius:.55rem; background:var(--surface-2); font-weight:900; font-size:.82rem;
}
.bb-hero-v4-benefit>span.is-ok { color:#16a34a; background:#ecfdf3; }
.bb-hero-v4-benefit>span.is-bolt { color:var(--brand-600); background:var(--brand-50); }
.bb-hero-v4-benefit>span.is-grow { color:#15803d; background:#f0fdf4; }
.bb-hero-v4-benefit strong,.bb-hero-v4-benefit small { display:block; }
.bb-hero-v4-benefit strong { color:var(--ink); font-size:.76rem; line-height:1.25; }
.bb-hero-v4-benefit small { color:var(--ink-3); font-size:.64rem; line-height:1.3; margin-top:.1rem; }
.bb-hero-v4-actions { margin-top:1.55rem; display:flex; flex-wrap:wrap; gap:.65rem; }
.bb-hero-v4-actions .btn { min-height:3.1rem; padding-inline:1.2rem; border-radius:.85rem; font-size:.95rem; }
.bb-play { display:inline-block; margin-right:.2rem; opacity:.65; font-size:.9rem; }
.bb-hero-v4-proof {
  margin-top:1.65rem; padding-top:1rem; border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; color:var(--ink-3);
}
.bb-hero-v4-proof>div:not(.bb-proof-avatars) strong,.bb-hero-v4-proof>div:not(.bb-proof-avatars) small { display:block; }
.bb-hero-v4-proof strong { color:var(--ink); font-size:.8rem; }
.bb-hero-v4-proof small { font-size:.66rem; }
.bb-hero-v4-proof>i { width:1px; height:1.85rem; background:var(--line); }
.bb-proof-avatars { display:flex; padding-left:.3rem; }
.bb-proof-avatars span {
  margin-left:-.35rem; width:1.85rem; height:1.85rem; display:grid; place-items:center;
  border-radius:50%; border:2px solid #fff; background:linear-gradient(135deg,var(--brand-100),var(--brand-300));
  color:var(--brand-700); font-size:.5rem; font-weight:900;
}

/* RIGHT STAGE — direction showcase (sites / apps / QA illustrations) */
.bb-hero-v4-stage--showcase {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(34rem, 72vh);
  padding:.35rem 0 1rem;
  overflow:visible;
}
.bb-hero-v4-showcase {
  width:min(100%, 42rem);
  margin-inline:auto;
}
.bb-hero-v4-showcase-stage {
  position:relative;
  aspect-ratio:16/11;
  border-radius:1.25rem;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 28%, color-mix(in srgb,var(--brand-100) 55%,transparent), transparent 42%),
    linear-gradient(145deg,#f8fafc,#eef2f6);
  box-shadow:0 28px 60px rgba(15,23,42,.1), 0 0 0 1px rgba(15,23,42,.06);
}
.bb-hero-v4-showcase-slide {
  position:absolute; inset:0; margin:0;
  opacity:0; transform:scale(.985);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.bb-hero-v4-showcase-slide.is-active {
  opacity:1; transform:scale(1); pointer-events:auto;
}
.bb-hero-v4-showcase-slide img {
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:center;
  padding:.35rem .5rem .5rem;
}
.bb-hero-v4-showcase-tabs {
  margin-top:.85rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem;
}
.bb-hero-v4-showcase-tabs button {
  border:1px solid var(--line); border-radius:999px;
  padding:.48rem .95rem; background:rgba(255,255,255,.88);
  color:var(--ink-3); font:inherit; font-size:.78rem; font-weight:750;
  cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.bb-hero-v4-showcase-tabs button:hover { border-color:var(--line-strong); color:var(--ink); }
.bb-hero-v4-showcase-tabs button.is-active {
  background:var(--brand-500); border-color:transparent; color:var(--on-brand,#fff);
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand-500) 28%,transparent);
}
.bb-hero-illustration-wrap {
  aspect-ratio:auto; min-height:18rem; transform:none; overflow:visible;
  background:linear-gradient(145deg,#f8fafc,#eef2f6);
  border-color:color-mix(in srgb,var(--line) 85%,transparent);
}
.bb-hero-illustration-wrap img {
  object-fit:contain; height:auto; width:100%; padding:.75rem;
}

/* Lead form card (niche pages, contacts — not homepage hero) */
.bb-hero-v4-form-card {
  position:relative; z-index:2;
  padding:1.2rem 1.15rem; border:1px solid var(--line); border-radius:1.15rem;
  background:rgba(255,255,255,.98); backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(15,23,42,.12); overflow:hidden;
}
.bb-form-accent {
  position:absolute; left:0; top:0; width:.4rem; height:4.8rem;
  background:linear-gradient(180deg,#86efac,#22c55e); border-radius:0 0 .45rem 0;
}
.bb-hero-v4-form-card h2 { margin:0; font-size:1.22rem; line-height:1.2; color:var(--ink); }
.bb-hero-v4-form-card p { margin:.5rem 0 .85rem; color:var(--ink-3); font-size:.78rem; line-height:1.45; }
.bb-hero-v4-form-card form { display:grid; gap:.55rem; }
.bb-hero-v4-form-card .form-control { min-height:2.9rem; background:#fff; border-radius:.75rem; }
.bb-hero-v4-form-card .btn { min-height:3rem; border-radius:.8rem; }
.bb-hero-v4-privacy { display:block; margin-top:.65rem; color:var(--muted); font-size:.65rem; text-align:center; }

.bb-hero-v4-trustbar {
  margin-top:1.35rem; padding:.85rem 1rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem;
  border:1px solid var(--line); border-radius:1.05rem;
  background:rgba(255,255,255,.78);
}
.bb-hero-v4-trustbar span { text-align:center; color:var(--ink-3); font-size:.72rem; font-weight:650; }

@media (prefers-reduced-motion: reduce) {
  .bb-hero-v4-showcase-slide { transition:none; transform:none; }
}
@media (max-width: 1199.98px) {
  .bb-hero-v4-grid { gap:2rem; }
  .bb-hero-v4-title { font-size:clamp(2.35rem,3.5vw,3.45rem); }
  .bb-hero-v4-showcase { width:min(100%, 36rem); }
}
@media (max-width: 991.98px) {
  .bb-hero-v4-grid { grid-template-columns:1fr; min-height:0; gap:1rem; }
  .bb-hero-v4-copy { max-width:none; padding-bottom:.5rem; }
  .bb-hero-v4-title { max-width:18ch; font-size:clamp(2.35rem,7vw,3.35rem); }
  .bb-hero-v4-stage--showcase { min-height:0; padding:0 0 .5rem; }
  .bb-hero-v4-showcase { width:min(100%, 32rem); }
}
@media (max-width: 767.98px) {
  .bb-hero-v4-benefits { grid-template-columns:1fr; }
  .bb-hero-v4-trustbar { grid-template-columns:1fr 1fr; }
  .bb-hero-v4-actions { display:grid; grid-template-columns:1fr 1fr; }
  .bb-hero-v4-actions .btn-link { grid-column:1 / -1; justify-self:start; padding-left:0; }
}
@media (max-width: 479.98px) {
  .bb-hero-v4-title { font-size:clamp(2.15rem,10.5vw,2.85rem); max-width:none; }
  .bb-hero-v4-actions { grid-template-columns:1fr; }
  .bb-hero-v4-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .bb-hero-v4-proof>i, .bb-proof-avatars { display:none; }
  .bb-hero-v4-trustbar { grid-template-columns:1fr; }
}

/* =========================================================
   Niche / service interface-scene hero (v4 family)
   ========================================================= */
.bb-niche-hero {
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 82% 28%, color-mix(in srgb, var(--brand-100) 28%, transparent), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 62%, transparent), var(--bg));
}
.bb-niche-hero.bb-niche-tpl-construction {
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, #d4c4a8 38%, transparent), transparent 26rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 68%, #f7f3ec), var(--bg));
}
.bb-niche-hero.bb-niche-tpl-lifestyle {
  background:
    radial-gradient(circle at 80% 24%, color-mix(in srgb, #e8d4f0 34%, transparent), transparent 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 64%, #faf5f8), var(--bg));
}
.bb-niche-hero.bb-niche-tpl-expert {
  background:
    radial-gradient(circle at 76% 26%, color-mix(in srgb, #cfe0f5 36%, transparent), transparent 26rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 66%, #f2f7fc), var(--bg));
}
.bb-niche-hero-grid {
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(28rem,.98fr);
  gap:clamp(2rem,4.5vw,4.5rem); align-items:center;
}
.bb-niche-hero-copy { min-width:0; padding-block:1.25rem; }
.bb-niche-hero-copy .display-5 { letter-spacing:-.04em; line-height:1.02; max-width:18ch; }
.bb-niche-hero-bullets { margin:1.35rem 0 0; padding:0; list-style:none; display:grid; gap:.55rem; color:var(--ink-3); }
.bb-niche-hero-bullets li::before { content:"✓"; color:var(--brand-600); font-weight:800; margin-right:.55rem; }
.bb-niche-hero-scene { position:relative; min-height:32rem; display:grid; align-items:end; }
.bb-niche-hero-visual {
  position:relative; margin-left:auto; width:min(100%,34rem); aspect-ratio:4/3;
  border-radius:1.35rem; overflow:hidden; border:1px solid var(--line-strong);
  box-shadow:0 24px 58px color-mix(in srgb, var(--ink) 14%, transparent);
  transform:perspective(900px) rotateY(-3deg);
}
.bb-niche-hero-visual img { width:100%; height:100%; object-fit:cover; }
.bb-niche-scene-card {
  position:absolute; z-index:2; padding:.65rem .85rem; border-radius:.95rem;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  box-shadow:0 10px 28px rgba(20,34,42,.12); min-width:7.5rem;
}
.bb-niche-scene-card small,.bb-niche-scene-card strong { display:block; }
.bb-niche-scene-card small { color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; }
.bb-niche-scene-card strong { color:var(--ink); font-size:1.05rem; margin-top:.12rem; }
.bb-niche-scene-card:nth-child(2) { top:12%; left:-8%; }
.bb-niche-scene-card:nth-child(3) { top:8%; right:-6%; }
.bb-niche-scene-card:nth-child(4) { bottom:14%; left:-4%; }
.bb-niche-hero-scene .bb-hero-v4-form-card { position:absolute; z-index:4; right:0; top:6.5rem; width:18rem; }

.bb-section-head .eyebrow { display:block; }
.bb-service-hero { border-bottom:1px solid var(--line); }

.bb-calc-demo {
  display:grid; grid-template-columns:1.05fr .95fr; gap:1.5rem; align-items:start;
  padding:1.35rem; border:1px solid var(--line); border-radius:var(--radius-xl);
  background:var(--surface); box-shadow:0 18px 48px color-mix(in srgb, var(--ink) 8%, transparent);
}
.bb-calc-demo-ui { padding:.5rem; }
.bb-calc-demo-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.bb-calc-demo-head span { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800; }
.bb-calc-demo-field { margin-bottom:.85rem; }
.bb-calc-demo-field label { display:block; font-size:.72rem; font-weight:700; color:var(--ink-2); margin-bottom:.35rem; }
.bb-calc-demo-field input,.bb-calc-demo-field select {
  width:100%; min-height:2.75rem; border:1px solid var(--line); border-radius:.75rem;
  padding:.55rem .75rem; background:var(--surface-2); color:var(--ink); font:inherit;
}
.bb-calc-demo-chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.bb-calc-demo-chips button {
  border:1px solid var(--line); border-radius:999px; padding:.35rem .7rem;
  background:var(--surface-2); color:var(--ink-3); font-size:.78rem; cursor:default;
}
.bb-calc-demo-chips button.is-on { background:var(--brand-500); border-color:transparent; color:var(--on-brand,#fff); }
.bb-calc-demo-result {
  padding:1.25rem; border-radius:1rem; background:linear-gradient(145deg,#162224,#1f3336);
  color:#e8f2ef; min-height:100%;
}
.bb-calc-demo-result small { display:block; color:#9eb5af; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.bb-calc-demo-result strong { display:block; font-size:clamp(1.8rem,3vw,2.6rem); margin:.45rem 0 .35rem; color:#fff; }
.bb-calc-demo-result p { color:#b8cbc6; font-size:.86rem; margin:0 0 1rem; line-height:1.55; }
.bb-calc-demo-result ul { margin:0; padding-left:1.1rem; color:#a8bdb7; font-size:.8rem; }
.bb-calc-demo--hero { margin:0; box-shadow:0 22px 55px color-mix(in srgb, var(--ink) 10%, transparent); }
.bb-calc-demo--hero .bb-calc-demo-result strong { font-size:clamp(1.5rem,2.5vw,2.1rem); }

.bb-calc-flow {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:.75rem 1rem; align-items:stretch;
}
.bb-calc-flow-step {
  padding:1.1rem 1.15rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface);
}
.bb-calc-flow-step.is-accent {
  background:linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--brand-100) 40%, var(--surface)) 100%);
  border-color:color-mix(in srgb, var(--brand-500) 28%, var(--line));
}
.bb-calc-flow-step small {
  display:block; font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-700); margin-bottom:.45rem;
}
.bb-calc-flow-step strong { display:block; font-size:1.05rem; color:var(--ink); margin-bottom:.35rem; }
.bb-calc-flow-step p { margin:0; font-size:.84rem; color:var(--ink-3); line-height:1.45; }
.bb-calc-flow-arrow { align-self:center; color:var(--brand-600); font-weight:800; font-size:1.2rem; opacity:.75; }

.bb-calc-niche-grid {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.85rem;
}
.bb-calc-mini {
  padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface);
  display:flex; flex-direction:column; gap:.55rem; min-height:100%;
}
.bb-calc-mini-tag {
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-700);
}
.bb-calc-mini h3 { margin:0; }
.bb-calc-mini-fields { display:flex; flex-wrap:wrap; gap:.35rem; }
.bb-calc-mini-fields span {
  padding:.28rem .55rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); font-size:.72rem; color:var(--ink-3);
}
.bb-calc-mini-result {
  margin-top:auto; padding-top:.45rem;
  font-size:1rem; color:var(--brand-700);
}

.bb-excel-bridge {
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
.bb-excel-bridge-list {
  margin:0; padding-left:1.1rem; color:var(--ink-3); font-size:.9rem; line-height:1.55;
}
.bb-excel-bridge-visual {
  padding:1.35rem; border:1px solid var(--line); border-radius:1.25rem;
  background:linear-gradient(165deg, var(--surface) 0%, color-mix(in srgb, var(--brand-100) 30%, var(--surface)) 100%);
  text-align:center;
}
.bb-excel-stack { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; }
.bb-excel-stack span {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.42rem .65rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:.76rem; font-weight:650; color:var(--ink-2);
}
.bb-excel-stack i { color:var(--brand-600); }
.bb-excel-bridge-arrow { margin:.85rem 0; font-size:1.25rem; font-weight:800; color:var(--brand-500); }
.bb-excel-target {
  display:inline-block; padding:1rem 1.25rem; border-radius:1rem;
  background:linear-gradient(145deg, #162224, #1f3336); color:#e8f2ef; text-align:left; min-width:min(100%, 14rem);
}
.bb-excel-target small {
  display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:#9eb5af;
}
.bb-excel-target strong { display:block; font-size:1.15rem; color:#fff; margin:.25rem 0; }
.bb-excel-target p { margin:0; font-size:.78rem; color:#b8cbc6; }

.bb-calc-integrate {
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .65rem;
  padding:1.1rem 1.15rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface);
}
.bb-calc-integrate span {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.42rem .65rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); font-size:.78rem; font-weight:650; color:var(--ink-2);
}
.bb-calc-integrate span.is-accent {
  background:var(--brand-500); border-color:transparent; color:var(--on-brand,#fff);
}
.bb-calc-integrate span i { font-size:.85rem; }
.bb-calc-integrate b { color:var(--muted); font-weight:700; }

@media (max-width:991.98px) {
  .bb-calc-flow { grid-template-columns:1fr; }
  .bb-calc-flow-arrow { justify-self:center; transform:rotate(90deg); }
  .bb-calc-niche-grid { grid-template-columns:1fr 1fr; }
  .bb-excel-bridge { grid-template-columns:1fr; }
}
@media (max-width:575.98px) {
  .bb-calc-niche-grid { grid-template-columns:1fr; }
}

/* QA / testirovanie service page */
.bb-qa-hero-visual { position:relative; }
.bb-qa-hero-badges {
  position:absolute; top:.85rem; right:.85rem;
  display:flex; flex-wrap:wrap; gap:.35rem; justify-content:flex-end; max-width:12rem;
}
.bb-qa-hero-badges span {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.28rem .5rem; border-radius:999px;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  font-size:.62rem; font-weight:750; color:var(--ink-2);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ink) 8%, transparent);
}
.bb-qa-hero-badges i { color:#16a34a; font-size:.7rem; }
.bb-qa-terminal {
  position:absolute; left:.85rem; bottom:.85rem;
  padding:.55rem .75rem; border-radius:.75rem;
  background:linear-gradient(145deg,#162224,#1f3336); color:#e8f2ef;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 12px 32px color-mix(in srgb, var(--ink) 18%, transparent);
}
.bb-qa-terminal small { display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; color:#9eb5af; }
.bb-qa-terminal strong { display:block; font-size:.95rem; color:#86efac; line-height:1.2; }
.bb-qa-terminal span { font-size:.72rem; color:#b8cbc6; }

.bb-qa-scenario {
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:1.15rem 1.2rem 1.25rem;
  border:1px solid var(--line);
  border-radius:1.1rem;
  background:var(--surface);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (hover:hover) and (pointer:fine) {
  .bb-qa-scenario:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 48px color-mix(in srgb, var(--ink) 10%, transparent);
  }
}
.bb-qa-scenario.is-bad {
  border-color:color-mix(in srgb, #dc2626 28%, var(--line));
  background:linear-gradient(165deg, var(--surface) 0%, color-mix(in srgb, #fee2e2 22%, var(--surface)) 100%);
}
.bb-qa-scenario.is-bad:hover {
  border-color:color-mix(in srgb, #dc2626 42%, var(--line));
  box-shadow:0 22px 52px color-mix(in srgb, #dc2626 12%, transparent);
}
.bb-qa-scenario.is-good {
  background:linear-gradient(165deg, var(--surface) 0%, color-mix(in srgb, #dff4ec 55%, var(--surface)) 100%);
  border-color:color-mix(in srgb, var(--brand-500) 32%, var(--line));
}
.bb-qa-scenario.is-good:hover {
  box-shadow:0 22px 52px color-mix(in srgb, var(--brand-500) 12%, transparent);
}
.bb-qa-scenario-head {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  margin-bottom:1rem;
}
.bb-qa-scenario-head small {
  font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.bb-qa-scenario.is-good .bb-qa-scenario-head small { color:var(--brand-700); }
.bb-qa-scenario-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .55rem; border-radius:999px; font-size:.62rem; font-weight:800; letter-spacing:.04em;
}
.bb-qa-scenario-badge.is-fail {
  background:color-mix(in srgb, #dc2626 12%, #fff);
  color:#b91c1c; border:1px solid color-mix(in srgb, #dc2626 25%, transparent);
}
.bb-qa-scenario-badge.is-pass {
  background:color-mix(in srgb, #16a34a 12%, #fff);
  color:#15803d; border:1px solid color-mix(in srgb, #16a34a 25%, transparent);
}

.bb-qa-scenario-track {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:.5rem .65rem;
  align-items:center;
  margin-bottom:1rem;
  padding:1rem .85rem;
  border:1px solid color-mix(in srgb, var(--brand-500) 12%, var(--line));
  border-radius:1rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #f7faff), var(--surface));
}
.bb-qa-scenario.is-bad .bb-qa-scenario-track {
  border-color:color-mix(in srgb, #dc2626 18%, var(--line));
  background:linear-gradient(180deg, color-mix(in srgb, #fff 88%, #fee2e2), var(--surface));
}
.bb-qa-scenario.is-good .bb-qa-scenario-track {
  border-color:color-mix(in srgb, var(--brand-500) 22%, var(--line));
  background:linear-gradient(180deg, color-mix(in srgb, #fff 88%, #ecfdf3), var(--surface));
}
@media (max-width:991.98px) {
  .bb-qa-scenario-track {
    grid-template-columns:1fr;
    justify-items:stretch;
    gap:.45rem;
    max-width:none;
    width:100%;
    margin-inline:0;
    margin-bottom:1.1rem;
    padding:.85rem .75rem;
  }
}
.bb-qa-scenario-node {
  display:grid;
  gap:.55rem;
  justify-items:center;
  text-align:center;
  padding:.15rem .25rem;
  transition:transform .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  .bb-qa-scenario:hover .bb-qa-scenario-node { transform:translateY(-2px); }
}
.bb-qa-scenario-node span {
  font-size:.8rem;
  font-weight:650;
  color:var(--ink-2);
  line-height:1.3;
  max-width:7.5rem;
}
.bb-qa-scenario-track .bb-route-icon {
  position:relative;
  width:3.875rem;
  height:3.875rem;
  margin:0;
  border-radius:1.125rem;
  font-size:1.65rem;
  box-shadow:0 10px 30px color-mix(in srgb, var(--ink) 8%, transparent), 0 2px 5px color-mix(in srgb, var(--ink) 4%, transparent);
}
.bb-qa-scenario.is-bad:hover .bb-qa-scenario-node.is-fail .bb-route-icon {
  box-shadow:0 10px 26px color-mix(in srgb, #dc2626 18%, transparent);
}
.bb-route-icon.is-red {
  color:#dc2626;
  background:#fee2e2;
  border-color:color-mix(in srgb, #dc2626 22%, rgba(30,41,59,.08));
}
.bb-qa-scenario-fail-mark {
  position:absolute; right:-.3rem; top:-.3rem;
  display:grid; place-items:center;
  width:1.1rem; height:1.1rem; border-radius:999px;
  background:#dc2626; color:#fff; font-size:.55rem;
  box-shadow:0 2px 8px color-mix(in srgb, #dc2626 35%, transparent);
  border:2px solid #fff;
}

.bb-qa-scenario-arrow {
  display:grid; place-items:center;
  width:1.55rem; height:1.55rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-500) 16%, transparent);
  background:#f7faff;
  color:var(--brand-600);
  font-size:.82rem;
  flex-shrink:0;
  box-shadow:0 2px 6px color-mix(in srgb, var(--brand-500) 8%, transparent);
}
.bb-qa-scenario-arrow i { display:block; line-height:1; transition:transform .2s ease; }
@media (min-width:992px) {
  .bb-qa-scenario-track .bb-route-icon {
    width:4rem;
    height:4rem;
    font-size:1.7rem;
    border-radius:1.125rem;
  }
}
@media (max-width:991.98px) {
  .bb-qa-scenario-arrow i { transform:rotate(90deg); }
  .bb-qa-scenario-arrow { margin-left:1.15rem; justify-self:start; }
  .bb-qa-scenario-node {
    display:grid;
    grid-template-columns:3.625rem 1fr;
    grid-template-rows:auto;
    align-items:center;
    justify-items:start;
    text-align:left;
    column-gap:.75rem;
    padding:.25rem 0;
    width:100%;
    max-width:13rem;
  }
  .bb-qa-scenario-node span { max-width:none; font-size:.84rem; }
  .bb-qa-scenario-track .bb-route-icon {
    width:3.625rem;
    height:3.625rem;
    font-size:1.45rem;
    border-radius:1.05rem;
  }
}

.bb-qa-scenario-alert {
  display:flex; align-items:flex-start; gap:.65rem;
  margin-bottom:.85rem; padding:.65rem .75rem;
  border:1px solid color-mix(in srgb, #dc2626 25%, var(--line));
  border-radius:.85rem;
  background:color-mix(in srgb, #fee2e2 45%, #fff);
}
.bb-qa-scenario-alert > i { color:#dc2626; font-size:1rem; margin-top:.1rem; }
.bb-qa-scenario-alert strong { display:block; font-size:.78rem; color:#991b1b; }
.bb-qa-scenario-alert span { display:block; font-size:.72rem; color:#b45309; margin-top:.1rem; }

.bb-qa-scenario-passline {
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin-bottom:.85rem; padding:.55rem .75rem;
  border:1px solid color-mix(in srgb, #16a34a 25%, var(--line));
  border-radius:.85rem;
  background:color-mix(in srgb, #ecfdf3 55%, #fff);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem;
}
.bb-qa-scenario-passline span { color:var(--ink-3); display:inline-flex; align-items:center; gap:.25rem; }
.bb-qa-scenario-passline strong { color:#15803d; font-size:.82rem; }

.bb-qa-scenario-thumb {
  flex-shrink:0;
  margin:0 0 0;
  border-radius:.85rem;
  box-shadow:0 10px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}
.bb-qa-scenario-foot {
  position:relative;
  z-index:2;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.bb-qa-scenario-foot p {
  font-size:.86rem;
  color:var(--ink-3);
  line-height:1.55;
}

.bb-qa-crop {
  position:relative;
  overflow:hidden;
  margin:0;
  border:1px solid var(--line);
  border-radius:1rem;
  background:var(--surface-2);
}
.bb-qa-crop-frame {
  position:absolute;
  inset:0;
  overflow:hidden;
}
.bb-qa-crop-frame img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.bb-qa-crop.is-bug .bb-qa-crop-frame img { object-position:22% 48%; transform:scale(2.2); transform-origin:22% 48%; }
.bb-qa-crop.is-terminal .bb-qa-crop-frame img { object-position:16% 84%; transform:scale(2.6); transform-origin:16% 84%; }
.bb-qa-crop.is-dashboard .bb-qa-crop-frame img { object-position:50% 54%; }
.bb-qa-crop.is-cicd .bb-qa-crop-frame img { object-position:76% 32%; transform:scale(2.4); transform-origin:76% 32%; }
.bb-qa-crop.is-code .bb-qa-crop-frame img { object-position:90% 20%; transform:scale(2.5); transform-origin:90% 20%; }
.bb-qa-crop-cap {
  position:absolute; left:.65rem; bottom:.55rem; z-index:2;
  padding:.22rem .5rem; border-radius:999px;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  font-size:.62rem; font-weight:750; color:var(--ink-3);
  backdrop-filter:blur(6px);
}
.bb-qa-crop.is-bug { aspect-ratio:16/9; }
.bb-qa-crop.is-terminal { aspect-ratio:16/9; }
.bb-qa-crop.is-dashboard { aspect-ratio:16/11; min-height:16rem; }
.bb-qa-crop.is-cicd { aspect-ratio:16/10; }
.bb-qa-crop.is-code { aspect-ratio:16/10; }
.bb-qa-scenario-thumb.bb-qa-crop.is-bug,
.bb-qa-scenario-thumb.bb-qa-crop.is-terminal { aspect-ratio:16/10; max-height:11rem; }

.bb-qa-interface-deck {
  position:relative;
  display:grid;
  gap:.85rem;
}
.bb-qa-deck-main {
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 14px 36px color-mix(in srgb, var(--ink) 10%, transparent);
}
.bb-qa-crop.is-dashboard.bb-qa-deck-main {
  aspect-ratio:16/10;
  min-height:0;
}
.bb-qa-deck-float { display:none; }
.bb-qa-cap-desktop { display:none; }

@media (min-width:992px) {
  .bb-qa-cap-mobile { display:none; }
  .bb-qa-cap-desktop { display:block; }
  .bb-qa-interface-deck {
    display:block;
    min-height:18rem;
  }
  .bb-qa-crop.is-dashboard.bb-qa-deck-main {
    aspect-ratio:16/11;
    min-height:16rem;
    box-shadow:0 22px 55px color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .bb-qa-deck-float {
    display:block;
    position:absolute;
    width:42%;
    border-radius:.85rem;
    box-shadow:0 14px 36px color-mix(in srgb, var(--ink) 14%, transparent);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .bb-qa-crop.is-cicd.bb-qa-deck-float { top:4%; right:-2%; aspect-ratio:16/10; }
  .bb-qa-crop.is-code.bb-qa-deck-float { bottom:2%; left:-2%; width:38%; aspect-ratio:16/10; }
  .bb-qa-interface-deck:hover .bb-qa-deck-main {
    transform:translateY(-3px);
    box-shadow:0 28px 62px color-mix(in srgb, var(--ink) 15%, transparent);
  }
  .bb-qa-interface-deck:hover .bb-qa-crop.is-cicd.bb-qa-deck-float { transform:translate(-4px, -4px) rotate(-1deg); }
  .bb-qa-interface-deck:hover .bb-qa-crop.is-code.bb-qa-deck-float { transform:translate(4px, 4px) rotate(1deg); }
}

.bb-qa-pipeline-steps {
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .55rem;
}
.bb-qa-pipeline-step {
  display:inline-flex; flex-direction:column; align-items:center; gap:.2rem;
  min-width:3.4rem; padding:.45rem .55rem;
  border:1px solid var(--line); border-radius:.75rem; background:var(--surface);
  font-size:.68rem; font-weight:800; letter-spacing:.05em; color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bb-qa-pipeline-step i { font-size:.95rem; color:var(--brand-600); }
.bb-qa-pipeline-step.is-report i { color:#7c3aed; }
.bb-qa-pipeline-step.is-release {
  background:var(--brand-500); border-color:transparent; color:var(--on-brand,#fff);
}
.bb-qa-pipeline-step.is-release i { color:#fff; }
.bb-qa-pipeline-steps:hover .bb-qa-pipeline-step { opacity:.72; }
.bb-qa-pipeline-steps .bb-qa-pipeline-step:hover {
  opacity:1; transform:translateY(-2px);
  box-shadow:0 10px 24px color-mix(in srgb, var(--brand-500) 12%, transparent);
}
.bb-qa-pipeline-steps b { color:var(--brand-600); font-weight:800; font-size:.85rem; }

.bb-qa-pipeline-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.bb-qa-pipeline-chips span {
  padding:.32rem .6rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:.72rem; font-weight:650; color:var(--ink-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  transition:background .2s ease, border-color .2s ease;
}
.bb-qa-pipeline-chips span:hover {
  background:var(--surface-2); border-color:color-mix(in srgb, var(--brand-500) 25%, var(--line));
}

.bb-qa-modes {
  display:grid; gap:.75rem;
}
.bb-qa-modes article {
  padding:1rem 1.1rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface-2);
}
.bb-qa-modes h3 { margin-bottom:.45rem; }

.bb-test-matrix-wrap {
  overflow:auto; border:1px solid var(--line); border-radius:1rem; background:var(--surface);
}
.bb-test-matrix {
  width:100%; border-collapse:collapse; font-size:.88rem;
}
.bb-test-matrix th, .bb-test-matrix td {
  padding:.85rem 1rem; border-bottom:1px solid var(--line); text-align:center;
}
.bb-test-matrix thead th {
  background:var(--surface-2); font-size:.68rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.bb-test-matrix tbody th {
  text-align:left; font-weight:650; color:var(--ink);
}
.bb-test-matrix tbody tr:last-child th,
.bb-test-matrix tbody tr:last-child td { border-bottom:none; }
.bb-test-matrix .bi-check2 { color:#16a34a; font-size:1.05rem; font-weight:800; }
.bb-test-matrix-dash { color:var(--muted); font-weight:700; }

.bb-qa-split {
  padding:1.15rem 1.2rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface);
}
.bb-qa-split.is-auto {
  border-color:color-mix(in srgb, var(--brand-500) 22%, var(--line));
  background:linear-gradient(165deg, var(--surface) 0%, color-mix(in srgb, var(--brand-100) 28%, var(--surface)) 100%);
}
.bb-qa-split.is-manual { background:var(--surface-2); }

.bb-check-list--dense li { padding:.6rem .85rem .6rem 2.2rem; font-size:.9rem; }

@media (max-width:767.98px) {
  .bb-qa-scenario {
    padding:1rem 1rem 1.1rem;
  }
  .bb-qa-scenario-head {
    flex-direction:column;
    align-items:flex-start;
    gap:.45rem;
  }
  .bb-qa-scenario-thumb.bb-qa-crop.is-bug,
  .bb-qa-scenario-thumb.bb-qa-crop.is-terminal {
    max-height:9.5rem;
    aspect-ratio:16/9;
  }
  .bb-qa-scenario-foot {
    margin-top:.85rem;
    padding-top:.85rem;
  }
}
@media (max-width:575.98px) {
  .bb-qa-hero-badges { max-width:9rem; top:.55rem; right:.55rem; }
  .bb-qa-terminal { left:.55rem; bottom:.55rem; }
  .bb-qa-pipeline-steps b { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-qa-scenario,
  .bb-qa-scenario-node,
  .bb-qa-scenario-thumb,
  .bb-qa-deck-main,
  .bb-qa-deck-float,
  .bb-qa-pipeline-step { transition:none; }
  .bb-qa-scenario:hover,
  .bb-qa-interface-deck:hover .bb-qa-deck-main { transform:none; }
}

.bb-niche-directory { border-top:1px solid var(--line-strong); }
.bb-niche-dir-row {
  display:grid; grid-template-columns:3.5rem 1fr 4.5rem 1.5rem; gap:1rem; align-items:center;
  padding:1.15rem .25rem; border-bottom:1px solid var(--line-strong);
  text-decoration:none; color:var(--ink); transition:background .2s ease,padding .2s ease;
}
.bb-niche-dir-row:hover { background:color-mix(in srgb,var(--surface) 58%,transparent); color:var(--ink); padding-inline:.75rem; }
.bb-niche-dir-num { font-family:"Fraunces",serif; font-size:1.2rem; color:var(--brand-600); }
.bb-niche-dir-body strong { display:block; font-size:1.15rem; letter-spacing:-.02em; }
.bb-niche-dir-body small { display:block; color:var(--ink-3); font-size:.82rem; margin-top:.2rem; }
.bb-niche-dir-thumb { width:4.5rem; height:3.2rem; border-radius:.75rem; overflow:hidden; border:1px solid var(--line); }
.bb-niche-dir-thumb img { width:100%; height:100%; object-fit:cover; }
.bb-niche-dir-go { text-align:right; color:var(--brand-600); font-size:1.35rem; }
.bb-niche-group { margin-bottom:3rem; }
.bb-niche-group:last-child { margin-bottom:0; }

/* P3 — topics index map */
.bb-topics-map {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:.85rem 1rem; align-items:center;
}
.bb-topics-map-card {
  display:grid; gap:.35rem; padding:1.15rem 1.1rem; min-height:9.5rem;
  border:1px solid var(--line); border-radius:1.1rem; background:var(--surface);
  text-decoration:none; color:var(--ink); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.bb-topics-map-card:hover {
  color:var(--ink); transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--brand-500) 28%,var(--line));
  box-shadow:0 14px 36px color-mix(in srgb,var(--brand-500) 10%,transparent);
}
.bb-topics-map-icon {
  display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.75rem;
  background:color-mix(in srgb,var(--surface) 70%,#e8eef8); color:var(--brand-700); font-size:1.15rem;
}
.bb-topics-map-card strong { font-size:1.05rem; letter-spacing:-.02em; line-height:1.2; }
.bb-topics-map-card small { color:var(--ink-3); font-size:.78rem; line-height:1.35; }
.bb-topics-map-card em {
  margin-top:auto; font-style:normal; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:var(--brand-600);
}
.bb-topics-map-card.is-build .bb-topics-map-icon { background:color-mix(in srgb,#fef3c7 55%,var(--surface)); color:#b45309; }
.bb-topics-map-card.is-local .bb-topics-map-icon { background:color-mix(in srgb,#ffedd5 55%,var(--surface)); color:#c2410c; }
.bb-topics-map-card.is-expert .bb-topics-map-icon { background:color-mix(in srgb,#dbeafe 55%,var(--surface)); color:#1d4ed8; }
.bb-topics-map-hub {
  display:grid; place-items:center; gap:.25rem; width:3.2rem; height:3.2rem;
  border-radius:999px; border:1px dashed color-mix(in srgb,var(--brand-500) 22%,var(--line));
  background:color-mix(in srgb,var(--surface) 82%,#eef4ff); color:var(--brand-600);
}
.bb-topics-map-hub small {
  font-size:.52rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}
.bb-topics-map-hub i { font-size:1rem; line-height:1; }
.bb-topics-map-flagships { text-align:center; }
.bb-topics-flagship-row {
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:.65rem;
}
.bb-topics-flagship-row a {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .85rem; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--brand-500) 18%,var(--line));
  background:var(--surface); color:var(--brand-700);
  font-size:.82rem; font-weight:700; text-decoration:none;
  transition:background .2s ease,border-color .2s ease;
}
.bb-topics-flagship-row a:hover {
  background:color-mix(in srgb,var(--brand-500) 8%,var(--surface));
  border-color:color-mix(in srgb,var(--brand-500) 32%,var(--line));
  color:var(--brand-800);
}
.bb-topics-flagship-row a::after { content:"→"; font-size:.9rem; opacity:.65; }

/* P3 — topics catalog (kit category-banner + service-card) */
.bb-topics-group {
  scroll-margin-top: 5.5rem;
  margin-bottom: 3.5rem;
}
.bb-topics-group:last-child { margin-bottom:0; }
.bb-topics-items { scroll-margin-top: 5.5rem; }
.bb-topics-flagships { margin-bottom:.5rem; }
a.service-card { color: inherit; }
a.service-card:hover { color: inherit; }
a.service-card .btn-ghost { pointer-events: none; }

/* P3 — niche story blocks */
.bb-story-catalog {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
}
.bb-story-catalog-card {
  display:grid; gap:.55rem; padding:1rem; border:1px solid var(--line); border-radius:1rem;
  background:var(--surface); align-content:start;
}
.bb-story-catalog-media {
  margin:0; aspect-ratio:16/10; border-radius:.75rem; overflow:hidden; border:1px solid var(--line);
}
.bb-story-catalog-media img { width:100%; height:100%; object-fit:cover; display:block; }
.bb-story-catalog-tag {
  display:inline-block; width:fit-content; padding:.2rem .55rem; border-radius:999px;
  background:color-mix(in srgb,var(--brand-500) 10%,var(--surface));
  color:var(--brand-700); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}
.bb-story-catalog-meta {
  display:block; margin-top:.15rem; color:var(--brand-700); font-weight:750; font-size:.78rem;
}

.bb-story-order-panel {
  border:1px solid var(--line); border-radius:1.1rem; overflow:hidden;
  background:var(--surface); box-shadow:0 18px 44px color-mix(in srgb,var(--ink) 6%,transparent);
}
.bb-story-order-panel header,
.bb-story-order-panel footer {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  padding:.85rem 1rem; background:color-mix(in srgb,var(--surface) 78%,#f3f6fb);
  border-bottom:1px solid var(--line);
}
.bb-story-order-panel footer { border-bottom:0; border-top:1px solid var(--line); }
.bb-story-order-panel header span {
  display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-3); font-size:.78rem; font-weight:700;
}
.bb-story-order-panel header strong { font-size:.95rem; color:var(--ink); }
.bb-story-order-body { padding:.35rem 1rem; }
.bb-story-order-line {
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.65rem 0; border-bottom:1px dashed var(--line);
  font-size:.86rem; color:var(--ink);
}
.bb-story-order-line:last-child { border-bottom:0; }
.bb-story-order-line b { font-weight:800; white-space:nowrap; }
.bb-story-order-panel footer > div small {
  display:block; color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; font-weight:800;
}
.bb-story-order-panel footer > div strong { display:block; margin-top:.15rem; font-size:.92rem; color:var(--ink); }
.bb-story-order-panel footer .is-total strong { color:var(--brand-700); font-size:1.05rem; }
.bb-story-order-panel footer .is-status strong { color:#16a34a; }

.bb-story-feature-row {
  display:flex; flex-wrap:wrap; gap:.55rem .85rem;
}
.bb-story-feature-row span {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:.78rem; font-weight:650; color:var(--ink-3);
}
.bb-story-feature-row span i { color:var(--brand-600); }

.bb-story-trust-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
}
.bb-story-trust-card {
  padding:1.1rem 1rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface);
}
.bb-story-trust-icon {
  display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:.75rem;
  margin-bottom:.75rem; background:color-mix(in srgb,var(--brand-500) 10%,var(--surface));
  color:var(--brand-700); font-size:1.05rem;
}
.bb-story-trust-card h3 { margin-bottom:.45rem; }

.bb-story-seo-tags {
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.bb-story-seo-tags span {
  padding:.45rem .75rem; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--brand-500) 16%,var(--line));
  background:color-mix(in srgb,var(--surface) 88%,#eef6ff);
  color:var(--ink-3); font-size:.78rem; font-weight:650;
}

@media (max-width:991.98px) {
  .bb-topics-map { grid-template-columns:1fr; }
  .bb-topics-map-hub { display:none; }
  .bb-story-catalog,
  .bb-story-trust-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:575.98px) {
  .bb-story-catalog,
  .bb-story-trust-grid { grid-template-columns:1fr; }
  .bb-story-order-panel footer { flex-direction:column; }
}

@media (max-width:991.98px) {
  .bb-niche-hero-grid { grid-template-columns:1fr; }
  .bb-niche-hero-scene { min-height:0; display:flex; flex-direction:column; gap:.85rem; margin-top:.5rem; }
  .bb-niche-hero-visual { width:100%; transform:none; order:1; }
  .bb-niche-scene-card:nth-child(n) { transform:scale(.92); }
  .bb-niche-hero-scene .bb-hero-v4-form-card { position:relative; right:auto; top:auto; width:100%; order:2; }
  .bb-calc-demo { grid-template-columns:1fr; }
  .bb-niche-dir-row { grid-template-columns:2.5rem 1fr 3.5rem 1rem; }
}
@media (max-width:575.98px) {
  .bb-niche-dir-thumb { display:none; }
  .bb-niche-dir-row { grid-template-columns:2rem 1fr 1rem; }
}

/* =========================================================
   v5 homepage patterns — growth, trust, artifacts, mosaic
   ========================================================= */
.bb-trust-strip { border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 70%,transparent); }
.bb-trust-strip-row {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 1.5rem;
  padding:.95rem 0; color:var(--ink-3); font-size:.78rem; font-weight:650;
}
.bb-trust-strip-row span { position:relative; padding-left:0; display:inline-flex; align-items:center; gap:.45rem; }
.bb-trust-strip-row span i {
  font-size:.85rem; color:var(--brand-600);
  width:1.15rem; text-align:center; flex-shrink:0;
}
.bb-trust-strip-row span::before { display:none; }

.bb-growth-ladder {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.65rem;
}
.bb-growth-ladder > li {
  position:relative;
  display:flex; flex-direction:column;
  min-height:19rem;
  padding:1.1rem 1rem;
  border:1px solid var(--line); border-radius:1.1rem; background:var(--surface);
}
.bb-growth-ladder > li:not(:last-child)::after {
  content:"→";
  position:absolute; z-index:5;
  top:50%; right:-.8rem;
  transform:translateY(-50%);
  display:grid; place-items:center;
  width:1.6rem; height:1.6rem;
  border:1px solid color-mix(in srgb,var(--brand-500) 14%,transparent);
  border-radius:999px;
  background:#f7faff;
  color:var(--brand-600);
  font-size:.9rem; font-weight:800;
  box-shadow:0 .2rem .7rem color-mix(in srgb,var(--brand-500) 8%,transparent);
}
.bb-growth-ladder > li:last-child::after { display:none; }
.bb-growth-icon {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:8.5rem;
  margin:.65rem 0 1rem;
  border-radius:1rem;
}
.bb-growth-icon svg {
  display:block;
  width:100%; max-width:7.5rem; height:7rem;
  overflow:visible;
  filter:drop-shadow(0 .45rem .6rem rgba(36,67,110,.08));
  transition:transform .2s ease;
}
.bb-growth-ladder > li:hover .bb-growth-icon svg { transform:translateY(-2px); }
.bb-growth-ladder > li:not(:last-child):hover::after {
  border-color:color-mix(in srgb,var(--brand-500) 28%,transparent);
  color:var(--brand-700);
}
.bb-growth-ladder > li > b {
  font-family:"Fraunces",serif;
  color:var(--brand-600);
  font-size:.9rem; font-weight:800;
}
.bb-growth-ladder > li > strong {
  display:block; margin-top:auto;
  color:var(--ink);
  font-size:1.05rem; line-height:1.2; letter-spacing:-.02em;
}
.bb-growth-ladder > li > span {
  display:block; margin-top:.5rem;
  color:var(--ink-3);
  font-size:.84rem; line-height:1.4;
}

.bb-before-after {
  display:grid; grid-template-columns:1fr auto 1fr; gap:.85rem; align-items:stretch;
}
.bb-before-after > div {
  border:1px solid var(--line); border-radius:1rem; padding:1rem 1.1rem; background:var(--surface);
}
.bb-before-after > div.is-accent {
  background:color-mix(in srgb,var(--surface) 78%,#dff4ec);
  border-color:color-mix(in srgb,var(--brand-500) 35%,var(--line));
}
.bb-before-after small { display:block; text-transform:uppercase; letter-spacing:.1em; font-size:.64rem; color:var(--muted); font-weight:800; margin-bottom:.55rem; }
.bb-before-after ul { margin:0; padding-left:1rem; color:var(--ink-3); font-size:.86rem; line-height:1.55; }
.bb-before-after > b { align-self:center; color:var(--brand-600); font-size:1.4rem; }

.bb-edit-rows { border-top:1px solid var(--line-strong); }
.bb-edit-rows > div {
  display:grid; grid-template-columns:4rem 1fr; gap:1rem; align-items:start;
  padding:1.45rem 0; border-bottom:1px solid var(--line);
}
.bb-edit-rows b { font-family:"Fraunces",serif; font-size:1.45rem; color:var(--brand-600); }
.bb-edit-rows p { margin:0; color:var(--ink-3); line-height:1.6; max-width:48rem; }
.bb-edit-rows strong { color:var(--ink); }

.bb-check-list { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.bb-check-list li {
  position:relative; padding:.7rem .9rem .7rem 2.4rem;
  border:1px solid var(--line); border-radius:.85rem; background:var(--surface); color:var(--ink-2);
}
.bb-check-list li::before {
  content:"✓"; position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  color:#2aaa68; font-weight:900;
}

.bb-artifact-tree {
  margin:0; padding:1.35rem 1.4rem; border-radius:1.2rem;
  border:1px solid var(--line-strong); background:#162224; color:#cfe0db;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; line-height:1.65;
  box-shadow:0 20px 50px color-mix(in srgb,var(--ink) 14%,transparent);
  overflow:auto;
}
.bb-artifact-tree code { color:inherit; }

.bb-delivery-visual {
  width:min(100%,26rem);
  margin:0 auto;
  background:transparent;
}
.bb-delivery-visual svg,
.bb-delivery-visual img {
  display:block; width:100%; height:auto;
  object-fit:contain; object-position:center;
}
.bb-delivery-visual img[src$=".svg"] {
  opacity:.94;
  filter:drop-shadow(0 14px 28px rgba(37,99,235,.08));
}
.bb-delivery-visual img:not([src$=".svg"]) {
  filter:drop-shadow(0 18px 36px rgba(15,23,42,.12));
}
@media (min-width:992px) {
  .bb-delivery-block .bb-delivery-visual { margin:0 0 0 auto; }
}
@media (max-width:991.98px) {
  .bb-delivery-visual { margin-top:.5rem; }
}

.bb-cases-mosaic {
  display:grid; grid-template-columns:1.35fr 1fr 1fr; grid-template-rows:auto auto; gap:1rem;
}
.bb-cases-mosaic .bb-case-card.is-featured { grid-row:1/3; }
.bb-cases-mosaic .bb-case-card.is-featured .bb-case-media { aspect-ratio:4/5; min-height:100%; }

.bb-route-wide { grid-template-columns:repeat(7,1fr); gap:.7rem; }
.bb-route-wide article > span { width:2.2rem; height:2.2rem; font-size:.85rem; margin-bottom:.8rem; }
.bb-route-wide h3 { font-size:.95rem; }
.bb-route-wide p { font-size:.78rem; }

.bb-process-head { max-width:48rem; }

/* Process route v2 — icons + gradient line + output chips */
.bb-route-v2 {
  position:relative;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1.1rem;
  padding-top:1rem;
}
.bb-route-v2-line {
  position:absolute;
  z-index:0;
  top:2.9rem;
  left:7%;
  right:7%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb 0%,#38bdf8 20%,#8b5cf6 36%,#14b8a6 55%,#22c55e 72%,#84cc16 86%,#eab308 100%);
  opacity:.55;
}
.bb-route-step {
  position:relative;
  z-index:1;
  text-align:center;
}
.bb-route-icon {
  width:62px;
  height:62px;
  margin:0 auto 1rem;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:1.65rem;
  background:#fff;
  border:1px solid rgba(30,41,59,.08);
  box-shadow:0 10px 30px rgba(30,41,59,.08), 0 2px 5px rgba(30,41,59,.04);
}
.bb-route-icon.is-blue { color:#2563eb; background:#eaf1ff; }
.bb-route-icon.is-sky { color:#0284c7; background:#e6f7ff; }
.bb-route-icon.is-violet { color:#7c3aed; background:#f2ebff; }
.bb-route-icon.is-teal { color:#0f9f94; background:#e5faf7; }
.bb-route-icon.is-green { color:#16a34a; background:#e9f9ee; }
.bb-route-icon.is-lime { color:#65a30d; background:#f1f9dc; }
.bb-route-icon.is-yellow { color:#ca8a04; background:#fff7d6; }
.bb-route-number {
  margin-bottom:.35rem;
  color:var(--brand-600);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
}
.bb-route-step h3 {
  margin:0 0 .4rem;
  color:var(--ink);
  font-size:1.05rem;
  font-weight:750;
}
.bb-route-step p {
  min-height:2.8rem;
  margin:0 auto .8rem;
  max-width:10rem;
  color:var(--ink-3);
  font-size:.86rem;
  line-height:1.45;
}
.bb-route-output {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.38rem .65rem;
  border:1px solid color-mix(in srgb,var(--brand-500) 14%,transparent);
  border-radius:999px;
  background:rgba(255,255,255,.75);
  color:var(--ink-2);
  font-size:.69rem;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.05em;
  backdrop-filter:blur(8px);
}
.bb-route-test-branch {
  position:absolute;
  top:-2.15rem;
  right:-1rem;
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.32rem .45rem;
  border-radius:999px;
  background:#152326;
  box-shadow:0 8px 22px rgba(21,35,38,.14);
  color:#fff;
  font-size:.6rem;
}
.bb-route-test-branch::before {
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:1px;
  height:1.3rem;
  border-left:1px dashed #22c55e;
}
.bb-route-test-branch span { color:#86efac; font-weight:800; }
.bb-route-test-branch small {
  padding:.12rem .28rem;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-size:inherit;
}

@media (max-width:1199.98px) {
  .bb-route-v2 { gap:.75rem; }
  .bb-route-icon { width:56px; height:56px; font-size:1.45rem; border-radius:16px; }
  .bb-route-step p { font-size:.8rem; max-width:9rem; }
  .bb-route-test-branch { right:-.35rem; }
}
@media (max-width:991.98px) {
  .bb-route-v2 {
    display:block;
    padding:0 0 0 .35rem;
  }
  .bb-route-v2-line {
    top:1rem;
    bottom:1rem;
    left:30px;
    right:auto;
    width:3px;
    height:auto;
    background:linear-gradient(180deg,#2563eb,#38bdf8,#8b5cf6,#14b8a6,#22c55e,#84cc16,#eab308);
  }
  .bb-route-step {
    min-height:7.5rem;
    padding:0 0 1.7rem 5rem;
    text-align:left;
  }
  .bb-route-icon {
    position:absolute;
    left:0;
    top:0;
    width:58px;
    height:58px;
    margin:0;
    border-radius:17px;
  }
  .bb-route-step p {
    min-height:0;
    max-width:none;
    margin-left:0;
  }
  .bb-route-test-branch {
    position:static;
    width:fit-content;
    margin-top:.65rem;
  }
  .bb-route-test-branch::before { display:none; }
}

/* Compact route — service / niche pages (3–6 steps) */
.bb-route-v2.is-compact.is-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.bb-route-v2.is-compact.is-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.bb-route-v2.is-compact.is-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.bb-route-v2.is-compact.is-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.bb-route-v2.is-compact .bb-route-icon { width:54px; height:54px; font-size:1.4rem; border-radius:16px; }
.bb-route-v2.is-compact .bb-route-step h3 { font-size:.98rem; }
.bb-route-v2.is-compact .bb-route-step p { min-height:2.4rem; font-size:.82rem; max-width:9.5rem; }
@media (max-width:1199.98px) {
  .bb-route-v2.is-compact.is-cols-5,
  .bb-route-v2.is-compact.is-cols-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  .bb-route-v2.is-compact.is-cols-3,
  .bb-route-v2.is-compact.is-cols-4,
  .bb-route-v2.is-compact.is-cols-5,
  .bb-route-v2.is-compact.is-cols-6 { display:block; }
}

/* Site customer journey funnel */
.bb-site-funnel {
  display:flex; flex-wrap:wrap; align-items:center; gap:.65rem 1rem;
  margin-top:1.5rem;
}
.bb-site-funnel-step {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.65rem .95rem;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface);
  color:var(--ink); font-size:.88rem; font-weight:650;
}
.bb-site-funnel-step small {
  display:block; font-size:.64rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brand-700);
}
.bb-site-funnel-arrow { color:var(--brand-600); font-weight:800; font-size:1.1rem; opacity:.7; }
@media (max-width:575.98px) {
  .bb-site-funnel { flex-direction:column; align-items:stretch; }
  .bb-site-funnel-arrow { align-self:center; transform:rotate(90deg); }
}

/* Sites service page — hero scene, formats bento, anatomy, compact growth */
.bb-site-hero-scene { position:relative; }
.bb-site-hero-showcase { width:100%; max-width:28rem; margin-inline:auto; }
.bb-site-hero-showcase .bb-hero-v4-showcase-stage { min-height:16rem; }
.bb-site-hero-overlay {
  position:absolute; z-index:4; inset:0;
  pointer-events:none;
}
.bb-hero-v4-showcase-stage .bb-site-hero-overlay { z-index:3; }
.bb-site-hero-chip {
  position:absolute;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.32rem .55rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-500) 18%, var(--line));
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  box-shadow:0 8px 22px color-mix(in srgb, var(--ink) 8%, transparent);
  font-size:.62rem; font-weight:800; letter-spacing:.03em; color:var(--ink-2);
}
.bb-site-hero-chip i { color:var(--brand-600); font-size:.78rem; }
.bb-site-hero-chip.is-seo { top:6%; right:2%; }
.bb-site-hero-chip.is-goal { top:22%; left:-2%; color:var(--brand-700); }
.bb-site-hero-chip.is-sent {
  bottom:18%; left:50%; transform:translateX(-50%);
  color:#15803d; border-color:color-mix(in srgb, #16a34a 25%, var(--line));
  background:color-mix(in srgb, #ecfdf3 70%, #fff);
}
.bb-site-hero-chip.is-sent i { color:#16a34a; }
.bb-site-hero-form {
  position:absolute; right:-.25rem; top:38%;
  width:8.5rem; padding:.65rem .7rem;
  border:1px solid var(--line); border-radius:.85rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  box-shadow:0 14px 36px color-mix(in srgb, var(--ink) 10%, transparent);
}
.bb-site-hero-form small {
  display:block; font-size:.58rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.bb-site-hero-form strong { display:block; margin:.2rem 0 .45rem; font-size:.72rem; color:var(--ink); line-height:1.25; }
.bb-site-hero-form-btn {
  display:block; padding:.35rem .5rem; border-radius:.45rem;
  background:var(--brand-500); color:#fff;
  font-size:.62rem; font-weight:800; text-align:center;
}

.bb-site-formats-bento {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}
.bb-site-format-card {
  position:relative; display:flex; flex-direction:column;
  min-height:100%; padding:1.15rem 1.15rem 1.2rem;
  border:1px solid var(--line); border-radius:1.1rem;
  background:var(--surface); overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (hover:hover) and (pointer:fine) {
  .bb-site-format-card:hover {
    transform:translateY(-3px);
    border-color:var(--line-strong);
    box-shadow:0 16px 40px color-mix(in srgb, var(--ink) 8%, transparent);
  }
}
.bb-site-format-card.is-lg { grid-column:span 2; min-height:11.5rem; }
.bb-site-format-card.is-md { grid-column:span 1; min-height:9.5rem; }
.bb-site-format-card.is-sm { grid-column:span 1; min-height:8.5rem; }
.bb-site-format-card.is-landing {
  background:linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--brand-100) 38%, var(--surface)));
}
.bb-site-format-card.is-catalog {
  background:linear-gradient(145deg, var(--surface), color-mix(in srgb, #eef6ff 55%, var(--surface)));
}
.bb-site-format-preview {
  position:absolute; right:-6%; bottom:-8%;
  width:min(52%, 11rem); opacity:.22; pointer-events:none;
  object-fit:contain; object-position:right bottom;
}
.bb-site-format-icon {
  display:grid; place-items:center;
  width:2.65rem; height:2.65rem; margin-bottom:.75rem;
  border-radius:.85rem; border:1px solid rgba(30,41,59,.08);
  background:#f7faff; color:var(--brand-600); font-size:1.15rem;
  box-shadow:0 6px 18px color-mix(in srgb, var(--ink) 6%, transparent);
}
.bb-site-format-tag {
  display:inline-flex; align-self:flex-start;
  margin-bottom:.45rem; padding:.2rem .45rem; border-radius:999px;
  background:color-mix(in srgb, var(--brand-100) 55%, #fff);
  border:1px solid color-mix(in srgb, var(--brand-500) 14%, transparent);
  font-size:.58rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand-700);
}
.bb-site-format-card h3 { margin-bottom:.35rem; letter-spacing:-.02em; }

.bb-site-formats-foot {
  max-width:34rem;
  margin:1.75rem auto 0;
  padding:1.25rem 1.35rem 1.3rem;
  border:1px solid color-mix(in srgb, var(--brand-500) 14%, var(--line));
  border-radius:1rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-50) 42%, var(--surface)), var(--surface));
  text-align:center;
  box-shadow:0 10px 28px color-mix(in srgb, var(--ink) 5%, transparent);
}
.bb-site-formats-foot p {
  margin:0 0 1rem;
  color:var(--ink-2);
  font-size:1.02rem;
  line-height:1.55;
  letter-spacing:-.01em;
}
.bb-site-formats-foot strong {
  display:block;
  margin-bottom:.25rem;
  color:var(--ink);
  font-size:1.12rem;
  font-weight:750;
  letter-spacing:-.02em;
}

.bb-lp-anatomy-browser {
  padding:1rem 1rem 1.1rem;
  border:1px solid var(--line); border-radius:1.15rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #f7faff), var(--surface));
  box-shadow:0 18px 48px color-mix(in srgb, var(--ink) 8%, transparent);
}
.bb-lp-anatomy-chrome {
  display:flex; align-items:center; gap:.35rem;
  margin-bottom:.85rem; padding-bottom:.65rem;
  border-bottom:1px solid var(--line);
}
.bb-lp-anatomy-chrome i {
  width:.55rem; height:.55rem; border-radius:999px; background:#cbd5e1;
}
.bb-lp-anatomy-chrome i:first-child { background:#fca5a5; }
.bb-lp-anatomy-chrome i:nth-child(2) { background:#fde68a; }
.bb-lp-anatomy-chrome i:nth-child(3) { background:#86efac; }
.bb-lp-anatomy-chrome span {
  margin-left:auto; font-size:.62rem; font-weight:700; color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.bb-lp-anatomy-block {
  display:grid; grid-template-columns:2.25rem 1fr; gap:.65rem .85rem;
  align-items:center; padding:.65rem .75rem; margin-bottom:.55rem;
  border:1px solid var(--line); border-radius:.85rem; background:var(--surface);
}
.bb-lp-anatomy-block:last-child { margin-bottom:0; }
.bb-lp-anatomy-num {
  display:grid; place-items:center;
  width:2.25rem; height:2.25rem; border-radius:.65rem;
  font-family:"Fraunces",serif; font-size:.95rem; font-weight:800; color:var(--brand-600);
  background:color-mix(in srgb, var(--brand-100) 45%, #fff);
}
.bb-lp-anatomy-block strong { display:block; font-size:.88rem; color:var(--ink); }
.bb-lp-anatomy-block small { display:block; font-size:.72rem; color:var(--ink-3); margin-top:.1rem; line-height:1.35; }
.bb-lp-anatomy-block.is-offer { border-color:color-mix(in srgb, var(--brand-500) 22%, var(--line)); }
.bb-lp-anatomy-block.is-action {
  border-color:color-mix(in srgb, var(--brand-500) 32%, var(--line));
  background:color-mix(in srgb, var(--brand-50) 35%, var(--surface));
}
.bb-lp-anatomy-block.is-analytics {
  border-style:dashed;
  background:color-mix(in srgb, var(--surface-2) 80%, var(--surface));
}

.bb-site-growth {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem 1rem;
  width:100%;
  padding:1.15rem 1rem;
  border:1px solid var(--line); border-radius:1.1rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #f7faff), var(--surface));
}
@media (min-width:992px) {
  .bb-site-growth.is-spread {
    flex-wrap:nowrap; justify-content:space-between; gap:.5rem .65rem;
    padding-inline:1.25rem;
  }
  .bb-site-growth.is-spread .bb-site-growth-step { flex:1 1 0; min-width:0; }
  .bb-site-growth.is-spread .bb-site-growth-step span { max-width:none; }
}
.bb-site-growth-step {
  display:grid; justify-items:center; gap:.45rem;
  min-width:6.5rem; text-align:center;
}
.bb-site-growth-step .bb-route-icon {
  width:3.25rem; height:3.25rem; margin:0;
  border-radius:.95rem; font-size:1.25rem;
}
.bb-site-growth-step strong { font-size:.92rem; color:var(--ink); letter-spacing:-.02em; }
.bb-site-growth-step span { font-size:.76rem; color:var(--ink-3); line-height:1.35; max-width:8rem; }
.bb-site-growth-arrow {
  display:grid; place-items:center;
  width:1.45rem; height:1.45rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-500) 16%, transparent);
  background:#f7faff; color:var(--brand-600); font-size:.82rem;
}

@media (max-width:991.98px) {
  .bb-site-formats-bento { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bb-site-format-card.is-lg { grid-column:span 2; }
  .bb-site-hero-form { right:0; width:7.5rem; }
  .bb-site-hero-chip.is-goal { left:0; }

  .bb-site-growth {
    flex-direction:column; align-items:stretch; gap:0;
    padding:.35rem 1rem 1rem;
  }
  .bb-site-growth.is-spread .bb-site-growth-step { flex:none; min-width:0; }
  .bb-site-growth-arrow {
    align-self:center; transform:rotate(90deg);
    margin:.1rem 0; flex-shrink:0;
  }
  .bb-site-growth-step {
    display:grid;
    grid-template-columns:3.25rem minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon desc";
    gap:.2rem .85rem;
    align-items:start;
    justify-items:stretch;
    text-align:left;
    width:100%; max-width:none; min-width:0;
    padding:.7rem .25rem;
    border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  }
  .bb-site-growth-step:last-of-type { border-bottom:none; padding-bottom:.35rem; }
  .bb-site-growth-step .bb-route-icon { grid-area:icon; align-self:center; }
  .bb-site-growth-step strong {
    grid-area:title;
    display:block;
    font-size:.95rem;
    line-height:1.25;
    min-width:0;
  }
  .bb-site-growth-step span {
    grid-area:desc;
    display:block;
    max-width:none;
    font-size:.8rem;
    line-height:1.4;
    min-width:0;
  }
}
@media (max-width:575.98px) {
  .bb-site-formats-bento { grid-template-columns:1fr; }
  .bb-site-format-card.is-lg,
  .bb-site-format-card.is-md,
  .bb-site-format-card.is-sm { grid-column:span 1; min-height:0; }
  .bb-site-hero-overlay { display:none; }
}

/* Apps service page */
.bb-apps-hero-scene { position:relative; max-width:28rem; margin-inline:auto; }
.bb-apps-hero-stage {
  position:relative;
  aspect-ratio:4/3;
  border-radius:1.25rem;
  overflow:hidden;
  background:linear-gradient(145deg,#f8fafc,#eef2f6);
  box-shadow:0 28px 60px color-mix(in srgb, var(--ink) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.bb-apps-hero-stage > img {
  width:100%; height:100%; object-fit:contain; object-position:center;
  padding:.35rem .5rem .5rem;
}
.bb-apps-hero-overlay { position:absolute; inset:0; pointer-events:none; z-index:2; }
.bb-apps-hero-chip {
  position:absolute;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .5rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-500) 18%, var(--line));
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  font-size:.6rem; font-weight:800; letter-spacing:.03em; color:var(--ink-2);
  box-shadow:0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent);
}
.bb-apps-hero-chip i { color:var(--brand-600); }
.bb-apps-hero-chip.is-role { top:8%; left:4%; }
.bb-apps-hero-chip.is-status {
  bottom:14%; right:4%;
  color:#15803d; border-color:color-mix(in srgb, #16a34a 22%, var(--line));
  background:color-mix(in srgb, #ecfdf3 75%, #fff);
}
.bb-apps-hero-chip.is-status i { color:#16a34a; }
.bb-apps-hero-kpis {
  position:absolute; top:10%; right:4%;
  display:grid; gap:.35rem; padding:.45rem .55rem;
  border:1px solid var(--line); border-radius:.75rem;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  box-shadow:0 10px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}
.bb-apps-hero-kpis span { display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:baseline; }
.bb-apps-hero-kpis small { font-size:.55rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; }
.bb-apps-hero-kpis strong { font-size:.78rem; color:var(--ink); }
.bb-apps-hero-kpis .is-done strong { color:#15803d; }
.bb-apps-hero-phone {
  position:absolute; z-index:3; left:-4%; bottom:-6%;
  width:38%; margin:0;
  border-radius:1rem; overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 16px 40px color-mix(in srgb, var(--ink) 14%, transparent);
  transform:rotate(-4deg);
}
.bb-apps-hero-phone img { display:block; width:100%; height:auto; }

.bb-apps-dashboard {
  position:relative;
  padding:1rem 1rem 1.15rem;
  border:1px solid var(--line); border-radius:1.15rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #f7faff), var(--surface));
  box-shadow:0 22px 52px color-mix(in srgb, var(--ink) 9%, transparent);
  overflow:hidden;
}
.bb-apps-dashboard-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.85rem; padding-bottom:.65rem;
  border-bottom:1px solid var(--line);
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.bb-apps-dashboard-head small {
  padding:.15rem .4rem; border-radius:999px;
  background:color-mix(in srgb, #16a34a 12%, #fff);
  color:#15803d; font-size:.58rem;
}
.bb-apps-dashboard-kpis {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-bottom:.85rem;
}
.bb-apps-dashboard-kpis article {
  padding:.55rem .65rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface);
}
.bb-apps-dashboard-kpis small { display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; }
.bb-apps-dashboard-kpis strong { display:block; font-size:1.15rem; color:var(--ink); margin-top:.1rem; }
.bb-apps-dashboard-kpis .is-done strong { color:#15803d; }
.bb-apps-dashboard-table { font-size:.72rem; }
.bb-apps-dashboard-row {
  display:grid; grid-template-columns:2.5rem 1fr 5.5rem 4.5rem; gap:.45rem;
  align-items:center; padding:.45rem .5rem;
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color:var(--ink-2);
}
.bb-apps-dashboard-row.is-head {
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  border-bottom:1px solid var(--line);
}
.bb-apps-dashboard-row .is-warn { color:#b45309; font-weight:700; }
.bb-apps-dashboard-row .is-ok { color:#15803d; font-weight:700; }
.bb-apps-dashboard-float {
  position:absolute; z-index:2;
  padding:.5rem .65rem; border-radius:.75rem;
  border:1px solid var(--line); background:rgba(255,255,255,.94);
  box-shadow:0 10px 26px color-mix(in srgb, var(--ink) 8%, transparent);
  font-size:.68rem;
}
.bb-apps-dashboard-float small { display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; }
.bb-apps-dashboard-float strong { display:block; color:var(--ink); font-size:.75rem; margin-top:.1rem; }
.bb-apps-dashboard-float.is-assignee { right:4%; top:38%; }
.bb-apps-dashboard-float.is-file {
  left:6%; bottom:18%; display:flex; align-items:center; gap:.4rem;
  color:var(--brand-700); font-weight:700;
}
.bb-apps-dashboard-float.is-file i { font-size:1rem; color:#dc2626; }
.bb-apps-dashboard-float.is-history { right:8%; bottom:12%; max-width:9rem; }

.bb-apps-cap-bento {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem;
}
.bb-apps-cap-card {
  display:flex; flex-direction:column; min-height:100%;
  padding:1rem 1rem 1.05rem;
  border:1px solid var(--line); border-radius:1rem; background:var(--surface);
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  .bb-apps-cap-card:hover {
    transform:translateY(-3px);
    box-shadow:0 14px 36px color-mix(in srgb, var(--ink) 7%, transparent);
  }
}
.bb-apps-cap-card.is-lg { grid-column:span 2; min-height:9rem; }
.bb-apps-cap-card.is-md { grid-column:span 2; min-height:8rem; }
.bb-apps-cap-card.is-sm { grid-column:span 1; min-height:7.5rem; }
.bb-apps-cap-card.is-roles { background:linear-gradient(145deg, var(--surface), color-mix(in srgb, #f2ebff 40%, var(--surface))); }
.bb-apps-cap-card.is-status { background:linear-gradient(145deg, var(--surface), color-mix(in srgb, #e6f7ff 45%, var(--surface))); }
.bb-apps-cap-icon {
  display:grid; place-items:center;
  width:2.4rem; height:2.4rem; margin-bottom:.65rem;
  border-radius:.75rem; background:#f7faff; color:var(--brand-600); font-size:1.05rem;
  border:1px solid color-mix(in srgb, var(--brand-500) 12%, var(--line));
}
.bb-apps-cap-card h3 { margin-bottom:.3rem; letter-spacing:-.02em; }

.bb-apps-mvp-flows { display:grid; gap:1rem; }
.bb-apps-mvp-flow {
  padding:1rem 1.05rem;
  border:1px solid var(--line); border-radius:1rem; background:var(--surface);
}
.bb-apps-mvp-flow small {
  display:block; margin-bottom:.75rem;
  font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-700);
}
.bb-apps-mvp-track {
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .55rem;
}
.bb-apps-mvp-track span {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .6rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); font-size:.76rem; font-weight:650; color:var(--ink-2);
}
.bb-apps-mvp-track span i { color:var(--brand-600); font-size:.85rem; }
.bb-apps-mvp-track b { color:var(--brand-500); font-weight:800; font-size:.85rem; }

.bb-apps-qa-panel {
  padding:1.15rem 1.2rem;
  border:1px solid color-mix(in srgb, var(--brand-500) 18%, var(--line));
  border-radius:1.1rem;
  background:linear-gradient(165deg, var(--surface), color-mix(in srgb, var(--brand-50) 35%, var(--surface)));
}
.bb-apps-qa-branch {
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  margin-top:1rem; padding:.85rem;
  border:1px dashed color-mix(in srgb, var(--brand-500) 25%, var(--line));
  border-radius:.85rem; background:color-mix(in srgb, var(--surface) 90%, #f7faff);
}
.bb-apps-qa-fork { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; }
.bb-apps-qa-node {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.38rem .6rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:.72rem; font-weight:700; color:var(--ink-2);
}
.bb-apps-qa-node i { color:var(--brand-600); }
.bb-apps-qa-node.is-feature { border-color:color-mix(in srgb, var(--brand-500) 22%, var(--line)); }
.bb-apps-qa-node.is-release {
  background:var(--brand-500); color:#fff; border-color:transparent;
}
.bb-apps-qa-node.is-release i { color:#fff; }
.bb-apps-qa-arrow { color:var(--brand-600); font-weight:800; font-size:1rem; }

@media (max-width:991.98px) {
  .bb-apps-cap-bento { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bb-apps-cap-card.is-lg,
  .bb-apps-cap-card.is-md { grid-column:span 2; }
  .bb-apps-hero-phone { width:34%; left:0; }
  .bb-apps-hero-kpis { top:6%; right:2%; }
}
@media (max-width:575.98px) {
  .bb-apps-cap-bento { grid-template-columns:1fr; }
  .bb-apps-cap-card.is-lg,
  .bb-apps-cap-card.is-md,
  .bb-apps-cap-card.is-sm { grid-column:span 1; min-height:0; }
  .bb-apps-hero-overlay { display:none; }
  .bb-apps-hero-phone { display:none; }
  .bb-apps-dashboard-row { grid-template-columns:2rem 1fr 4.5rem; font-size:.68rem; }
  .bb-apps-dashboard-row span:last-child { display:none; }
  .bb-apps-dashboard-float.is-assignee,
  .bb-apps-dashboard-float.is-history { display:none; }
  .bb-apps-mvp-track b { display:none; }
  .bb-apps-mvp-track { flex-direction:column; align-items:stretch; }
}

/* Bots service page */
.bb-bots-hero-scene { position:relative; max-width:22rem; margin-inline:auto; }
.bb-bots-hero-stage {
  position:relative;
  aspect-ratio:1/1;
  border-radius:1.35rem;
  overflow:hidden;
  background:linear-gradient(145deg,#f0f4f8,#e8eef5);
  box-shadow:0 28px 60px color-mix(in srgb, var(--ink) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.bb-bots-hero-stage > img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
}
.bb-bots-hero-overlay { position:absolute; inset:0; pointer-events:none; z-index:2; }
.bb-bots-hero-chip {
  position:absolute;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .55rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-500) 18%, var(--line));
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  font-size:.6rem; font-weight:800; letter-spacing:.03em; color:var(--ink-2);
  box-shadow:0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent);
}
.bb-bots-hero-chip i { color:var(--brand-600); }
.bb-bots-hero-chip.is-platform { top:8%; left:5%; }
.bb-bots-hero-chip.is-platform i { color:#229ed9; }
.bb-bots-hero-chip.is-order { top:14%; right:4%; }
.bb-bots-hero-chip.is-status {
  bottom:10%; left:50%; transform:translateX(-50%);
  color:#15803d; border-color:color-mix(in srgb, #16a34a 22%, var(--line));
  background:color-mix(in srgb, #ecfdf3 75%, #fff);
}
.bb-bots-hero-chip.is-status i { color:#16a34a; }

.bb-bots-chat {
  position:relative;
  max-width:24rem; margin-inline:auto;
  border:1px solid var(--line); border-radius:1.15rem;
  background:var(--surface);
  box-shadow:0 22px 52px color-mix(in srgb, var(--ink) 9%, transparent);
  overflow:hidden;
}
.bb-bots-chat-head {
  display:flex; align-items:center; gap:.65rem;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #f7faff, var(--surface));
}
.bb-bots-chat-avatar {
  display:grid; place-items:center;
  width:2.25rem; height:2.25rem; border-radius:999px;
  background:color-mix(in srgb, var(--brand-100) 50%, #fff);
  color:var(--brand-600); font-size:1rem;
  border:1px solid color-mix(in srgb, var(--brand-500) 14%, var(--line));
}
.bb-bots-chat-head strong { display:block; font-size:.88rem; color:var(--ink); line-height:1.2; }
.bb-bots-chat-head small { display:block; font-size:.68rem; color:#16a34a; font-weight:700; }
.bb-bots-chat-body {
  display:flex; flex-direction:column; gap:.55rem;
  padding:.85rem .75rem 1rem;
  background:color-mix(in srgb, var(--surface-2) 35%, #f4f6f9);
  min-height:14rem;
}
.bb-bots-msg {
  max-width:88%;
  padding:.5rem .65rem;
  border-radius:.85rem;
  font-size:.78rem; line-height:1.4;
}
.bb-bots-msg p { margin:0; }
.bb-bots-msg.is-bot {
  align-self:flex-start;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink-2);
  border-bottom-left-radius:.25rem;
}
.bb-bots-msg.is-user {
  align-self:flex-end;
  background:color-mix(in srgb, var(--brand-500) 88%, #1a8cff);
  color:#fff;
  border-bottom-right-radius:.25rem;
}
.bb-bots-msg.is-success {
  border-color:color-mix(in srgb, #16a34a 25%, var(--line));
  background:color-mix(in srgb, #ecfdf3 80%, #fff);
  color:#166534;
}
.bb-bots-msg.is-success p { display:flex; align-items:flex-start; gap:.35rem; }
.bb-bots-msg.is-success i { color:#16a34a; flex-shrink:0; margin-top:.1rem; }
.bb-bots-keyboard {
  display:flex; flex-wrap:wrap; gap:.35rem;
  margin-top:.5rem;
}
.bb-bots-keyboard span {
  display:inline-block;
  padding:.28rem .5rem;
  border:1px solid color-mix(in srgb, var(--brand-500) 20%, var(--line));
  border-radius:.5rem;
  background:color-mix(in srgb, var(--brand-50) 60%, #fff);
  font-size:.68rem; font-weight:700; color:var(--brand-700);
}
.bb-bots-keyboard.is-compact span { font-size:.64rem; padding:.22rem .42rem; }
.bb-bots-chat-float {
  position:absolute; z-index:2;
  right:-.5rem; top:42%;
  padding:.45rem .6rem; border-radius:.75rem;
  border:1px solid var(--line); background:rgba(255,255,255,.94);
  box-shadow:0 10px 26px color-mix(in srgb, var(--ink) 8%, transparent);
  font-size:.68rem;
}
.bb-bots-chat-float small { display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; }
.bb-bots-chat-float strong { display:block; color:var(--ink); font-size:.75rem; margin-top:.1rem; }

.bb-bots-stack-panel {
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:1.15rem 1rem;
  border:1px solid var(--line); border-radius:1.1rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #f7faff), var(--surface));
}
.bb-bots-stack-item {
  display:grid; grid-template-columns:2.5rem 1fr; gap:.75rem;
  align-items:start; width:100%; max-width:18rem;
  padding:.65rem .75rem;
  border:1px solid var(--line); border-radius:.85rem;
  background:var(--surface);
}
.bb-bots-stack-item.is-accent {
  border-color:color-mix(in srgb, var(--brand-500) 22%, var(--line));
  background:color-mix(in srgb, var(--brand-50) 40%, var(--surface));
}
.bb-bots-stack-icon {
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem; border-radius:.75rem;
  font-size:1.05rem;
  border:1px solid var(--line);
}
.bb-bots-stack-icon.is-site { background:#f7faff; color:var(--brand-600); }
.bb-bots-stack-icon.is-bot { background:color-mix(in srgb, #e3f4fd 70%, #fff); color:#229ed9; border-color:color-mix(in srgb, #229ed9 20%, var(--line)); }
.bb-bots-stack-icon.is-crm { background:color-mix(in srgb, #ecfdf3 70%, #fff); color:#15803d; }
.bb-bots-stack-item strong { display:block; font-size:.9rem; color:var(--ink); }
.bb-bots-stack-arrow { color:var(--brand-600); font-size:.95rem; line-height:1; }

@media (max-width:991.98px) {
  .bb-bots-chat-float { display:none; }
  .bb-bots-hero-overlay { display:none; }
}
@media (max-width:575.98px) {
  .bb-bots-chat { max-width:none; }
  .bb-bots-stack-item { max-width:none; }
}

/* Mini-CRM service page */
.bb-crm-kanban {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.65rem;
  padding:.85rem;
  border:1px solid var(--line); border-radius:1.1rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #f7faff), var(--surface));
  box-shadow:0 22px 52px color-mix(in srgb, var(--ink) 9%, transparent);
}
.bb-crm-kanban-col header {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:.55rem; padding-bottom:.45rem;
  border-bottom:1px solid var(--line);
}
.bb-crm-kanban-col header small {
  font-size:.62rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.bb-crm-kanban-col header strong { font-size:.95rem; color:var(--ink); }
.bb-crm-kanban-card {
  display:block;
  padding:.5rem .55rem; margin-bottom:.4rem;
  border:1px solid var(--line); border-radius:.65rem;
  background:var(--surface);
  font-size:.72rem;
}
.bb-crm-kanban-card:last-child { margin-bottom:0; }
.bb-crm-kanban-card strong { display:block; font-size:.78rem; color:var(--ink); margin-bottom:.15rem; }
.bb-crm-kanban-card span { display:block; color:var(--ink-3); line-height:1.35; }
.bb-crm-kanban-card.is-active {
  border-color:color-mix(in srgb, var(--brand-500) 25%, var(--line));
  background:color-mix(in srgb, var(--brand-50) 45%, var(--surface));
}
.bb-crm-kanban-card.is-done {
  border-color:color-mix(in srgb, #16a34a 20%, var(--line));
  background:color-mix(in srgb, #ecfdf3 55%, var(--surface));
}
.bb-crm-status-track {
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .55rem;
  padding:.65rem .75rem;
  border:1px dashed color-mix(in srgb, var(--brand-500) 22%, var(--line));
  border-radius:.85rem;
  background:color-mix(in srgb, var(--surface) 92%, #f7faff);
}
.bb-crm-status-track span {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .55rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:.74rem; font-weight:650; color:var(--ink-2);
}
.bb-crm-status-track span i { color:var(--brand-600); font-size:.82rem; }
.bb-crm-status-track b { color:var(--brand-500); font-weight:800; font-size:.82rem; }

@media (max-width:767.98px) {
  .bb-crm-kanban { grid-template-columns:1fr; }
  .bb-crm-status-track b { display:none; }
  .bb-crm-status-track { flex-direction:column; align-items:stretch; }
}

.bb-recognize-rows {
  list-style:none; margin:0; padding:0;
  display:grid; gap:.85rem;
}
.bb-recognize-rows li {
  display:grid; grid-template-columns:2.75rem 1fr; gap:.85rem 1rem; align-items:baseline;
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface);
}
.bb-recognize-num {
  font-size:.72rem; font-weight:800; letter-spacing:.04em; color:var(--brand-600);
}
.bb-recognize-rows p { margin:0; font-size:1.02rem; color:var(--ink-2); line-height:1.45; }
.bb-recognize-visual {
  padding:1.5rem; border:1px solid var(--line); border-radius:1.25rem;
  background:linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--brand-100) 35%, var(--surface)) 100%);
  text-align:center;
}
.bb-recognize-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.bb-recognize-chips span {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .7rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:.78rem; font-weight:650; color:var(--ink-2);
}
.bb-recognize-chips i { color:var(--brand-600); }
.bb-recognize-arrow { margin:.75rem 0; font-size:1.25rem; font-weight:800; color:var(--brand-500); }
.bb-recognize-q {
  display:grid; place-items:center; width:2.5rem; height:2.5rem; margin:0 auto;
  border:2px dashed color-mix(in srgb, var(--brand-500) 35%, transparent);
  border-radius:999px; font-size:1.25rem; font-weight:800; color:var(--brand-600);
}
.bb-recognize-caption { margin:1rem 0 0; font-size:.82rem; color:var(--ink-3); }

.bb-niche-dir-foot {
  margin-top:1.25rem; padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:.88rem; color:var(--ink-3);
}
.bb-niche-dir-foot a { color:var(--brand-700); font-weight:650; text-decoration:none; }
.bb-niche-dir-foot a:hover { text-decoration:underline; }

/* header mega */
.bb-mega { position:relative; }
.bb-mega > summary {
  list-style:none; cursor:pointer; color:inherit; font:inherit;
}
.bb-mega > summary::-webkit-details-marker { display:none; }
.bb-mega-panel {
  position:absolute; left:50%; top:calc(100% + .85rem); transform:translateX(-50%);
  width:min(42rem, calc(100vw - 2rem)); padding:1.15rem;
  border:1px solid var(--line); border-radius:1.15rem; background:var(--surface);
  box-shadow:0 22px 60px rgba(20,34,42,.14); display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1.2rem;
  z-index:120;
}
.bb-mega-panel a {
  display:block; padding:.65rem .75rem; border-radius:.75rem; text-decoration:none; color:var(--ink);
}
.bb-mega-panel a:hover { background:var(--surface-2); }
.bb-mega-panel strong { display:block; font-size:.9rem; }
.bb-mega-panel small { display:block; color:var(--ink-3); font-size:.72rem; margin-top:.15rem; }

@media (max-width:1199.98px) {
  .bb-growth-ladder { grid-template-columns:repeat(3,1fr); }
  .bb-growth-ladder > li:nth-child(3n)::after { display:none; }
  .bb-cases-mosaic { grid-template-columns:1fr 1fr; }
  .bb-cases-mosaic .bb-case-card.is-featured { grid-row:auto; grid-column:1/-1; }
  .bb-cases-mosaic .bb-case-card.is-featured .bb-case-media { aspect-ratio:16/10; }
  .bb-route-wide { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:767.98px) {
  .bb-growth-ladder { grid-template-columns:1fr 1fr; }
  .bb-growth-ladder > li { min-height:auto; }
  .bb-growth-ladder > li:nth-child(2n)::after { display:none; }
  .bb-growth-icon {
    width:7.5rem; height:6.5rem;
    margin:.4rem 0 .8rem;
  }
  .bb-growth-icon svg { height:6.25rem; }
  .bb-before-after { grid-template-columns:1fr; }
  .bb-before-after > b { display:none; }
  .bb-cases-mosaic { grid-template-columns:1fr; }
  .bb-route-wide { grid-template-columns:1fr 1fr; }
  .bb-edit-rows > div { grid-template-columns:3rem 1fr; }
}
@media (max-width:479.98px) {
  .bb-growth-ladder { grid-template-columns:1fr; }
  .bb-growth-ladder > li:not(:last-child)::after {
    content:"↓";
    top:auto; right:auto; bottom:-1rem; left:50%;
    transform:translateX(-50%);
    display:grid;
  }
  .bb-growth-ladder > li:nth-child(2n)::after { display:grid; }
  .bb-growth-ladder > li:last-child::after { display:none; }
  .bb-route-wide { grid-template-columns:1fr; }
  .bb-trust-strip-row { flex-direction:column; gap:.55rem; }
}

/* =========================================================
   INTERFACE-SCENE — layouts A / B / C + niche scene kinds
   ========================================================= */
.bb-iscene { position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.bb-iscene-title {
  font-size:clamp(2.2rem,4.6vw,3.85rem); line-height:1.02; letter-spacing:-.045em; font-weight:800; max-width:18ch;
}
.bb-iscene-lead { max-width:36rem; font-size:1.05rem; line-height:1.6; }
.bb-iscene-actions { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.bb-iscene-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; }

/* Layout B — centered */
.bb-iscene-layout-b .bb-iscene-center-head { max-width:46rem; margin-bottom:2rem; }
.bb-iscene-layout-b .bb-iscene-center-head .bb-iscene-title { max-width:none; margin-inline:auto; }
.bb-iscene-layout-b .bb-iscene-center-head .bb-iscene-lead { margin-inline:auto; }
.bb-iscene-layout-b .bb-iscene-center-head .bb-iscene-actions { justify-content:center; }
.bb-iscene-layout-b .bb-niche-hero-bullets { justify-items:center; text-align:left; max-width:28rem; margin-inline:auto; }
.bb-iscene-layout-b .bb-iscene-grid { grid-template-columns:1fr; }
.bb-iscene-layout-b .bb-iscene-stage { max-width:58rem; margin-inline:auto; width:100%; }

/* Layout C — media dominant */
.bb-iscene-layout-c { background:#101820; }
.bb-iscene-layout-c .bb-iscene-grid { position:relative; z-index:2; min-height:min(38rem,78vh); }
.bb-iscene-layout-c .bb-iscene-copy.is-on-media .crumbs,
.bb-iscene-layout-c .bb-iscene-copy.is-on-media .crumbs a { color:rgba(255,255,255,.72); }
.bb-iscene-layout-c .bb-iscene-copy.is-on-media .eyebrow { color:#8dde68; }
.bb-iscene-layout-c .bb-iscene-copy.is-on-media .bb-iscene-title,
.bb-iscene-layout-c .bb-iscene-copy.is-on-media .bb-iscene-lead,
.bb-iscene-layout-c .bb-iscene-copy.is-on-media .bb-niche-hero-bullets { color:#f4f7f6; }
.bb-iscene-layout-c .bb-iscene-copy.is-on-media .bb-niche-hero-bullets li::before { color:#8dde68; }
.bb-iscene-layout-c .bb-iscene-media-plane {
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.bb-iscene-layout-c .bb-iscene-media-plane img { width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.55); }
.bb-iscene-layout-c .bb-iscene-media-veil {
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,16,22,.88) 0%,rgba(10,16,22,.45) 48%,rgba(10,16,22,.25) 100%);
}
.bb-iscene-layout-c .bb-iscene-stage { position:relative; min-height:28rem; }
.bb-iscene-layout-c .container-xxl { position:relative; }
.bb-iscene-c-form-wrap { position:relative; z-index:3; margin-top:1rem; max-width:22rem; }

.bb-iscene-stage { position:relative; min-height:30rem; }
.bb-iscene-compose {
  position:relative; min-height:26rem; border-radius:1.4rem; overflow:visible;
}
.bb-iscene-carrier {
  position:absolute; inset:1.5rem 2rem 0 0; border-radius:1.25rem; overflow:hidden;
  border:1px solid var(--line-strong); box-shadow:0 24px 60px rgba(20,34,42,.16);
  background:var(--surface);
}
.bb-iscene-carrier img { width:100%; height:100%; object-fit:cover; }
.bb-iscene-layout-c .bb-iscene-compose { min-height:24rem; }
.bb-iscene-layout-c .bb-iscene-carrier { display:none; }

.bb-iscene-branch {
  position:absolute; z-index:2; width:9rem; height:7rem; right:18%; top:8%;
  color:color-mix(in srgb, var(--brand-500) 75%, #3bc879); opacity:.85; pointer-events:none;
}

.bb-iscene-float, .bb-iscene-panel {
  position:absolute; z-index:3; padding:.75rem .9rem; border-radius:1rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  box-shadow:0 12px 32px rgba(20,34,42,.14); min-width:8rem;
}
.bb-iscene-float small, .bb-iscene-panel small {
  display:block; color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; font-weight:800;
}
.bb-iscene-float strong, .bb-iscene-panel strong { display:block; color:var(--ink); font-size:1.05rem; margin-top:.15rem; }
.bb-iscene-float em, .bb-iscene-panel em { display:block; font-style:normal; color:#2aaa68; font-size:.72rem; font-weight:700; margin-top:.2rem; }
.bb-iscene-float.is-tl { top:8%; left:-.5rem; }
.bb-iscene-float.is-tr { top:6%; right:-.25rem; }
.bb-iscene-float.is-bl { bottom:18%; left:0; }
.bb-iscene-float.is-br { bottom:12%; right:0; }
.bb-iscene-float.is-m1 { top:6%; left:-.4rem; }
.bb-iscene-float.is-m2 { top:22%; right:8%; }
.bb-iscene-float.is-m3 { bottom:28%; left:4%; }

.bb-iscene-panel.is-estimate { right:0; bottom:22%; min-width:11rem; }
.bb-iscene-panel.is-check { left:-.4rem; bottom:8%; min-width:10.5rem; }
.bb-iscene-panel.is-progress { right:2%; top:10%; min-width:10.5rem; }
.bb-iscene-check, .bb-iscene-prog {
  display:flex; align-items:center; gap:.45rem; font-size:.78rem; color:var(--ink-2); margin-top:.35rem; font-weight:650;
}
.bb-iscene-check.is-done span, .bb-iscene-prog.is-done span { color:#2aaa68; }
.bb-iscene-prog.is-current span { color:var(--brand-600); }
.bb-iscene-prog.is-todo span { color:var(--muted); }

.bb-iscene-mini-cta {
  position:absolute; z-index:4; left:50%; bottom:1rem; transform:translateX(-50%);
  min-height:2.75rem; box-shadow:0 12px 28px color-mix(in srgb,var(--brand-500) 30%,transparent);
}

.bb-iscene-form {
  position:absolute; z-index:5; right:0; top:5.5rem; width:17.5rem;
  padding:1.25rem; border-radius:1.2rem; border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(14px);
  box-shadow:0 18px 48px rgba(25,42,52,.12); overflow:hidden;
}
.bb-iscene-form h2 { margin:0; font-size:1.2rem; color:var(--ink); }
.bb-iscene-form p { margin:.5rem 0 .85rem; color:var(--ink-3); font-size:.8rem; }
.bb-iscene-form form { display:grid; gap:.55rem; }
.bb-iscene-layout-b .bb-iscene-form { position:relative; right:auto; top:auto; width:min(100%,20rem); margin:1rem auto 0; }

/* phone / cafe */
.bb-iscene-phone {
  position:absolute; z-index:4; left:50%; top:50%; transform:translate(-55%,-48%);
  width:11.5rem; padding:.55rem; border-radius:1.4rem; background:#141c22;
  box-shadow:0 22px 50px rgba(0,0,0,.28);
}
.bb-iscene-phone-notch { width:3rem; height:.35rem; border-radius:99px; background:#2a3640; margin:.25rem auto .55rem; }
.bb-iscene-phone-body { background:#fff; border-radius:1rem; padding:.75rem; }
.bb-iscene-phone-body > small { display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800; margin-bottom:.45rem; }
.bb-iscene-menu-row { display:flex; justify-content:space-between; gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--ink); }
.bb-iscene-menu-row b { color:var(--ink); }

/* clinic */
.bb-iscene-panel.is-doctor { top:10%; left:0; }
.bb-iscene-panel.is-slots { top:12%; right:0; min-width:8.5rem; }
.bb-iscene-slot {
  margin-top:.35rem; padding:.4rem .55rem; border-radius:.55rem; border:1px solid var(--line);
  font-size:.8rem; font-weight:700; color:var(--ink-2); text-align:center;
}
.bb-iscene-slot.is-active { background:var(--brand-500); color:#fff; border-color:transparent; }

/* dashboard */
.bb-iscene-dash {
  position:absolute; z-index:3; left:8%; right:12%; top:18%; bottom:22%;
  padding:1rem; border-radius:1.1rem; background:rgba(255,255,255,.95);
  border:1px solid var(--line); box-shadow:0 16px 40px rgba(20,34,42,.12);
}
.bb-iscene-dash-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.bb-iscene-dash-kpis small { display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.bb-iscene-dash-kpis strong { font-size:1.25rem; color:var(--ink); }
.bb-iscene-dash-bars { display:flex; align-items:flex-end; gap:.45rem; height:5.5rem; margin-top:1rem; }
.bb-iscene-dash-bars i {
  flex:1; display:block; border-radius:.35rem .35rem 0 0;
  background:linear-gradient(180deg,var(--brand-500),color-mix(in srgb,var(--brand-500) 30%,#8dde68));
}
.bb-iscene-dash-bars i:nth-child(1){ height:42%; } .bb-iscene-dash-bars i:nth-child(2){ height:68%; }
.bb-iscene-dash-bars i:nth-child(3){ height:55%; } .bb-iscene-dash-bars i:nth-child(4){ height:82%; }
.bb-iscene-dash-bars i:nth-child(5){ height:64%; }

.bb-iscene-flow {
  margin-top:1.25rem; padding:.85rem 1rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.55rem;
  border:1px solid var(--line); border-radius:1rem; background:color-mix(in srgb,var(--surface) 85%,transparent);
  font-size:.78rem; font-weight:700; color:var(--ink-2);
}
.bb-iscene-layout-c .bb-iscene-flow { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#e8f0ee; position:relative; z-index:3; }
.bb-iscene-flow b { color:var(--brand-500); }

/* micro-scene below hero */
.bb-micro-scene-row {
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:.75rem;
}
.bb-micro-scene-card {
  flex:1 1 10rem; max-width:14rem; padding:1.1rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface);
}
.bb-micro-scene-card small { display:block; font-family:"Fraunces",serif; color:var(--brand-600); font-size:1.1rem; }
.bb-micro-scene-card strong { display:block; margin:.35rem 0 .3rem; color:var(--ink); }
.bb-micro-scene-card p { margin:0; font-size:.82rem; color:var(--ink-3); line-height:1.45; }
.bb-micro-scene-arrow { align-self:center; color:var(--brand-600); font-size:1.3rem; }

@media (max-width:991.98px) {
  .bb-iscene-grid { grid-template-columns:1fr; }
  .bb-iscene-stage { min-height:0; }
  .bb-iscene-compose { min-height:22rem; margin-top:.5rem; }
  .bb-iscene-carrier { position:relative; inset:auto; height:16rem; width:100%; }
  .bb-iscene-form { position:relative; right:auto; top:auto; width:100%; margin-top:.85rem; }
  .bb-iscene-float.is-m2, .bb-iscene-panel.is-progress { display:none; }
  .bb-iscene-branch { display:none; }
  .bb-iscene-layout-c .bb-iscene-grid { min-height:0; }
  .bb-iscene-layout-c .bb-iscene-media-plane { position:absolute; inset:0; height:100%; }
  .bb-iscene-layout-c { padding-bottom:1rem; }
  .bb-iscene-phone { transform:translate(-50%,-42%) scale(.92); }
}
@media (max-width:575.98px) {
  .bb-iscene-title { font-size:clamp(2rem,11vw,2.8rem); max-width:none; }
  .bb-iscene-compose { min-height:20rem; }
  .bb-iscene-panel.is-check, .bb-iscene-float.is-bl { display:none; }
  .bb-iscene-mini-cta { position:relative; left:auto; bottom:auto; transform:none; width:100%; margin-top:.75rem; }
  .bb-micro-scene-arrow { display:none; }
  .bb-micro-scene-card { max-width:none; }
}

/* =========================================================
   CAFE Layout C — media dominant interface-scene
   ========================================================= */
.bb-cafe-hero {
  position:relative; overflow:hidden; min-height:min(44rem, calc(100vh - 4.5rem));
  color:#fff; border-bottom:1px solid var(--line);
}
.bb-cafe-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.04); filter:saturate(1.05) brightness(.72);
}
.bb-cafe-hero-veil {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,12,16,.88) 0%, rgba(8,12,16,.62) 42%, rgba(8,12,16,.28) 72%, rgba(8,12,16,.45) 100%),
    linear-gradient(180deg, rgba(8,12,16,.25), transparent 30%, rgba(8,12,16,.55));
}
.bb-cafe-hero-inner { position:relative; z-index:2; padding-top:2.5rem; padding-bottom:1.75rem; }
.bb-cafe-hero-grid {
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.25rem,4vw,3.5rem); align-items:center; min-height:32rem;
}
.bb-cafe-hero-copy .bb-iscene-title { color:#fff; max-width:14ch; }
.bb-cafe-hero-copy .bb-iscene-lead,
.text-white-70 { color:rgba(255,255,255,.78) !important; }
.bb-niche-hero-bullets.is-on-media li { color:rgba(255,255,255,.86); }
.bb-niche-hero-bullets.is-on-media li::before { color:#86efac; }
.bb-cafe-hero-copy .crumbs,
.bb-cafe-hero-copy .crumbs a { color:rgba(255,255,255,.7); }
.bb-cafe-hero .btn-warning {
  --bs-btn-bg:#f59e0b; --bs-btn-border-color:#f59e0b; --bs-btn-hover-bg:#d97706;
  --bs-btn-hover-border-color:#d97706; --bs-btn-color:#111; font-weight:750;
}

.bb-cafe-scene {
  position:relative; min-height:28rem; display:grid; place-items:center;
}
.bb-cafe-phone {
  position:relative; z-index:3; width:min(100%,15.2rem);
  padding:.55rem; border-radius:1.7rem; background:#0f172a;
  box-shadow:0 28px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.bb-cafe-phone-chrome { display:flex; justify-content:center; padding:.2rem 0 .45rem; }
.bb-cafe-phone-chrome i { width:3.2rem; height:.32rem; border-radius:99px; background:#334155; }
.bb-cafe-phone-screen {
  background:#fff; color:var(--ink); border-radius:1.25rem; padding:.85rem .8rem 1rem;
}
.bb-cafe-phone-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.65rem; }
.bb-cafe-phone-head strong { font-size:.95rem; }
.bb-cafe-phone-head small { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.bb-cafe-dish {
  display:grid; grid-template-columns:2.4rem 1fr 1.7rem; gap:.55rem; align-items:center;
  padding:.45rem 0; border-bottom:1px solid var(--line);
}
.bb-cafe-dish-pic {
  width:2.4rem; height:2.4rem; border-radius:.7rem; display:grid; place-items:center;
  background:linear-gradient(145deg,#fff7ed,#ffedd5); font-size:1.15rem;
}
.bb-cafe-dish-meta strong,.bb-cafe-dish-meta small { display:block; }
.bb-cafe-dish-meta strong { font-size:.8rem; line-height:1.2; }
.bb-cafe-dish-meta small { color:var(--ink-3); font-size:.72rem; margin-top:.1rem; }
.bb-cafe-add {
  width:1.7rem; height:1.7rem; border:0; border-radius:.5rem; background:var(--brand-500); color:#fff;
  font-weight:900; line-height:1;
}
.bb-cafe-cart-btn {
  margin-top:.85rem; padding:.75rem; border-radius:.85rem; text-align:center;
  background:var(--brand-500); color:#fff; font-weight:750; font-size:.82rem;
  box-shadow:0 10px 22px color-mix(in srgb,var(--brand-500) 35%,transparent);
}

.bb-cafe-float {
  position:absolute; z-index:4; padding:.85rem 1rem; border-radius:1.05rem;
  background:rgba(255,255,255,.96); color:var(--ink);
  box-shadow:0 16px 40px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.55);
  min-width:9.5rem;
}
.bb-cafe-float small { display:block; color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; font-weight:800; }
.bb-cafe-float strong { display:block; margin-top:.2rem; font-size:1rem; }
.bb-cafe-float em { display:block; margin-top:.15rem; font-style:normal; color:#16a34a; font-weight:800; font-size:.78rem; }
.bb-cafe-float-order { top:8%; right:2%; }
.bb-cafe-float-status { top:38%; right:0; }
.bb-cafe-float-delivery { bottom:12%; right:6%; }
.bb-cafe-bar { margin-top:.55rem; height:.35rem; border-radius:99px; background:#fef3c7; overflow:hidden; }
.bb-cafe-bar i { display:block; width:62%; height:100%; background:#f59e0b; border-radius:inherit; }

.bb-cafe-flow {
  margin-top:1.4rem; padding:.9rem 1.1rem; display:flex; flex-wrap:wrap; gap:.55rem;
  align-items:center; justify-content:center;
  border-radius:1rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); font-size:.78rem; font-weight:700; color:rgba(255,255,255,.9);
}
.bb-cafe-flow b { color:#86efac; }

@media (max-width:991.98px) {
  .bb-cafe-hero { min-height:0; }
  .bb-cafe-hero-grid { grid-template-columns:1fr; min-height:0; gap:1.5rem; }
  .bb-cafe-scene { min-height:26rem; margin-top:.5rem; }
  .bb-cafe-float-order { top:0; right:0; }
  .bb-cafe-float-status { top:auto; bottom:18%; right:0; }
  .bb-cafe-float-delivery { left:0; right:auto; bottom:4%; }
}
@media (max-width:575.98px) {
  .bb-cafe-hero-copy .bb-iscene-title { max-width:none; font-size:clamp(2rem,10vw,2.7rem); }
  .bb-cafe-float-delivery { display:none; }
  .bb-cafe-phone { width:min(100%,14rem); }
  .bb-cafe-float { transform:scale(.92); transform-origin:right top; }
}

/* Centered photo hero (lifestyle niches) */
.bb-niche-hero-banner {
  flex-direction:column;
  justify-content:center;
  padding-bottom:0;
}
.bb-niche-hero-banner .crumbs,
.bb-niche-hero-banner .crumbs a { color:rgba(255,255,255,.68); }
.bb-niche-hero-banner .crumbs a:hover { color:#fff; }
.bb-niche-hero-banner .display-4 {
  letter-spacing:-.03em;
  line-height:1.05;
  text-wrap:balance;
}
.bb-niche-hero-banner-flow {
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.45rem .65rem;
  width:100%;
  max-width:42rem;
  margin:0 auto;
  padding:0 1rem 1.75rem;
  font-size:.82rem;
  font-weight:600;
  color:rgba(255,255,255,.78);
}
.bb-niche-hero-banner-flow b {
  font-weight:500;
  color:rgba(255,255,255,.35);
}
.bb-niche-hero-banner-flow span {
  padding:.35rem .75rem;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
@media (max-width:575.98px) {
  .bb-niche-hero-banner.hero-tall { min-height:82vh; }
  .bb-niche-hero-banner .display-4 { font-size:clamp(2rem,9vw,2.65rem); }
}

/* =========================================================
   v5 polish — light footer, case hovers, reduced motion
   ========================================================= */
.site-footer {
  background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface) 94%,#e8eef8));
  color:var(--ink-3);
  border-top:1px solid var(--line);
}
.site-footer h4 {
  color:var(--ink);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.site-footer a { color:var(--ink-3); text-decoration:none; }
.site-footer a:hover { color:var(--brand-700); }
.site-footer .footer-bottom {
  border-top:1px solid var(--line);
  color:var(--muted);
}
.site-footer .footer-tagline {
  font-family:"Caveat",cursive;
  font-size:1.15rem;
  color:var(--brand-600);
  margin-top:.35rem;
}
.site-footer .footer-branch-line {
  margin-top:1.5rem;
  opacity:.55;
}
.site-footer .footer-branch-line svg { display:block; max-width:8rem; height:auto; }
.site-footer .brand-lockup-footer strong { color:var(--ink); }

@media (prefers-reduced-motion:reduce) {
  .bb-growth-ladder > li:hover .bb-growth-icon svg,
  .bb-case-card:hover .bb-case-media img { transform:none; }
}