/* =========================================================================
   Remoby — Buy YouTube Traffic (landing page)
   styles.css — design tokens + page styles
   Fonts: Manrope (display/body), Space Grotesk (labels), Outfit (white buttons)
   Breakpoints: 1000px (nav/2-col collapse), 620px (mobile)
   ========================================================================= */

/* ---------------------------------------------------------------
   1. TOKENS — colors
   --------------------------------------------------------------- */
:root {
      /* Brand */
      --remoby-blue: #5B7CFF;
      /* eyebrows, links, accents */
      --remoby-amber: #F59E0B;
      /* primary buttons, highlights */
      --remoby-amber-accent: #F2A81D;
      /* logo arrows */
      --remoby-navy: #111827;
      /* primary text, dark surfaces */
      --remoby-navy-deep: #001A3A;
      /* FAQ headings, table numbers */
      --remoby-navy-slate: #222D44;
      /* feature-card dark surface */

      /* Neutrals (slate ramp) */
      --slate-50: #F8FAFC;
      /* page background */
      --slate-100: #F1F5F9;
      /* subtle surface */
      --slate-200: #E2E8F0;
      /* borders */
      --slate-300: #CBD5E1;
      /* strong borders, hero gradient stop */
      --slate-400: #94A3B8;
      /* faint labels */
      --slate-600: #475569;
      /* secondary text */
      --grey-500: #909090;
      /* muted labels */
      --white: #FFFFFF;

      /* Semantic surfaces */
      --surface-page: var(--slate-50);
      --surface-card: var(--white);
      --surface-subtle: var(--slate-100);
      --surface-dark: var(--remoby-navy);
      --surface-feature: var(--remoby-navy-slate);

      /* Borders */
      --border-default: var(--slate-200);
      --border-strong: var(--slate-300);

      /* Text */
      --text-primary: var(--remoby-navy);
      --text-secondary: var(--slate-600);
      --text-muted: var(--grey-500);
      --text-on-dark: var(--white);
      --text-on-dark-muted: rgba(255, 255, 255, .8);
      --text-on-dark-faint: rgba(255, 255, 255, .6);

      /* Action */
      --action-primary-bg: var(--remoby-amber);
      --action-primary-fg: var(--remoby-navy);
      --action-secondary-bg: var(--remoby-navy);
      --action-secondary-fg: var(--white);
      --action-white-bg: var(--white);
      --action-white-fg: var(--remoby-navy);

      /* Hero gradient */
      --hero-gradient: linear-gradient(180deg, var(--slate-100) 51.83%, var(--slate-300) 108.59%);
}

/* ---------------------------------------------------------------
   2. TOKENS — typography
   --------------------------------------------------------------- */
:root {
      --font-primary: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      --font-label: "Space Grotesk", "Manrope", -apple-system, sans-serif;
      --font-secondary: "Outfit", "Manrope", -apple-system, sans-serif;

      --fw-regular: 400;
      --fw-medium: 500;
      --fw-semibold: 600;
      --fw-bold: 700;
      --fw-extrabold: 800;

      --fs-10: 10px;
      --fs-12: 12px;
      --fs-14: 14px;
      --fs-16: 16px;
      --fs-18: 18px;
      --fs-20: 20px;
      --fs-24: 24px;
      --fs-32: 32px;
      --fs-40: 40px;
      --fs-48: 48px;
      --fs-52: 52px;
      --fs-72: 72px;
      --fs-84: 84px;

      --lh-tight: 1;
      /* hero display */
      --lh-snug: 1.1;
      /* large headings */
      --lh-heading: 1.2;
      /* section headings, labels */
      --lh-body: 1.4;
      /* UI copy */
      --lh-relaxed: 1.5;
      /* paragraphs */

      --tracking-tight: -0.01em;
      --tracking-label: 0.02em;

      /* composite roles */
      --type-display: var(--fw-semibold) var(--fs-72)/var(--lh-tight) var(--font-primary);
      --type-h1: var(--fw-semibold) var(--fs-48)/var(--lh-snug) var(--font-primary);
      --type-h2: var(--fw-semibold) var(--fs-32)/var(--lh-heading) var(--font-primary);
      --type-h3: var(--fw-semibold) var(--fs-24)/var(--lh-heading) var(--font-primary);
      --type-body-lg: var(--fw-regular) var(--fs-18)/var(--lh-relaxed) var(--font-primary);
      --type-body: var(--fw-regular) var(--fs-16)/var(--lh-body) var(--font-primary);
      --type-eyebrow: var(--fw-medium) var(--fs-18)/var(--lh-heading) var(--font-label);
      --type-label: var(--fw-medium) var(--fs-14)/var(--lh-heading) var(--font-label);
}

/* ---------------------------------------------------------------
   3. TOKENS — space, radius, layout
   --------------------------------------------------------------- */
:root {
      /* Spacing scale */
      --space-4: 4px;
      --space-6: 6px;
      --space-8: 8px;
      --space-10: 10px;
      --space-12: 12px;
      --space-16: 16px;
      --space-20: 20px;
      --space-24: 24px;
      --space-32: 32px;
      --space-40: 40px;
      --space-48: 48px;
      --space-60: 60px;
      --space-64: 64px;
      --space-80: 80px;
      --space-100: 100px;
      --space-120: 120px;

      /* Corner radii */
      --radius-4: 4px;
      /* tags, chips */
      --radius-6: 6px;
      --radius-8: 8px;
      /* buttons, inputs */
      --radius-10: 10px;
      --radius-12: 12px;
      /* icon tiles */
      --radius-16: 16px;
      /* small cards */
      --radius-18: 18px;
      --radius-20: 20px;
      /* hero, feature cards, footer, section shells */
      --radius-pill: 99px;

      /* Layout */
      --page-max: 1440px;
      /* full site canvas */
      --page-margin: 120px;
      /* desktop content inset (header/footer) */
      --page-gutter: 20px;
      /* outer gutter around rounded section cards */
      --header-height: 88px;
      /* site-wide header height */

      --border-width: 1px;

      /* Elevation — the system is flat, inset-ring based */
      --ring: inset 0 0 0 1px var(--border-default);
      --ring-outer: 0 0 0 1px var(--border-default);
}

/* --- Page-local values (this landing page only, NOT design-system tokens) ---
   Content на этой странице идёт в 1200px-контейнере с боковыми 24px, а не в
   1440/120px канве сайта, и шапка здесь 72px, а не 88px. Если страницу кладём
   в общий шаблон сайта — эти два значения приводим к --page-max / --header-height. */
:root {
      --rb-content-max: 1200px;
      --rb-header-height: 72px;
}

/* ---------------------------------------------------------------
   4. BASE
   --------------------------------------------------------------- */
*,
*::before,
*::after {
      box-sizing: border-box;
}

body {
      margin: 0;
      background: var(--surface-page);
      color: var(--text-primary);
      font-family: var(--font-primary);
      -webkit-font-smoothing: antialiased;
}

a {
      color: var(--remoby-blue);
      text-decoration: none;
}

a:hover {
      color: var(--remoby-navy);
}

:focus-visible {
      outline: 2px solid var(--remoby-blue);
      outline-offset: 3px;
      border-radius: var(--radius-8);
}

.rb-container {
      max-width: var(--rb-content-max);
      margin: 0 auto;
      padding: 0 24px;
}

/* vertical rhythm of a normal section — padding-block only, so the
   horizontal 24px gutter from .rb-container survives */
.rb-section {
      padding-block: clamp(56px, 6vw, 96px);
}

/* ---------------------------------------------------------------
   5. COMPONENTS — button
   --------------------------------------------------------------- */
.rb-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 24px;
      border: none;
      border-radius: var(--radius-8);
      font-family: var(--font-primary);
      font-weight: var(--fw-bold);
      font-size: var(--fs-16);
      line-height: 1.4;
      letter-spacing: var(--tracking-tight);
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: background-color .18s, box-shadow .18s, transform .06s;
}

.rb-btn:active {
      transform: translateY(1px);
}

.rb-btn__arrow {
      flex-shrink: 0;
}

.rb-btn--primary {
      background: var(--action-primary-bg);
      color: var(--action-primary-fg);
}

.rb-btn--primary:hover {
      background: #E2920B;
      color: var(--action-primary-fg);
}

/* hover-амбер темы сайта */

/* Третий вариант из дизайн-системы, на этой странице не используется —
   оставлен, чтобы кнопки были полными: solid navy + белый лейбл. */
.rb-btn--secondary {
      background: var(--action-secondary-bg);
      color: var(--action-secondary-fg);
}

.rb-btn--secondary:hover {
      background: #000;
      color: var(--action-secondary-fg);
}

.rb-btn--white {
      background: var(--action-white-bg);
      color: var(--action-white-fg);
      box-shadow: var(--ring);
      font-family: var(--font-secondary);
}

.rb-btn--white:hover {
      background: var(--slate-100);
      color: var(--action-white-fg);
}

/* ---------------------------------------------------------------
   6. COMPONENTS — pill / eyebrow / label
   --------------------------------------------------------------- */
.rb-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      background: var(--surface-subtle);
      color: var(--text-secondary);
      font-weight: var(--fw-medium);
      font-size: var(--fs-12);
      line-height: 1;
      white-space: nowrap;
}

.rb-eyebrow {
      display: inline-block;
      font-family: var(--font-label);
      font-weight: var(--fw-medium);
      font-size: var(--fs-18);
      line-height: var(--lh-heading);
      color: var(--text-on-dark);
}

/* small Space Grotesk label used all over the page */
.rb-label {
      font-family: var(--font-label);
      font-size: var(--fs-14);
      color: var(--text-secondary);
}

.rb-label--blue {
      color: var(--remoby-blue);
      font-weight: var(--fw-medium);
      letter-spacing: var(--tracking-label);
}

.rb-label--amber {
      color: var(--remoby-amber);
      font-weight: var(--fw-medium);
      letter-spacing: var(--tracking-label);
}

.rb-label--on-dark {
      color: var(--text-on-dark-faint);
}

/* ---------------------------------------------------------------
   7. HEADER
   --------------------------------------------------------------- */
.rb-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(248, 250, 252, .9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-default);
}

.rb-header__inner {
      max-width: var(--rb-content-max);
      margin: 0 auto;
      padding: 0 24px;
      height: var(--rb-header-height);
      display: flex;
      align-items: center;
      gap: 32px;
}

.rb-header__logo {
      display: flex;
      align-items: center;
}

.rb-header__logo img {
      display: block;
      height: 28px;
      width: auto;
}

.rb-nav {
      display: flex;
      align-items: center;
      gap: 32px;
      margin: 0 auto;
      font-weight: var(--fw-medium);
      font-size: var(--fs-16);
}

.rb-nav a {
      color: var(--text-primary);
}

.rb-nav a:hover {
      color: var(--remoby-blue);
}

.rb-header__actions {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-left: auto;
}

.rb-header__login {
      font-weight: var(--fw-medium);
      font-size: var(--fs-16);
      color: var(--text-primary);
}

.rb-header__login:hover {
      color: var(--remoby-blue);
}

/* ---------------------------------------------------------------
   8. HERO
   --------------------------------------------------------------- */
.rb-hero {
      padding: var(--page-gutter) var(--page-gutter) 0;
}

.rb-hero__shell {
      border-radius: var(--radius-20);
      background: var(--hero-gradient);
      box-shadow: var(--ring);
      overflow: hidden;
}

.rb-hero__inner {
      max-width: var(--rb-content-max);
      margin: 0 auto;
      padding: clamp(48px, 5vw, 80px) 24px;
}

.rb-hero__grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: clamp(32px, 4vw, 56px);
      align-items: center;
}

.rb-hero__title {
      margin: 16px 0 0;
      font-weight: var(--fw-semibold);
      font-size: clamp(38px, 4.4vw, 60px);
      line-height: var(--lh-tight);
      letter-spacing: var(--tracking-tight);
      max-width: 620px;
      text-wrap: balance;
}

.rb-hero__lead {
      margin: 20px 0 0;
      font: var(--type-body-lg);
      color: var(--text-secondary);
      max-width: 560px;
      text-wrap: pretty;
}

.rb-hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
}

/* hero KPI strip */
.rb-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid var(--border-strong);
}

.rb-kpi__value {
      font-weight: var(--fw-extrabold);
      font-size: var(--fs-24);
      letter-spacing: var(--tracking-tight);
}

.rb-kpi__label {
      font-family: var(--font-label);
      font-size: var(--fs-14);
      color: var(--text-secondary);
      margin-top: 4px;
}

/* ---------------------------------------------------------------
   9. HERO WIDGET (animated, see script.js)
   --------------------------------------------------------------- */
.rb-widget {
      background: var(--surface-card);
      border-radius: var(--radius-20);
      box-shadow: var(--ring);
      padding: 20px;
      display: grid;
      gap: 16px;
}

.rb-widget__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
}

.rb-player {
      position: relative;
      border-radius: var(--radius-12);
      overflow: hidden;
      background: var(--surface-feature);
}

.rb-player__frame {
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
}

.rb-player__play {
      width: 56px;
      height: 56px;
      border-radius: var(--radius-pill);
      background: var(--white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
}

.rb-player__play::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-left: 16px solid #DC2626;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      margin-left: 5px;
}

.rb-player__bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, .85) 60%);
}

.rb-player__track {
      flex: 1;
      height: 4px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .25);
      overflow: hidden;
}

.rb-player__playhead {
      display: block;
      height: 100%;
      border-radius: var(--radius-pill);
      background: var(--remoby-amber);
      width: 0;
}

.rb-player__time {
      font-family: var(--font-label);
      font-size: var(--fs-12);
      color: var(--white);
}

.rb-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
}

.rb-metric {
      border-radius: var(--radius-12);
      box-shadow: var(--ring);
      padding: 14px;
}

.rb-metric__label {
      font-family: var(--font-label);
      font-size: var(--fs-12);
      color: var(--text-secondary);
}

.rb-metric__value {
      margin-top: 4px;
      font-weight: var(--fw-extrabold);
      font-size: var(--fs-24);
      letter-spacing: var(--tracking-tight);
      font-variant-numeric: tabular-nums;
}

.rb-metric__row {
      margin-top: 4px;
      display: flex;
      align-items: baseline;
      gap: 8px;
}

.rb-metric__value--blue {
      color: var(--remoby-blue);
}

.rb-metric__delta {
      font-family: var(--font-label);
      font-size: var(--fs-12);
      color: var(--remoby-amber);
}

.rb-chart {
      border-radius: var(--radius-12);
      box-shadow: var(--ring);
      padding: 16px 14px 12px;
}

.rb-chart__plot {
      position: relative;
}

.rb-chart__bars {
      display: flex;
      align-items: flex-end;
      gap: 4px;
      height: 64px;
}

.rb-chart__bar {
      flex: 1;
      height: 5%;
      border-radius: 3px 3px 0 0;
      background: var(--slate-200);
      transition: height .18s linear;
}

.rb-chart__marker {
      position: absolute;
      left: 37.5%;
      top: -4px;
      bottom: -4px;
      width: 0;
      border-left: 1px dashed var(--slate-400);
}

.rb-chart__legend {
      display: grid;
      grid-template-columns: 37.5% 1fr;
      margin-top: 10px;
      font-family: var(--font-label);
      font-size: var(--fs-12);
      color: var(--text-muted);
}

.rb-chart__legend-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
}

.rb-chart__legend-start {
      color: var(--remoby-blue);
}

/* ---------------------------------------------------------------
   10. RESULTS SECTION
   --------------------------------------------------------------- */
.rb-results {
      background: var(--surface-card);
      border-top: 1px solid var(--border-default);
      border-bottom: 1px solid var(--border-default);
      margin-top: var(--page-gutter);
}

.rb-section__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(24px, 4vw, 56px);
      align-items: end;
}

.rb-h2 {
      margin: 0;
      font: var(--type-h2);
      font-size: clamp(28px, 3vw, 40px);
      letter-spacing: var(--tracking-tight);
      text-wrap: balance;
}

.rb-lead {
      margin: 0;
      font: var(--type-body-lg);
      color: var(--text-secondary);
      text-wrap: pretty;
}

.rb-estimate {
      margin-top: 40px;
      border-radius: var(--radius-20);
      background: var(--surface-dark);
      overflow: hidden;
}

.rb-estimate__grid {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
}

.rb-estimate__setup {
      padding: clamp(24px, 3vw, 40px);
      background: var(--remoby-navy-slate);
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.rb-estimate__facts {
      display: grid;
      gap: 18px;
}

.rb-fact__label {
      font-family: var(--font-label);
      font-size: var(--fs-14);
      color: var(--text-on-dark-faint);
}

.rb-fact__value {
      margin-top: 4px;
      font-weight: var(--fw-bold);
      font-size: var(--fs-20);
      color: var(--text-on-dark);
}

.rb-estimate__cta {
      margin-top: auto;
}

.rb-estimate__out {
      padding: clamp(24px, 3vw, 40px);
      display: flex;
      flex-direction: column;
      gap: 28px;
}

.rb-estimate__headline {
      display: grid;
      gap: 6px;
}

.rb-estimate__big {
      font-weight: var(--fw-extrabold);
      font-size: clamp(40px, 4.6vw, 64px);
      line-height: var(--lh-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--remoby-amber);
}

.rb-estimate__note {
      font-family: var(--font-label);
      font-size: var(--fs-14);
      color: var(--text-on-dark-muted);
}

.rb-estimate__split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      /* 1px gap = hairline divider */
      background: rgba(255, 255, 255, .12);
      border-radius: var(--radius-16);
      overflow: hidden;
}

.rb-estimate__cell {
      background: var(--surface-dark);
      padding: 20px;
}

.rb-estimate__cell .rb-fact__value {
      margin-top: 6px;
}

.rb-estimate__disclaimer {
      margin: 0;
      font-size: var(--fs-14);
      line-height: var(--lh-relaxed);
      color: var(--text-on-dark-muted);
}

/* ---------------------------------------------------------------
   11. STEPS
   --------------------------------------------------------------- */
.rb-steps__head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
}

.rb-steps__head>div {
      max-width: 680px;
}

.rb-steps__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 40px;
}

.rb-step {
      background: var(--surface-card);
      border-radius: var(--radius-20);
      box-shadow: var(--ring);
      padding: 32px;
}

.rb-step__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-12);
      background: var(--surface-dark);
      color: var(--remoby-amber);
      font-weight: var(--fw-bold);
      font-size: var(--fs-18);
}

.rb-step h3 {
      margin: 24px 0 12px;
      font: var(--type-h3);
}

.rb-step p {
      margin: 0;
      font: var(--type-body);
      line-height: var(--lh-relaxed);
      color: var(--text-secondary);
}

/* ---------------------------------------------------------------
   12. TARGETING
   --------------------------------------------------------------- */
.rb-targeting {
      background: var(--surface-subtle);
      border-top: 1px solid var(--border-default);
      border-bottom: 1px solid var(--border-default);
}

.rb-targeting__intro {
      max-width: 720px;
}

.rb-targeting__intro .rb-lead {
      margin-top: 16px;
}

/* 7 карточек: ряд 1 — четыре по 3 колонки, ряд 2 — три по 4 колонки.
   12-колоночная сетка нужна, чтобы второй ряд заполнялся целиком, без дырки. */
.rb-targeting__grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
      margin-top: 40px;
}

.rb-icon-card--w3 {
      grid-column: span 3;
}

.rb-icon-card--w4 {
      grid-column: span 4;
}

.rb-icon-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 24px;
      border-radius: var(--radius-20);
      background: var(--surface-card);
      box-shadow: var(--ring-outer);
}

.rb-icon-card__icon {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      border-radius: var(--radius-12);
      display: flex;
      align-items: center;
      justify-content: center;
}

.rb-icon-card__icon--blue {
      background: #EBF5FF;
      color: var(--remoby-blue);
}

.rb-icon-card__icon--slate {
      background: var(--surface-subtle);
      color: var(--text-secondary);
}

.rb-icon-card__label {
      font-weight: var(--fw-semibold);
      font-size: var(--fs-24);
      line-height: var(--lh-heading);
      color: var(--text-primary);
      min-width: 0;
}

/* ---------------------------------------------------------------
   13. TRAFFIC TABLE
   --------------------------------------------------------------- */
.rb-traffic__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(32px, 4vw, 56px);
      align-items: start;
}

.rb-traffic__cta {
      margin-top: 28px;
}

.rb-table {
      border-radius: var(--radius-16);
      overflow: hidden;
      box-shadow: var(--ring);
      background: var(--surface-card);
}

.rb-table__row {
      display: grid;
      grid-template-columns: 36px 1fr auto 76px;
      gap: 12px;
      align-items: center;
      padding: 14px 20px;
      background: var(--surface-card);
}

.rb-table__row--alt {
      background: var(--surface-subtle);
}

.rb-table__head {
      padding: 16px 20px;
      background: var(--remoby-navy-slate);
      font-family: var(--font-label);
      font-size: var(--fs-14);
      color: var(--text-on-dark);
}

.rb-table__head span:first-child {
      color: var(--text-on-dark-muted);
}

.rb-table__num {
      font-size: var(--fs-14);
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
}

.rb-table__country {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
}

.rb-table__country b {
      font-weight: var(--fw-semibold);
      font-size: var(--fs-16);
      color: var(--text-primary);
}

.rb-table__code {
      font-family: var(--font-label);
      font-size: var(--fs-12);
      color: var(--slate-400);
}

.rb-table__imps {
      font-size: var(--fs-14);
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
}

.rb-table__cpm {
      font-weight: var(--fw-bold);
      font-size: var(--fs-16);
      color: var(--remoby-navy-deep);
      font-variant-numeric: tabular-nums;
}

.rb-table__align-right {
      text-align: right;
}

.rb-table__foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 20px;
      background: var(--surface-subtle);
      border-top: 1px solid var(--border-default);
      font-family: var(--font-label);
      font-size: var(--fs-12);
      color: var(--text-muted);
}

/* ---------------------------------------------------------------
   14. FAQ
   --------------------------------------------------------------- */
.rb-faq-section {
      background: var(--surface-card);
      border-top: 1px solid var(--border-default);
      border-bottom: 1px solid var(--border-default);
}

.rb-faq-section__grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: clamp(32px, 4vw, 64px);
      align-items: start;
}

.rb-faq {
      border-bottom: 1px solid var(--border-default);
      padding: 24px 0;
}

.rb-faq__q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: 100%;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-align: left;
      font-family: var(--font-primary);
      font-weight: var(--fw-semibold);
      font-size: var(--fs-18);
      line-height: var(--lh-relaxed);
      letter-spacing: var(--tracking-tight);
      color: var(--remoby-navy-deep);
}

.rb-faq__icon {
      position: relative;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
}

.rb-faq__icon::before,
.rb-faq__icon::after {
      content: "";
      position: absolute;
      top: 11px;
      left: 0;
      width: 24px;
      height: 2px;
      background: var(--remoby-navy);
      border-radius: 1px;
}

.rb-faq__icon::after {
      transform: rotate(90deg);
      transition: transform .2s;
}

.rb-faq.is-open .rb-faq__icon::after {
      transform: rotate(0deg);
}

.rb-faq__a {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      transition: max-height .3s, opacity .25s, margin .25s;
}

.rb-faq.is-open .rb-faq__a {
      max-height: 400px;
      opacity: 1;
      margin-top: 16px;
}

.rb-faq__a p {
      margin: 0;
      font: var(--type-body);
      line-height: var(--lh-relaxed);
      color: var(--text-secondary);
}

.rb-faq-section__footnote {
      margin: 24px 0 0;
      font-size: var(--fs-14);
      line-height: var(--lh-relaxed);
      color: var(--text-muted);
}

/* ---------------------------------------------------------------
   15. CLOSING CTA
   --------------------------------------------------------------- */
.rb-cta {
      padding: var(--page-gutter);
}

.rb-cta__shell {
      border-radius: var(--radius-20);
      background: var(--surface-dark);
      padding: clamp(48px, 6vw, 80px) 24px;
}

.rb-cta__inner {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
}

.rb-cta__title {
      margin: 0;
      font: var(--type-h2);
      font-size: clamp(30px, 3.4vw, 48px);
      line-height: var(--lh-snug);
      letter-spacing: var(--tracking-tight);
      color: var(--text-on-dark);
      text-wrap: balance;
}

.rb-cta__lead {
      margin: 0;
      font: var(--type-body-lg);
      color: var(--text-on-dark-muted);
      text-wrap: pretty;
}

.rb-cta__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-top: 8px;
}

.rb-cta__small {
      font-size: var(--fs-14);
      color: var(--text-on-dark-faint);
}

/* ---------------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------------- */
.rb-footer {
      padding: 0 var(--page-gutter) var(--page-gutter);
      background: var(--surface-page);
}

.rb-footer__shell {
      border-radius: var(--radius-20);
      background: var(--surface-dark);
      padding: 60px 100px 32px;
      display: flex;
      flex-direction: column;
      gap: 48px;
}

.rb-footer__top {
      display: flex;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
}

.rb-footer__brand {
      display: flex;
      flex-direction: column;
      gap: 24px;
      min-width: 240px;
}

.rb-footer__brand img {
      display: block;
      height: 30px;
      width: auto;
}

.rb-footer__contacts {
      display: flex;
      flex-direction: column;
      gap: 12px;
}

.rb-footer__contacts a {
      font-size: var(--fs-16);
      color: var(--text-on-dark-muted);
}

.rb-footer__contacts a:hover {
      color: var(--white);
}

.rb-footer__cols {
      display: flex;
      gap: 80px;
      flex-wrap: wrap;
}

.rb-footer__col {
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.rb-footer__col-title {
      font-family: var(--font-label);
      font-weight: var(--fw-medium);
      font-size: var(--fs-14);
      color: var(--remoby-blue);
}

.rb-footer__links {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.rb-footer__links a {
      font-size: var(--fs-16);
      color: var(--text-on-dark);
}

.rb-footer__links a:hover {
      color: var(--remoby-amber);
}

.rb-footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-top: 1px solid rgba(255, 255, 255, .1);
      padding-top: 24px;
}

.rb-footer__social {
      display: flex;
      gap: 16px;
}

.rb-footer__social a {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
}

.rb-footer__copy {
      font-size: var(--fs-14);
      color: var(--text-on-dark-faint);
}

/* ---------------------------------------------------------------
   17. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1000px) {

      .rb-nav,
      .rb-header__login {
            display: none;
      }

      .rb-hero__grid,
      .rb-section__head,
      .rb-estimate__grid,
      .rb-traffic__grid,
      .rb-faq-section__grid {
            grid-template-columns: 1fr;
      }

      .rb-steps__grid {
            grid-template-columns: 1fr;
      }

      .rb-targeting__grid {
            grid-template-columns: repeat(2, 1fr);
      }

      .rb-icon-card--w3,
      .rb-icon-card--w4 {
            grid-column: span 1;
      }

      .rb-kpis {
            grid-template-columns: repeat(2, 1fr);
      }

      .rb-footer__shell {
            padding: 48px 32px 24px;
      }
}

@media (max-width: 620px) {

      .rb-kpis,
      .rb-targeting__grid,
      .rb-estimate__split,
      .rb-metrics {
            grid-template-columns: 1fr;
      }

      .rb-table__row {
            grid-template-columns: 28px 1fr 72px;
      }

      .rb-table__imps {
            display: none;
      }

      .rb-footer__bottom {
            flex-direction: column;
            align-items: flex-start;
      }
}

@media (prefers-reduced-motion: reduce) {
      * {
            animation: none !important;
            transition: none !important;
      }
}