.grid-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 100vw 100vw 100vw;
  grid-template-rows: 100vh 100vh 100vh;
  /* фактически мы кладём панели в ячейки 2x3, но используем 3x3 для хода */
  transition: transform .8s var(--timing);
  will-change: transform;
  filter: none; /* важно: убираем все фильтры */
  /* Начальная позиция: Hero в центре видимой области */
  /* Hero находится в grid-column: 2, grid-row: 2, поэтому смещаем Grid так чтобы он был в viewport */
  transform: translate3d(-100vw, -100vh, 0);
}

.panel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 56px 24px;
  opacity: .999; /* костыль против color banding с blur на некоторых GPU */
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top:   max(12px, env(safe-area-inset-top));
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}

.panel .section-content {
  width: min(980px, 88vw);
  max-width: 100%;
}

/* позиции по сетке (траектория «П») */
#hero {
  grid-column: 2;
  grid-row: 2;
  /* Убеждаемся что Hero всегда активен по умолчанию */
  opacity: 1;
}

#facts {
  grid-column: 3;
  grid-row: 2; /* вправо */
}

#products {
  grid-column: 3;
  grid-row: 1; /* вверх */
}

#community {
  grid-column: 1;
  grid-row: 1; /* вправо → по X wrap; см. JS */
}

#buy {
  grid-column: 1;
  grid-row: 3; /* внизу сетки */
}

/* Чистая активная панель (без мыла) */
.panel.is-active .hero-wrap,
.panel.is-active .section-content {
  filter: none !important;
  transform: none !important;
}

.grid-wrap { 
  filter: none !important; 
}

.panel .section-content,
.panel .hero-wrap {
  filter: none;
  transform: none;
  transition: all .6s var(--timing);
}

/* Только неактивные панели получают легкий blur */
.panel:not(.is-active) .section-content {
  transform: translateY(8px);
  filter: blur(0.3px) saturate(.98);
}

/* Плавное размытие при переходах - ОТКЛЮЧЕНО для четкости Hero */
.grid-wrap.transitioning {
  /* filter: blur(1px) brightness(0.9); */
  filter: none;
}

/* Hero теперь без glass - стили удалены */

/* адаптив: на мобильных делаем вертикальный стек (но оставим ту же навигацию) */
@media (max-width: 820px) {
  .grid-wrap {
    position: static;
    display: block;
    transform: none !important;
    grid-template-columns: initial;
    grid-template-rows: initial;
  }
  
  #hero {
    grid-column: 1;
    grid-row: 1;
  }

  #facts {
    grid-column: 1;
    grid-row: 2;
  }
  
  #products {
    grid-column: 1;
    grid-row: 3;
  }
  
  #community {
    grid-column: 1; grid-row: 4;
  }
  
  #buy {
    grid-column: 1; grid-row: 5;
  }
  
  .panel {
    padding: 32px 16px;
  }
}

/* Индикатор активной панели для мобильных */
@media (max-width: 820px) {
  .mobile-indicators {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 60;
    background: rgba(0, 0, 0, .5);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
  }
  
  .mobile-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    transition: all 0.3s var(--timing);
  }
  
  .mobile-indicator.active {
    background: var(--accent-2);
    transform: scale(1.2);
  }
}

/* Анимация появления карточек */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel.is-active .card,
.panel.is-active .tag,
.panel.is-active .glass {
  animation: rise 0.6s var(--timing) forwards;
}

.panel.is-active .card:nth-child(1) { animation-delay: 0.1s; }
.panel.is-active .card:nth-child(2) { animation-delay: 0.2s; }
.panel.is-active .card:nth-child(3) { animation-delay: 0.3s; }
.panel.is-active .card:nth-child(4) { animation-delay: 0.4s; }

.panel.is-active .tag:nth-child(1) { animation-delay: 0.1s; }
.panel.is-active .tag:nth-child(2) { animation-delay: 0.15s; }
.panel.is-active .tag:nth-child(3) { animation-delay: 0.2s; }
.panel.is-active .tag:nth-child(4) { animation-delay: 0.25s; }
.panel.is-active .tag:nth-child(5) { animation-delay: 0.3s; }
.panel.is-active .tag:nth-child(6) { animation-delay: 0.35s; }