/* es2-home — слой главной страницы v2 (hero с 3D-двигателем, подбор двигателя/насоса, бренды,
   плитки каталога, «Как заказать»). Токены и общие компоненты — в es2.css, здесь только то,
   что нужно только главной. Перенос вида из redesign/proto/index.html (#v-home). */

.hero{padding:24px 0 0}
.hero-l{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:8px;
  padding:52px 24px 28px 48px;border-radius:28px;background:var(--navy);color:#fff}
.hero-tx{padding-bottom:20px;min-width:0}
.hero-l .eyebrow{color:#8FB3D6}
.hero-l h1{color:#fff;max-width:640px}
.hero-l p.lead{color:#C9D6E4;font-size:17px;margin:14px 0 22px;max-width:560px}
.hero-search{display:flex;align-items:center;gap:10px;width:100%;max-width:420px;height:52px;padding:0 18px;border:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;cursor:pointer;font:500 15px/1 var(--font);margin-bottom:18px;text-align:left}
.hero-search:hover{background:rgba(255,255,255,.14)}
.hero-search span{flex:1;color:#C9D6E4}
.hero-search kbd{font:600 11px/1 var(--font);color:#8FB3D6;background:rgba(255,255,255,.1);padding:3px 7px;border-radius:6px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hero-l .chip{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff}
.hero-l .chip:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);color:#fff}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-cta .lnk{color:#C9D6E4;font-weight:600;border-bottom:1px solid rgba(201,214,228,.35);padding-bottom:2px}
.hero-cta .lnk:hover{color:#fff;border-color:#fff}

.mot-st{position:relative;min-height:440px;display:flex;flex-direction:column}
.mot-cv{position:relative;flex:1;min-height:0;cursor:grab;touch-action:pan-y}
.mot-cv:active{cursor:grabbing}
.mot-cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mot-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.mot-rpm{display:flex;align-items:baseline;gap:6px;min-width:96px}
.mot-rpm b{font-size:26px;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.mot-rpm span{font-size:13px;color:#8FB3D6}
.mot-x{height:44px;padding:0 18px;border:0;border-radius:22px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:#fff;font:600 14.5px/1 var(--font);cursor:pointer;transition:background .2s}
.mot-x:hover{background:rgba(255,255,255,.16)}
.mot-hint{position:absolute;right:4px;top:0;font-size:12px;color:#8FB3D6;pointer-events:none}
.mot-st .seg-d{margin-right:auto}

/* цифры доверия — только правдивые значения из конфига/текстов сайта, см. AGENT_BRIEF */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.trust div{background:#fff;border-radius:var(--r-card);padding:20px 22px}
.trust b{display:block;font-size:27px;font-weight:700;color:var(--navy);line-height:1.1;letter-spacing:-.01em}
.trust span{color:var(--muted);font-size:13.5px}

/* бренды: бегущая строка, ход через CSS-анимацию (JS только удваивает список и включает класс run) */
.brands{overflow:hidden;margin-top:22px;padding:6px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brands-t{display:flex;width:max-content}
.brands-t.run{animation:es2Marquee 34s linear infinite}
.brands-t span{flex:none;padding:0 26px;font-size:24px;font-weight:700;letter-spacing:-.01em;color:#9AA8B8;white-space:nowrap;transition:color .25s}
.brands-t span:hover{color:var(--navy)}
@keyframes es2Marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* подбор двигателя и насоса */
.pk{position:relative;background:#fff;border-radius:28px;padding:10px;overflow:hidden}
.pk-p{display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:10px;transition:opacity .3s,filter .3s,transform .5s var(--ease)}
.pk-p:not(.on){display:none}
.pk-p.enter{opacity:0;filter:blur(8px);transform:translateX(calc(var(--d,1)*32px))}
.pk-ctl{padding:22px 14px 22px 18px;display:flex;flex-direction:column;gap:24px}
.pk-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.pk-l b{font-size:17px;color:var(--navy);font-variant-numeric:tabular-nums}
.pk-vis{position:relative;min-height:360px;border-radius:20px;background:var(--navy);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pk-vis canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.pk-vis .tag{position:absolute;left:16px;bottom:14px;z-index:1;pointer-events:none;font-size:12px;font-weight:600;color:#8FB3D6;letter-spacing:.04em}
.pk-res{padding:22px 16px 18px 12px;display:flex;flex-direction:column;gap:14px}
.pk-name{font-size:30px;font-weight:700;color:var(--navy);line-height:1.1;letter-spacing:-.015em}
.pk-spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14px}
.pk-spec dt{color:var(--muted)}.pk-spec dd{margin:0;color:var(--navy);font-weight:600;text-align:right}
.pk-note{font-size:13.5px;margin:0}
.pk-go{margin-top:auto;height:52px}

/* насос: улитка в разрезе (рабочее колесо крутится от H, поток бежит от Q) + кривая Q–H с масштабом осей — es2-home.js */
.pmp{position:absolute;inset:0;display:grid;grid-template-columns:44% 56%;padding:14px 10px 30px}
.pmp svg{width:100%;height:100%;display:block;overflow:visible}
.pmp text{font:600 11px var(--font);fill:#8FB3D6}

/* реальные «N позиций · цена от» на подборе — по умолчанию скрыто, JS показывает при наличии данных */
.pk-cnt{display:none;padding:12px 14px;border-radius:12px;background:rgba(10,93,175,.08);color:var(--muted);font-size:13.5px}
.pk-cnt b{font-variant-numeric:tabular-nums;color:var(--navy)}
.pk-lnk{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:600 14px/1.3 var(--font);color:var(--blue);cursor:pointer;text-align:left}
.pk-lnk:hover{color:var(--blue-hi,#084a92)}

/* SEO-текст внизу: центрируем читаемую колонку вместо провала слева с пустотой справа */
.es-seo{max-width:75ch;margin:0 auto}

/* популярные позиции: сегменты Все/Двигатели/Насосы, карточки — реальные товары из es2.pop.php */
#pop-w{margin-top:18px}
.pop{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pop.gone{display:none}
.pc{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:var(--r-card);padding:20px}
.pc-ic{width:76px;height:76px;border-radius:18px;background:var(--bg);display:grid;place-items:center;margin-bottom:10px;transition:background-color .3s,transform .4s var(--ease)}
.pc-ic svg{display:block}
.pc:hover .pc-ic{background:#E3EEF9;transform:translateY(-2px)}
.pc .eyebrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc h3{font-size:18px;line-height:1.25;margin:0;overflow-wrap:anywhere}
.pc p{margin:0;font-size:13.5px;color:var(--muted)}
.pc h3 a{color:inherit;text-decoration:none}
.pc h3 a:hover{text-decoration:underline}
.pc-b{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.pc-b>b{font-size:18px;color:var(--navy);white-space:nowrap}
.pc.in-a{animation:pcIn .5s var(--ease) both}
@keyframes pcIn{from{opacity:0;filter:blur(6px);scale:.94}}

/* наклон за курсором (движок — es2.js, здесь только переход и box-shadow на плитках главной) */
.cat[data-tilt],.trust>div,.pc[data-tilt]{transition:transform .14s ease-out,box-shadow .35s}

/* каталог: двигатели и насосы — крупными плитками первыми */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cat{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-card);overflow:hidden;color:var(--ink)}
.cat:hover{box-shadow:0 16px 32px -18px rgba(11,37,64,.35)}
.cat .ph{display:block;aspect-ratio:16/10;background:#23262d;overflow:hidden}
.cat .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.cat:hover .ph img{transform:scale(1.04)}
.cat .tx{padding:18px 20px 20px}
.cat h3{margin:0}
.cat h3 a{color:inherit;text-decoration:none}
.cat h3 a:hover{text-decoration:underline}
.cat .tx p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.cat .n{position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);font-size:12.5px;font-weight:600;color:var(--navy);z-index:2}
.cat.wide{grid-column:span 2;flex-direction:row}
.cat.wide .ph{flex:0 0 42%;aspect-ratio:auto;align-self:stretch}
.cat.wide .tx{flex:1;min-width:0;padding:22px 26px 26px;display:flex;flex-direction:column;justify-content:center}
.cat.wide h3{font-size:24px}
.cat-sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cat-sub a{height:30px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--bg);font-size:13px;font-weight:500;color:var(--ink);transition:background .2s}
.cat-sub a:hover{background:var(--mist);color:var(--ink)}

/* как заказать: рисующаяся линия между шагами */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s}
.step{background:#fff;border-radius:var(--r-card);padding:24px;position:relative}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:14px;margin-bottom:18px;position:relative;z-index:2;transition:background-color .3s}
.step p{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.step:not(:last-child)::after{content:"";position:absolute;left:56px;top:39px;width:calc(100% - 20px);height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.steps.drawn .step::before{background:var(--blue)}
.steps.drawn .step:not(:last-child)::after{transform:scaleX(1)}
.steps .step:nth-child(2)::before,.steps .step:nth-child(2)::after{transition-delay:.25s}
.steps .step:nth-child(3)::before,.steps .step:nth-child(3)::after{transition-delay:.5s}
.steps .step:nth-child(4)::before{transition-delay:.75s}

@media (max-width:1100px){
  .hero-l{grid-template-columns:1fr;padding:40px 28px 24px}
  .mot-st{min-height:360px}
  .pk-p{grid-template-columns:1fr 1fr}
  .pk-vis{grid-column:1/-1;grid-row:1;min-height:280px}
  .cats{grid-template-columns:1fr 1fr}
  .cat.wide{grid-column:span 2}
  .pop{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero-l{padding:30px 20px 20px;border-radius:22px}
  .mot-st{min-height:300px}
  .mot-hint{display:none}
  .hero-search{max-width:none}
  .pk-p{grid-template-columns:1fr}
  .pk-vis{min-height:300px}
  .pmp{grid-template-columns:40% 60%;padding:10px 6px 30px}
  .pk-ctl,.pk-res{padding:16px 10px}
  .pk-name{font-size:24px}
  .hero-cta .btn{width:100%;justify-content:center}
  .cats{grid-template-columns:1fr 1fr}
  .cat.wide{grid-column:span 2;flex-direction:column}
  .cat.wide .ph{flex:none;aspect-ratio:16/9;align-self:auto}
  .cat.wide .tx{display:block}
  .trust{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .step:not(:last-child)::after{display:none}
  .pop{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .cats{grid-template-columns:1fr}
  .cat.wide{grid-column:span 1}
  .steps{grid-template-columns:1fr}
  .pop{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .brands-t.run{animation:none}
  .pc.in-a{animation:none}
  .cat[data-tilt],.trust>div,.pc[data-tilt]{transition:none}
  .step::before,.step:not(:last-child)::after{transition:none}
}