/* Himmeldrøm — стили лендинга.
   Оформление блоков живёт в инлайновых style= (перенесено из макета один в один).
   Здесь только то, что инлайном выразить нельзя: глобальные правила, keyframes,
   псевдоклассы и раскладка по брейкпоинту 880px. */

:root {
  --ac: #1d4ea3;
  --bp: 880px; /* справочно: медиазапросы ниже должны совпадать с этим числом */
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
html, body { margin: 0; padding: 0; overflow-x: clip }
body {
  font-family: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  background: #f5f3ef;
  color: #1c1a17;
  -webkit-font-smoothing: antialiased;
}
a { color: #1c1a17; text-decoration: none }
a:hover { color: var(--ac) }
input, button, summary { font-family: inherit }
summary { list-style: none }
summary::-webkit-details-marker { display: none }

.nosb { scrollbar-width: none; -ms-overflow-style: none }
.nosb::-webkit-scrollbar { display: none }

.faq-x { transition: transform .25s ease }
details[open] .faq-x { transform: rotate(45deg) }

/* ---------- Показ/скрытие ----------
   [hidden] должен побеждать инлайновый display, поэтому !important. */
[hidden] { display: none !important }

/* Группы полей формы: обёртка не должна ломать flex-раскладку родителя,
   поэтому display:contents — дети остаются flex-элементами родителя. */
.grp { display: contents }

/* ---------- Псевдоклассы (в макете были style-hover / style-focus / style-active) ---------- */
.f-out:focus-visible { outline: 3px solid #a9c7b6; outline-offset: 2px }
.f-in:focus-visible { outline: 3px solid #a9c7b6; outline-offset: 1px }
.f-neg:focus-visible { outline: 3px solid #a9c7b6; outline-offset: -4px }
.press:active { transform: scale(0.98) }
.btn-outline:hover { border-color: var(--ac); color: var(--ac) }
/* Кнопка залита акцентом: глобальное a:hover{color:var(--ac)} перекрасило бы
   текст в цвет фона, поэтому держим его светлым. */
.btn-solid:hover { color: #f7f5f0 }
.popup-close:hover { color: #1c1a17 }


/* ---------- Стрелки прокрутки отзывов ----------
   На десктопе горизонтальный ряд мышкой не прокрутить (колесо крутит страницу),
   поэтому даём кнопки. На мобильном их нет — там свайп пальцем. */
.rev-wrap { position: relative }
.rev-arrow {
  position: absolute;
  top: calc(50% - 5px); /* -5px — поправка на padding-bottom ряда под тень снапа */
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #e3ded4;
  border-radius: 50%;
  background: #fbfaf7;
  color: #1c1a17;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(28, 26, 23, 0.4);
  transition: transform .2s cubic-bezier(0.16,1,0.3,1), background .2s ease, opacity .2s ease;
}
.rev-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06) }
.rev-arrow:active { transform: translateY(-50%) scale(0.96) }
.rev-arrow-prev { left: 4px }
.rev-arrow-next { right: 4px }
/* [hidden] у кнопки на краю ряда: скрыто, но место не влияет — position:absolute. */

/* ---------- Попап-подсказка ----------
   Карточка в правом нижнем углу вместо модалки по центру: она приходит сама,
   а не в ответ на действие, поэтому не имеет права закрывать собой страницу. */
.popup {
  position: fixed;
  z-index: 90;
  right: clamp(12px, 2.5vw, 28px);
  bottom: clamp(12px, 2.5vw, 28px);
  width: min(360px, calc(100vw - 24px));
  animation: popin .32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.popup-card {
  position: relative;
  background: #fbfaf7;
  border: 1px solid #e3ded4;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 18px 44px -18px rgba(28, 26, 23, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@keyframes popin { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

@media (max-width: 880px) {
  /* На узком экране в углу тесно — растягиваем по ширине.
     Отступ снизу учитывает жест-бар айфона. */
  .popup {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ---------- Раскладка ----------
   В прототипе эти значения считал JS через matchMedia. На реальном сайте это CSS:
   иначе до выполнения JS страница скачет, а без JS ломается совсем. */
@media (max-width: 880px) {
  .only-desk { display: none !important }
}
@media (min-width: 881px) {
  .only-mob { display: none !important }
}

/* Горизонтальные ряды: на мобильном — свайп со снапом, на десктопе — перенос. */
.row { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; padding-bottom: 0 }
.flow-card { flex: 1 1 200px }
.tar-side { flex: 1 1 280px }
.tar-main { flex: 1.22 1 320px; order: 0 }
.svc-wide { grid-column: span 2 }

@media (max-width: 880px) {
  .row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px }
  .flow-card { flex: 0 0 68vw; scroll-snap-align: start }
  .svc-wide { grid-column: auto }

  /* Тарифы: рекомендованный по центру, соседи выглядывают по краям —
     так сразу видно, что карточек три и их можно листать.
     В DOM рекомендованный и так стоит вторым, поэтому order не нужен.
     72vw + два просвета по 14vw = 100vw. Боковые отступы во всю ширину просвета
     нужны, чтобы крайние карточки тоже могли встать по центру, а не упереться в край. */
  .tar-side, .tar-main { flex: 0 0 72vw; scroll-snap-align: center }
  /* Просвет — половина того, что осталось от ряда после карточки. Именно 100%,
     а не 14vw: у секции свои боковые отступы, ряд уже вьюпорта, и на vw крайние
     карточки промахивались бы мимо центра. Процент в padding считается от ширины
     родителя, поэтому подстроится сам, если отступы секции поменяются. */
  .row-tar { padding-inline: calc((100% - 72vw) / 2) }
}

/* ---------- Анимации ---------- */
@keyframes readbar { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes heropar { from { transform: translateY(-4.5%) scale(1.08) } to { transform: translateY(4.5%) scale(1.08) } }
@keyframes worksline { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@keyframes cargo { from { transform: translateX(-26px) } to { transform: translateX(200px) } }
@keyframes carback { from { transform: translateX(26px) } to { transform: translateX(-200px) } }
@keyframes kraka { 0% { clip-path: inset(0 100% 0 0) } 12% { clip-path: inset(0 100% 0 0) } 72% { clip-path: inset(0 0 0 0) } 100% { clip-path: inset(0 0 0 0) } }
@keyframes fillfield { 0% { transform: scaleX(0) } 20% { transform: scaleX(0) } 70% { transform: scaleX(1) } 100% { transform: scaleX(1) } }
@keyframes btnblink { 0%, 64% { opacity: 0.25 } 72%, 88% { opacity: 1 } 100% { opacity: 0.25 } }
@keyframes receipt { 0% { transform: translateY(44px) } 40% { transform: translateY(4px) } 78% { transform: translateY(4px) } 100% { transform: translateY(44px) } }
@keyframes codefly { 0% { transform: translateZ(-420px); opacity: 0 } 18% { opacity: 1 } 90% { opacity: 1 } 100% { transform: translateZ(250px); opacity: 0 } }
@keyframes liftoff { 0% { transform: translateY(0) } 34% { transform: translateY(0) } 38% { transform: translateY(2px) } 100% { transform: translateY(-240px) } }
@keyframes flame { 0%, 100% { transform: scaleY(0.7) } 50% { transform: scaleY(1.2) } }
@keyframes puff { 0% { transform: scale(0.3); opacity: 0 } 15% { opacity: 0.55 } 100% { transform: scale(1.8); opacity: 0 } }
@keyframes chalk { 0% { clip-path: inset(0 100% 0 0); opacity: 1 } 12% { clip-path: inset(0 0 0 0); opacity: 1 } 55% { clip-path: inset(0 0 0 0); opacity: 1 } 63% { opacity: 0 } 100% { clip-path: inset(0 0 0 0); opacity: 0 } }

/* Прокрутка-таймлайн есть только в Chromium. Без него анимация с бесконечной
   длительностью встала бы на последнем кадре: полоса чтения залилась бы целиком,
   а герой-картинка застыла в смещённом кадре. Поэтому включаем только при поддержке. */
.readbar { transform: scaleX(0) }
.heropar { transform: none }
@supports (animation-timeline: scroll()) {
  .readbar { animation: readbar linear both; animation-timeline: scroll() }
  .heropar { animation: heropar linear both; animation-timeline: view(); will-change: transform }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important; animation: none !important }
}