/* Страничные стили home. Извлечено из макета v2/24-home.html. */

/* ---- Полосы контента ----
   Секции главной идут во всю ширину (.hero, .base-stats), поэтому контентный
   коридор и вертикальные отступы задают обёртки вокруг групп секций.

   Отступы задаём padding-block, а не сокращённым padding: обёртки эти —
   сами по себе .wrap, и краткая запись обнулила бы её боковые поля, отчего
   контент лёг бы вплотную к краям экрана. */
.home-band-top{ padding-block:64px; }
.home-band-bottom{ padding-block:64px 72px; }
@media (max-width:609px){
  .home-band-top{ padding-block:36px; }
  .home-band-bottom{ padding-block:36px 44px; }
  .base-stats{ padding:28px 0; }
  .base-stats .stat{ padding:12px 0; }
}

/* ---- Первый экран: поиск в центре ---- */
.hero{ padding:72px 0 64px; text-align:center; border-bottom:1px solid var(--line); }
.hero .wrap{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero h1{ font-size:clamp(32px,5.2vw,58px); max-width:16ch; }
.hero .lede{ max-width:52ch; }
.hero-search{ width:100%; max-width:620px; text-align:left; }
.hero-hint{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.hero-hint span{ color:var(--ink-faint); font-size:14px; }
@media (max-width:640px){ .hero{ padding:44px 0 40px; text-align:left; } .hero .wrap{ align-items:stretch; } .hero-hint{ justify-content:flex-start; } }

/* ---- Что показывает досье ---- */
.dossier{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.dossier a{
  padding:26px 26px 26px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:6px;
  transition:padding-left .15s ease, background .15s ease;
}
.dossier a:hover{ background:var(--surface); padding-left:14px; }
.dossier b{ font-family:var(--f-head); font-weight:600; font-size:18px; letter-spacing:-.01em; }
.dossier a:hover b{ color:var(--accent); }
.dossier i{ font-style:normal; color:var(--ink-soft); font-size:15px; line-height:1.5; display:block; max-width:34ch; }
@media (max-width:900px){ .dossier{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .dossier{ grid-template-columns:1fr; } .dossier a{ padding-right:0; } }

/* ---- Как это работает: реальная последовательность ---- */
.steps{ counter-reset:s; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.steps li{
  padding-top:18px; border-top:2px solid var(--accent);
  display:flex; flex-direction:column; gap:8px;
}
.steps li::before{
  counter-increment:s; content:counter(s);
  font-family:var(--f-head); font-weight:600; font-size:15px; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.steps h3{ font-family:var(--f-text); font-size:17px; font-weight:700; }
.steps p{ color:var(--ink-soft); font-size:15.5px; }
@media (max-width:768px){ .steps{ grid-template-columns:1fr; gap:24px; } }

/* ---- Разделы ---- */
.sections{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
@media (max-width:768px){ .sections{ grid-template-columns:1fr; } }
.sec-card{ display:flex; flex-direction:column; gap:10px; }
.sec-card svg{ color:var(--accent); }
.sec-card p{ color:var(--ink-soft); font-size:15.5px; }

/* ---- Цифры базы ---- */
.base-stats{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; }
.base-stats .stats{ border:0; background:transparent; }
.base-stats .stat{ padding:0 24px; }

/* ---- Финальный призыв ----
   Обёртка переносится: заголовок и текст занимают строку целиком, а две кнопки
   встают рядом. Вертикальный и горизонтальный зазоры заданы одним gap. */
.finish{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px 12px; text-align:center; padding-top:16px; }
.finish h2, .finish p{ flex:1 0 100%; }
.finish p{ color:var(--ink-soft); max-width:50ch; margin-inline:auto; }