*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100svh;
  overflow: hidden;
}

body {
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  color: #f0f6fc;
  /* background: linear-gradient(to top, #87ceeb 0%, #5b9bd5 35%, #2d5a87 65%, #1e3a5f 100%); */
  /* background: linear-gradient(
  to top, 
  #fdfcf0 0%,    Очень мягкий теплый отсвет (почти белый)
  #a8daef 20%,   Возвращаемся в твой светлый голубой
  #5b9bd5 45%,   Твой основной синий
  #2d5a87 75%, 
  #1e3a5f 100%
); */
/* background: linear-gradient(
  to top, 
  #fff9c4 0%,    Нежно-жёлтый (блик солнца)
  #ffffff 20%,   Чистый белый (центр яркости)
  #add8e6 50%,   Светло-голубой (небесный)
  #5b9bd5 100%   Твой основной синий верх
); */
  /*background: linear-gradient(to top,
   #fff9c4 0%,
   #fdfcf0 0%,
   #87ceeb 15%,
   #5b9bd5 35%,
   #2d5a87 65%,
   #1e3a5f 100%
  );*/

  /* background-color: #c68b59; */
  background-color: #0d1117;
  
  -webkit-font-smoothing: antialiased;
}

/*.frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  max-width: 1200px;
  margin: 0 auto;
}*/

.frame {
  /*height: 100svh; Занимаем всю высоту экрана*/
  height: auto; 
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  /*justify-content: flex-start;*/ /* Прижимаем всё к верху, чтобы потом центрировать hero */
  /* padding: clamp(1.25rem, 4vw, 2.5rem); */
  padding: 3svw;
  padding-top: 0;
  /*padding-bottom: 10svh;*/ /* Переопределяем только низ */
  /* max-width: 1600px; */
  margin: 0 auto;

  /* background-color: #c68b59; */
  /* transition: background-image 5s ease-in-out; */

  background-color: #0d1117;

  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Этот класс добавит JS, когда ВСЁ (и фон, и картинки) загрузится */
.frame--ready {
  background-image: url('img/Table.png');
  background-repeat: repeat;
  background-position: center center;
  background-size: 100svw auto;
  background-attachment: scroll;
  opacity: 1 !important;
}


.loader-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0d1117; /* Тот же цвет, что у body */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* transition: opacity 0.4s ease, visibility 0.4s; */
  /* transition: none !important; */
  /* opacity: 0; */
  /* visibility: hidden; */
  /* transition: opacity 0.3s ease 0.5s, visibility 0.3s ease 0.5s; */
  /* visibility: visible; */
  transition: opacity 0.5s ease, visibility 0.5s;
}

/* Состояние "показать" (добавь этот класс в HTML по умолчанию или через JS сразу) */
.loader-visible {
  opacity: 1;
  visibility: visible;
}

/* Когда всё загрузится, плавно убираем лоадер */
.loader-hidden {
  opacity: 0;
  visibility: hidden;
  /* display: none !important; */
  /* transition: none !important; */
}

/* Принудительно гасим спиннер внутри скрытого лоадера */
.loader-hidden .spinner {
  display: none !important;
}

/* Тот самый "яблочный" спиннер (простой круг с разрезом) */
.spinner {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top: 2px solid #f0f6fc;
  border-radius: 50%;
  /* animation: spin 0.8s linear infinite; */
  opacity: 0;
  animation: spin 0.8s linear infinite, fadeIn 0.3s ease 0.5s forwards;
  transition: none !important;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  /* gap: 1.75rem; */
}

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo-text {
  font-family: inherit;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo-text--moon {
  color: #f4e4c1;
}

.logo-main {
  color: #f0f6fc;
}

.logo-sub {
  color: #7ba3c4;
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.logo-img {
  height: 28px;
  width: 28px;
  display: block;
  opacity: 0.95;
}

.logo:hover .logo-img {
  opacity: 1;
}

.nav {
  display: flex;
  gap: 1.75rem;
}

.nav a {
  color: #b8d4e8;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #f0f6fc;
}

.is-hidden {
  display: none !important;
}

.tld {
  color: #7ba3c4;
  font-weight: 500;
}

/* Hero */
.hero {
  flex-grow: 1;

  /* Центрируем всё содержимое */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Гибкий отступ между устройствами */
  /* gap: 1vw;  */
  
  /* Занимает всю ширину, но не больше контента */
  width: 100%;
  max-width: 1600px; 
  margin: 0 auto;
  padding: 0 0px;
}

/* Обертки div (left, middle, right) */
.hero-left, .hero-middle, .hero-right {
  /* Разрешаем обертке сжиматься (1), запрещаем расти (0) */
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
}

.hero-img {
  /* Главное: картинка масштабируется под родителя, сохраняя свои пропорции */
  display: block;
  max-width: 100%;
  height: auto;
  /* Улучшаем четкость при уменьшении */
  image-rendering: -webkit-optimize-contrast; 
  visibility: hidden; /* Скрываем, но резервируем место */
}

/* Класс для мгновенного показа */
.hero-img--ready {
  visibility: visible;
}

/*.hero-img--ipad {
  width: clamp(250px, 45vw, 450px);
  aspect-ratio: 2736 / 2146;
  height: auto;
}

.hero-img--mac {
  width: clamp(250px, 45vw, 450px);
  aspect-ratio: 2736 / 2146;
  height: auto;
}
.hero-img--iphone {
  width: clamp(120px, 22vw, 190px);
  aspect-ratio: 1052 / 2012;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}*/

.hero-img--ipad {
  width: 100%;
}

.hero-img--mac {
  width: 100%;
}

.hero-img--iphone {
  width: 100%;
}

.store-badge {
  display: inline-block;
  line-height: 0;
}

.store-badge img {
  display: block;
  height: 40px;
  width: auto;
}

.store-links {
  border-collapse: collapse;
  margin: 0;
}

.store-links td {
  padding: 0;
  vertical-align: middle;
}

.store-links a {
  display: inline-block;
  line-height: 0;
}

.store-links img {
  display: block;
  height: 40px;
  width: auto;
}


/* .hero-img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

@media (hover: hover) {
  .hero-img:hover {
    transform: scale(1.15);
  }
} */


/*.hero-img {
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
  will-change: transform, filter;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .hero-img:hover {
    transform: translateY(-5px) scale(1.01);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
  }
}*/

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* Старый метод для совместимости */
  clip-path: inset(50%);  /* Современный стандарт */
  white-space: nowrap;
  border: 0;
}

@media (orientation: portrait) {
  html, body {
    overflow-y: auto;
    height: auto;
    min-height: 100svh;
  }

  .frame {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 3svh;
  }

  .frame--ready {
    background-size: 195svw auto;
  }

  .hero {
    flex-direction: column-reverse;
    align-items: center;
    /*gap: 8svh;*/ /* Расстояние между картинками по вертикали */
    /* padding: 10svh 0; */
    flex-grow: 0;
  }

  .hero-img {
    display: block;
    height: auto; /* Высота подстроится сама под ширину из JS */
    /* max-width: 90vw; Страховка */
  }
  
  /* Убедимся, что обертки не мешают центрированию */
  .hero-left, .hero-middle, .hero-right {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}




/* Footer (removed) */