/* home-main.css - federal homepage deltas on top of site.css + resheniya-fundament.css.
 *
 * The main-domain home reuses these patterns from other stylesheets:
 *   - site.css     - container, btn, t-num, font tokens, base typography
 *   - resheniya-fundament.css - .rf-section, .rf-docs, .rf-bigcta-* (loaded by the HTML)
 *   - gost.css     - .gp-faq, .acc, .acc-item, .acc-head (loaded by the HTML)
 *
 * Everything below is unique to the main homepage and prefixed .hm-* to avoid
 * collisions with rf-/gp-/mk-/rs- prefixes from other pages.
 */

@import url('./site.css?v=3');

/* ========== HERO (federal-scope, with directory card) ==================== */
.hm-hero {
  padding: 36px 0 56px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-1);
}
.hm-hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: start;
}
.hm-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 16px;
}
.hm-hero__h1 {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--fg-1);
  margin: 0 0 18px;
  max-width: 18ch;
}
.hm-hero__h1-accent {
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.85em;
  letter-spacing: -0.005em;
  display: inline-block;
  margin-top: 6px;
}
.hm-hero__lede {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 60ch;
}
.hm-hero__lede strong { color: var(--fg-1); font-weight: 600; }
.hm-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hm-hero__cta .btn svg { margin-right: 4px; }
.hm-hero__trust { margin-top: 8px; }

/* directory card (right column) */
.hm-hero__dir {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  overflow: hidden;
  position: sticky;
  top: 100px;
}
.hm-hero__dir-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-soft);
}
.hm-hero__dir-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  font-weight: 600;
}
.hm-hero__dir-h {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-1);
  margin-top: 4px;
}
.hm-hero__dir-meta {
  font-size: 11px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.hm-hero__dir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.hm-hero__dir-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 22px;
  border-right: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.hm-hero__dir-cell:hover { background: var(--bg-soft); }
.hm-hero__dir-cell:nth-child(2n) { border-right: 0; }
.hm-hero__dir-cell:nth-last-child(-n+2) { border-bottom: 0; }
.hm-hero__dir-city {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
}
.hm-hero__dir-code {
  font-size: 12px;
  color: var(--fg-3);
}
.hm-hero__dir-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-soft);
  font-size: 13px;
  color: var(--fg-2);
}
.hm-hero__dir-foot a { color: var(--c-accent); text-decoration: none; font-weight: 500; }

@media (max-width: 1080px) {
  .hm-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hm-hero__dir { position: static; }
  .hm-hero__h1 { font-size: 36px; max-width: none; }
}

/* ========== CITIES grid =================================================== */
.hm-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hm-city {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.hm-city:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.hm-city__pin {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-accent-soft, #E6F0FB);
  color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
}
.hm-city__name { font-size: 14px; font-weight: 600; color: var(--fg-1); margin-bottom: 2px; }
.hm-city__meta { font-size: 11px; color: var(--fg-3); display: flex; gap: 6px; align-items: center; }
.hm-city__sep { color: var(--c-steel-300, #c5cdd6); }
.hm-city__arr { color: var(--fg-3); flex-shrink: 0; }

@media (max-width: 1080px) { .hm-cities { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .hm-cities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .hm-cities { grid-template-columns: 1fr; } }

/* ========== CATALOG cards (7 sections) ==================================== */
.hm-cat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.hm-cat__card:nth-child(1) { grid-row: span 1; grid-column: span 2; }
.hm-cat__card:nth-child(2) { grid-column: span 2; }
.hm-cat__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.15s ease;
  min-height: 170px;
}
.hm-cat__card:hover {
  border-color: var(--c-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -14px rgba(15,22,36,0.18);
}
.hm-cat__ic {
  width: 36px; height: 36px;
  color: var(--fg-1);
}
.hm-cat__name { font-size: 17px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
.hm-cat__sub  { font-size: 13px; color: var(--fg-2); line-height: 1.5; flex: 1; }
.hm-cat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border-1);
  font-size: 12px;
}
.hm-cat__count { font-family: var(--font-mono); color: var(--fg-3); }
.hm-cat__cta   { display: inline-flex; gap: 4px; align-items: center; color: var(--c-accent); font-weight: 500; }

@media (max-width: 1080px) {
  .hm-cat { grid-template-columns: repeat(2, 1fr); }
  .hm-cat__card:nth-child(1),
  .hm-cat__card:nth-child(2) { grid-column: span 1; }
}
@media (max-width: 560px) { .hm-cat { grid-template-columns: 1fr; } }

/* ========== SOLUTIONS cards (5 industries) ================================ */
.hm-sol {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
/* Премиум фото-плитка (выровнено с каталогом): фото отрасли на фоне + scrim + текст. */
.hm-sol__card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-3); min-height: 220px;
  display: flex; text-decoration: none; color: #fff;
  background: #0F1418; border: 1px solid rgba(15,20,24,0.10);
  transition: transform var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std);
}
.hm-sol__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.55s var(--ease-std); }
.hm-sol__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,20,24,0.30) 0%, rgba(15,20,24,0.50) 45%, rgba(15,20,24,0.90) 100%); }
.hm-sol__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 22px; width: 100%; }
.hm-sol__card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,20,24,0.26); }
.hm-sol__card:hover .hm-sol__bg { transform: scale(1.06); }
.hm-sol__h { font-size: 17px; font-weight: 600; line-height: 1.25; color: #fff; }
.hm-sol__d { font-size: 13px; color: rgba(255,255,255,0.84); line-height: 1.5; }
.hm-sol__cta { margin-top: auto; padding-top: 12px; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-family: var(--font-mono); color: #fff; }
.hm-sol__cta svg { color: var(--c-accent-2, #6CA8DE); }

@media (max-width: 1080px) { .hm-sol { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .hm-sol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .hm-sol { grid-template-columns: 1fr; } }

/* ========== STEPS (HowWeWork - 4) ========================================= */
.hm-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.hm-step {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
}
.hm-step__num {
  font-size: 13px;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.hm-step__ttl { font-size: 16px; font-weight: 600; color: var(--fg-1); margin-bottom: 8px; line-height: 1.3; }
.hm-step__sub { font-size: 13px; color: var(--fg-2); line-height: 1.55; }

@media (max-width: 1000px) { .hm-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hm-steps { grid-template-columns: 1fr; } }

/* ========== WHY (6 advantage cards) ======================================= */
.hm-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.hm-why__card {
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hm-why__v {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.hm-why__l { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.hm-why__s { font-size: 13px; color: var(--fg-2); line-height: 1.55; margin-top: 4px; }

@media (max-width: 1000px) { .hm-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hm-why { grid-template-columns: 1fr; } }

/* ========== ПУНКТ ОТГРУЗКИ В МОСКВЕ (головной, на главной) ================ */
.hm-wh { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; }
.hm-wh__card {
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
}
.hm-wh__ic {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(43, 92, 138, 0.08);
  color: var(--c-accent);
  margin-bottom: 14px;
}
.hm-wh__h { font-size: 14px; font-weight: 600; color: var(--fg-1); margin-bottom: 10px; }
.hm-wh__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-wh__list li { font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.hm-wh__list li .t-num { color: var(--fg-1); }
@media (max-width: 560px) { .hm-wh { grid-template-columns: 1fr; } }

/* ========== CALCULATORS (5) =============================================== */
.hm-calc {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.hm-calc__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease;
  position: relative;
}
.hm-calc__card:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.hm-calc__ic { color: var(--c-accent); margin-bottom: 4px; }
.hm-calc__name { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
.hm-calc__sub  { font-size: 12px; color: var(--fg-3); line-height: 1.5; flex: 1; }
.hm-calc__arr  { position: absolute; top: 18px; right: 16px; color: var(--fg-3); }

@media (max-width: 1080px) { .hm-calc { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .hm-calc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .hm-calc { grid-template-columns: 1fr; } }

/* ========== CASES (3 with photo placeholder) ============================== */
.hm-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.hm-case {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.hm-case:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(15,22,36,0.2); }
.hm-case__photo {
  height: 180px;
  background: repeating-linear-gradient(45deg, #F4F6F9 0 12px, #EDF0F4 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--c-steel-500, #8d99a8);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
}
.hm-case__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-case__photo-tag {
  position: absolute; top: 12px; left: 12px;
  background: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-sans, sans-serif);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-accent);
  text-transform: uppercase;
  border: 1px solid var(--border-1);
}
.hm-case__photo-note {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-sans, sans-serif);
  color: var(--fg-3);
  letter-spacing: 0;
  font-weight: 500;
  border: 1px solid var(--border-1);
}
.hm-case__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.hm-case__city {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  font-weight: 600;
}
.hm-case__ttl  { font-size: 16px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
.hm-case__desc { font-size: 13px; color: var(--fg-2); line-height: 1.55; flex: 1; }
.hm-case__meta {
  display: flex; gap: 24px;
  padding-top: 10px;
  border-top: 1px solid var(--border-1);
}
.hm-case__meta > div { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--fg-3); }
.hm-case__meta b {
  font-size: 16px; font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em;
  font-family: var(--font-mono, monospace);
}

@media (max-width: 980px) { .hm-cases { grid-template-columns: 1fr; } }

/* ========== SUBDOMAINS strip (bottom SEO) ================================= */
.hm-subs {
  padding: 28px 0 36px;
  background: var(--c-graphite, #1F2937);
  color: #fff;
}
.hm-subs__h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  margin-bottom: 16px;
}
.hm-subs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 18px;
}
.hm-subs__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.12s ease;
}
.hm-subs__link:hover { color: var(--c-accent); }
.hm-subs__url { font-size: 11px; color: rgba(255,255,255,0.4); margin-left: auto; }

@media (max-width: 1080px) { .hm-subs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .hm-subs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .hm-subs__grid { grid-template-columns: 1fr; } }

/* Каталог-сетка как в регионах (CatalogGrid / .cats) — перенесено из site.css */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 28px; }
.section-head__title { font-size: 32px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.15; }
.section-head__sub { font-size: 15px; color: var(--fg-3); margin: 8px 0 0; max-width: 56ch; }
.cats { padding: 80px 0; }
.cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Премиум фото-плитка: тёмная база, фото раздела на фоне, графитовый scrim, текст поверх. */
.cats__plate {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-3); min-height: 232px;
  display: flex; text-decoration: none; color: #fff;
  background: #0F1418; border: 1px solid rgba(15,20,24,0.10);
  transition: transform var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std);
}
.cats__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.55s var(--ease-std); }
.cats__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,20,24,0.32) 0%, rgba(15,20,24,0.48) 42%, rgba(15,20,24,0.90) 100%); }
.cats__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 20px; width: 100%; }
.cats__plate:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,20,24,0.26); }
.cats__plate:hover .cats__bg { transform: scale(1.06); }
.cats__ic { display: none; }
.cats__ic svg { width: 22px; height: 22px; }
.cats__ttl { font-size: 16px; font-weight: 600; line-height: 1.3; color: #fff; }
.cats__sub { font-size: 13px; color: rgba(255,255,255,0.84); line-height: 1.45; }
.cats__more { margin-top: auto; padding-top: 12px; font-family: var(--font-mono); font-size: 12px; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.cats__more svg { color: var(--c-accent-2, #6CA8DE); }
/* Тёмная CTA-плитка «Не нашли позицию» — без фото, чистый графит. */
.cats__plate--dark { background: var(--c-graphite); border-color: var(--c-graphite); }
.cats__plate--dark .cats__ic { background: rgba(255,255,255,0.10); }
@media (max-width: 1100px) { .cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .cats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .cats__grid { grid-template-columns: 1fr; } .cats__plate { min-height: 200px; } .section-head { flex-direction: column; align-items: flex-start; } .section-head__title { font-size: 26px; } }