@media screen and (max-width: 960px) {

  .t-menu-burger {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Надпись МЕНЮ */
  .t-menu-burger::before {
    content: "МЕНЮ";
    color: #FFFFFF !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.5px;
    display: block;
    height: 20px;
  }

  /* Бургер */
  .t-menu-burger__icon {
    width: 28px !important;
    height: 20px !important;
  }

  /* Оранжевые полоски */
  .t-menu-burger__icon span,
  .t-menu-burger__icon span::before,
  .t-menu-burger__icon span::after {
    background-color: #F3724B !important;
  }
  
  /* ============================================
   DESIGN SYSTEM — BASE
   Подключать первым, до всех блоков
   ============================================ */

/* ── ТОКЕНЫ ── */
:root {
  /* Цвета */
  --c-dark:      #1D2422;
  --c-secondary: #66706C;
  --c-green:     #10B39A;
  --c-coral:     #FF6848;
  --c-panel:     #123A35;
  --c-bg:        #F7F7F3;

  /* Типографика — размеры заголовков */
  --fs-h1:   clamp(36px, 5vw,   72px);
  --fs-h2:   clamp(28px, 3.8vw, 50px);
  --fs-h3:   clamp(20px, 2.6vw, 34px);
  --fs-h4:   clamp(16px, 1.8vw, 22px);

  /* Типографика — текст */
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 11px;

  /* Заголовки — общие параметры */
  --heading-weight:  700;
  --heading-lh:      1.05;
  --heading-ls:      -0.02em;

  /* Предзаголовок */
  --eyebrow-weight:  700;
  --eyebrow-ls:      0.3em;

  /* Скругления */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* Отступы секций */
  --section-py-lg: 96px;
  --section-py-md: 72px;
  --section-py-sm: 56px;

  /* Кнопка */
  --btn-bg:           #FF6848;
  --btn-bg-hover:     #e5502e;
  --btn-shadow:       0 8px 28px rgba(255, 104, 72, .32);
  --btn-shadow-hover: 0 12px 36px rgba(255, 104, 72, .44);
  --btn-radius:       6px;
  --btn-font-size:    15px;
  --btn-font-weight:  700;
  --btn-py:           14px;
  --btn-px:           28px;

  /* Тени */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .14);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .22);

  /* Transitions */
  --ease-out:       cubic-bezier(.22, 1, .36, 1);
  --duration-fast:   .2s;
  --duration-normal: .35s;
  --duration-slow:   .55s;
}


/* ── АДАПТИВ ОТСТУПОВ СЕКЦИЙ ── */
@media (max-width: 960px) {
  :root {
    --section-py-lg: 72px;
    --section-py-md: 56px;
    --section-py-sm: 40px;
  }
}

@media (max-width: 640px) {
  :root {
    --section-py-lg: 56px;
    --section-py-md: 40px;
    --section-py-sm: 32px;
  }
}


/* ── УТИЛИТЫ: ЗАГОЛОВКИ ── */
.ds-h1 {
  font-family: var(--t-headline-font);
  font-size: var(--fs-h1);
  font-weight: var(--heading-weight);
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
  color: var(--c-dark);
  text-wrap: balance;
}

.ds-h2 {
  font-family: var(--t-headline-font);
  font-size: var(--fs-h2);
  font-weight: var(--heading-weight);
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
  color: var(--c-dark);
  text-wrap: balance;
}

.ds-h3 {
  font-family: var(--t-headline-font);
  font-size: var(--fs-h3);
  font-weight: var(--heading-weight);
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
  color: var(--c-dark);
  text-wrap: balance;
}

.ds-h4 {
  font-family: var(--t-headline-font);
  font-size: var(--fs-h4);
  font-weight: var(--heading-weight);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-dark);
}


/* ── УТИЛИТЫ: ПРЕДЗАГОЛОВОК (EYEBROW) ── */
.ds-eyebrow {
  display: inline-block;
  font-family: var(--t-text-font);
  font-size: var(--fs-eyebrow);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--c-coral);
  margin-bottom: 18px;
}


/* ── УТИЛИТЫ: ТЕКСТ ── */
.ds-body {
  font-family: var(--t-text-font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-secondary);
  text-wrap: pretty;
}

.ds-small {
  font-family: var(--t-text-font);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-secondary);
}


/* ── УТИЛИТЫ: ЦВЕТА ТЕКСТА ── */
.ds-text-dark      { color: var(--c-dark); }
.ds-text-secondary { color: var(--c-secondary); }
.ds-text-green     { color: var(--c-green); }
.ds-text-coral     { color: var(--c-coral); }


/* ── УТИЛИТЫ: КНОПКА ── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: var(--btn-py) var(--btn-px);
  background: var(--btn-bg);
  color: #fff;
  font-family: var(--t-text-font);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition:
    background var(--duration-fast),
    transform   var(--duration-fast),
    box-shadow  var(--duration-fast);
}

.ds-btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.ds-btn:active {
  transform: translateY(0);
}

/* Вторичная кнопка — обводка */
.ds-btn--outline {
  background: transparent;
  color: var(--c-coral);
  border: 1.5px solid var(--c-coral);
  box-shadow: none;
}

.ds-btn--outline:hover {
  background: rgba(255, 104, 72, .08);
  box-shadow: none;
}

/* Зелёная кнопка */
.ds-btn--green {
  background: var(--c-green);
  box-shadow: 0 8px 28px rgba(16, 179, 154, .32);
}

.ds-btn--green:hover {
  background: #0d9d89;
  box-shadow: 0 12px 36px rgba(16, 179, 154, .44);
}

/* Тёмная кнопка */
.ds-btn--dark {
  background: var(--c-dark);
  box-shadow: 0 8px 28px rgba(29, 36, 34, .28);
}

.ds-btn--dark:hover {
  background: #2e3a37;
  box-shadow: 0 12px 36px rgba(29, 36, 34, .38);
}
</style>