/* ============================================================
   Главная страница — home.css
   Геометрия: figma-copy-refs/json/home-desktop.json, home-mobile.json,
   solution-card-home.json. Классы с префиксом .home-…
   ============================================================ */

/* ---------- hero ---------- */
/* Three.js волна: канвас за контентом; статичный PNG (::before) остаётся фолбэком без JS */
.home-hero .sf-hero-canvas{position:absolute !important;inset:0;z-index:0;pointer-events:none}
.home-hero:has(.sf-hero-canvas)::before{opacity:0}
.home-hero{min-height:848px;display:flex;align-items:flex-end;padding-bottom:96px}
/* Figma 1384:1632: eyebrow #83B335, шаг eyebrow→H1 = 12, H1→кнопки = 32 */
.home-hero .eyebrow{color:var(--green);margin-bottom:12px}
.home-hero__cta{margin-top:32px}
/* макет Figma 861:1592: заголовок ровно 1050px шириной → под него нужно 1050 + рейка 335 + паддинги 48.
   Раньше max-width:1140 включал внутренний отступ 383px (border-box) и заголовку доставалось 757px — рвался на 4 строки. */
.home-hero__inner{padding:0 var(--pad) 0 calc(var(--rail) + var(--pad));max-width:calc(1050px + var(--rail) + var(--pad) * 2)}
.home-hero__inner .display{max-width:1050px}
/* на ноутбучных ширинах рейка 335px не оставляет заголовку макетных 1050px и он рвётся на 4 строки —
   сокращаем левый отступ, а ниже 1200 ещё и кегль */
@media(max-width:1400px){
  .home-hero__inner{padding-left:calc(var(--pad) + 120px)}
}
/* только ноутбучные ширины: на мобиле кегль задаёт main.css (макет «моб 2.2» — 36px),
   раньше правило ловило и 375px и заголовок рвался на 4 строки */
@media(min-width:901px) and (max-width:1200px){
  .home-hero__inner .display{font-size:52px}
}
@media(max-width:900px){
  /* hero выше на мобиле (ревью дизайнера) */
  .home-hero{min-height:560px;align-items:flex-end;padding:calc(var(--nav-h) + 120px) 0 56px}
  .home-hero__inner{padding:0 var(--pad);max-width:none}
  .home-hero .display{text-transform:none;letter-spacing:0}
}

/* ---------- услуги: строки-направления ---------- */
/* Figma 861:1609: контентная колонка 952px, номер на линии секции (x=363), заголовок +325 */
.home-svc-list{margin-top:64px;max-width:952px}
/* разделитель — 1px #000 сверху каждой строки, кроме первой (Figma 861:1613: LINE 950px, у 01 линии нет) */
/* 34% = макетные 325 из 952: на 1440 даёт 324, на планшетных ширинах не съедает колонку заголовка */
.home-svc-row{display:grid;grid-template-columns:34% 1fr;column-gap:0;padding:24px 0 28px;margin:0;border-top:1px solid #000;text-decoration:none;color:inherit;transition:background .2s}
.home-svc-row:first-child{border-top:0}
.home-svc-row:hover{background:#fff}
.home-svc-num{font-family:var(--ff);font-weight:500;font-size:40px;line-height:1.1;color:var(--dark);transition:color .2s}
.home-svc-body{min-width:0}
/* Заголовок направления: стрелка появляется только на наведении, поэтому она вынесена
   из потока текста. Раньше она стояла в строке через пробел — пока скрыта, оставался
   висячий пробел, а при наведении переносила текст на лишнюю строку и блок прыгал.
   Высота фиксирована в две строки: у всех направлений строки одинаковой высоты,
   независимо от длины названия (правка по ревью). */
.home-svc-title{font-family:var(--ff);font-weight:500;font-size:24px;line-height:1.33;color:var(--text);display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:10px;margin-bottom:20px;padding-right:16px;transition:color .2s}   /* стрелка отбита на 16px от края (правка клиента) */
.home-svc-title__t{min-width:0;min-height:2.66em}   /* ровно две строки у любого названия */
.home-svc-title .arr{color:var(--green);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.home-svc-desc{max-width:625px;margin:0}
.home-svc-row:hover .home-svc-num,
.home-svc-row:hover .home-svc-title{color:var(--green)}
.home-svc-row:hover .home-svc-title .arr{opacity:1;transform:none}
@media(max-width:900px){
  .home-svc-list{margin-top:32px;max-width:none}
  /* макет «моб 2.2» (459:6635): номер и заголовок по левому краю контента, шаг между строками 32,
     разделитель 1px #000 — под заголовком, а не над строкой */
  .home-svc-row{grid-template-columns:1fr;row-gap:8px;padding:16px 0;margin:0;border-top:0}
  .home-svc-num{font-size:28px}
  .home-svc-title{font-size:18px;line-height:24px;border-bottom:1px solid #000;padding-bottom:8px;margin-bottom:12px}   /* стиль «лейбл болд» 18/24 */
}

/* воздух между блоками главной: >=200px десктоп, >=100px мобила (ревью дизайнера) */
body.home .section{padding-top:200px}
/* непрерывная вертикальная линия секций: бордер заменяем сквозным псевдоэлементом;
   начинается от секции решений (правки дизайнера-3), у услуг линии нет */
/* контент прижат к самой линии секции (макет: списки/карточки/логотипы на x=359-367,
   а не с отступом 28px), поэтому у главной у .section__body нет левого паддинга */
body.home .section__body{border-left:0;position:relative;padding-left:0}
/* цвет линии #B0ACAB как в макете (861:1593), а не полупрозрачный --line */
body.home .section__body::before{content:'';position:absolute;left:0;top:-200px;bottom:0;width:1px;background:var(--gray)}
body.home .home-svc .section__body::before{display:none}
body.home .home-sol .section__body::before{top:0}

/* Клиенты и преимущества прилипали к линии рейки — отбивка 16px (правка по ревью).
   Линия рисуется псевдоэлементом от края блока, поэтому padding её не двигает. */
body.home .home-clients .section__body,
body.home .home-why .section__body{padding-left:16px}
/* макет 861:1593: линия непрерывна до конца блока формы (y 2111→5231), обрыва перед формой нет.
   В main.css рейка формы заглушена (на остальных страницах её в макете нет) — на главной
   возвращаем, иначе линия обрывалась после блока преимуществ (правка по ревью). */
body.home .section.form-cta .section__body::before{content:'';bottom:var(--sf-cta-line-bottom,0)}
@media(min-width:1201px){
  /* заголовки/кнопки секций — на x=690 как в макете (861:1607, 861:1836, 861:1851) */
  body.home .section__head,
  body.home .home-clients-cta{margin-left:325px}
  /* макет (главная, y≈4858): линия рейки x=358, подписи контактов x=372 — отбивка 14px,
     правая колонка формы начинается на x=694. Было 325px без отбивки: контакты липли
     к линии, а вся форма стояла на 10px левее макета (правка по ревью). */
  body.home .form-cta__grid{grid-template-columns:336px minmax(0,1fr)}
  body.home .form-cta .contact-left{padding-left:14px}
  /* в макете заголовок формы разбит на две строки («Готовы обсудить / ваш проект?»).
     Перенос берётся из самого текста — его можно править в «Softailor → Главная». */
  body.home .form-cta .form-right>h2{white-space:pre-line}
}
@media(min-width:901px){
  /* подписи секций в макете #555555 */
  body.home .section__label{color:var(--text-2)}
}
/* заголовки разделов — стики (правки дизайнера-3) */
/* sticky только на десктопе: на узких экранах подпись раздела наезжала на текст (правка по ревью) */
@media(min-width:901px){body.home .section__label{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}}
@media(max-width:900px){body.home .section__label{position:static}}
@media(max-width:900px){
  body.home .section{padding-top:100px}
  body.home .section__body::before{display:none}
}

/* ---------- решения: слайдер карточек ---------- */
/* равномерный воздух вокруг подзаголовка: 14px от заголовка сверху, 24px до карточек снизу */
.home-sol .section__head{margin-bottom:24px}
/* макет 861:1765: полоса карточек начинается ровно на линии секции и уходит под правый край экрана */
.home-sol-wrap{margin-left:0;margin-right:calc(var(--pad) * -1)}
/* Карточки начинаются на 1px правее рейки: в макете (861:1593) линия занимает x=358,
   а карточка — с 359, поэтому линия видна вдоль всего блока решений. Раньше карточка
   стояла ровно на линии и закрывала её своим тёмным фоном (правка по ревью).
   Сдвиг именно margin, а не padding: у прокручиваемого блока padding уезжает вместе
   с содержимым, и при скролле карточки снова наехали бы на линию. */
.home-sol-slider{margin-left:1px;display:flex;gap:3px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.home-sol-slider:active{cursor:grabbing}
/* карточки внутри слайдера НЕ анимируем (reveal со сдвигом вверх заставлял контент «плыть» при свайпе на мобиле):
   плашки статичны, двигается только сам слайдер по горизонтали */
.home-sol-slider .reveal{opacity:1;transform:none;transition:none}
.home-sol-slider::-webkit-scrollbar{display:none}
.home-sol-card{position:relative;flex:0 0 438px;height:530px;background:var(--dark) center/cover no-repeat;overflow:hidden;scroll-snap-align:start;display:block;color:var(--text);-webkit-user-drag:none}
.home-sol-card--noimg{background-image:linear-gradient(135deg,#3a4a37,#2C3A2B)}
.home-sol-card__fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(241,241,240,0) 0%,rgba(241,241,240,0) 46%,#FCFCFC 78%)}
.home-sol-card__title{position:relative;z-index:1;padding:44px 26px 0;font-family:var(--ff);font-weight:500;font-size:40px;line-height:1.15;color:var(--text)}
.home-sol-card__desc{position:absolute;left:26px;right:26px;bottom:27px;z-index:1;font-size:16px;line-height:1.4;color:var(--text)}
/* ховер (Figma card w/photo big, вариант hover): тёмный оверлей, текст белеет */
.home-sol-card::after{content:'';position:absolute;inset:0;background:rgba(34,42,33,.55);opacity:0;transition:opacity .25s}
.home-sol-card__fade{transition:opacity .25s}
.home-sol-card__title,.home-sol-card__desc{transition:color .25s}
.home-sol-card:hover::after{opacity:1}
.home-sol-card:hover .home-sol-card__fade{opacity:0}
.home-sol-card:hover .home-sol-card__title,.home-sol-card:hover .home-sol-card__desc{color:var(--tw)}
.home-sol-more{margin-top:32px;display:flex;justify-content:flex-end;padding-right:var(--pad)}
/* «Смотреть все» — тот же размер, что «Стать клиентом» (Figma 861:1833: h44, pad 0 32, текст 14) */
.home-sol-more .btn{height:44px;padding:0 32px;font-size:14px;font-weight:500}
@media(max-width:900px){
  .home-sol-wrap{margin-left:calc(var(--pad) * -1)}
  .home-sol-slider{padding:0 var(--pad)}
  .home-sol-card{flex-basis:300px;height:420px}
  .home-sol-card__title{padding:32px 20px 0;font-size:24px}
  .home-sol-card__desc{left:20px;right:20px;bottom:20px;font-size:14px}
  .home-sol-more{justify-content:center;padding-right:0;margin-top:20px}
}

/* ---------- клиенты ---------- */
/* макет 861:1837: плитка 200x80, шаг 48/64, 4 в ряд на 1440.
   auto-fill вместо жёстких 4 колонок: на 1024-1200 колонка секции уже 944px и последние
   логотипы уезжали за край и обрезались (html{overflow-x:clip}) */
.home-clients-grid{display:grid;grid-template-columns:repeat(auto-fill,200px);column-gap:48px;row-gap:64px;margin-top:48px}
/* Логотип центрируется в своей ячейке. При выравнивании по левому краю узкие лого
   оставляли справа заметные пустоты — ряд читался рваным (правка клиента 30.07).
   Центруем в вёрстке, а не в самих файлах: так работает для любого лого,
   который заказчик загрузит потом. */
.home-clients-logo{display:flex;align-items:center;justify-content:center;height:80px}
.home-clients-logo img{width:auto;max-width:200px;max-height:80px;object-fit:contain}
.home-clients-cta{margin-top:34px;margin-left:34%;max-width:617px}
@media(max-width:1200px){.home-clients-cta{margin-left:20%}}
@media(max-width:900px){
  .home-clients-grid{grid-template-columns:repeat(2,1fr);column-gap:24px;row-gap:32px;margin-top:32px}
  .home-clients-logo img{max-width:100%}
  .home-clients-cta{margin-left:0;max-width:none;margin-top:32px}
}

/* ---------- почему нас выбирают ---------- */
/* макет 861:1853: две колонки по 460, шаг 24. minmax — чтобы на 1024-1200 правая колонка
   не вылезала за контейнер и не обрезалась */
.home-why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,460px));column-gap:24px;row-gap:24px;margin-top:52px}
.home-why-item__title{font-family:var(--ff);font-weight:500;font-size:24px;line-height:32px;color:var(--text);margin-bottom:8px}
.home-why-item__text{margin:0;color:var(--text-2)}
@media(max-width:900px){
  .home-why-grid{grid-template-columns:1fr;row-gap:24px;margin-top:32px}
}

/* Мобильная типографика блоков: подписи пунктов — стиль «лейбл болд» 18/24.
   Правило в конце файла намеренно: базовое .home-why-item__title объявлено ниже
   мобильного блока и перебивало его при равной специфичности (правка по ревью). */
@media(max-width:900px){
  .home-why-item__title{font-size:18px;line-height:24px}
}