/* ============================================================
   index-hero.css — стили телефона-героя и раскладки шапки.
   Картинка телефона СЛЕВА. Текст поднят вверх.
   Поиск перенесён в ПРАВЫЙ НИЖНИЙ угол шапки.
   Логика страницы не меняется, лишь внешний вид.
   ============================================================ */

/* --- Раскладка шапки: телефон слева, контент справа ---
   Шапка становится относительным контейнером для поиска внизу.
   padding-bottom небольшой — шапка остаётся компактной по высоте. */
.site-header .header,
.page-shell .header {
  display: grid;
  grid-template-columns: minmax(130px, 200px) 1fr;
  align-items: start; /* элементы прижаты к верху сетки */
  gap: 18px;
  position: relative;
  overflow: hidden;
  padding: 3px 11px 40px; /* низ = место под поиск в правом углу */
}

.header-hero--left {
  order: 1;
}

/* Правый блок: описание сайта + поиск, выровнено ВЛЕВО.
   Здесь поиск (header-controls) выведен из потока вниз-вправо,
   поэтому содержимое блока — только заголовок и описание. */
.header-right {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  margin-top: 0;
  padding-top: 0;
  min-width: 0;
}

/* Заголовок-логотип и флаг — в одну линию */
.header-top-row {
  width: 100%;
}

/* ============================================================
   ПОИСК В ПРАВОМ НИЖНЕМ УГЛУ ШАПКИ
   bottom = 8px — поиск немного выше от нижнего края.
   ============================================================ */
.header .header-controls {
  position: absolute;
  right: 11px;
  bottom: 8px;
  left: auto;
  top: auto;
  width: auto;
  max-width: 60%;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  z-index: 3;
}

.header .header-controls .search-input {
  flex: 0 1 280px;
  min-width: 150px;
  max-width: 320px;
}

.header .header-controls .search-input input {
  padding: 5px 9px 5px 28px;
}

/* Заголовок/описание не тянут на себя пространство пояска поиска */
.header .header-right {
  padding-bottom: 0;
}

@media (max-width: 900px) {
  .page-shell .header {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 3px 8px 46px; /* больше места под поиск внизу */
  }
  .header-hero--left {
    order: 2; /* телефон ниже на мобильных */
  }
  .header-right {
    order: 1;
    align-items: flex-start;
    text-align: left;
    padding-top: 0;
  }
}

@media (max-width: 600px) {
  /* На очень узких экранах поиск тянется почти на всю ширину,
     но продолжает прижиматься ПРАВО и ВНИЗ. */
  .page-shell .header {
    padding-bottom: 46px;
  }
  .header .header-controls {
    left: 10px;
    right: 10px;
    bottom: 8px;
    max-width: none;
    width: auto;
    justify-content: stretch;
  }
  .header .header-controls .search-input {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* --- Универсальная обёртка телефона --- */
.header-hero {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 0;
}

/* --- Телефон (парение) --- */
.header-hero .hero-phone {
  position: relative;
  z-index: 2;
  width: min(153px, 100%);
  animation: phoneFloat 6s ease-in-out infinite;
}

@keyframes phoneFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* --- Смартфон-корпус --- */
.phone-device {
  position: relative;
  z-index: 2;
  width: 133px;
  margin: 0 auto;
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(160deg, #2b2f3a, #15171f);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #1f2833, #0b0e14);
  display: flex;
  flex-direction: column;
}

/* Статус-бар */
.phone-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 5px 7px;
  font-size: 7px;
  color: #cdd6e4;
}

.phone-signal {
  letter-spacing: 1px;
  color: var(--accent-green, #00c8a0);
}

/* Экран блокировки */
.phone-lock-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px;
}

.phone-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #202833;
  color: #9aa7bd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-avatar svg { width: 60%; height: 60%; }

.phone-lock-name {
  font-size: 8px;
  color: #dfe6f2;
}

.phone-lock-icon {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #0f2530;
  color: var(--accent-green, #00c8a0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-lock-icon svg { width: 55%; height: 55%; }

.phone-unlock-line {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #2c3b4a;
  border-radius: 999px;
  font-size: 7px;
  color: #9aa7bd;
  background: rgba(255, 255, 255, 0.04);
}

.phone-unlock-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-green, #00c8a0);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Нижняя навигация */
.phone-navbar {
  height: 3px;
  width: 60%;
  margin: 5px auto 7px;
  border-radius: 999px;
  background: #3a4456;
}

/* Вырез */
.phone-notch {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 9px;
  border-radius: 7px;
  background: #0b0d12;
  z-index: 3;
}

/* Свечение позади */
.phone-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 133px;
  height: 133px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 160, 0.3), transparent 70%);
  filter: blur(7px);
  z-index: 1;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* Орбиты-акценты */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  opacity: 0.7;
  filter: blur(4px);
}

.orb-1 {
  width: 37px; height: 37px;
  top: -7px; left: -9px;
  background: rgba(0, 200, 160, 0.5);
}
.orb-2 {
  width: 21px; height: 21px;
  top: 40%; right: -11px;
  background: rgba(255, 209, 102, 0.5);
}
.orb-3 {
  width: 29px; height: 29px;
  bottom: -5px; left: 9px;
  background: rgba(99, 102, 241, 0.5);
}

/* Плавающие статус-бейджи */
.hero-chip {
  position: absolute;
  z-index: 4;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 600;
  background: rgba(15, 18, 24, 0.9);
  border: 1px solid #2c3b4a;
  color: #cdd6e4;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.chip-top    { top: 8%; left: -6%; }
.chip-right  { top: 46%; right: -8%; color: var(--accent-green, #00c8a0);
               border-color: rgba(0, 200, 160, 0.4); }
.chip-bottom { bottom: 6%; left: 0; }

/* Пульс-линия под телефоном */
.hero-pulse {
  position: absolute;
  z-index: 1;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 70%);
  animation: pulseLine 4s ease-in-out infinite;
}

@keyframes pulseLine {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.8; }
  50%      { transform: translateX(-50%) scaleX(0.7); opacity: 0.5; }
}

/* Доступность: уменьшенная подвижность */
@media (prefers-reduced-motion: reduce) {
  .hero-phone { animation: none; }
  .phone-glow { animation: none; }
  .phone-unlock-dot { animation: none; }
  .hero-pulse { animation: none; }
}