```css
/*
 * BIZNES BAZA
 * Global Design System v2.0
 *
 * Purpose:
 * Global CSS foundation for all Business Base pages on Tilda.
 *
 * Rules:
 * - All custom classes use bb- prefix.
 * - No Tilda t-container, t-col, t-width grid.
 * - No page-specific styling in this file.
 * - No emoji.
 * - No Unicode arrows.
 * - No long dash characters.
 * - Montserrat is the only project font.
 * - Component-specific CSS may extend this system,
 *   but should not redefine core tokens.
 */


/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */

:root {

  /* Brand colors */
  --bb-dark: #080A0C;
  --bb-dark-2: #111518;
  --bb-dark-3: #1A2024;

  --bb-light: #F4F6F2;
  --bb-light-2: #EDEFEA;
  --bb-white: #FFFFFF;

  --bb-accent: #C8FF3D;
  --bb-accent-hover: #BAF12E;
  --bb-accent-dark: #86A91F;

  /* Text */
  --bb-text: #15191D;
  --bb-muted: #687177;
  --bb-subtle: #899196;

  --bb-text-on-dark: #F5F7F2;
  --bb-muted-on-dark: #AAB2B6;
  --bb-subtle-on-dark: #7E878C;

  /* Borders */
  --bb-line: rgba(21, 25, 29, 0.12);
  --bb-line-medium: rgba(21, 25, 29, 0.20);
  --bb-line-strong: rgba(21, 25, 29, 0.30);

  --bb-line-dark: rgba(255, 255, 255, 0.13);
  --bb-line-dark-medium: rgba(255, 255, 255, 0.22);
  --bb-line-dark-strong: rgba(255, 255, 255, 0.32);

  /* Functional colors */
  --bb-success: #237A4B;
  --bb-success-bg: rgba(35, 122, 75, 0.10);

  --bb-warning: #A56B12;
  --bb-warning-bg: rgba(165, 107, 18, 0.10);

  --bb-danger: #B83C36;
  --bb-danger-bg: rgba(184, 60, 54, 0.10);

  /* Font */
  --bb-font:
    'Montserrat',
    Arial,
    sans-serif;

  /* Container */
  --bb-container-max: 1280px;

  --bb-gutter:
    clamp(20px, 3.2vw, 40px);

  /* Content widths */
  --bb-content-xs: 560px;
  --bb-content-sm: 680px;
  --bb-content-md: 780px;
  --bb-content-lg: 960px;

  /* Spacing */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 20px;
  --bb-space-6: 24px;
  --bb-space-7: 32px;
  --bb-space-8: 40px;
  --bb-space-9: 48px;
  --bb-space-10: 64px;
  --bb-space-11: 80px;
  --bb-space-12: 96px;
  --bb-space-13: 120px;

  /* Responsive section spacing */
  --bb-section-space:
    clamp(72px, 8vw, 128px);

  --bb-section-space-sm:
    clamp(48px, 6vw, 80px);

  --bb-section-space-lg:
    clamp(88px, 10vw, 152px);

  /* Grid */
  --bb-grid-gap:
    clamp(16px, 2vw, 28px);

  --bb-grid-gap-lg:
    clamp(24px, 3vw, 40px);

  /* Radius */
  --bb-radius-xs: 8px;
  --bb-radius-sm: 12px;
  --bb-radius-md: 18px;
  --bb-radius-lg: 26px;
  --bb-radius-xl: 34px;
  --bb-radius-pill: 999px;

  /* Shadows */
  --bb-shadow-xs:
    0 2px 10px rgba(8, 10, 12, 0.04);

  --bb-shadow-sm:
    0 8px 26px rgba(8, 10, 12, 0.06);

  --bb-shadow-md:
    0 18px 48px rgba(8, 10, 12, 0.09);

  --bb-shadow-lg:
    0 28px 80px rgba(8, 10, 12, 0.13);

  --bb-shadow-dark:
    0 24px 72px rgba(0, 0, 0, 0.24);

  /* Focus */
  --bb-focus-color: #86A91F;

  /* Motion */
  --bb-ease:
    cubic-bezier(0.22, 0.61, 0.36, 1);

  --bb-ease-out:
    cubic-bezier(0.16, 1, 0.3, 1);

  --bb-duration-fast: 160ms;
  --bb-duration: 260ms;
  --bb-duration-slow: 520ms;

  /* Sticky offset */
  --bb-sticky-offset: 96px;

  /* Layers */
  --bb-z-base: 1;
  --bb-z-sticky: 20;
  --bb-z-dropdown: 40;
  --bb-z-overlay: 80;
  --bb-z-modal: 100;
}


/* ============================================================
   02. DOCUMENT
   ============================================================ */

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


/* ============================================================
   03. PROJECT SCOPE
   ============================================================ */

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

.bb-page {
  position: relative;

  width: 100%;
  min-width: 0;

  color: var(--bb-text);
  background: var(--bb-light);

  font-family: var(--bb-font);
  font-size: 16px;
  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;
}

.bb-page :where(
  header,
  main,
  footer,
  section,
  article,
  aside,
  nav,
  div,
  form
) {
  min-width: 0;
}

.bb-page :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote
) {
  margin-top: 0;
}

.bb-page :where(
  button,
  input,
  select,
  textarea
) {
  font: inherit;
}

.bb-page :where(
  button,
  a
) {
  -webkit-tap-highlight-color: transparent;
}

.bb-page :where([id]) {
  scroll-margin-top: var(--bb-sticky-offset);
}


/* ============================================================
   04. TYPOGRAPHY
   ============================================================ */

.bb-page :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  margin-bottom: 0;

  color: inherit;

  font-family: var(--bb-font);
  font-weight: 800;

  text-wrap: balance;
}

.bb-page h1,
.bb-h1 {
  font-size:
    clamp(40px, 6vw, 80px);

  line-height: 1.02;

  letter-spacing: -0.045em;
}

.bb-page h2,
.bb-h2 {
  font-size:
    clamp(32px, 4.2vw, 56px);

  line-height: 1.06;

  letter-spacing: -0.038em;
}

.bb-page h3,
.bb-h3 {
  font-size:
    clamp(23px, 2.4vw, 32px);

  line-height: 1.14;

  letter-spacing: -0.025em;
}

.bb-page h4,
.bb-h4 {
  font-size:
    clamp(18px, 1.7vw, 22px);

  line-height: 1.25;

  letter-spacing: -0.015em;
}

.bb-page h5,
.bb-h5 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

.bb-page h6,
.bb-h6 {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
}

.bb-page p {
  margin-bottom: 0;
}

.bb-display {
  font-size:
    clamp(44px, 7vw, 88px);

  line-height: 0.98;

  font-weight: 800;

  letter-spacing: -0.05em;

  text-wrap: balance;
}

.bb-lead {
  max-width: var(--bb-content-sm);

  font-size:
    clamp(18px, 1.8vw, 22px);

  line-height: 1.55;

  font-weight: 400;

  color: var(--bb-muted);
}

.bb-text {
  font-size: 16px;
  line-height: 1.7;

  color: var(--bb-muted);
}

.bb-text--small {
  font-size: 14px;
  line-height: 1.6;
}

.bb-text--large {
  font-size:
    clamp(17px, 1.5vw, 20px);

  line-height: 1.65;
}

.bb-muted {
  color: var(--bb-muted);
}

.bb-subtle {
  color: var(--bb-subtle);
}

.bb-strong {
  font-weight: 700;
}

.bb-nowrap {
  white-space: nowrap;
}

.bb-balance {
  text-wrap: balance;
}

.bb-pretty {
  text-wrap: pretty;
}

.bb-meta {
  font-size: 13px;
  line-height: 1.4;

  font-weight: 600;

  letter-spacing: 0.01em;

  color: var(--bb-muted);
}

.bb-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  width: fit-content;

  margin-bottom: 18px;

  color: var(--bb-accent-dark);

  font-size: 12px;
  line-height: 1.3;

  font-weight: 700;

  letter-spacing: 0.06em;
}

.bb-eyebrow::before {
  content: '';

  display: block;

  width: 22px;
  height: 2px;

  flex: 0 0 auto;

  border-radius: var(--bb-radius-pill);

  background: currentColor;
}


/* ============================================================
   05. LINKS
   ============================================================ */

.bb-page a {
  color: inherit;

  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bb-link {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  width: fit-content;

  color: inherit;

  font-size: 14px;
  line-height: 1.3;

  font-weight: 700;

  text-decoration: none;
}

.bb-link--underline {
  text-decoration: underline;
}

.bb-link__arrow {
  position: relative;

  width: 16px;
  height: 12px;

  flex: 0 0 16px;
}

.bb-link__arrow::before {
  content: '';

  position: absolute;

  top: 50%;
  left: 1px;

  width: 13px;
  height: 1.5px;

  border-radius: var(--bb-radius-pill);

  background: currentColor;

  transform: translateY(-50%);
}

.bb-link__arrow::after {
  content: '';

  position: absolute;

  top: 50%;
  right: 1px;

  width: 6px;
  height: 6px;

  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* ============================================================
   06. MEDIA
   ============================================================ */

.bb-page :where(
  img,
  svg,
  video,
  canvas
) {
  display: block;

  max-width: 100%;
}

.bb-page img {
  height: auto;
}

.bb-media {
  position: relative;

  overflow: hidden;

  border-radius: var(--bb-radius-lg);

  background: var(--bb-light-2);
}

.bb-media img,
.bb-media video {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.bb-media--16x9 {
  aspect-ratio: 16 / 9;
}

.bb-media--4x3 {
  aspect-ratio: 4 / 3;
}

.bb-media--1x1 {
  aspect-ratio: 1 / 1;
}


/* ============================================================
   07. CONTAINER
   ============================================================ */

.bb-container {
  width:
    min(
      calc(100% - (2 * var(--bb-gutter))),
      var(--bb-container-max)
    );

  margin-inline: auto;
}

.bb-container--wide {
  width:
    min(
      calc(100% - (2 * var(--bb-gutter))),
      1440px
    );

  margin-inline: auto;
}

.bb-container--content {
  width:
    min(
      calc(100% - (2 * var(--bb-gutter))),
      var(--bb-content-md)
    );

  margin-inline: auto;
}


/* ============================================================
   08. SECTION SYSTEM
   ============================================================ */

.bb-section {
  position: relative;

  isolation: isolate;

  padding-block:
    var(--bb-section-space);
}

.bb-section--compact {
  padding-block:
    var(--bb-section-space-sm);
}

.bb-section--large {
  padding-block:
    var(--bb-section-space-lg);
}

.bb-section--top-none {
  padding-top: 0;
}

.bb-section--bottom-none {
  padding-bottom: 0;
}

.bb-section--light {
  color: var(--bb-text);
  background: var(--bb-light);
}

.bb-section--white {
  color: var(--bb-text);
  background: var(--bb-white);
}

.bb-section--dark {
  color: var(--bb-text-on-dark);
  background: var(--bb-dark);
}

.bb-section--dark-2 {
  color: var(--bb-text-on-dark);
  background: var(--bb-dark-2);
}

.bb-section--accent {
  color: var(--bb-dark);
  background: var(--bb-accent);
}

.bb-section--dark .bb-muted,
.bb-section--dark-2 .bb-muted,
.bb-section--dark .bb-text,
.bb-section--dark-2 .bb-text,
.bb-section--dark .bb-lead,
.bb-section--dark-2 .bb-lead,
.bb-section--dark .bb-meta,
.bb-section--dark-2 .bb-meta {
  color: var(--bb-muted-on-dark);
}

.bb-section--dark .bb-subtle,
.bb-section--dark-2 .bb-subtle {
  color: var(--bb-subtle-on-dark);
}

.bb-section--dark .bb-eyebrow,
.bb-section--dark-2 .bb-eyebrow {
  color: var(--bb-accent);
}

.bb-section--accent .bb-eyebrow {
  color: var(--bb-dark);
}


/* ============================================================
   09. SECTION HEADER
   ============================================================ */

.bb-section-head {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 0.42fr);

  gap:
    clamp(24px, 5vw, 72px);

  align-items: end;

  margin-bottom:
    clamp(32px, 5vw, 64px);
}

.bb-section-head--single {
  grid-template-columns: 1fr;
}

.bb-section-head__title {
  max-width: 880px;
}

.bb-section-head__text {
  max-width: 520px;

  justify-self: end;
}


/* ============================================================
   10. GRID SYSTEM
   ============================================================ */

.bb-grid {
  display: grid;

  gap: var(--bb-grid-gap);

  min-width: 0;
}

.bb-grid--gap-lg {
  gap: var(--bb-grid-gap-lg);
}

.bb-grid--2 {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.bb-grid--3 {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.bb-grid--4 {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.bb-grid--5 {
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}

.bb-grid--auto {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 260px),
        1fr
      )
    );
}

.bb-grid--split {
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(320px, 0.84fr);
}

.bb-grid--sidebar {
  grid-template-columns:
    minmax(220px, 0.32fr)
    minmax(0, 1fr);

  gap:
    clamp(28px, 5vw, 72px);
}

.bb-grid--feature {
  grid-template-columns:
    minmax(0, 1.45fr)
    repeat(
      2,
      minmax(0, 0.775fr)
    );
}

.bb-span-2 {
  grid-column: span 2;
}

.bb-span-full {
  grid-column: 1 / -1;
}


/* ============================================================
   11. FLEX PRIMITIVES
   ============================================================ */

.bb-stack {
  display: flex;

  flex-direction: column;

  min-width: 0;
}

.bb-stack--xs {
  gap: 8px;
}

.bb-stack--sm {
  gap: 14px;
}

.bb-stack--md {
  gap: 20px;
}

.bb-stack--lg {
  gap: 32px;
}

.bb-stack--xl {
  gap: 48px;
}

.bb-row {
  display: flex;

  align-items: center;

  min-width: 0;
}

.bb-row--wrap {
  flex-wrap: wrap;
}

.bb-row--between {
  justify-content: space-between;
}

.bb-row--start {
  align-items: flex-start;
}

.bb-row--gap-sm {
  gap: 10px;
}

.bb-row--gap-md {
  gap: 16px;
}

.bb-row--gap-lg {
  gap: 24px;
}


/* ============================================================
   12. HERO PRIMITIVES
   ============================================================ */

.bb-hero {
  position: relative;

  display: flex;

  align-items: center;

  min-height:
    clamp(
      620px,
      84dvh,
      820px
    );

  padding-block:
    clamp(72px, 9vw, 120px);
}

.bb-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(360px, 0.9fr);

  gap:
    clamp(36px, 6vw, 88px);

  align-items: center;
}

.bb-hero__copy {
  position: relative;

  z-index: 2;

  max-width: 790px;
}

.bb-hero__title {
  max-width: 860px;
}

.bb-hero__text {
  max-width: 690px;

  margin-top:
    clamp(22px, 3vw, 30px);
}

.bb-hero__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top:
    clamp(28px, 4vw, 40px);
}

.bb-hero__meta {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px 18px;

  margin-top: 24px;

  color: var(--bb-muted-on-dark);

  font-size: 13px;
  line-height: 1.45;

  font-weight: 600;
}

.bb-hero__visual {
  position: relative;

  min-width: 0;
}


/* ============================================================
   13. BUTTON SYSTEM
   ============================================================ */

.bb-button {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 52px;

  padding:
    13px 22px;

  border:
    1px solid transparent;

  border-radius:
    var(--bb-radius-pill);

  appearance: none;

  color: inherit;
  background: transparent;

  font-family: var(--bb-font);
  font-size: 14px;
  line-height: 1.2;

  font-weight: 700;

  text-align: center;
  text-decoration: none;

  cursor: pointer;

  touch-action: manipulation;

  transition:
    color
    var(--bb-duration-fast)
    var(--bb-ease),

    background-color
    var(--bb-duration-fast)
    var(--bb-ease),

    border-color
    var(--bb-duration-fast)
    var(--bb-ease),

    box-shadow
    var(--bb-duration-fast)
    var(--bb-ease),

    transform
    var(--bb-duration-fast)
    var(--bb-ease);
}

.bb-button--primary {
  color: var(--bb-dark);

  border-color: var(--bb-accent);

  background: var(--bb-accent);
}

.bb-button--dark {
  color: var(--bb-white);

  border-color: var(--bb-dark);

  background: var(--bb-dark);
}

.bb-button--light {
  color: var(--bb-text);

  border-color: var(--bb-line);

  background: var(--bb-white);
}

.bb-button--ghost {
  color: inherit;

  border-color: currentColor;

  background: transparent;
}

.bb-button--ghost-dark {
  color: var(--bb-text-on-dark);

  border-color: var(--bb-line-dark-medium);

  background: transparent;
}

.bb-button--small {
  min-height: 42px;

  padding:
    10px 17px;

  font-size: 13px;
}

.bb-button--large {
  min-height: 56px;

  padding:
    15px 26px;

  font-size: 15px;
}

.bb-button--block {
  width: 100%;
}

.bb-button[disabled],
.bb-button[aria-disabled='true'] {
  opacity: 0.48;

  cursor: not-allowed;

  pointer-events: none;
}

.bb-button__arrow {
  position: relative;

  width: 16px;
  height: 12px;

  flex: 0 0 16px;

  transition:
    transform
    var(--bb-duration-fast)
    var(--bb-ease);
}

.bb-button__arrow::before {
  content: '';

  position: absolute;

  top: 50%;
  left: 1px;

  width: 13px;
  height: 1.5px;

  border-radius: var(--bb-radius-pill);

  background: currentColor;

  transform: translateY(-50%);
}

.bb-button__arrow::after {
  content: '';

  position: absolute;

  top: 50%;
  right: 1px;

  width: 6px;
  height: 6px;

  border-top:
    1.5px solid currentColor;

  border-right:
    1.5px solid currentColor;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* ============================================================
   14. SURFACES
   ============================================================ */

.bb-surface {
  position: relative;

  min-width: 0;

  border:
    1px solid var(--bb-line);

  border-radius:
    var(--bb-radius-lg);

  background:
    var(--bb-white);
}

.bb-surface--dark {
  color:
    var(--bb-text-on-dark);

  border-color:
    var(--bb-line-dark);

  background:
    var(--bb-dark-2);
}

.bb-surface--accent {
  color:
    var(--bb-dark);

  border-color:
    rgba(8, 10, 12, 0.12);

  background:
    var(--bb-accent);
}


/* ============================================================
   15. CARDS
   ============================================================ */

.bb-card {
  position: relative;

  min-width: 0;

  padding:
    clamp(22px, 3vw, 34px);

  border:
    1px solid var(--bb-line);

  border-radius:
    var(--bb-radius-lg);

  background:
    var(--bb-white);

  box-shadow:
    var(--bb-shadow-xs);
}

.bb-card--flat {
  box-shadow: none;
}

.bb-card--dark {
  color:
    var(--bb-text-on-dark);

  border-color:
    var(--bb-line-dark);

  background:
    var(--bb-dark-2);

  box-shadow: none;
}

.bb-card--accent {
  color:
    var(--bb-dark);

  border-color:
    rgba(8, 10, 12, 0.12);

  background:
    var(--bb-accent);

  box-shadow: none;
}

.bb-card--interactive {
  transition:
    transform
    var(--bb-duration)
    var(--bb-ease-out),

    border-color
    var(--bb-duration)
    var(--bb-ease),

    background-color
    var(--bb-duration)
    var(--bb-ease),

    box-shadow
    var(--bb-duration)
    var(--bb-ease);
}

.bb-card__head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}

.bb-card__number {
  color: var(--bb-muted);

  font-size: 12px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.06em;

  font-variant-numeric: tabular-nums;
}

.bb-card--dark .bb-card__number {
  color: var(--bb-muted-on-dark);
}

.bb-card__title {
  margin-top: 24px;
}

.bb-card__text {
  margin-top: 14px;

  color: var(--bb-muted);

  font-size: 15px;
  line-height: 1.65;
}

.bb-card--dark .bb-card__text {
  color: var(--bb-muted-on-dark);
}

.bb-card__footer {
  margin-top:
    clamp(28px, 4vw, 48px);
}


/* ============================================================
   16. PANEL
   Product-like surface for calculators and interface elements.
   ============================================================ */

.bb-panel {
  position: relative;

  min-width: 0;

  padding:
    clamp(20px, 3vw, 32px);

  border:
    1px solid var(--bb-line);

  border-radius:
    var(--bb-radius-lg);

  background:
    var(--bb-white);
}

.bb-panel--dark {
  color: var(--bb-text-on-dark);

  border-color: var(--bb-line-dark);

  background: var(--bb-dark-2);
}

.bb-panel__head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding-bottom: 18px;

  border-bottom:
    1px solid var(--bb-line);
}

.bb-panel--dark .bb-panel__head {
  border-color: var(--bb-line-dark);
}

.bb-panel__body {
  padding-top: 22px;
}


/* ============================================================
   17. CHIPS AND TAGS
   ============================================================ */

.bb-chip {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  min-height: 32px;

  padding:
    7px 11px;

  border:
    1px solid var(--bb-line);

  border-radius:
    var(--bb-radius-pill);

  color: var(--bb-muted);

  background:
    rgba(255, 255, 255, 0.72);

  font-size: 12px;
  line-height: 1.2;

  font-weight: 700;
}

.bb-chip--accent {
  color: var(--bb-dark);

  border-color:
    rgba(8, 10, 12, 0.10);

  background:
    var(--bb-accent);
}

.bb-chip--dark {
  color:
    var(--bb-text-on-dark);

  border-color:
    var(--bb-line-dark);

  background:
    rgba(255, 255, 255, 0.06);
}

.bb-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background:
    var(--bb-accent);
}


/* ============================================================
   18. STATS AND METRICS
   ============================================================ */

.bb-stat {
  padding-block: 20px;

  border-top:
    1px solid var(--bb-line);
}

.bb-stat__number {
  display: block;

  font-size:
    clamp(32px, 4vw, 56px);

  line-height: 1;

  font-weight: 800;

  letter-spacing: -0.045em;

  font-variant-numeric:
    tabular-nums;
}

.bb-stat__label {
  display: block;

  margin-top: 8px;

  color: var(--bb-muted);

  font-size: 13px;
  line-height: 1.5;
}

.bb-metric {
  display: grid;

  gap: 6px;
}

.bb-metric__value {
  font-size:
    clamp(28px, 3vw, 44px);

  line-height: 1;

  font-weight: 800;

  letter-spacing: -0.04em;

  font-variant-numeric:
    tabular-nums;
}

.bb-metric__label {
  color: var(--bb-muted);

  font-size: 12px;
  line-height: 1.4;

  font-weight: 600;
}


/* ============================================================
   19. PROGRESS
   ============================================================ */

.bb-progress {
  position: relative;

  overflow: hidden;

  width: 100%;
  height: 6px;

  border-radius:
    var(--bb-radius-pill);

  background:
    var(--bb-light-2);
}

.bb-progress__bar {
  display: block;

  width: var(--bb-progress, 0%);
  height: 100%;

  border-radius: inherit;

  background:
    var(--bb-accent-dark);
}

.bb-section--dark .bb-progress,
.bb-panel--dark .bb-progress {
  background:
    rgba(255, 255, 255, 0.10);
}

.bb-section--dark .bb-progress__bar,
.bb-panel--dark .bb-progress__bar {
  background:
    var(--bb-accent);
}


/* ============================================================
   20. FORMS
   ============================================================ */

.bb-form {
  display: grid;

  gap: 18px;
}

.bb-form__row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.bb-field {
  display: grid;

  gap: 8px;
}

.bb-field__label {
  color: var(--bb-text);

  font-size: 13px;
  line-height: 1.4;

  font-weight: 700;
}

.bb-field__hint {
  color: var(--bb-muted);

  font-size: 12px;
  line-height: 1.45;
}

.bb-input,
.bb-select,
.bb-textarea {
  width: 100%;

  border:
    1px solid var(--bb-line-medium);

  border-radius:
    var(--bb-radius-sm);

  color:
    var(--bb-text);

  background:
    var(--bb-white);

  font-family:
    var(--bb-font);

  font-size: 16px;
  line-height: 1.35;

  font-weight: 500;

  transition:
    border-color
    var(--bb-duration-fast)
    var(--bb-ease),

    box-shadow
    var(--bb-duration-fast)
    var(--bb-ease),

    background-color
    var(--bb-duration-fast)
    var(--bb-ease);
}

.bb-input,
.bb-select {
  min-height: 52px;

  padding:
    13px 15px;
}

.bb-textarea {
  min-height: 128px;

  padding:
    14px 15px;

  resize: vertical;
}

.bb-input::placeholder,
.bb-textarea::placeholder {
  color:
    var(--bb-subtle);

  opacity: 1;
}

.bb-input:hover,
.bb-select:hover,
.bb-textarea:hover {
  border-color:
    var(--bb-line-strong);
}

.bb-input:focus,
.bb-select:focus,
.bb-textarea:focus {
  border-color:
    var(--bb-accent-dark);

  outline: none;

  box-shadow:
    0 0 0 3px
    rgba(134, 169, 31, 0.16);
}

.bb-input[aria-invalid='true'],
.bb-select[aria-invalid='true'],
.bb-textarea[aria-invalid='true'] {
  border-color:
    var(--bb-danger);
}

.bb-field__error {
  color: var(--bb-danger);

  font-size: 12px;
  line-height: 1.4;
}

.bb-field__success {
  color: var(--bb-success);

  font-size: 12px;
  line-height: 1.4;
}

.bb-panel--dark .bb-field__label,
.bb-section--dark .bb-field__label,
.bb-section--dark-2 .bb-field__label {
  color:
    var(--bb-text-on-dark);
}

.bb-panel--dark .bb-input,
.bb-panel--dark .bb-select,
.bb-panel--dark .bb-textarea,
.bb-section--dark .bb-input,
.bb-section--dark .bb-select,
.bb-section--dark .bb-textarea,
.bb-section--dark-2 .bb-input,
.bb-section--dark-2 .bb-select,
.bb-section--dark-2 .bb-textarea {
  color:
    var(--bb-text-on-dark);

  border-color:
    var(--bb-line-dark-medium);

  background:
    var(--bb-dark-3);
}

.bb-panel--dark .bb-input::placeholder,
.bb-panel--dark .bb-textarea::placeholder,
.bb-section--dark .bb-input::placeholder,
.bb-section--dark .bb-textarea::placeholder,
.bb-section--dark-2 .bb-input::placeholder,
.bb-section--dark-2 .bb-textarea::placeholder {
  color:
    var(--bb-subtle-on-dark);
}


/* ============================================================
   21. CALLOUTS
   ============================================================ */

.bb-callout {
  position: relative;

  padding:
    20px 22px;

  border:
    1px solid var(--bb-line);

  border-left:
    4px solid var(--bb-accent-dark);

  border-radius:
    0
    var(--bb-radius-sm)
    var(--bb-radius-sm)
    0;

  background:
    var(--bb-white);
}

.bb-callout--accent {
  border-left-color:
    var(--bb-accent-dark);

  background:
    rgba(200, 255, 61, 0.10);
}

.bb-callout--success {
  border-left-color:
    var(--bb-success);

  background:
    var(--bb-success-bg);
}

.bb-callout--warning {
  border-left-color:
    var(--bb-warning);

  background:
    var(--bb-warning-bg);
}

.bb-callout--danger {
  border-left-color:
    var(--bb-danger);

  background:
    var(--bb-danger-bg);
}


/* ============================================================
   22. TABLES
   ============================================================ */

.bb-table-wrap {
  width: 100%;

  overflow-x: auto;

  border:
    1px solid var(--bb-line);

  border-radius:
    var(--bb-radius-md);

  background:
    var(--bb-white);

  -webkit-overflow-scrolling: touch;
}

.bb-table {
  width: 100%;

  min-width: 640px;

  border-spacing: 0;
  border-collapse: separate;

  color:
    var(--bb-text);

  font-size: 14px;
  line-height: 1.5;
}

.bb-table th,
.bb-table td {
  padding:
    15px 18px;

  border-bottom:
    1px solid var(--bb-line);

  text-align: left;
  vertical-align: top;
}

.bb-table th {
  color: var(--bb-muted);

  background:
    var(--bb-light);

  font-size: 12px;
  line-height: 1.35;

  font-weight: 700;

  letter-spacing: 0.04em;
}

.bb-table tr:last-child td {
  border-bottom: 0;
}


/* ============================================================
   23. ARTICLE AND SEO CONTENT
   ============================================================ */

.bb-prose {
  width: 100%;

  max-width:
    var(--bb-content-md);

  color:
    var(--bb-text);

  font-size: 17px;
  line-height: 1.78;
}

.bb-prose > * {
  max-width: 100%;
}

.bb-prose > * + * {
  margin-top: 22px;
}

.bb-prose h2 {
  margin-top:
    clamp(54px, 7vw, 76px);

  margin-bottom: 0;
}

.bb-prose h3 {
  margin-top:
    clamp(38px, 5vw, 52px);

  margin-bottom: 0;
}

.bb-prose h4 {
  margin-top: 32px;
}

.bb-prose p {
  color:
    var(--bb-text);
}

.bb-prose a {
  color:
    var(--bb-text);

  font-weight: 600;

  text-decoration:
    underline;

  text-decoration-color:
    var(--bb-accent-dark);

  text-decoration-thickness:
    2px;

  overflow-wrap:
    anywhere;
}

.bb-prose strong {
  font-weight: 700;
}

.bb-prose ul,
.bb-prose ol {
  padding-left: 1.35em;
}

.bb-prose li + li {
  margin-top: 8px;
}

.bb-prose li::marker {
  color:
    var(--bb-accent-dark);

  font-weight: 700;
}

.bb-prose blockquote {
  margin:
    32px 0;

  padding:
    20px 24px;

  border-left:
    4px solid var(--bb-accent-dark);

  background:
    rgba(200, 255, 61, 0.09);

  font-size:
    clamp(18px, 2vw, 21px);

  line-height: 1.6;

  font-weight: 500;
}

.bb-prose code {
  padding:
    0.16em 0.38em;

  border:
    1px solid var(--bb-line);

  border-radius:
    5px;

  background:
    var(--bb-light-2);

  font-size: 0.88em;
}

.bb-prose pre {
  max-width: 100%;

  overflow-x: auto;

  padding:
    20px;

  border-radius:
    var(--bb-radius-md);

  color:
    var(--bb-text-on-dark);

  background:
    var(--bb-dark-2);

  font-size: 14px;
  line-height: 1.65;

  tab-size: 2;
}

.bb-prose pre code {
  padding: 0;

  border: 0;

  color: inherit;
  background: transparent;

  font-size: inherit;
}


/* ============================================================
   24. BREADCRUMBS
   ============================================================ */

.bb-breadcrumbs {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    7px 10px;

  color:
    var(--bb-muted);

  font-size: 12px;
  line-height: 1.5;

  font-weight: 600;
}

.bb-breadcrumbs a {
  color: inherit;

  text-decoration: none;
}

.bb-breadcrumbs__separator {
  width: 12px;
  height: 1px;

  flex: 0 0 12px;

  background:
    var(--bb-line-strong);
}


/* ============================================================
   25. DETAILS AND FAQ
   ============================================================ */

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

.bb-disclosure:last-child {
  border-bottom:
    1px solid var(--bb-line);
}

.bb-disclosure summary {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  min-height: 72px;

  padding:
    20px 42px 20px 0;

  color:
    var(--bb-text);

  font-size:
    clamp(17px, 1.5vw, 20px);

  line-height: 1.4;

  font-weight: 700;

  cursor: pointer;

  list-style: none;
}

.bb-disclosure summary::-webkit-details-marker {
  display: none;
}

.bb-disclosure summary::before,
.bb-disclosure summary::after {
  content: '';

  position: absolute;

  top: 50%;
  right: 4px;

  width: 16px;
  height: 1.5px;

  border-radius:
    var(--bb-radius-pill);

  background:
    currentColor;

  transition:
    transform
    var(--bb-duration-fast)
    var(--bb-ease);
}

.bb-disclosure summary::after {
  transform:
    rotate(90deg);
}

.bb-disclosure[open] summary::after {
  transform:
    rotate(0deg);
}

.bb-disclosure__content {
  max-width:
    var(--bb-content-sm);

  padding:
    0 42px 24px 0;

  color:
    var(--bb-muted);

  font-size: 16px;
  line-height: 1.7;
}


/* ============================================================
   26. DIVIDERS
   ============================================================ */

.bb-divider {
  width: 100%;
  height: 1px;

  border: 0;

  background:
    var(--bb-line);
}

.bb-section--dark .bb-divider,
.bb-section--dark-2 .bb-divider {
  background:
    var(--bb-line-dark);
}


/* ============================================================
   27. STATUS MESSAGES
   ============================================================ */

.bb-message {
  padding:
    14px 16px;

  border-radius:
    var(--bb-radius-sm);

  font-size: 14px;
  line-height: 1.55;
}

.bb-message--success {
  color:
    var(--bb-success);

  background:
    var(--bb-success-bg);
}

.bb-message--warning {
  color:
    var(--bb-warning);

  background:
    var(--bb-warning-bg);
}

.bb-message--danger {
  color:
    var(--bb-danger);

  background:
    var(--bb-danger-bg);
}


/* ============================================================
   28. ACCESSIBILITY
   ============================================================ */

.bb-sr-only {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(0, 0, 0, 0) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}

.bb-page :where(
  a,
  button,
  input,
  select,
  textarea,
  summary
):focus-visible {
  outline:
    3px solid
    var(--bb-focus-color);

  outline-offset:
    3px;
}

.bb-page ::selection {
  color:
    var(--bb-dark);

  background:
    var(--bb-accent);
}


/* ============================================================
   29. UTILITIES
   ============================================================ */

.bb-relative {
  position: relative;
}

.bb-sticky {
  position: sticky;

  top:
    var(--bb-sticky-offset);
}

.bb-clip {
  overflow: clip;
}

.bb-center {
  text-align: center;
}

.bb-center-block {
  margin-inline: auto;
}

.bb-width-xs {
  max-width:
    var(--bb-content-xs);
}

.bb-width-sm {
  max-width:
    var(--bb-content-sm);
}

.bb-width-md {
  max-width:
    var(--bb-content-md);
}

.bb-width-lg {
  max-width:
    var(--bb-content-lg);
}

.bb-full {
  width: 100%;
}

.bb-hidden {
  display: none !important;
}


/* ============================================================
   30. REVEAL ANIMATION
   Requires bb-js class on html and JS observer.
   Without JS content remains visible.
   ============================================================ */

.bb-js .bb-reveal {
  opacity: 0;

  transform:
    translateY(16px);

  transition:
    opacity
    var(--bb-duration-slow)
    var(--bb-ease-out),

    transform
    var(--bb-duration-slow)
    var(--bb-ease-out);
}

.bb-js .bb-reveal.bb-is-visible {
  opacity: 1;

  transform: none;
}

.bb-reveal[data-bb-delay='1'] {
  transition-delay: 70ms;
}

.bb-reveal[data-bb-delay='2'] {
  transition-delay: 140ms;
}

.bb-reveal[data-bb-delay='3'] {
  transition-delay: 210ms;
}

.bb-reveal[data-bb-delay='4'] {
  transition-delay: 280ms;
}


/* ============================================================
   31. POINTER HOVER
   Hover only where hover actually exists.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

  .bb-button:hover {
    transform:
      translateY(-2px);
  }

  .bb-button:active {
    transform:
      translateY(0);
  }

  .bb-button--primary:hover {
    border-color:
      var(--bb-accent-hover);

    background:
      var(--bb-accent-hover);

    box-shadow:
      0 10px 30px
      rgba(200, 255, 61, 0.16);
  }

  .bb-button--dark:hover {
    border-color:
      var(--bb-dark-3);

    background:
      var(--bb-dark-3);
  }

  .bb-button--light:hover {
    border-color:
      var(--bb-line-medium);

    box-shadow:
      var(--bb-shadow-sm);
  }

  .bb-button--ghost:hover {
    border-color:
      var(--bb-accent-dark);
  }

  .bb-button--ghost-dark:hover {
    border-color:
      var(--bb-accent);

    background:
      rgba(255, 255, 255, 0.05);
  }

  .bb-button:hover
  .bb-button__arrow {
    transform:
      translateX(3px);
  }

  .bb-link__arrow {
    transition:
      transform
      var(--bb-duration-fast)
      var(--bb-ease);
  }

  .bb-link:hover
  .bb-link__arrow {
    transform:
      translateX(3px);
  }

  .bb-card--interactive:hover {
    transform:
      translateY(-4px);

    border-color:
      var(--bb-line-medium);

    box-shadow:
      var(--bb-shadow-md);
  }

  .bb-card--dark.bb-card--interactive:hover {
    border-color:
      var(--bb-line-dark-medium);

    box-shadow:
      var(--bb-shadow-dark);
  }

  .bb-breadcrumbs a:hover {
    color:
      var(--bb-text);
  }

  .bb-prose a:hover {
    text-decoration-color:
      var(--bb-accent);
  }
}


/* ============================================================
   32. LARGE TABLET
   ============================================================ */

@media (max-width: 1100px) {

  :root {
    --bb-sticky-offset: 84px;
  }

  .bb-grid--5 {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .bb-grid--4 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .bb-grid--feature {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .bb-grid--feature > :first-child {
    grid-column:
      1 / -1;
  }

  .bb-grid--split {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.88fr);
  }

  .bb-hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, 0.82fr);

    gap:
      clamp(30px, 5vw, 58px);
  }
}


/* ============================================================
   33. TABLET
   ============================================================ */

@media (max-width: 820px) {

  :root {
    --bb-section-space:
      clamp(64px, 10vw, 88px);

    --bb-section-space-sm:
      clamp(44px, 8vw, 64px);

    --bb-section-space-lg:
      clamp(72px, 11vw, 104px);

    --bb-sticky-offset:
      76px;
  }

  .bb-display {
    font-size:
      clamp(42px, 9vw, 64px);
  }

  .bb-section-head {
    grid-template-columns:
      1fr;

    align-items:
      start;

    gap: 18px;
  }

  .bb-section-head__text {
    justify-self:
      start;
  }

  .bb-grid--3 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .bb-grid--5 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .bb-grid--split,
  .bb-grid--sidebar,
  .bb-hero__grid {
    grid-template-columns:
      1fr;
  }

  .bb-hero {
    min-height: auto;

    padding-block:
      clamp(72px, 10vw, 96px);
  }

  .bb-hero__visual {
    margin-top: 8px;
  }

  .bb-sticky {
    position: static;
  }
}


/* ============================================================
   34. MOBILE
   ============================================================ */

@media (max-width: 640px) {

  :root {
    --bb-gutter: 16px;

    --bb-grid-gap: 14px;

    --bb-radius-md: 16px;
    --bb-radius-lg: 22px;
    --bb-radius-xl: 28px;

    --bb-sticky-offset: 68px;
  }

  .bb-page {
    font-size: 16px;
    line-height: 1.65;
  }

  .bb-page h1,
  .bb-h1 {
    font-size:
      clamp(36px, 10.5vw, 42px);

    line-height: 1.04;

    letter-spacing: -0.038em;
  }

  .bb-page h2,
  .bb-h2 {
    font-size:
      clamp(30px, 8.5vw, 38px);

    line-height: 1.08;

    letter-spacing: -0.032em;
  }

  .bb-page h3,
  .bb-h3 {
    font-size:
      clamp(22px, 6.4vw, 28px);
  }

  .bb-display {
    font-size:
      clamp(38px, 11vw, 46px);

    line-height: 1.02;
  }

  .bb-lead {
    font-size: 17px;
    line-height: 1.6;
  }

  .bb-text {
    font-size: 16px;
  }

  .bb-grid--2,
  .bb-grid--3,
  .bb-grid--4,
  .bb-grid--5,
  .bb-grid--feature,
  .bb-form__row {
    grid-template-columns:
      1fr;
  }

  .bb-grid--feature > :first-child {
    grid-column: auto;
  }

  .bb-span-2,
  .bb-span-full {
    grid-column:
      auto;
  }

  .bb-hero {
    padding-block:
      64px;
  }

  .bb-hero__text {
    margin-top: 20px;
  }

  .bb-hero__actions {
    display: grid;

    grid-template-columns:
      1fr;

    margin-top: 28px;
  }

  .bb-button {
    min-height: 48px;
  }

  .bb-button--full-mobile {
    width: 100%;
  }

  .bb-card {
    padding:
      22px 18px;
  }

  .bb-panel {
    padding:
      20px 18px;
  }

  .bb-prose {
    font-size: 16px;
    line-height: 1.75;
  }

  .bb-prose > * + * {
    margin-top: 18px;
  }

  .bb-prose h2 {
    margin-top: 48px;
  }

  .bb-prose h3 {
    margin-top: 34px;
  }

  .bb-prose blockquote {
    padding:
      18px 18px;
  }

  .bb-disclosure summary {
    min-height: 64px;

    padding:
      18px 36px 18px 0;
  }

  .bb-disclosure__content {
    padding:
      0 32px 22px 0;
  }

  .bb-table th,
  .bb-table td {
    padding:
      13px 14px;
  }
}


/* ============================================================
   35. SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

  .bb-page h1,
  .bb-h1 {
    font-size: 36px;
  }

  .bb-hero__meta {
    gap:
      6px 12px;
  }
}


/* ============================================================
   36. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto !important;
  }

  .bb-page *,
  .bb-page *::before,
  .bb-page *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }

  .bb-js .bb-reveal {
    opacity: 1;

    transform: none;
  }
}


/* ============================================================
   37. HIGH CONTRAST
   ============================================================ */

@media (prefers-contrast: more) {

  :root {
    --bb-line:
      rgba(21, 25, 29, 0.28);

    --bb-line-medium:
      rgba(21, 25, 29, 0.42);

    --bb-line-dark:
      rgba(255, 255, 255, 0.30);

    --bb-line-dark-medium:
      rgba(255, 255, 255, 0.45);
  }
}


/* ============================================================
   38. FORCED COLORS
   ============================================================ */

@media (forced-colors: active) {

  .bb-button,
  .bb-card,
  .bb-panel,
  .bb-chip,
  .bb-input,
  .bb-select,
  .bb-textarea {
    border:
      1px solid CanvasText;
  }

  .bb-page :where(
    a,
    button,
    input,
    select,
    textarea,
    summary
  ):focus-visible {
    outline:
      3px solid Highlight;
  }
}
```