/* 1. Глобальный сброс и базовые стили */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Плавная прокрутка для всего сайта */
  scroll-padding-top: 90px; /* Отступ сверху при прокрутке к якорю (высота шапки + немного места) */
}

:root {
  /* Цвета */
  --color-brand-red: #E9033A;
  --color-dark-bg: #03203A;
  --color-light-bg: #ffffff;
  --color-text-dark: #252F41;
  --color-text-light: #ffffff;

  /* Подключение шрифта Onest для типографики макета */
  --font-family-body: 'Onest', sans-serif;
  --font-family-subheader: 'Onest', sans-serif;
}

body {
  font-family: var(--font-family-body);
  background-color: #f4f6f9;
  display: flex;
  flex-direction: column;
  align-items: center;           
}

/* 2. СТИЛИ ХЕДЕРА И ФУТЕРА (Размеры 1280х76) */
.site-header, .site-footer {
  width: 100%;
  max-width: 100%;             
  height: 76px;                  
  padding: 0 28px;               
  
  display: flex;
  align-items: center;           
  justify-content: flex-start;
  gap: 28px;
}

.site-header {
  background-color: var(--color-light-bg);
  border-radius: 0 0 12px 12px;
  position: sticky; /* Фиксирует шапку */
  top: 0;           /* Прижимает к самому верху */
  z-index: 1000;    /* Делает шапку поверх всех остальных элементов */
}

.site-footer {
  background-color: var(--color-dark-bg);
  border-radius: 12px 12px 0 0;
}

/* 3. Логотип и текст */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  flex-shrink: 0;
  display: block;
}

.logo-text {
  font-family: var(--font-family-subheader);
  font-weight: 800;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--color-brand-red); 
  white-space: nowrap;
}

/* 4. Навигация и ссылки */
.nav-menu, .footer-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-link, .footer-link {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-style: normal;
  font-size: 14px;               
  letter-spacing: 0px;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer; /* Меняем курсор на "руку" */
  transition: color 0.3s ease; /* Плавная анимация цвета */
}

.nav-link { color: var(--color-text-dark); }
.footer-link { color: var(--color-text-light); }

/* Плавное загорание красным цветом при наведении */
.nav-link:hover, .footer-link:hover {
  color: var(--color-brand-red);
}

/* Центральное окно конвертера */
.main-card {
  width: 100%;
  max-width: 100%;
  min-height: 384px; /* Заменили жесткий height на min-height */
  height: auto;      /* Теперь блок будет свободно растягиваться вниз */
  background: rgba(122, 153, 184, 0.15);  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Прижимаем всё к верху, отменяем центрирование */
  padding-top: 100px;   /* Фиксированный отступ от верхнего края серого блока */
  padding-bottom: 40px; /* Фиксированный отступ от нижнего края */
  box-sizing: border-box;
  position: relative
}

.card-title {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  text-align: center;
  margin-bottom: 12px; 
}

.card-subtitle {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin-bottom: 24px; 
}

/* Обновленный класс контейнера кнопок */
.card-buttons {
  display: flex;
  align-items: center;
  gap: 2px;            
  /* Добавляем плавность анимации */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Добавляем радиус, чтобы тень повторяла контуры дочерних кнопок */
  border-radius: 8px; 
}

/* Эффект при наведении (всплытие и увеличение, как у карточек) */
.card-buttons:hover {
  transform: translateY(-4px) scale(1.03);
  /* Тень как у карточек. Можно усилить прозрачность, заменив 0.08 на 0.15, если нужно ярче */
  box-shadow: 0 12px 24px rgba(233, 3, 58, 0.25);
}

/* Эффект при нажатии (кнопка слегка проваливается) */
.card-buttons:active {
  transform: translateY(0) scale(0.98); 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
}

.btn-main {
  width: 586px;
  height: 52px;
  background-color: #E9033A;
  border: none;
  border-radius: 8px 0 0 8px; 
  color: #ffffff;
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-ext {
  width: 52px;
  height: 52px;
  background-color: #E9033A;
  border: none;
  border-radius: 0 8px 8px 0; 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-icon {
  display: block;
  flex-shrink: 0;
}

.card-footer-text {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin-top: 12px;
}

/* ========================================================
   5. БЛОК: ПОДДЕРЖИВАЕМЫЕ ФОРМАТЫ
   ======================================================== */
.formats-section {
  width: 100%;
  max-width: 100%;
  height: auto; 
  min-height: 464px;
  background-color: #ffffff;
  padding: 40px; /* Отступ 40px от всех краев сайта */
  display: flex;
  flex-direction: column;
}

.formats-title {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 40px;
}

.formats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.format-card {
  width: 190px;
  max-width: 100%;
  height: 146px;
  background-color: rgba(0, 0, 0, 0.03); 
  border-radius: 12px;
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden; 
  flex-shrink: 0;
  
  /* НОВЫЕ СВОЙСТВА ДЛЯ ССЫЛОК И АНИМАЦИИ */
  text-decoration: none; /* Убирает подчеркивание текста у ссылки */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавность анимации */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ КУРСОРА */
.format-card:hover {
  transform: translateY(-4px) scale(1.03); /* Слегка приподнимает и увеличивает на 3% */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); /* Добавляет мягкую тень */
  z-index: 10; /* Гарантирует, что увеличенная карточка будет поверх соседних */
}

.card-format-title {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  z-index: 2; 
}

.card-arrow {
  margin-left: 8px;
  font-weight: 400;
  color: #252F41;
}

.folder-wrapper {
  position: absolute;
  right: 10px;
  bottom: 4px;
  width: 91px;
  height: 96px;
  z-index: 2; 
}

.folder-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.format-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}

/* --- АДАПТАЦИЯ ЦВЕТОВ (ПАСТЕЛЬНЫЕ ПАПКИ И СВЕЧЕНИЕ КАРТОЧЕК) --- */

/* Красный/Розовый: PDF, SVG */
.card-pdf .folder-img, .card-svg .folder-img  { filter: hue-rotate(305deg) saturate(150%) brightness(95.6%); }
.card-pdf .format-badge, .card-svg .format-badge { background-color: #E9033A; }
.card-pdf, .card-svg { background: radial-gradient(circle at 80% 80%, rgba(233, 3, 58, 0.08) 0%, rgba(0, 0, 0, 0.03) 80%); }

/* Синий: DOCX, BMP */
.card-docx .folder-img, .card-bmp .folder-img {  filter: hue-rotate(188deg) saturate(201%) brightness(110%); }
.card-docx .format-badge, .card-bmp .format-badge { background-color: #3882F6; }
.card-docx, .card-bmp { background: radial-gradient(circle at 80% 80%, rgba(56, 130, 246, 0.08) 0%, rgba(0, 0, 0, 0.03) 80%); }

/* Зеленый: XLXS, WEBP */
.card-xlxs .folder-img, .card-webp .folder-img {   filter: hue-rotate(93deg) saturate(60%) brightness(110%); }
.card-xlxs .format-badge, .card-webp .format-badge { background-color: #10B981; }
.card-xlxs, .card-webp { background: radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.08) 0%, rgba(0, 0, 0, 0.03) 80%); }

/* Фиолетовый: JPEG, TIFF */
.card-jpeg .folder-img, .card-tiff .folder-img { filter: hue-rotate(289deg) saturate(213%) brightness(123%); }
.card-jpeg .format-badge, .card-tiff .format-badge { background-color: #8B5CF6; }
.card-jpeg, .card-tiff { background: radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, rgba(0, 0, 0, 0.03) 80%); }

/* Оранжевый: PNG, GIF */
.card-png .folder-img, .card-gif .folder-img {   filter: hue-rotate(-20deg) saturate(0.8) brightness(1.1); }
.card-png .format-badge, .card-gif .format-badge { background-color: #F58700; }
.card-png, .card-gif { background: radial-gradient(circle at 80% 80%, rgba(245, 135, 0, 0.08) 0%, rgba(0, 0, 0, 0.03) 80%); }

/* Темно-серый плашка / Бежевая папка: HEIC, TXT */
.card-heic .folder-img, .card-txt .folder-img { filter: sepia(3%) hue-rotate(0deg) saturate(27%) brightness(110%); }
.card-heic .format-badge, .card-txt .format-badge { background-color: #1F2937; }
.card-heic, .card-txt { background: radial-gradient(circle at 80% 80%, rgba(31, 41, 55, 0.06) 0%, rgba(0, 0, 0, 0.03) 80%); }

/* Серо-голубой: ICO */
.card-ico .folder-img { filter: hue-rotate(190deg) saturate(64%) brightness(115%); }
.card-ico .format-badge { background-color: #6B7280; }
.card-ico { background: radial-gradient(circle at 80% 80%, rgba(107, 114, 128, 0.08) 0%, rgba(0, 0, 0, 0.03) 80%); }

/* ========================================================
   7. БЛОК: О ФОРМАТЕ
   ======================================================== */
.about-section {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
}

.about-content {
  max-width: 1280px; /* Ограничиваем контейнер, чтобы соответствовать макету */
  padding: 40px 320px 80px 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-title {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 24px;
  text-align: center;
}

.about-text {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: left; /* По макету текст выровнен по левому краю */
}

/* ========================================================
   8. БЛОК: КАК КОНВЕРТИРОВАТЬ
   ======================================================== */
.how-to-section {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  min-height: 332px;
}

.how-to-content {
  width: 100%;
  max-width: 1280px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.how-to-title {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 24px;
  text-align: center;
}

.how-to-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px; /* Расстояние между карточками */
  width: 100%;
}

.how-to-card {
  width: 294px;
  height: 192px;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 12px; /* Скругление углов для красоты (по макету) */
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.how-to-step {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 12px; /* Отступ до текста */
}

.how-to-desc {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}

/* ========================================================
   9. БЛОК: ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ (FAQ)
   ======================================================== */
.faq-section {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
}

.faq-content {
  width: 100%;
  max-width: 1280px;
  padding: 40px 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-title {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 24px;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Расстояние между блоками вопросов (можно изменить, если по макету нужно другое) */
  width: 100%;
  align-items: center;
}

.faq-item {
  width: 100%;
  max-width: 640px;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
}

.faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 24px; /* Теперь отступ со всех сторон 24px, включая правый край */
  color: #1E1E1E;
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  user-select: none;
}

/* Анимация стрелочки */
.faq-arrow {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Обертка для ответа: скрыта через Grid по умолчанию */
.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

/* Контейнер скрывает то, что выходит за его пределы */
.faq-answer {
  overflow: hidden;
}

/* Внутренний текст ответа с отступами */
.faq-answer-content {
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 24px 24px 24px; /* 8px сверху (отступ от вопроса), 24px по бокам и снизу */
}

/* Активное (открытое) состояние */
.faq-item.active .faq-answer-wrapper {
  grid-template-rows: 1fr;
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg); /* Разворот стрелки вверх */
}

/* --- Стили для адаптации под дизайн ТЗ --- */

/* Серое окно при перетаскивании */
.drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.9);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

/* Класс, который добавляется при dragover */
.upload-area.dragover .drop-overlay {
  opacity: 1;
}

/* Относительное позиционирование для родителя overlay */
.upload-area {
  position: relative;
  overflow: hidden; /* Чтобы overlay не выходил за скругленные углы */
}

/* Полоса прогресса форматирования */
.progress-wrapper {
  width: 100%;
  margin-top: 10px;
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background-color: #E2E8F0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background-color: var(--color-brand-red);
  transition: width 0.4s ease;
}

.progress-text {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}

.file-item {
  display: flex;
  flex-direction: column; /* Поменяли на колонку, чтобы уместить прогресс-бар */
  align-items: flex-start;
  padding: 15px;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  margin-bottom: 10px;
}

.file-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.btn-download-single {
  background-color: var(--color-brand-red);
  color: white;
  padding: 6px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.btn-download-single:hover {
  opacity: 0.9;
}

/* ========================================================
   10. СТИЛИ ДЛЯ НОВОГО ОКНА ЗАГРУЗКИ (ИЗ ТЗ)
   ======================================================== */
.custom-file-list {
  width: 640px;
  max-width: 100%;
  height: auto;
  background-color: rgba(122, 153, 184, 0.15);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.custom-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Отступы по вертикали регулируются через элементы внутри, как указано в ТЗ */
}

.custom-file-name {
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #252F41;
  margin: 14px 0 14px 16px; /* Отступ 16px слева, 14px по вертикали */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; /* Позволяет тексту занимать свободное место */
  min-width: 0; /* Предотвращает выталкивание прогресс-бара при длинных именах */
}

.custom-progress-container {
  width: 418px;
  height: 6px;
  background-color: rgba(233, 3, 58, 0.2); /* Более прозрачный красный для фона */
  border-radius: 3px;
  margin: 23px 16px 23px auto; /* 23px по вертикали, 16px справа, слева индивидуален (auto) */
  flex-shrink: 0; /* Запрещаем сужение полосы */
  overflow: hidden;
}

.custom-progress-fill {
  width: 0%;
  height: 100%;
  background-color: #E9033A;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.custom-download-btn {
  background-color: #E9033A;
  color: #ffffff;
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 6px 10px; /* Отступы по вертикали 6px, по бокам 10px */
  border-radius: 6px;
  text-decoration: none;
  margin: 18px 26px 18px auto; /* 18px по вертикали, 26px справа */
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.custom-download-btn:hover {
  opacity: 0.9;
}

/* ========================================================
   11. ЗОНА ПЕРЕТАСКИВАНИЯ (DRAG & DROP)
   ======================================================== */
.drop-zone-overlay {
  display: none; /* Скрыто по умолчанию */
  
  /* Абсолютное позиционирование внутри .main-card */
  position: absolute; 
  top: 40px;
  bottom: 40px;
  left: 40px;
  right: 40px;
  
  /* Цвета по твоему ТЗ */
  background-color: rgba(122, 153, 184, 0.15);
  /* ⚠️ Важное примечание по цвету: если у обводки сделать прозрачность 0.15, 
    то на таком же фоне её вообще не будет видно. Я поставил непрозрачный цвет (1), 
    чтобы пунктир красиво выделялся. Если критично — замени единицу назад на 0.15
  */
  border: 2px dashed rgba(122, 153, 184, 1); 
  border-radius: 12px;
  
  /* Центрирование текста внутри прямоугольника */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;  
  
  /* Типографика */
  color: #252F41;
  font-family: 'Onest', sans-serif;
  font-weight: 600;        
  font-size: 20px;
  line-height: 24px;
  
  z-index: 10;
  pointer-events: none; /* Предотвращает мерцание при наведении на текст */
}



/* Скрываем контент карточки, когда активирована зона сброса */
.main-card.drag-active .card-title,
.main-card.drag-active .card-subtitle,
.main-card.drag-active #upload-default-state,
.main-card.drag-active .custom-file-list,
.main-card.drag-active #main-footer-text {
  display: none !important;
}

/* Показываем саму зону сброса */
.main-card.drag-active .drop-zone-overlay {
  display: flex;
}


/* ========================================================
   6. Адаптивность для мобильных устройств
   ======================================================== */

/* Скрываем бургер на десктопе */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

/* Цвет полосок бургера по ТЗ */
.burger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #252F41; 
  border-radius: 2px;
}

/* Полноэкранное меню */
/* 1. ПЛАВНОЕ МЕНЮ И БЛОКИРОВКА ФОНОВОГО СКРОЛЛА */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh; /* 100dvh предотвращает баги с высотой адресной строки на iOS/Android */
  background-color: #03203A;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  
  overscroll-behavior: none; /* Жестко запрещает прокрутку сайта сквозь открытое меню */
  overflow-y: auto; 
  
  transform: translateY(100%);
  visibility: hidden;
  /* Ключевой фикс: visibility ждет ровно 0.4s перед скрытием, позволяя меню плавно уехать */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
}

.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  /* При открытии visibility срабатывает мгновенно (0s) */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
  width: 100%;
}

.mobile-menu-header .logo {
  min-width: 0; /* Предотвращает выталкивание на сверх-узких экранах */
}

.close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Жесткие размеры не дадут иконке схлопнуться */
  width: 32px;
  height: 32px;
  flex-shrink: 0 !important; 
  
  /* Flexbox-магия: отодвигаем кнопку максимально вправо */
  margin-left: auto; 
}

.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
}



.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 16px;
}

.mobile-nav-link {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: 16px;
  color: #ffffff; /* Белый текст для темного фона */
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-nav-link:hover {
  color: var(--color-brand-red);
}

@media (max-width: 992px) {
  /* Оставляем хедер в одну строку и раскидываем лого и бургер по краям */
  .site-header {
    height: 76px;                
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
  
  /* Прячем десктопное меню, показываем бургер */
  .nav-menu {
    display: none;
  }
  
  .burger-btn {
    display: flex;
  }

  /* Футер оставляем колонкой, как было */
  .site-footer {
    height: auto;                
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
  }
  
  .footer-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .main-card {
    height: auto;
    padding: 40px 20px;
  }

  .card-title {
    font-size: 28px;
    line-height: 34px;
  }

  .card-buttons {
    width: 100%;
    max-width: 640px;
    flex-direction: row;
  }

  .btn-main {
    width: 100%; 
  }

  .formats-section {
    height: auto;
    padding: 40px; /* Сохраняем стабильный отступ 40px от краев экрана на мобильных */
  }
  
  .formats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  
  .format-card {
    width: 190px; /* Оставляем размер 190px для красивого адаптивного переноса */
    height: 146px;
  }
  
  .card-format-title {
    font-size: 20px;
  }
  .about-content {
    padding: 40px 20px; /* Заменяем огромные боковые отступы на 20px */
  }

  .how-to-card {
    max-width: 100%;
    height: auto;
    min-height: 192px;
  }
}