/* ==========================================================================
   SoneBoost — landing page
   Loads tokens + components only. No Bootstrap, no app.css.

   That is deliberate: the previous landing page loaded app.css alongside its
   own styles, and the two set colour and background on overlapping selectors.
   The result was the washed-out sage on Services and the near-invisible FAQ
   heading. Isolating the page removes that whole class of failure rather than
   patching individual selectors.
   ========================================================================== */

.bm-lp { background: var(--surface-base); color: var(--text-primary); overflow-x: hidden; }
.bm-lp a { text-decoration: none; }
.bm-lp img { max-width: 100%; display: block; }

.bm-lp__wrap { width: min(var(--container-max), 100% - 2.5rem); margin-inline: auto; }
.bm-lp__section { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }

/* ---------------------------------------------------------------- nav */

.bm-lp__nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(10, 11, 16, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out);
}
.bm-lp__nav.is-stuck {
  border-bottom-color: var(--border-subtle);
  background: rgba(10, 11, 16, 0.94);
}
.bm-lp__nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}
.bm-lp__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: 1.1rem;
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}
.bm-lp__brand-mark {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-action);
  color: var(--color-action-text);
  display: grid; place-items: center;
  font-weight: var(--weight-bold); font-size: 0.9rem;
}
.bm-lp__links { display: none; gap: var(--space-6); margin-inline-start: auto; font-size: var(--fs-base); }
.bm-lp__links a { color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-out); }
.bm-lp__links a:hover { color: var(--text-primary); }
.bm-lp__nav-cta { display: flex; gap: var(--space-2); margin-inline-start: auto; align-items: center; }
@media (min-width: 900px) {
  .bm-lp__links { display: flex; }
  .bm-lp__nav-cta { margin-inline-start: 0; }
}

/* ---------------------------------------------------------------- hero */

.bm-lp__hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem); position: relative; }

.bm-lp__hero-grid { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 1000px) {
  .bm-lp__hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-14); align-items: center; }
}

/* Signup card first on mobile. On a phone the marketing copy is scroll-past
   noise -- the form is the page. */
.bm-lp__hero-copy { order: 2; }
.bm-lp__hero-form { order: 1; }
@media (min-width: 1000px) {
  .bm-lp__hero-copy { order: 1; }
  .bm-lp__hero-form { order: 2; }
}

.bm-lp__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-action);
  background: var(--color-action-subtle);
  border: 1px solid var(--color-action-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.bm-lp__eyebrow-dot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-delivered);
  animation: bm-lp-pulse 2.4s var(--ease-inout) infinite;
}
@keyframes bm-lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.bm-lp__h1 {
  font-size: clamp(2.1rem, 5.2vw, var(--fs-display));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
.bm-lp__h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--raw-indigo-400), var(--raw-indigo-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bm-lp__lede {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  max-width: 34rem;
  margin: 0 0 var(--space-8);
}

/* Trust chips. Specific and countable -- "3,000+ services" reads as true in a
   way that "thousands of services" does not. */
.bm-lp__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.bm-lp__chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.bm-lp__chip svg { width: 15px; height: 15px; color: var(--color-action); flex-shrink: 0; }
.bm-lp__chip strong { color: var(--text-primary); font-weight: var(--weight-semi); }

/* ---------------------------------------------------------------- platforms */

/* Real platform marks, each with its own brand glow. You understand what the
   product does in under a second, without reading. */
.bm-lp__platforms {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.bm-lp__platform {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: transform var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              color var(--dur-normal) var(--ease-out);
  animation: bm-lp-float 6s var(--ease-inout) infinite;
}
.bm-lp__platform svg { width: 20px; height: 20px; }
.bm-lp__platform:nth-child(1) { animation-delay: 0s; }
.bm-lp__platform:nth-child(2) { animation-delay: 0.8s; }
.bm-lp__platform:nth-child(3) { animation-delay: 1.6s; }
.bm-lp__platform:nth-child(4) { animation-delay: 2.4s; }
.bm-lp__platform:nth-child(5) { animation-delay: 3.2s; }

.bm-lp__platform:hover { transform: translateY(-4px) scale(1.04); }
.bm-lp__platform[data-brand='instagram']:hover { color: #E1306C; border-color: #E1306C; box-shadow: 0 0 20px -4px #E1306C; }
.bm-lp__platform[data-brand='tiktok']:hover    { color: #25F4EE; border-color: #25F4EE; box-shadow: 0 0 20px -4px #25F4EE; }
.bm-lp__platform[data-brand='youtube']:hover   { color: #FF0000; border-color: #FF0000; box-shadow: 0 0 20px -4px #FF0000; }
.bm-lp__platform[data-brand='facebook']:hover  { color: #1877F2; border-color: #1877F2; box-shadow: 0 0 20px -4px #1877F2; }
.bm-lp__platform[data-brand='telegram']:hover  { color: #26A5E4; border-color: #26A5E4; box-shadow: 0 0 20px -4px #26A5E4; }
/* Website traffic has no brand hue to borrow, so it uses the action colour --
   which is correct rather than a compromise: it is our own product, not a
   third-party platform we resell into. */
.bm-lp__platform[data-brand='traffic']:hover   { color: var(--color-action); border-color: var(--color-action); box-shadow: 0 0 20px -4px var(--color-action); }

/* Transform only -- runs on the compositor, never triggers layout. */
@keyframes bm-lp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------------------------------------------------------------- signup card */

.bm-lp__card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  position: relative;
}
@media (min-width: 600px) { .bm-lp__card { padding: var(--space-8); } }

.bm-lp__card::before {
  content: '';
  position: absolute;
  inset-block-start: -1px; inset-inline: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-action), transparent);
}

.bm-lp__card-title {
  font-size: var(--fs-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-1);
}
.bm-lp__card-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
}
.bm-lp__card-sub a { color: var(--color-action); font-weight: var(--weight-medium); }
.bm-lp__card-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.bm-lp__card-row { display: grid; gap: var(--space-4); }
@media (min-width: 480px) { .bm-lp__card-row { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- stats */

.bm-lp__stats {
  border-block: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  padding-block: var(--space-8);
}
.bm-lp__stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4); text-align: center;
}
@media (min-width: 760px) { .bm-lp__stats-grid { grid-template-columns: repeat(4, 1fr); } }
.bm-lp__stat-value {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: var(--weight-semi); line-height: var(--leading-tight);
}
.bm-lp__stat-label {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-1);
}

/* ---------------------------------------------------------------- sections */

.bm-lp__head { max-width: 40rem; margin-bottom: var(--space-10); }
.bm-lp__h2 {
  font-size: clamp(1.6rem, 3.8vw, var(--fs-h2));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}
.bm-lp__sub { color: var(--text-secondary); font-size: var(--fs-lg); margin: 0; }

.bm-lp__grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .bm-lp__grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .bm-lp__grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------- price rows */

.bm-lp__price {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
.bm-lp__price:hover { border-color: var(--border-default); transform: translateY(-2px); }
.bm-lp__price-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--surface-overlay);
  color: var(--text-secondary);
}
.bm-lp__price-icon svg { width: 18px; height: 18px; }
.bm-lp__price-name { font-weight: var(--weight-semi); font-size: var(--fs-base); }
.bm-lp__price-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 1px; }
.bm-lp__price-value {
  margin-inline-start: auto; text-align: end; white-space: nowrap;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semi); color: var(--color-money);
}
.bm-lp__price-unit { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-ui); }

/* ---------------------------------------------------------------- faq */

.bm-lp__faq { border-top: 1px solid var(--border-subtle); }
.bm-lp__faq details { border-bottom: 1px solid var(--border-subtle); }
.bm-lp__faq summary {
  padding-block: var(--space-5);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  font-weight: var(--weight-semi); font-size: var(--fs-lg);
  /* Explicit, because the old page inherited a near-invisible colour here. */
  color: var(--text-primary);
}
.bm-lp__faq summary::-webkit-details-marker { display: none; }
.bm-lp__faq summary::after {
  content: '+';
  font-family: var(--font-num); font-size: 1.3rem;
  color: var(--color-action); flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease-out);
}
.bm-lp__faq details[open] summary::after { transform: rotate(45deg); }
.bm-lp__faq-body {
  padding-bottom: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  max-width: 52ch;
}

/* ---------------------------------------------------------------- cta + footer */

.bm-lp__cta {
  background: linear-gradient(155deg, var(--surface-raised), var(--surface-sunken));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 6vw, 3.5rem);
  text-align: center;
}
.bm-lp__footer {
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-8);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.bm-lp__footer-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  justify-content: space-between; align-items: center;
}
.bm-lp__footer a { color: var(--text-secondary); }
.bm-lp__footer a:hover { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .bm-lp__platform { animation: none; }
  .bm-lp__eyebrow-dot { animation: none; }
}

/* ------------------------------------------------------- language switcher */

.bm-lp__lang { position: relative; }

.bm-lp__lang-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  min-inline-size: 10rem;
  padding-block: var(--space-2);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast) var(--ease-out);
  z-index: var(--z-dropdown);
}

.bm-lp__lang.is-open .bm-lp__lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bm-lp__lang-menu a {
  display: block;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.bm-lp__lang-menu a:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Catalogue size line under the pricing heading. Money-adjacent but not a
   price, so it stays on the action colour rather than amber. */
.bm-lp__catalogue-size {
  margin-block-start: var(--space-3);
  color: var(--text-secondary);
}

.bm-lp__catalogue-size strong {
  color: var(--color-action);
  font-variant-numeric: tabular-nums;
}

/* "from" qualifier on showcase prices: present but subordinate to the figure. */
.bm-lp__price-from {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--weight-normal);
  margin-inline-end: 2px;
}

/* Brand logo from Appearance settings. Height-constrained so any upload sits
   correctly in the nav without the admin having to resize it first. */
.bm-lp__brand-logo {
  block-size: 2rem;
  inline-size: auto;
  max-inline-size: 12rem;
  object-fit: contain;
}

/* Language switcher as a visible control. It was bare text and read as a
   label; nobody clicks a label. */
.bm-lp__lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.bm-lp__lang-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--color-action-border);
}

.bm-lp__lang-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.bm-lp__lang-flag {
  border-radius: 2px;
  display: block;
}

/* Remember-me / forgot-password row in the hero sign-in card. */
.bm-lp__card-row--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

.bm-lp__card-row--split a {
  color: var(--color-action);
  text-decoration: none;
}

.bm-lp__card-row--split a:hover { text-decoration: underline; }

/* ======================================================== legal + pricing */

.bm-legal {
  padding-block: var(--space-12) var(--space-16);
}

.bm-legal__title {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--fs-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.bm-legal__updated {
  margin: 0 0 var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.bm-legal__body {
  max-inline-size: 78ch;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.bm-legal__body h2 {
  margin-block: var(--space-8) var(--space-3);
  color: var(--text-primary);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semi);
}

.bm-legal__body p,
.bm-legal__body ul { margin-block: 0 var(--space-4); }

.bm-legal__body ul { padding-inline-start: var(--space-6); }

.bm-legal__body li { margin-block-end: var(--space-2); }

.bm-legal__section {
  margin-block: var(--space-12) var(--space-4);
  color: var(--text-primary);
  font-size: var(--fs-h2);
  font-weight: var(--weight-semi);
}

.bm-legal__foot {
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-subtle);
}

.bm-legal__foot a { color: var(--color-action); text-decoration: none; }

/* ------------------------------------------------------------- price table */

.bm-price-group { margin-block-end: var(--space-10); }

.bm-price-group__title {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semi);
}

.bm-price-table {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bm-price-table__head,
.bm-price-table__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  align-items: center;
}

.bm-price-table__head {
  background: var(--surface-overlay);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.bm-price-table__row {
  background: var(--surface-raised);
  border-block-start: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}

.bm-price-table__name { color: var(--text-primary); }

.bm-price-table__chip {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding-block: 1px;
  padding-inline: var(--space-2);
  background: var(--color-delivered-subtle);
  border: 1px solid var(--color-delivered-border);
  border-radius: var(--radius-full);
  color: var(--color-delivered);
  font-size: var(--fs-xs);
}

/* Money: amber and the numeric face, per the design system. */
.bm-price-table__rate,
.bm-price-table__floor {
  color: var(--color-money);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semi);
  white-space: nowrap;
}

.bm-price-table__range {
  color: var(--text-secondary);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .bm-price-table__head { display: none; }

  .bm-price-table__row {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-1);
  }

  .bm-price-table__name { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ brand text */

.bm-lp__brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
}

.bm-lp__brand-1 { font-weight: var(--weight-bold); }
.bm-lp__brand-2 { font-weight: var(--weight-normal); }

/* ---------------------------------------------------------- footer links */

.bm-lp__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.bm-lp__footer-links a {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.bm-lp__footer-links a:hover { color: var(--text-primary); }

/* -------------------------------------------------- floating platform marks

   These advertise which platforms we sell for — they are product, not our own
   social accounts, so they do not link anywhere. The drift keeps them feeling
   alive without demanding attention: a slow vertical float, each mark offset
   so they never move in lockstep.                                            */

.bm-lp__platform {
  animation: bm-float 6s var(--ease-inout) infinite;
}

.bm-lp__platform:nth-child(2n)   { animation-duration: 7.5s; animation-delay: -1.2s; }
.bm-lp__platform:nth-child(3n)   { animation-duration: 8.5s; animation-delay: -2.4s; }
.bm-lp__platform:nth-child(5n)   { animation-duration: 6.8s; animation-delay: -3.1s; }

@keyframes bm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Motion is decoration here; anyone who asked for less of it gets none. */
@media (prefers-reduced-motion: reduce) {
  .bm-lp__platform { animation: none; }
}

/* ==================================================== floating brand orbit

   Peakerr-style: large circular brand badges scattered around the hero, each
   glowing in its own platform colour and drifting independently.

   Positioned with custom properties set inline per badge, so adding or moving
   one is a markup change rather than another CSS rule. Absolute inside the
   hero, and pointer-events:none so they can never intercept a click meant for
   the sign-in card sitting over them.

   The brand hex values are deliberate literals: they are third-party marks,
   not our palette. Putting Instagram's magenta in our token file would imply
   it is ours to use elsewhere, which is exactly the misuse the semantic
   system exists to prevent.                                                  */

.bm-lp__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bm-lp__orb {
  position: absolute;
  inset-inline-start: var(--orb-x);
  inset-block-start: var(--orb-y);
  inline-size: var(--orb-size, 72px);
  block-size: var(--orb-size, 72px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #FFFFFF;
  animation: bm-orb-drift 7s var(--ease-inout) infinite;
  animation-delay: var(--orb-delay, 0s);
}

.bm-lp__orb svg {
  inline-size: 46%;
  block-size: 46%;
}

/* Each badge carries its platform's colour and a glow of the same hue. */
.bm-lp__orb[data-brand='instagram'] {
  background: linear-gradient(45deg, #F09433, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888);
  box-shadow: 0 0 44px -6px rgba(220, 39, 67, 0.75);
}

.bm-lp__orb[data-brand='tiktok'] {
  background: #0B0B0B;
  box-shadow: 0 0 44px -6px rgba(37, 244, 238, 0.65);
}

.bm-lp__orb[data-brand='youtube'] {
  background: #FF0000;
  box-shadow: 0 0 44px -6px rgba(255, 0, 0, 0.6);
}

.bm-lp__orb[data-brand='facebook'] {
  background: #1877F2;
  box-shadow: 0 0 44px -6px rgba(24, 119, 242, 0.6);
}

.bm-lp__orb[data-brand='telegram'] {
  background: #26A5E4;
  box-shadow: 0 0 44px -6px rgba(38, 165, 228, 0.6);
}

.bm-lp__orb[data-brand='traffic'] {
  background: var(--color-accent);
  box-shadow: 0 0 44px -6px rgba(255, 122, 24, 0.6);
}

@keyframes bm-orb-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(6px, -14px, 0); }
  66%      { transform: translate3d(-6px, -6px, 0); }
}

/* Below lg the sign-in card takes the full width and the badges would sit
   behind it — visible only as coloured smudges. Hidden rather than shrunk. */
@media (max-width: 991.98px) {
  .bm-lp__orbit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-lp__orb { animation: none; }
}

/* ==================================================== premium design pass

   Brings the public pages in line with the approved design: Sora display
   face, the violet-to-orange CTA gradient, and its glow. Values come from
   tokens, so a future palette change is still one file.                     */

.bm-lp__h1,
.bm-lp__title,
.bm-legal__title,
.bm-lp__section-title,
.bm-lp__cta-title,
.bm-price-group__title,
.bm-lp__card-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* The second line of the headline carries the brand violet, as in the
   mockup — accent, not action, because it is not clickable. */
.bm-lp__h1 em,
.bm-lp__title em {
  color: var(--color-accent-violet);
  font-style: normal;
}

/* Primary CTAs: gradient + glow. Scoped to the public pages so the panel's
   buttons stay on the semantic action colour. */
.bm-lp__nav-cta .bm-btn--primary,
.bm-lp__hero-form .bm-btn--primary,
.bm-lp__cta-box .bm-btn--primary,
.bm-legal .bm-btn--primary,
.bm-auth .bm-btn--primary,
.bm-btn--primary {
  background: var(--gradient-cta);
  border: none;
  box-shadow: var(--glow-cta);
  color: #FFFFFF;
  font-weight: var(--weight-semi);
}

.bm-lp__nav-cta .bm-btn--primary:hover,
.bm-lp__hero-form .bm-btn--primary:hover,
.bm-lp__cta-box .bm-btn--primary:hover,
.bm-legal .bm-btn--primary:hover,
.bm-auth .bm-btn--primary:hover,
.bm-btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 18px 48px -12px rgba(139, 92, 246, 0.65);
}

/* Cards get the design's soft inner highlight and deep drop shadow. */
.bm-lp__card,
.bm-price-table,
.bm-lp__cta-box {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 24px 60px -24px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------- orbit position fix

   The badges were sitting UNDER the sign-in card: they were placed at
   x 62–92%, which is exactly where the card is, and the card paints over
   them. They now occupy the band between the text column and the card, and
   the card is given an explicit stacking order above them.

   z-index 1 on the orbit and 2 on the card, rather than leaving it to
   document order — document order is what put them behind in the first
   place.                                                                     */

.bm-lp__orbit { z-index: 1; }

.bm-lp__hero-form {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------ article cards */

.bm-article-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  margin-block-end: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.bm-article-card:hover {
  background: var(--surface-hover);
  border-color: var(--color-accent-violet);
  transform: translateY(-1px);
}

.bm-article-card__cat {
  display: inline-block;
  margin-block-end: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.bm-article-card__title {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semi);
}

.bm-article-card__excerpt {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  max-inline-size: 70ch;
}

.bm-article-card__go {
  color: var(--color-accent-violet);
  font-size: var(--fs-h3);
  flex: 0 0 auto;
}

/* --------------------------------------------------------- v5 article hub */

.bm-article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.bm-article-grid--home,
.bm-article-grid--related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bm-article-card--visual {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.bm-article-card--visual:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.bm-article-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-overlay);
  border-block-end: 1px solid var(--border-subtle);
}

.bm-article-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.bm-article-card--visual:hover .bm-article-card__media img {
  transform: scale(1.025);
}

.bm-article-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-5);
}

.bm-article-card__content .bm-article-card__excerpt {
  margin-block-end: var(--space-5);
}

.bm-article-card__read {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  color: var(--color-action-hover);
  font-size: var(--fs-sm);
  font-weight: var(--weight-semi);
}

.bm-article-hero {
  margin: var(--space-8) 0 var(--space-10);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.bm-article-hero img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.bm-lp__articles {
  background:
    radial-gradient(circle at 15% 10%, var(--color-action-subtle), transparent 36%),
    var(--surface-sunken);
  border-block: 1px solid var(--border-subtle);
}

.bm-lp__section-head--split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-block-end: var(--space-8);
}

.bm-lp__section-head--split > div { max-inline-size: 46rem; }

@media (max-width: 991.98px) {
  .bm-article-grid--home,
  .bm-article-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .bm-article-grid,
  .bm-article-grid--home,
  .bm-article-grid--related { grid-template-columns: 1fr; }

  .bm-lp__section-head--split { align-items: flex-start; flex-direction: column; }
}

/* The language menu is anchored to the RIGHT edge of its toggle. On a narrow
   screen the toggle sits near the left, so the menu ran off the viewport —
   half of "English" and the flags were cut off. Below the md breakpoint it
   anchors to the left instead and is width-capped. */

@media (max-width: 767.98px) {
  .bm-lp__lang-menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
    min-inline-size: 11rem;
    max-inline-size: calc(100vw - 2rem);
  }
}

/* Brand lockup on the public pages. The sizing rules live with the shared
   partial's classes so header, login and register cannot drift apart. */
.bm-lp__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.bm-brand__logo {
  inline-size: auto;
  max-inline-size: 12rem;
  object-fit: contain;
  display: block;
}

.bm-brand__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
}

.bm-brand__2 { font-weight: var(--weight-normal); }

/* ------------------------------------------------------------ footer layout */

.bm-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  padding-block: var(--space-12) var(--space-8);
}

.bm-footer__tagline {
  margin-block-start: var(--space-4);
  max-inline-size: 34ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--leading-relaxed);
}

.bm-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bm-footer__heading {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.bm-footer__col a {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.bm-footer__col a:hover { color: var(--text-primary); }

.bm-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

@media (max-width: 767.98px) {
  .bm-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .bm-footer__brand { grid-column: 1 / -1; }
}

/* ------------------------------------------------- orbit, reference match

   The reference places large, fully saturated brand circles in a descending
   arc with a soft halo of the platform's own colour. Bigger, brighter and
   more spread out than the first pass.                                       */

.bm-lp__orb {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.02);
}

.bm-lp__orb svg { inline-size: 52%; block-size: 52%; }

.bm-lp__orb[data-brand='instagram'] { box-shadow: 0 0 60px -4px rgba(220, 39, 67, 0.85); }
.bm-lp__orb[data-brand='tiktok']    { box-shadow: 0 0 60px -4px rgba(37, 244, 238, 0.75); }
.bm-lp__orb[data-brand='youtube']   { box-shadow: 0 0 60px -4px rgba(255, 0, 0, 0.7); }
.bm-lp__orb[data-brand='facebook']  { box-shadow: 0 0 60px -4px rgba(24, 119, 242, 0.7); }
.bm-lp__orb[data-brand='telegram']  { box-shadow: 0 0 60px -4px rgba(38, 165, 228, 0.7); }
.bm-lp__orb[data-brand='traffic']   { box-shadow: 0 0 60px -4px rgba(255, 122, 24, 0.7); }

/* ----------------------------------------------------------- mobile nav */

.bm-lp__nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-inline-start: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
}

.bm-lp__nav-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }

@media (max-width: 991.98px) {
  .bm-lp__nav-toggle { display: inline-flex; }

  .bm-lp__links {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    inline-size: 100%;
    order: 3;
    padding-block: var(--space-3);
    margin-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
  }

  .bm-lp__links.is-open { display: flex; }

  .bm-lp__links a {
    padding-block: var(--space-3);
    font-size: var(--fs-base);
  }

  .bm-lp__nav-inner { flex-wrap: wrap; }

  /* The sign-in card belongs BELOW the pitch on a phone: a visitor who has
     not read what this is has no reason to sign in, and the reference puts
     the copy first for the same reason. */
  .bm-lp__hero { display: flex; flex-direction: column; }
  .bm-lp__hero-copy { order: 1; }
  .bm-lp__hero-form { order: 2; }
}

/* The card was wide enough to crowd the orbit on desktop. */
@media (min-width: 992px) {
  /* Wide enough to breathe, still leaving the orbit its band. 26rem read as
     cramped for a form with five controls plus a social button. */
  .bm-lp__hero-form { max-inline-size: 34rem; margin-inline-start: auto; }
}

/* ------------------------------------------------------ comparison section */

.bm-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-8);
}

.bm-compare__col {
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* Ours reads as delivered/positive, the other column as neutral — not as an
   error. The right-hand list is advice, not an accusation. */
.bm-compare__col--us   { border-color: var(--color-delivered-border); }
.bm-compare__col--them { opacity: 0.92; }

.bm-compare__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semi);
}

.bm-compare__icon {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  flex: 0 0 auto;
}

.bm-compare__icon--yes {
  background: var(--color-delivered-subtle);
  color: var(--color-delivered);
}

.bm-compare__icon--no {
  background: var(--color-error-subtle);
  color: var(--color-error);
}

.bm-compare__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bm-compare__list li {
  position: relative;
  padding-inline-start: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--leading-relaxed);
}

.bm-compare__list li::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
}

.bm-compare__col--us .bm-compare__list li::before {
  content: '\2713';
  color: var(--color-delivered);
}

.bm-compare__col--them .bm-compare__list li::before {
  content: '\2715';
  color: var(--color-error);
}

.bm-compare__list strong { color: var(--text-primary); }


/* --------------------------------------------------------- Google sign-in */

.bm-social-auth {
  margin-block-start: var(--space-5);
}

.bm-social-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.bm-social-auth__divider::before,
.bm-social-auth__divider::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: var(--border-subtle);
}

/* White button with the Google mark, as Google's brand guidelines require —
   this is one of the few places a literal colour is correct, because it is
   their mark and not our palette. */
.bm-btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  inline-size: 100%;
  padding-block: var(--space-3);
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: var(--radius-md);
  color: #3C4043;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.bm-btn--google:hover { background: #F1F3F4; color: #3C4043; }

.bm-btn--google svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* -------------------------------------------------- mobile menu contents

   On a phone the language choices and the primary CTA live inside the menu,
   and the Sign in link is dropped: the sign-in card is the first thing under
   the hero copy, so a second route to it is noise.                           */

.bm-lp__links-mobile { display: none; }

.bm-lp__links-langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3);
}

.bm-lp__links-langs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
}

@media (max-width: 991.98px) {
  .bm-lp__links-mobile {
    display: block;
    padding-block-start: var(--space-4);
    margin-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
  }

  /* Both desktop nav actions come out: the CTA moves into the menu, and
     Sign in is redundant beside the hero card. */
  .bm-lp__signin-link,
  .bm-lp__cta-desktop { display: none; }

  /* The language pill in the bar would duplicate the list inside the menu. */
  .bm-lp__lang { display: none; }
}


/* The hero card carries five controls plus a social button; at 30rem the
   fields were still tight. Larger padding and inputs to match the reference. */
.bm-lp__hero-form .bm-lp__card { padding: var(--space-8); }

.bm-lp__hero-form .bm-input {
  padding-block: var(--space-4);
  font-size: var(--fs-base);
}

.bm-lp__hero-form .bm-lp__card-title { font-size: var(--fs-h2); }

.bm-lp__hero-form .bm-btn--lg {
  padding-block: var(--space-4);
  font-size: var(--fs-lg);
}