/* ============================================================
       DESIGN TOKENS — строго по design/DESIGN.md
       ============================================================ */
    :root {
      /* Colors — Primary */
      --c-blue:        #0056D2;
      --c-blue-dark:   #003D99;
      --c-navy:        #0D0F12;

      /* Colors — Accent */
      --c-slate:       #48546E;
      --c-charcoal:    #404B5E;

      /* Colors — Neutrals */
      --c-white:       #FFFFFF;
      --c-gray-50:     #F2F5FA;
      --c-gray-55:     #F0F6FF;
      --c-gray-100:    #E9EEF7;
      --c-gray-200:    #DAE1ED;
      --c-gray-300:    #C1CBDB;
      --c-gray-400:    #A7B4C9;
      --c-gray-500:    #8495B0;
      --c-gray-600:    #5E6F92;
      --c-dark-333:    #333333;

      /* Colors — Feedback */
      --c-error:       #BF0000;
      --c-green:       #10B981;
      --c-gold:        #F59E0B;

      /* Typography — Source Sans Pro */
      --font-primary:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-secondary:'Open Sans', 'Helvetica Neue', Arial, sans-serif;

      /* Type Scale */
      --text-display-xl:  64px;
      --text-display-lg:  48px;
      --text-display-md:  44px;
      --text-display-sm:  40px;
      --text-h1:          36px;
      --text-h2:          28px;
      --text-h3:          24px;
      --text-h4:          20px;
      --text-h5:          14px;
      --text-body-lg:     26px;
      --text-body-md:     22px;
      --text-body:        20px;
      --text-body-sm:     18px;
      --text-body-xs:     16px;
      --text-caption:     14px;

      /* Border Radius */
      --r-input:   4px;
      --r-btn:     8px;
      --r-card:    16px;
      --r-pill:    24px;
      --r-circle:  50px;

      /* Shadows — Elevation System */
      --shadow-raised:   rgba(0,0,0,0.08)  0px 1px 2px;
      --shadow-floating: rgba(0,0,0,0.12)  0px 4px 8px;
      --shadow-modal:    rgba(0,0,0,0.20)  0px 8px 16px;
      --shadow-dialog:   rgba(0,0,0,0.30)  0px 16px 32px;
      --shadow-sticky:   rgba(0,0,0,0.10)  0px 2px 4px;

      /* Spacing Scale */
      --sp-4:   4px;
      --sp-8:   8px;
      --sp-12:  12px;
      --sp-16:  16px;
      --sp-20:  20px;
      --sp-24:  24px;
      --sp-32:  32px;
      --sp-44:  44px;
      --sp-48:  48px;
      --sp-64:  64px;
      --sp-120: 120px;

      /* Container */
      --container: 1200px;

      /* Transitions */
      --t: 0.18s ease;
    }

    /* ============================================================
       RESET & BASE
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--font-primary);
      font-size: var(--text-body-sm);
      font-weight: 400;
      line-height: 1.5;
      color: var(--c-navy);
      background: var(--c-white);
    }
    img { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    /* ============================================================
       LAYOUT
       ============================================================ */
    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--sp-48);
    }
    .section { padding: var(--sp-64) 0; }
    .section--tint { background: var(--c-gray-50); }
    .section--dark { background: var(--c-navy); color: var(--c-white); }
    .section--blue-tint { background: var(--c-gray-55); }

    /* ============================================================
       TYPOGRAPHY UTILITIES
       ============================================================ */
    .overline {
      font-size: var(--text-caption);
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--c-blue);
      display: block;
      margin-bottom: var(--sp-12);
    }
    .section--dark .overline { color: #93C5FD; }

    .display-lg {
      font-size: clamp(32px, 5vw, var(--text-display-lg));
      font-weight: 600;
      line-height: 1.15;
      color: var(--c-navy);
    }
    .display-md {
      font-size: clamp(28px, 4vw, var(--text-display-md));
      font-weight: 600;
      line-height: 1.15;
      color: var(--c-navy);
    }
    .h1 {
      font-size: clamp(28px, 4.5vw, var(--text-h1));
      font-weight: 600;
      line-height: 1.2;
      color: var(--c-navy);
    }
    .h2 {
      font-size: clamp(22px, 3vw, var(--text-h2));
      font-weight: 600;
      line-height: 1.25;
      color: var(--c-navy);
    }
    .h3 {
      font-size: var(--text-h3);
      font-weight: 600;
      line-height: 1.3;
    }
    .h4 {
      font-size: var(--text-h4);
      font-weight: 600;
      line-height: 1.3;
    }
    .section--dark .display-lg,
    .section--dark .h1,
    .section--dark .h2,
    .section--dark .h3 { color: var(--c-white); }

    .body-md { font-size: var(--text-body-md); line-height: 1.6; color: var(--c-slate); }
    .body { font-size: var(--text-body); line-height: 1.6; color: var(--c-slate); }
    .body-sm { font-size: var(--text-body-sm); line-height: 1.6; color: var(--c-slate); }
    .body-xs { font-size: var(--text-body-xs); line-height: 1.5; color: var(--c-slate); }
    .caption { font-size: var(--text-caption); color: var(--c-gray-500); line-height: 1.4; }

    /* ============================================================
       BUTTONS — Design System
       ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-8);
      font-family: var(--font-primary);
      font-size:16px;
      font-weight: 600;
      line-height: 1.3;
      padding: var(--sp-8) var(--sp-16);
      border-radius: var(--r-btn);
      border: none;
      cursor: pointer;
      transition: background var(--t), box-shadow var(--t), transform var(--t), color var(--t);
      text-decoration: none;
      white-space: nowrap;
      min-height: 40px;
    }
    /* Primary */
    .btn-primary {
      background: var(--c-blue);
      color: var(--c-white);
      box-shadow: var(--c-blue) 0px 0px 0px 1px inset;
    }
    .btn-primary:hover  { background: var(--c-blue-dark); }
    .btn-primary:active { box-shadow: var(--c-blue) 0px 0px 0px 2px inset; background: var(--c-blue); }
    .btn-primary:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
    .btn-primary:disabled { background: var(--c-gray-300); color: var(--c-gray-500); cursor: not-allowed; box-shadow: none; }

    /* Secondary */
    .btn-secondary {
      background: transparent;
      color: var(--c-slate);
    }
    .btn-secondary:hover  { background: var(--c-gray-50); }
    .btn-secondary:active { background: var(--c-gray-100); }
    .btn-secondary:disabled { color: var(--c-gray-300); cursor: not-allowed; }

    /* Ghost / Outline */
    .btn-ghost {
      background: transparent;
      color: var(--c-blue);
      box-shadow: var(--c-blue) 0px 0px 0px 1px inset;
    }
    .btn-ghost:hover  { background: var(--c-gray-55); }
    .btn-ghost:active { box-shadow: var(--c-blue) 0px 0px 0px 2px inset; }
    .btn-ghost:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

    /* Pill */
    .btn-pill {
      background: var(--c-blue);
      color: var(--c-white);
      border-radius: var(--r-pill);
      box-shadow: var(--c-blue) 0px 0px 0px 1px inset;
    }
    .btn-pill:hover { background: var(--c-blue-dark); }

    /* Ghost-white for dark backgrounds */
    .btn-ghost-white {
      background: rgba(255,255,255,0.12);
      color: var(--c-white);
      box-shadow: rgba(255,255,255,0.4) 0px 0px 0px 1px inset;
    }
    .btn-ghost-white:hover { background: rgba(255,255,255,0.22); }

    /* White button for dark hero backgrounds */
    .btn-white {
      background: #ffffff;
      color: var(--c-navy);
      box-shadow: none;
      font-weight: 700;
    }
    .btn-white:hover { background: #EFF6FF; color: var(--c-blue); }
    .btn-white:active { background: #DBEAFE; }

    /* Sizes */
    .btn-lg {
      font-size: 17px;
      font-weight: 600;
      padding: 15px 32px;
      min-height: 52px;
      border-radius: var(--r-btn);
    }
    .btn-sm {
      font-size:16px;
      font-weight: 600;
      padding: 6px 14px;
      min-height: 32px;
    }
    .btn-full { width: 100%; justify-content: center; }

    /* ============================================================
       BADGES — Design System
       ============================================================ */

/* ============================================================
   QA FIXES — Step 21 — main.css
   ============================================================ */

/* FIX 1: body overflow-x — предотвращаем горизонтальный scroll страницы */
html, body { overflow-x: clip; }

/* FIX 2: safe-area для sticky-mob и FAB на iPhone с notch */
.sticky-mob {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.fab-callback {
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

/* FIX 3: mob-menu — полный экран с dvh для Safari.
   JS использует класс 'open' (не 'is-open'). */
.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 980;
  visibility: hidden;
  pointer-events: none;
  background: rgba(8,23,58,0.5);
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mob-menu.open {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
}
.mob-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 100vw);
  height: 100dvh;
  background: var(--c-white);
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow: hidden;
}
.mob-menu.open .mob-panel {
  transform: translateX(0);
}