.title-1 {

  font-weight: 800;

  font-size: 108px;

  line-height: 90%;
  letter-spacing: -1%;

}

.title-2 {

  font-weight: 800;

  font-size: 56px;

  line-height: 110.00000000000001%;
  letter-spacing: -1%;

}

.title-2-accent {

  font-weight: 600;

  font-size: 64px;

  line-height: 110.00000000000001%;
  letter-spacing: -2%;
}

.title-3 {

  font-weight: 700;

  font-size: 26px;

  line-height: 120%;
  letter-spacing: -0.5%;

}

.title-4 {

  font-weight: 500;

  font-size: 24px;

  line-height: 125%;
  letter-spacing: 0%;

}

.title-4-accent {

  font-weight: 800;

  font-size: 24px;

  line-height: 110.00000000000001%;
  letter-spacing: -1%;

}

.title-card-l {

  font-weight: 700;

  font-size: 28px;

  line-height: 120%;
  letter-spacing: -1%;

}

.title-card-s {

  font-weight: 700;

  font-size: 22px;

  line-height: 125%;
  letter-spacing: -3%;

}

.text-lead {

  font-weight: 500;

  font-size: 26px;

  line-height: 148%;
  letter-spacing: 0%;

}

.text-l {

  font-weight: 400;

  font-size: 20px;

  line-height: 150%;
  letter-spacing: 0%;

}

.text {

  font-weight: 400;

  font-size: 18px;

  line-height: 150%;
  letter-spacing: 0%;

}

.text-caption {

  font-weight: 400;

  font-size: 16px;

  line-height: 100%;
  letter-spacing: 0%;

}

.text-caption-sm {

  font-weight: 400;

  font-size: 14px;

  line-height: 100%;
  letter-spacing: 0%;

}

.text-display {

  font-weight: 800;

  font-size: 220px;

  line-height: 230px;
  letter-spacing: -5%;

}

.text-crumbs {

  font-weight: 700;

  font-size: 14px;

  line-height: 20px;
  letter-spacing: 2%;

}

.text-badge {

  font-weight: 600;

  font-size: 15px;

  line-height: 100%;
  letter-spacing: 32%;

}

.text-number {
  font-family: var(--font-add);
  font-weight: 700;

  font-size: 92px;

  line-height: 100%;
  letter-spacing: -3%;

}

@media (max-width: 1080px) {
  .title-1 {

    font-weight: 800;

    font-size: 40px;

    line-height: 40px;
    letter-spacing: 0%;

  }

  .title-2 {

    font-weight: 800;

    font-size: 28px;

    line-height: 32px;
    letter-spacing: 0%;


  }

  .title-2-accent {

    font-weight: 600;

    font-size: 28px;

    line-height: 32px;
    letter-spacing: 0%;

  }

  .title-3 {

    font-weight: 700;

    font-size: 24px;

    line-height: 28px;
    letter-spacing: 0%;

  }

  .title-4 {

    font-weight: 500;

    font-size: 18px;

    line-height: 24px;
    letter-spacing: 0%;

  }

  .title-4-accent {

    font-weight: 800;

    font-size: 18px;

    line-height: 24px;
    letter-spacing: 0%;

  }

  .title-card-l,
  .title-card-s {

    font-weight: 700;

    font-size: 20px;

    line-height: 26px;
    letter-spacing: 0%;

  }

  .text-lead {

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;
    letter-spacing: 0%;

  }

  .text-l {

    font-weight: 400;

    font-size: 14px;

    line-height: 21px;
    letter-spacing: 0%;

  }

  .text {

    font-weight: 400;

    font-size: 14px;

    line-height: 21px;
    letter-spacing: 0%;

  }

  .text-caption {

    font-weight: 500;

    font-size: 14px;

    line-height: 20px;
    letter-spacing: 0%;

  }

  .text-caption-sm {

    font-weight: 400;

    font-size: 12px;

    line-height: 16px;
    letter-spacing: 0%;

  }

  .text-display {

    font-weight: 800;

    font-size: 128px;

    line-height: 140px;
    letter-spacing: -5%;

  }

  .text-crumbs {

    font-weight: 700;

    font-size: 12px;

    line-height: 18px;
    letter-spacing: 2%;

  }

  .text-badge {

    font-weight: 600;

    font-size: 12px;

    line-height: 16px;
    letter-spacing: 15%;

  }

  .text-number {

    font-weight: 700;

    font-size: 48px;

    line-height: 48px;
    letter-spacing: 0%;

  }
}

/* ——— Кнопки ———
   .btn--outline   — на зелёном фоне («Обсудить проект»)
   .btn--solid     — на светлом фоне («Отправить заявку»)
   .btn--mint      — на тёмном фоне («Написать на почту»)
   .btn--secondary — вторичная на светлом фоне («Настроить», «Сохранить настройки»)
   Цвета меняются за 180 мс, hover — только у мыши (@media (hover: hover)), нажатие — scale(.98) за 100 мс.
   Disabled (:disabled, [aria-disabled="true"], .btn--disabled) — полупрозрачная, без hover и без масштаба. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 73px;
  padding: 0 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 120%;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 100ms ease-out;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn--disabled {
  opacity: .45;
  cursor: not-allowed;
}

.btn:not(:disabled, [aria-disabled="true"], .btn--disabled):active {
  transform: scale(.98);
}

/* Фокус с клавиатуры — кольцо 2px с отступом 4px; цвет — под фон кнопки */
.btn:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 4px;
}

.btn--outline:focus-visible,
.btn--mint:focus-visible {
  outline-color: var(--bg-white);
}

.btn--outline {
  background: var(--accent-green);
  border-color: var(--accent-mint);
  color: var(--accent-mint);
  box-shadow: 0px 4px 4px 0px #00000040;
}

.btn--solid {
  background: var(--accent-green);
  color: var(--bg-white);
  height: 56px;
  border-width: 3px;
}

.btn--mint {
  background: var(--accent-mint);
  color: var(--text-heading);
  height: 56px;
  border-width: 3px;
}

.btn--secondary {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

@media (hover: hover) {
  .btn--outline:not(:disabled, [aria-disabled="true"], .btn--disabled):hover,
  .btn--solid:not(:disabled, [aria-disabled="true"], .btn--disabled):hover {
    background: var(--bg-dark);
  }

  .btn--mint:not(:disabled, [aria-disabled="true"], .btn--disabled):hover {
    background: var(--bg);
  }

  .btn--secondary:not(:disabled, [aria-disabled="true"], .btn--disabled):hover {
    background: color-mix(in srgb, var(--accent-mint) 40%, transparent);
  }
}

.btn--outline:not(:disabled, [aria-disabled="true"], .btn--disabled):active,
.btn--solid:not(:disabled, [aria-disabled="true"], .btn--disabled):active {
  background: var(--text-heading);
}

.btn--mint:not(:disabled, [aria-disabled="true"], .btn--disabled):active {
  background: #A8E6BECC;
}

.btn--secondary:not(:disabled, [aria-disabled="true"], .btn--disabled):active {
  background: color-mix(in srgb, var(--accent-mint) 70%, transparent);
}

@media (max-width: 1080px) {
  .btn {
    min-height: 52px;
    padding: 0 24px;
    font-size: 16px;
  }
}


/* ——— Ссылка на тёмном фоне ———
   Размер задаётся классом текста: S — text-caption-sm (подвал), M — text (меню, контакты в шапке), L — text-l.
   Цвет меняется за 180 мс, hover — только у мыши, без масштаба при нажатии */
.link {
  color: var(--bg-white);
  text-underline-offset: .2em;
  border-radius: 6px;
  transition: color 180ms ease-out;
  font-weight: 500;
}

@media (hover: hover) {
  .link:hover {
    color: var(--accent-mint);
    text-decoration: underline;
  }
}

.link:active {
  color: color-mix(in srgb, var(--accent-mint) 60%, transparent);
}

.link:focus-visible {
  outline: 2px solid var(--accent-mint);
  outline-offset: 4px;
}

/* ——— Компактная кнопка (баннер и окно cookie) ——— */
.btn--sm {
  min-height: 48px;
  padding: 0 24px;
  font-size: 16px;
}

@media (max-width: 1080px) {
  .btn--sm {
    min-height: 48px;
    font-size: 16px;
  }
}


/* ——— Переключатель: <button role="switch" aria-checked> ———
   Обязательный (всегда включён) — aria-disabled="true", бледно-зелёный и не переключается */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 14px;
  background: var(--text-tip);
  cursor: pointer;
  transition: background-color .2s;
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-white);
  transition: transform .2s;
}

.switch[aria-checked="true"] {
  background: var(--accent-green);
}

.switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

.switch[aria-disabled="true"] {
  background: color-mix(in srgb, var(--accent-green) 45%, var(--bg));
  cursor: default;
}

.switch:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}