/* ===========================================================
   СВОД — Слой 4: секции. Пока: шапка, S1 hero, авторская полоса.
   =========================================================== */

/* ============ ШАПКА ============ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 72px;
  z-index: var(--z-header);
  transition: height var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-12);
}
.header__brand { display: flex; align-items: center; gap: var(--s-8); }
.header__mark { width: 24px; height: 24px; }
.header__name {
  font-size: 18px; font-weight: 600; letter-spacing: .02em; color: var(--ink-900);
}
.header__sep { width: 1px; height: 14px; background: var(--line); margin-inline: var(--s-12); }
.header__desc { color: var(--ink-500); }

.header__nav { display: flex; gap: 28px; margin-left: auto; }
.header__link {
  position: relative;
  font-size: 15px; color: var(--ink-600);
  transition: color var(--t-instant) var(--e-out);
}
.header__link::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--ink-900);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--e-out);
}
.header__link:hover { color: var(--ink-900); }
.header__link:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--s-8); margin-left: 32px; }

/* Липкое состояние */
.header.is-stuck {
  height: 64px;
  background: rgba(237, 239, 234, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .header.is-stuck { background: rgba(237, 239, 234, .98); }
}
.header__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--lime-500);
  width: 0;
  opacity: 0;
  transition: opacity var(--t-fast) var(--e-out);
}
.header.is-stuck .header__progress { opacity: 1; }

/* ============ S1 · HERO ============ */
.hero {
  padding-top: 128px;
  padding-bottom: 64px;
  position: relative;
  overflow: hidden;
}
.hero__inner { text-align: center; position: relative; z-index: 2; }

.hero__pill { margin-bottom: 28px; }

.hero__title { margin-inline: auto; max-width: 980px; }

.hero__lead {
  margin: 24px auto 0;
  max-width: 720px;
}

.hero__actions {
  margin-top: 40px;
  display: flex; justify-content: center; gap: var(--s-12);
  flex-wrap: wrap;
}
.hero__note { margin-top: 20px; }

/* --- Продуктовый макет --- */
.hero__mockup {
  position: relative;
  margin-top: 48px;
  z-index: 2;
}
.hero__mockup .app {
  box-shadow: var(--sh-4);
  text-align: left;
}
/* Маски снизу нет: тёмный объект должен заканчиваться ребром,
   растворение в светлом фоне превратило бы его в туман. */

/* Светлая выноска на тёмном интерфейсе — максимальный контраст первого экрана.
   Висит на нижнем правом углу и наполовину выходит в поле страницы:
   так она не закрывает ни одной строки таблицы, но добавляет глубины. */
.hero .diff-callout {
  right: -80px;
  bottom: -28px;
  top: auto;
  z-index: 3;
  transform: rotate(-1deg);
}
.hero .diff-callout__arm { display: none; }

/* ============ АВТОРСКАЯ ПОЛОСА (фиксированная) ============ */
.authorbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  z-index: var(--z-authorbar);
  background: rgba(237, 239, 234, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(48px);
  opacity: 0;
  transition: transform var(--t-base) var(--e-out), opacity var(--t-base) var(--e-out);
}
.authorbar.is-in { transform: none; opacity: 1; }
.authorbar.is-hidden { transform: translateY(48px); opacity: 0; pointer-events: none; }

.authorbar__inner {
  height: 100%;
  display: flex; align-items: center; gap: var(--s-20);
}
.authorbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral-500); flex: none; }
.authorbar__mark { display: flex; align-items: center; gap: var(--s-8); }
.authorbar__cta {
  margin-left: auto;
  font-size: 14px; font-weight: 500; color: var(--ink-900);
  display: inline-flex; align-items: center; gap: 6px;
}
.authorbar__cta:hover { text-decoration: underline; text-underline-offset: 4px; }
.authorbar__close {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--ink-500);
  border-radius: var(--r-xs);
}
.authorbar__close:hover { color: var(--ink-900); background: var(--surface-2); }

body { padding-bottom: 48px; }

/* ============ АДАПТИВ ============ */
@media (max-width: 1279px) {
  .hero .diff-callout { right: 0; }
}

@media (max-width: 1023px) {
  .header__nav { display: none; }
  .hero { padding-top: 148px; }
  .hero .diff-callout { display: none; }
}

/* Только планшет: узкое боковое меню. Диапазон обязателен —
   без нижней границы правило перебивает мобильное по специфичности. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__mockup .app { grid-template-columns: 168px 1fr; }
}

@media (max-width: 767px) {
  .header { height: 60px; }
  .header.is-stuck { height: 56px; }
  .header__desc, .header__sep { display: none; }
  .header__actions { margin-left: auto; }

  .hero { padding-top: 116px; padding-bottom: 48px; }
  .hero__pill { margin-bottom: 24px; }
  .hero__lead { margin-top: 16px; }
  .hero__actions { margin-top: 28px; flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  /* Макет прижат к правому краю экрана — приём «интерфейс продолжается».
     Дальше не выносим: за обрезом оказался бы чип статуса, ради которого экран и показан. */
  .hero__mockup { margin-top: 48px; margin-right: calc(var(--page-pad) * -1); }
  .hero__mockup .app {
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
  }
  .hero__mockup .app__side { display: none; }

  /* Полоса — одна строка в 48px: длинные части прячем, переносы запрещаем */
  .authorbar__inner { gap: var(--s-12); }
  .authorbar__long { display: none; }
  .authorbar__text { white-space: nowrap; }
  .authorbar__cta { white-space: nowrap; font-size: 13px; }
  .authorbar__cta span { display: none; }
  .authorbar__cta::after { content: 'Заказать такой же →'; }
}