/* ============================================================
   ЛАМИНА AI — site
   Слой поверх компонентов: постраничные композиции, мелкие утилиты
   и деликатное движение. Подключается ПОСЛЕДНИМ.
   Правило слоя: сюда попадает только то, что не переиспользуется
   в трёх и более местах; всё повторяющееся уезжает в components.css.
   ============================================================ */

/* --- Утилиты раскладки. Держим короткий фиксированный набор:
   утилитарный фреймворк тут не нужен, а бесконтрольная россыпь
   .mt-13 разрушает шкалу отступов. --- */
.mt-2{ margin-top:var(--sp-2); }
.mt-4{ margin-top:var(--sp-4); }
.mt-5{ margin-top:var(--sp-5); }
.mt-6{ margin-top:var(--sp-6); }
.mt-7{ margin-top:var(--sp-7); }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.tabular{ font-variant-numeric:tabular-nums; }

/* Неразрывная связка числа с единицей: «35,5 ч» не должно
   переноситься на разные строки. */
.unit{ white-space:nowrap; }

/* --- Первый экран главной: текст слева, врезка справа. --- */
.hero__grid{ display:grid; gap:var(--sp-7); align-items:center; }
@media (min-width:1024px){
  .hero__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--sp-8); }
}

/* --- Полоса цифр под героем: боль производства в числах. --- */
.pain{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

/* --- Две дорожки предложения: внедрение и партнёрство.
   Не смешивать в одном блоке: это разные читатели и разные решения. --- */
.tracks{ display:grid; gap:var(--sp-5); }
@media (min-width:860px){ .tracks{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.track{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6); border-radius:var(--r-lg); border:1px solid var(--line); background:var(--paper); }
.track--alt{ background:var(--soft); border-color:transparent; }
.track ul{ display:grid; gap:var(--sp-2); }
.track li{ position:relative; padding-left:var(--sp-5); color:var(--muted); font-size:var(--fs-sm); }
.track li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:2px; border-radius:2px; background:var(--deep);
}
.track .btn{ margin-top:auto; align-self:flex-start; }

/* --- Контакты: карточки каналов крупно. --- */
.channels{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.channel{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); min-height:88px; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.channel:hover{ border-color:var(--deep); box-shadow:var(--shadow-md); }
.channel__label{ display:block; font-size:var(--fs-xs); color:var(--muted); }
.channel__value{ display:block; font-weight:600; color:var(--ink); }

/* --- Появление при прокрутке — чистый CSS, без GSAP и без JS.
   Движение маленькое (12px) и короткое (280мс): анимация здесь
   подсказывает порядок чтения, а не развлекает. Ключевое: контент
   ВИДЕН по умолчанию, а прячется только там, где анимация реально
   поддержана и разрешена — иначе выключенный JS или старый браузер
   оставили бы пустую страницу (ровно та авария, из-за которой на
   chil.online откатывали JS-герой). --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 26%;
    }
  }
}
@keyframes reveal-in{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

/* Наведение на карточку — единственная «живая» реакция, и та 180мс.
   На устройствах без hover эффекты не навешиваем вовсе. */
@media (hover:none){
  .card--lift:hover{ transform:none; box-shadow:none; }
}

/* --- Очень узкие экраны (360px и меньше): режем внутренние отступы
   крупных блоков, чтобы карточки не превращались в колодец текста
   шириной в шесть знаков. --- */
@media (max-width:400px){
  .cta{ padding:var(--sp-6) var(--sp-4); }
  .track, .hero__aside{ padding:var(--sp-4); }
  .stat-band{ padding:var(--sp-4); }
}

/* --- Очень широкие (1600px+): колонка не растягивается дальше --wrap,
   но воздух по вертикали добавляем, иначе страница читается плотнее,
   чем задумано. --- */
@media (min-width:1600px){
  .section{ padding-block:calc(var(--sp-9) * 1.15); }
}