.header {
  position: fixed;
  width: 100%;
  z-index: 99;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-text-dark);
}
.header__inner {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__logo {
  margin-right: auto;
}
.header__nav {
  display: flex;
}
.header__menu {
  display: none;
}
.header__link {
  padding: 10px 16px;
  transition: all 0.3s ease;
}
.header__link:hover {
  background: rgba(0, 82, 204, 0.1);
}
.header__btn {
  border-radius: var(--border-radius);
  border: 1px solid var(--color-text);
  background: var(--color-text-dark);
  display: flex;
  align-items: center;
  padding: 9px 12px;
  margin-left: auto;
}
.hero {
  padding-top: 200px;
  background: url(../images/Auralis_Tradex_Trading_background.jpg) no-repeat center top / cover;
}
.hero__inner {
  display: flex;
  align-items: center;
  gap: 126px;
}
.hero__content {
  max-width: 588px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero__subtitle {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.4px;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hero__stat span {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.48px;
}
.calc {
  background: var(--color-primary);
}
/* --- ФИНАЛЬНЫЙ ИСПРАВЛЕННЫЙ КОД ДЛЯ КНОПКИ --- */

.calc__btn {
  /* --- 1. Центрирование и отступы --- */
  display: block;          /* Обязательно для работы margin: auto */
  width: fit-content;      /* Ширина кнопки по содержимому */
  max-width: 90%;          /* Ограничение, чтобы на мобильных не вылезала за экран */
  margin: 40px auto 0;     /* Отступ сверху 40px, по бокам авто (для центрирования) */

  /* --- 2. Размер и внешний вид --- */
  padding: 18px 40px;      /* Делаем кнопку крупнее (вертикальные и горизонтальные отступы) */
  border-radius: 8px;      /* Слегка скругляем углы */
  font-size: 20px;         /* Увеличиваем шрифт */
  font-weight: 700;        /* Делаем текст жирным */
  text-align: center;      /* Центрируем текст внутри кнопки */
  letter-spacing: 0.5px;   /* Немного увеличим расстояние между буквами */

  /* --- 3. Цвета и эффекты --- */
  background-color: rgb(78, 78, 78) ; /* Основной синий цвет бренда */
  color: var(--color-text-dark);          /* Белый цвет текста */
  border: 4px solid black;                           /* Убираем черную рамку */
  box-shadow: 0 5px 15px rgba(0, 82, 204, 0.35); /* Добавляем тень для объема */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Плавные переходы */
  cursor: pointer;
}

/* --- 4. Эффект при наведении мыши --- */
.calc__btn:hover {
  transform: translateY(-3px); /* Слегка "приподнимаем" кнопку */
  box-shadow: 0 8px 25px rgba(0, 82, 204, 0.45); /* Делаем тень более выраженной */
}
.warum {
  background-color: var(--color-background);
}
.warum__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.warum__item {
  width: calc(32% - 16px);
  border-radius: var(--border-radius);
  border-top: 1px solid var(--color-border);
  background: var(--color-text-dark);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.liveProfit {
  background-color: var(--color-background);
}
.steps__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.steps__item {
  display: flex;
  align-items: center;
  gap: 24px;
  transition: opacity 0.2s ease-in-out;
}
.steps__item.active {
  opacity: 1;
}
.step__img {
  border-radius: var(--border-radius);
  background: #212529;
  padding: 32px;
}
.steps__item-title {
  color: var(--color-primary);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}
.steps__item-description {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1.28px;
  max-width: 384px;
}
.step__btn {
  /* --- 1. Центрирование и отступы --- */
  display: block;          /* Обязательно для работы margin: auto */
  width: fit-content;      /* Ширина кнопки по содержимому */
  max-width: 90%;          /* Ограничение, чтобы на мобильных не вылезала за экран */
  margin: 40px auto 0;     /* Отступ сверху 40px, по бокам авто (для центрирования) */

  /* --- 2. Размер и внешний вид --- */
  padding: 18px 40px;      /* Делаем кнопку крупнее (вертикальные и горизонтальные отступы) */
  border-radius: 8px;      /* Слегка скругляем углы */
  font-size: 20px;         /* Увеличиваем шрифт */
  font-weight: 700;        /* Делаем текст жирным */
  text-align: center;      /* Центрируем текст внутри кнопки */
  letter-spacing: 0.5px;   /* Немного увеличим расстояние между буквами */

  /* --- 3. Цвета и эффекты --- */
  background-color: #4e4e4e ; /* Основной синий цвет бренда */
  color: var(--color-text-dark);          /* Белый цвет текста */
  border: 4px solid black;                           /* Убираем черную рамку */
  box-shadow: 0 5px 15px rgba(0, 82, 204, 0.35); /* Добавляем тень для объема */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Плавные переходы */
  cursor: pointer;
}
.review {
  overflow: hidden;
  background: var(--color-primary);
}
.review__swiper {
  max-width: 996px !important;
  overflow: visible !important;
}
.review__item {
  border-radius: var(--border-radius);
  background: #7a7a7a;
  padding: 60px;
}
.review__text {
  line-height: 24px;
  margin: 16px 0 48px;
}
.review__user {
  display: flex;
  align-items: center;
  gap: 16px;
}
.review__user img {
  border-radius: 50%;
}
.review__name {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.96px;
}
.swiper-pagination {
  top: 105% !important;
}
.swiper-pagination-bullet-active {
  scale: 1.75 !important;
}
.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.faq__item {
  border-radius: var(--border-radius);
  border-top: 1px solid #495057;
  background: #343A40;
  width: 100%;
  padding: 32px;
  cursor: pointer;
}
.faq__name {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1.28px;
  position: relative;
}
.faq__name::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("../images/icon_5.svg");
  filter: invert(1);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-in-out;
}
.faq__item.active .faq__name::after {
  transform: translateY(-50%) rotate(180deg);
}
.faq__answer {
  display: none;
  margin-top: 16px;
}
.register {
  padding-top: 120px;
}
.register .hero__inner {
  align-items: flex-start;
}
.register__img {
  position: absolute;
  bottom: -100px;
}
.footer {
  border-top: 1px solid #495057;
  padding-block: 48px;
  background: #767676;
}
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.footer__linkWrp {
  display: flex;
  gap: 24px;
}
.protect {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.protect__item {
  pointer-events: auto;
  background: #222;
  color: #fff;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 16px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  opacity: 0.85;
  transition: opacity 0.3s, transform 0.3s;
  text-decoration: none;
  border: 1px solid #fff;
}
.protect__item:hover {
  opacity: 1;
  background: #444;
}
.protect.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
@media (max-width: 700px) {
  .protect__item {
    font-size: 11px;
    padding: 3px 8px;
  }
}
/* ... медиа-запросы ... */
@media (width<1200px) {
    .hero__inner { flex-direction: column; gap: 24px; }
    .register { padding-bottom: 200px; }
    .register__img { bottom: -200px; width: 400px; left: 50%; transform: translateX(-50%); }
    .register .hero__inner { align-items: center; }
}
@media (width<1000px) {
    .header__nav { position: fixed; top: -100%; left: 0; width: 100%; background: var(--color-text-dark); flex-direction: column; justify-content: center; gap: 8px; padding: 20px; transition: all 0.3s ease-in-out; }
    .header__nav.open { top: 0; }
    .header__link { padding: 16px 32px; max-width: 400px; width: 100%; margin: 0 auto; text-align: left; }
    .header__btn { width: 100%; max-width: 400px; margin: 0 auto !important; justify-content: center; }
    .header__menu { display: block; }
    .warum__item { width: calc(50% - 16px); }
    .review__swiper { max-width: calc(100% - 20px) !important; }
    .faq__name { font-size: 24px; padding-right: 20px; }
    .faq__name::after { right: 0px; }
}
@media (width<700px) {
    .hero { padding-top: 100px; }
    .hero__content { gap: 16px; }
    .hero__stats { display: flex; justify-content: space-between; }
    .hero__stat span { font-size: 20px; line-height: 26px; letter-spacing: -0.4px; }
    .warum__item { width: 100%; padding: 16px; }
    .steps__inner, .steps__item { flex-direction: column; gap: 16px; }
    .step__img { padding: 24px; }
    .review__item { padding: 16px; }
    .review__text { margin-bottom: 16px; }
    .review__user img { width: 60px; }
    .faq__item { padding: 16px; }
    .register { padding-top: 32px; }
    .footer { padding: 32px 0; }
    .footer__top { flex-direction: column; align-items: center; gap: 24px; margin-bottom: 24px; }
}
.faq__item, .faq__name, .faq__answer {
  color: #fff !important;
}