/* ===== RESET ===== */
/* Сбрасываем стандартные отступы браузера и включаем правильный box model */
*,
*::before,
*::after {
    box-sizing: border-box; /* padding и border входят в размер элемента */
    margin: 0; /* убираем внешние отступы */
    padding: 0; /* убираем внутренние отступы */
}


/* ===== LAYOUT ===== */
/* Делаем так, чтобы html и body занимали всю высоту экрана */
html,
body {
    height: 100%;
}

body {
    display: flex; /* используем flex для управления расположением */
    flex-direction: column; /* элементы располагаются вертикально */
    min-height: 100vh; /* минимум высота = высоте экрана */

    /* системный шрифт для хорошей производительности */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /*  background: #000000; /* чёрный фон сайта */
  /*  color: rgb(114, 54, 54); /* основной цвет текста */
}


/* Контентная область страницы */
.content {
    flex: 1; /* занимает всё свободное пространство */
    padding: 2rem 1rem; /* внутренние отступы сверху/снизу и по бокам */
    max-width: 1200px; /* максимальная ширина контента */
    width: 100%; /* на маленьких экранах занимает всю ширину */
    margin: 0 auto; /* центрирование по горизонтали */
}


/* ===== Loader Overlay ===== */
/* Полноэкранный слой загрузки страницы */
#page-loader {
  position: fixed; /* фиксированная позиция поверх страницы */
  inset: 0; /* равнозначно top:0 right:0 bottom:0 left:0 */
  background: #0f172a; /* тёмный фон загрузчика */
  display: flex; /* центрируем элемент внутри */
  align-items: center; /* центр по вертикали */
  justify-content: center; /* центр по горизонтали */
  z-index: 9999; /* поверх всех элементов */
  transition: opacity 1.5s ease, visibility 1.5s ease; /* плавное исчезновение */
}


/* Круг загрузки */
.loader-circle {
  width: 45px; /* ширина круга */
  height: 45px; /* высота круга */
  border: 3px solid rgba(255,255,255,0.2); /* светлая рамка */
  border-top: 3px solid #22d3ee; /* цвет вращающейся части */
  border-radius: 50%; /* делаем круг */
  animation: spin 1.8s linear infinite; /* бесконечное вращение */
}


/* Анимация вращения */
@keyframes spin {
  to { transform: rotate(360deg); } /* поворот на 360 градусов */
}


/* Когда страница полностью загружена */
body.loaded #page-loader {
  opacity: 0; /* делаем прозрачным */
  visibility: hidden; /* скрываем элемент */
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/**********/
.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.page .card {
    margin: 0 auto;
}