/* Раскладка секций лендинга Marika AI: шапка, герой, карточки, этапы, футер.
   Стили самого плеера, каталога кейсов и формы — в player.css/cases.css/form.css. */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--r-pill); font-weight: 600;
  text-decoration: none; border: 0; cursor: pointer; }
.btn--primary { background: var(--grad); color: var(--on-grad); }
.btn--primary:hover { filter: brightness(1.05); }

/* Второстепенное действие: не должно перетягивать внимание с основной формы —
   контурная кнопка без заливки, вместо фирменного градиента. */
.btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--line);
  padding: 12px 24px; }
.btn--secondary:hover { border-color: var(--indigo); color: var(--indigo); }
.btn--secondary svg { flex: none; }

/* Кнопка «Написать в Telegram» рядом с формой — [data-slot="telegram-cta"];
   элемент существует в разметке всегда, но виден только когда в
   CONTENT.telegramContact.href задан адрес (см. public/js/main.js). */
.lead-form__telegram-cta { margin-top: 4px; }

.site-footer__telegram { display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2); text-decoration: none; font-size: .9375rem; }
.site-footer__telegram:hover { color: var(--indigo); }

.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
.site-header__logo { font-family: Onest, sans-serif; font-weight: 700; font-size: 1.25rem;
  color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-header__cta { white-space: nowrap; }
.site-header__cta-short { display: none; }

/* На 320-360px полный текст кнопки не помещается рядом с логотипом,
   переносится в несколько строк и раздувает липкую шапку — она остаётся
   такой на всё время прокрутки. Показываем короткий вариант подписи. */
@media (max-width: 560px) {
  .site-header__cta-full { display: none; }
  .site-header__cta-short { display: inline; }
  .site-header__cta { padding: 10px 18px; font-size: .9375rem; }
  .site-header__logo { font-size: 1.0625rem; }
  .site-header__row { padding-block: 10px; gap: 12px; }
}

.hero { padding-block: 56px 40px; }
.hero__grid { display: grid; gap: 40px; align-items: center; }
.hero__sub { color: var(--ink-2); font-size: 1.125rem; max-width: 46ch; }
.hero__actions { margin-block: 24px 16px; }
.hero__player-hint { color: var(--ink-2); font-size: .9375rem; margin-bottom: 8px; }
.hero__portrait picture, .hero__portrait img { display: block; width: 100%; height: auto;
  border-radius: var(--r-card); }

.band-section { padding-block: 64px; border-top: 1px solid var(--line); }
.band-section .eyebrow { margin-bottom: 8px; }

.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 28px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px; box-shadow: var(--shadow-1); }
.card h3 { font-size: 1.125rem; }
.card p { color: var(--ink-2); margin: 0; }

.cases__grid { display: grid; gap: 24px; }
.cases__copy { max-width: 60ch; }
.cases__portrait img { width: 100%; max-width: 320px; height: auto; border-radius: var(--r-card); }
.cases__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cases__grid-items { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.process__grid { display: grid; gap: 32px; }
.process__portrait img { width: 100%; height: auto; border-radius: var(--r-card); }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px; }
.step__n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--r-pill); background: var(--grad); color: var(--on-grad); font-weight: 700; margin-bottom: 12px; }
.step__time { color: var(--indigo); font-weight: 600; font-size: .875rem; margin: 0 0 8px; }
.step p:last-child { color: var(--ink-2); margin: 0; }

.included__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.included__list li { padding-left: 28px; position: relative; }
.included__list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 14px; height: 14px;
  border-radius: var(--r-pill); background: var(--grad); }
.included__note { margin-top: 24px; color: var(--ink-2); }

.faq { margin-top: 28px; display: grid; gap: 12px; }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px 24px; }
.faq__item summary { cursor: pointer; font-weight: 600; }
.faq__item p { color: var(--ink-2); margin: 12px 0 0; }

.site-footer { border-top: 1px solid var(--line); padding-block: 32px; margin-top: 24px; }
.site-footer__row { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  color: var(--ink-2); font-size: .875rem; }
.site-footer__row a { color: var(--ink-2); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; }
  .cases__grid { grid-template-columns: 1fr auto; }
  .cases__tabs, .cases__grid-items { grid-column: 1 / -1; }
  .process__grid { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .steps { grid-column: 1 / -1; }
}