:root {
  /* ========== Размеры (по умолчанию Desktop) ========== */
  /* Радиусы */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-xxl: 40px;

  /* Компонентные радиусы */
  --card-radius: var(--radius-l);
  --block-radius: var(--radius-xl);
  --input-radius: var(--radius-m);
  --grid-radius: var(--radius-s);

  /* Размеры карточек */
  --card-min-width-s: 312px;
  --card-min-width-m: 400px;
  --card-min-width-l: 520px;

  /* Отступы */
  --layout-padding-top: 16px;
  --layout-padding-bottom: 24px;
  --layout-gap: 16px;
  --content-gap: 16px;
  --block-gap: 24px;
  --grid-gap: 24px;

  /* Формы */
  --form-height-L: 52px;
  --form-height-M: 44px;
  --form-height-S: 32px;
  --input-padding: 16px;
  --button-padding: 16px;

  /* Таблицы */
  --cell-padding: 12px;
  --cell-input-padding: 12px;
  --td-min-height: 76px;
  --th-min-height: 48px;

  /* Типография */
  --text-display: 96px;
  --text-h1: 36px;
  --text-h1-line: 40px;
  --text-h2: 28px;
  --text-h2-line: 30px;
  --text-h3: 24px;
  --text-h3-line: 28px;
  --text-h4: 20px;
  --text-h4-line: 24px;
  --text-caption: 20px;
  --text-caption-line: 24px;
  --text-L: 18px;
  --text-L-line: 24px;
  --text-M: 16px;
  --text-M-line: 24px;
  --text-S: 14px;
  --text-S-line: 20px;
  --text-XS: 12px;
  --text-XS-line: 16px;
  --text-XSS: 10px;
  --text-XSS-line: 12px;

  /* ========== Цвета (Dark theme) ========== */
  /* Текст */
  --text-primary: #dcdee6;
  --text-secondary: #a8acb6;
  --text-ordinary: #9296a0;
  --text-inactive: #606269;
  --text-link: #7da6f7;
  --text-invert: #131316;
  --text-fixed: #FFFFFF;
  --white-50: rgba(255, 255, 255, 0.5);

  /* Фоны */
  --bg-light: #161616;
  --bg-normal: #131316;
  --bg-medium: #3d3f45;
  --bg-surface: #1d1d1d;
  --bg-surface-70: rgba(29, 29, 29, 0.7);
  --bg-surface-90: rgba(29, 29, 29, 0.9);
  --bg-inactive: #232428;
  --bg-invert: #ffffff;
  --overlay: rgba(19, 19, 22, 0.3);
  --shadow-preloader: rgba(19, 19, 22, 0.12);
  --alert-bg: rgba(227, 34, 34, 0.1);
  --warning-bg: rgba(236, 184, 2, 0.1);

  /* Границы */
  --border-light: #3d3f45;
  --border-normal: #606269;
  --border-medium: #7a7d87;

  /* Основные цвета */
  --primary-default: #7da6f7;
  /* --primary-hover: #9ebdf9; */
  --primary-hover: #5b8ff5;
  --primary-light: #1b2b4a;
  --primary-tonal: #203256;
  --primary-on-default: #073281;
  --primary-blue: #2B6EF2;
  --primary-pressed: #0d53dd;

  /* Статусы */
  --status-green: #33b960;
  --status-alert: #e32222;
  --status-yellow: #ecb802;
  --status-turquoise: #0ad3c5;

  /* Градиенты */
  --linear-gradient-fon: linear-gradient(236.05deg, rgba(108, 200, 241, 0.2) -16.56%, rgba(120, 166, 255, 0.2) 14.44%, rgba(126, 150, 255, 0.2) 29.12%, rgba(136, 139, 255, 0.2) 45.9%, rgba(151, 140, 255, 0.2) 56.19%, rgba(185, 123, 255, 0.2) 87.71%);
  --linear-gradient-fon-2: linear-gradient(224.87deg, #6CC8F1 0%, #78A6FF 13.46%, #7E96FF 37.98%, #888BFF 56.25%, #978CFF 82.21%, #B97BFF 100%);
  --linear-gradient-fon-3: linear-gradient(217.82deg, rgba(108, 200, 241, 0.5) 8.81%, rgba(120, 166, 255, 0.5) 28.13%, rgba(126, 150, 255, 0.5) 37.29%, rgba(136, 139, 255, 0.5) 47.75%, rgba(151, 140, 255, 0.5) 54.16%, rgba(185, 123, 255, 0.5) 73.81%);
  --linear-gradient-fon-4: linear-gradient(224.87deg, #6CC8F1 0%, #78A6FF 13.46%, #7E96FF 37.98%, #888BFF 56.25%, #978CFF 82.21%, #B97BFF 100%) border-box;
  --linear-gradient-fon-5: linear-gradient(#1F283A, #1F283A) padding-box;
  --linear-gradient-fon-6: linear-gradient(217.82deg, rgba(108, 200, 241, 0.3) 8.81%, rgba(120, 166, 255, 0.3) 28.13%, rgba(126, 150, 255, 0.3) 37.29%, rgba(136, 139, 255, 0.3) 47.75%, rgba(151, 140, 255, 0.3) 54.16%, rgba(185, 123, 255, 0.3) 73.81%);

  /* Отступы */
  --all-top-bottom: 24px;
  --all-left-right: 40px;

  --header-top: 16px;
  --headr-height: 58px;
  --headr-padding: 24px;
  --headr-left-right: 80px;
  --headr-burger: none;

  --title-top: 80px;

  --title-text-margin: 24px;

  --company-margin: 80px;
  --company-indent: 48px;
  --company-indent-2: 24px;
  --company-block: 24px 24px 40px 24px;
  --company-logo: 56px;
  --company-logo-bottom: 24px;
  --company-item-left: 33%;

  --services-indent: 80px;
  --services-text-padding: 24px;
  --services-box: 50%;

  --clients-margin: 80px;
  --clients-indent: 40px;
  --clients-indent-2: 24px;
  --clients-box: 50%;
  --clients-logo: 56px;

  --agency-indent: 48px;
  --agency-indent-2: 24px;
  --agency-item-left: 33%;
  --agency-block: 24px 24px 40px 24px;
  --agency-logo: 56px;
  --agency-top: 0;

  --start-height: 712px;
  --start-indent: 24px;
  --start-padding: 24px 24px 40px 24px;
  --start-padding-top: 80px;

  --all-radius: var(--radius-xxl);
  --all-box-radius: var(--radius-xl);

  --card-logo: 56px;
  --card-indent: 24px;

  --questions-logo: 56px;
  --questions-indent: 24px;
  --questions-padding: 24px 24px 40px 24px;

  --footer-logo: 56px;
}

/* ========== Планшеты (900px - 1280px) ========== */
@media (max-width: 1280px) and (min-width: 900px) {
  :root {
    --padding-radius-xl: 64px;
    --padding-radius-l: 40px;
    --padding-radius-m: 24px;
    --padding-radius-s: 16px;
    --padding-radius-xs: 12px;
    --padding-radius-tile: 16px;

    --text-display: 64px;
    --text-h1: 28px;
    --text-h1-line: 30px;
    --text-h2: 24px;
    --text-h2-line: 28px;
    --text-h3: 20px;
    --text-h3-line: 24px;
    --text-h4: 18px;
    --text-h4-line: 22px;
    --text-caption: 14px;
    --text-caption-line: 16px;

    --card-min-width-s: 264px;
    --card-min-width-m: 320px;
    --card-min-width-l: 320px;

    --form-height-L: 48px;
    --form-height-M: 40px;

    --cell-padding: 8px;
    --cell-input-padding: 8px;
    --td-min-height: 64px;
    --th-min-height: 40px;

    /* Отступы */
    --all-top-bottom: 16px;
    --all-left-right: 24px;

    --header-top: 12px;
    --headr-height: 64px;
    --headr-padding: 12px;
    --headr-left-right: 48px;
    --headr-burger: inherit;

    --title-top: 40px;

    --title-text-margin: 24px;

    --company-margin: 40px;
    --company-indent: 32px;
    --company-indent-2: 16px;
    --company-block: 16px 16px 24px 16px;
    --company-logo: 48px;
    --company-logo-bottom: 16px;
    --company-item-left: 33%;

    --services-indent: 40px;
    --services-text-padding: 16px;

    --clients-margin: 40px;
    --clients-indent: 24px;
    --clients-indent-2: 16px;
    --clients-logo: 48px;

    --agency-indent: 32px;
    --agency-indent-2: 16px;
    --agency-item-left: 33%;
    --agency-block: 16px 16px 24px 16px;
    --agency-logo: 48px;
    --agency-top: 0;

    --start-height: 654px;
    --start-indent: 16px;
    --start-padding: 16px 16px 24px 16px;
    --start-padding-top: 40px;

    --all-radius: var(--radius-xl);
    --all-box-radius: var(--radius-l);

    --card-logo: 48px;
    --card-indent: 16px;

    --questions-logo: 48px;
    --questions-indent: 16px;
    --questions-padding: 16px 16px 24px 16px;

    --footer-logo: 48px;
  }
}

/* ========== Телефоны (< 900px) ========== */
@media (max-width: 899px) {
  :root {
    --padding-radius-xl: 40px;
    --padding-radius-l: 24px;
    --padding-radius-m: 16px;
    --padding-radius-s: 12px;
    --padding-radius-xs: 8px;
    --padding-radius-tile: 12px;

    --text-display: 36px;
    --text-h1: 28px;
    --text-h1-line: 30px;
    --text-h2: 24px;
    --text-h2-line: 28px;
    --text-h3: 20px;
    --text-h3-line: 24px;
    --text-h4: 18px;
    --text-h4-line: 22px;
    --text-caption: 14px;
    --text-caption-line: 16px;

    --card-min-width-s: 264px;
    --card-min-width-m: 320px;
    --card-min-width-l: 320px;

    --layout-padding-top: 0;
    --layout-padding-bottom: 0;
    --layout-gap: 0;

    --form-height-L: 48px;
    --form-height-M: 40px;
    --button-padding: 12px;

    --cell-padding: 8px;
    --cell-input-padding: 8px;
    --td-min-height: 64px;
    --th-min-height: 40px;

    /* Отступы */
    --all-top-bottom: 12px;
    --all-left-right: 16px;

    --header-top: 8px;
    --headr-height: 64px;
    --headr-padding: 8px;
    --headr-left-right: 32px;
    --headr-burger: inherit;

    --title-top: 24px;

    --title-text-margin: 16px;

    --company-margin: 24px;
    --company-indent: 0;
    --company-indent-2: 12px;
    --company-block: 12px 12px 16px 12px;
    --company-logo: 40px;
    --company-logo-bottom: 12px;
    --company-item-left: 100%;

    --services-indent: 24px;
    --services-text-padding: 12px;

    --clients-margin: 24px;
    --clients-indent: 16px;
    --clients-indent-2: 12px;
    --clients-box: 100%;
    --clients-logo: 40px;

    --agency-indent: 0;
    --agency-indent-2: 12px;
    --agency-item-left: 100%;
    --agency-block: 12px 12px 16px 12px;
    --agency-logo: 40px;
    --agency-top: 36px;

    --start-height: 550px;
    --start-indent: 12px;
    --start-padding: 12px 12px 16px 12px;
    --start-padding-top: 24px;

    --all-radius: var(--radius-l);
    --all-box-radius: var(--radius-m);

    --card-logo: 40px;
    --card-indent: 12px;

    --questions-logo: 40px;
    --questions-indent: 12px;
    --questions-padding: 12px 12px 16px 12px;

    --footer-logo: 40px;
  }
}

/* ========== Телефоны (< 600px) ========== */
@media (max-width: 599px) {
  :root {
    --services-box: 100%;
    --start-height: inherit;
  }
}