/* ================== Главная v2 — этапы работ ==================
   Вёрстка по макету glavnaya-v20.html. Шапка и подвал сайта не трогаются.
   Шрифт системный: Manrope из макета владелец отклонил, размеры и
   межбуквенные интервалы сохранены как в макете.
   ============================================================== */
.stm{--ink:#15171B;--muted:#8A9099;--soft:#6B727C;--line:#EAE7E3;--line2:#EDEBE8;
     --bg:#F2F1EF;--card:#FCFBFA;--acc:#E98A3C;
     font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.stm *{box-sizing:border-box}
.stm img{display:block}
.stm-wrap{max-width:1520px;margin:0 auto;padding:26px 36px 36px}

.stm-hl{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.stm-hl h1{font-size:25px;font-weight:800;letter-spacing:-.035em;margin:0;line-height:1.15}
.stm-hl p{font-size:13.5px;color:var(--soft);margin:0}
.stm-sub{font-size:13.5px;color:#5C636D;margin:7px 0 18px;max-width:820px;line-height:1.55}

/* этапы */
.stm-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.stm-g{background:#fff;border:1.5px solid var(--line);border-radius:15px;padding:18px;cursor:pointer;
  display:flex;flex-direction:column;gap:12px;min-height:148px;transition:.18s;position:relative;
  width:100%;text-align:left;font:inherit;color:inherit}
.stm-g:hover{border-color:#C9C6C0;transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,22,26,.09)}
.stm-g[aria-expanded="true"]{background:var(--ink);border-color:var(--ink)}
.stm-g[aria-expanded="true"] .stm-gt,.stm-g[aria-expanded="true"] .stm-gc{color:#fff}
.stm-g[aria-expanded="true"] .stm-gs{color:#9AA1AB}
.stm-g[aria-expanded="true"] .stm-ic{background:rgba(255,255,255,.11)}
.stm-g[aria-expanded="true"] .stm-ics{stroke:var(--acc)}
.stm-ic{width:46px;height:46px;border-radius:12px;background:#F4F3F1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stm-ics{stroke:var(--ink);transition:.18s}
.stm-g>span{display:block}
.stm-gt{display:block;font-size:16px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.stm-gs{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:4px}
.stm-gc{position:absolute;right:16px;top:16px;font-size:11.5px;font-weight:800;color:#B4B8BF;
  font-variant-numeric:tabular-nums}

/* второй уровень — вся разметка в HTML сразу, скрыта только высота */
.stm-lvl2{margin-top:14px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px;display:none}
.stm-lvl2.on{display:block}
.stm-l2h{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.stm-l2h h2{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:0}
.stm-close{margin-left:auto;width:34px;height:34px;border-radius:10px;background:var(--bg);display:flex;
  align-items:center;justify-content:center;cursor:pointer;font-size:19px;color:#6A7078;line-height:1;
  border:0;font-family:inherit}
.stm-close:hover{background:#E6E4E0}
.stm-l2s{font-size:13px;color:var(--soft);margin-bottom:16px}
.stm-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.stm-c{border:1.5px solid var(--line2);border-radius:13px;overflow:hidden;background:var(--card);transition:.16s;
  display:flex;flex-direction:column}
.stm-c:hover{border-color:var(--ink);transform:translateY(-2px)}
.stm-c a.stm-cl{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
/* на карточках — технические схемы узлов, а не фото: показываем целиком.
   object-fit:cover из макета обрезал их до нечитаемого фрагмента. */
.stm-im{display:flex;height:150px;background:#fff;align-items:center;justify-content:center;overflow:hidden;padding:6px}
.stm-im img{width:100%;height:100%;object-fit:contain}
.stm-noimg{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;color:#B4B8BF;font-weight:700}
.stm-noimg svg{stroke:#CFCCC7}
.stm-tx{padding:12px;display:flex;flex-direction:column;flex:1}
.stm-ct{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.stm-cs{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.stm-cb{display:block;margin-top:auto;padding-top:10px}
.stm-cb span{height:34px;border-radius:9px;background:var(--bg);display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:800;transition:.16s}
.stm-c:hover .stm-cb span{background:var(--ink);color:#fff}
.stm-cb span.kit{background:#EDF3EF;color:#3E6B52}
.stm-c:hover .stm-cb span.kit{background:#3E6B52;color:#fff}

/* чипы */
.stm-railh{font-size:13px;color:var(--soft);margin:20px 0 8px}
.stm-rail{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.stm-chip{height:36px;padding:0 14px;border-radius:10px;background:#fff;border:1.5px solid #E6E3DF;
  display:flex;align-items:center;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink);
  white-space:nowrap;transition:.16s}
.stm-chip:hover{border-color:var(--ink)}

/* витрина */
.stm-show{margin-top:26px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:28px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;align-items:center}
.stm-show-im{background:radial-gradient(120% 100% at 30% 20%,rgba(233,138,60,.20),transparent 68%),
  linear-gradient(160deg,#F4F3F1,#EFE7DD);border-radius:12px;aspect-ratio:4/3;display:flex;
  align-items:center;justify-content:center;padding:22px;overflow:hidden}
.stm-show-im img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.stm-eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#A8642A;font-weight:800;margin:0 0 10px}
.stm-show h2{font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.16;margin:0 0 6px}
.stm-show-sub{font-size:12.5px;color:var(--muted);margin:0 0 18px}
.stm-four{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line2);
  border:1.5px solid var(--line2);border-radius:12px;overflow:hidden;margin:0}
.stm-four>div{background:#fff;padding:13px 15px}
.stm-four dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 4px}
.stm-four dd{margin:0;font-size:21px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stm-four dd small{font-size:12px;color:var(--muted);font-weight:700}
.stm-four>div.lead{background:#FDF4EC}
.stm-four>div.lead dd{color:#A8642A}
.stm-st{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:8px;
  font-size:11.5px;font-weight:800;margin-bottom:12px}
.stm-st.in{background:#EDF3EF;color:#3E6B52}
.stm-st.ord{background:#F4F1EA;color:#7A6435}
.stm-cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.stm-btn{height:44px;padding:0 22px;border-radius:10px;background:var(--ink);color:#fff;border:1.5px solid var(--ink);
  display:inline-flex;align-items:center;font-size:14px;font-weight:800;text-decoration:none;transition:.16s}
.stm-btn:hover{background:#000}
.stm-btn.ghost{background:transparent;color:var(--ink)}
.stm-btn.ghost:hover{background:var(--bg)}

/* SEO-блок: свёрнута только высота, текст в HTML и виден для поиска */
.stm-seo{margin-top:26px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:24px 26px}
.stm-seo h2{font-size:18px;font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.stm-seotext{position:relative;overflow:hidden;max-height:4.9em;transition:max-height .35s ease}
.stm-seo.open .stm-seotext{max-height:220em}
.stm-seotext::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;transition:opacity .25s}
.stm-seo.open .stm-seotext::after{opacity:0}
.stm-seotext p{margin:0 0 12px;font-size:14px;line-height:1.62;color:#3B4048;max-width:none}
.stm-seotext p:last-child{margin-bottom:0}
.stm-more{margin-top:12px;height:38px;padding:0 18px;border-radius:9px;background:var(--bg);border:1.5px solid var(--line);
  font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;font-family:inherit}
.stm-more:hover{border-color:#C9C6C0}

.stm a:focus-visible,.stm button:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:10px}

@media(max-width:1100px){
  .stm-groups,.stm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stm-show{grid-template-columns:1fr;gap:22px}
}
@media(max-width:620px){
  .stm-groups,.stm-cards{grid-template-columns:1fr}
  .stm-wrap{padding:18px 14px 26px}
  .stm-show{padding:18px}
  .stm-four{grid-template-columns:1fr}
  .stm-hl h1{font-size:22px}
}
/* На телефоне этап — компактная строка ~70px: иконка слева,
   название и подпись справа, счётчик в углу. Высокие карточки на узком
   экране выталкивали список этапов на два экрана. */
@media(max-width:560px){
  .stm-groups{gap:8px}
  .stm-g{flex-direction:row;align-items:center;gap:12px;min-height:70px;padding:11px 38px 11px 12px;border-radius:12px}
  .stm-ic{width:40px;height:40px;border-radius:10px}
  .stm-ic svg{width:20px;height:20px}
  .stm-g>span:last-of-type{min-width:0}
  .stm-gt{font-size:14.5px;line-height:1.2}
  .stm-gs{font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stm-gc{top:50%;right:13px;transform:translateY(-50%);font-size:12px}
  .stm-g:hover{transform:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.stm *{transition:none!important}}