/* ============================================================
   plant.voir.su — css/pages/home.css (Главная, владелец spbflot)
   Дополняет канон base.css уникальными блоками главной:
   hero-сцена фоном, KPI-статы, шаги, спеки, CTA.
   Токены только через var() из base.css. kebab-case, clamp(), без px.
   ============================================================ */

/* ---- hero-блок дашборда: 3D-сцена фоном, текст поверх ---- */
.pblock-hero .pblock-body {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 42vw, 440px);
}
.pblock-hero .hero-scene {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  /* постер виден: никакого глобального затемнения контейнера */
}
.pblock-hero .hero-scene::after {
  /* scrim: тёмная подложка ТОЛЬКО под текстом слева, справа постер виден */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,11,20,.92) 0%, rgba(7,11,20,.72) 42%, rgba(7,11,20,.12) 72%, rgba(7,11,20,.05) 100%),
    linear-gradient(0deg, rgba(7,11,20,.55) 0%, transparent 40%);
}
.hero-copy {
  position: relative; z-index: 2;
  padding: clamp(24px, 4vw, 44px);
  max-width: 680px;
}
.hero-copy .lead { max-width: 560px; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 40px; }

/* ---- KPI-статы (ровная сетка, без сирот) ---- */
.hero-stats {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; padding: 0; margin: 0;
}
.hero-stats li {
  background: rgba(17, 27, 45, .6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-stats b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--amber);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.hero-stats span { color: var(--muted); font-size: .86rem; }

/* ---- шаги (нумерованный список) ---- */
.steps {
  list-style: none; counter-reset: step;
  display: grid; gap: 12px; margin: 0; padding: 0;
}
.steps li {
  counter-increment: step; position: relative;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px 16px 60px;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 18px; top: 16px;
  font-family: var(--font-mono);
  color: var(--teal); font-weight: 700; font-size: 1.05rem;
}
.steps b { display: block; margin-bottom: 2px; }
.steps span { color: var(--muted); font-size: .9rem; }

/* ---- спеки (dl) ---- */
.specs { margin: 18px 0 0; display: grid; gap: 12px; }
.specs > div {
  display: grid; grid-template-columns: 118px 1fr; gap: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 11px;
}
.specs dt { color: var(--teal); font-weight: 700; font-size: .88rem; }
.specs dd { margin: 0; color: var(--ink); opacity: .86; }

/* ---- мелкая подпись / сноска ---- */
.mini-note { color: var(--muted); font-size: .85rem; margin: 10px 0 0; }
.fine { color: var(--muted); font-size: .84rem; margin-top: 26px; }

/* ---- статичная витрина панели (3D в потоке) ---- */
.pblock-product .scene-box { aspect-ratio: 16/10; margin-bottom: 16px; }

@media (max-width: 768px) {
  .hero-copy { padding: 20px; }
  .pblock-hero .pblock-body { min-height: 320px; }
  .steps li { padding-left: 52px; }
  .specs > div { grid-template-columns: 100px 1fr; }
  .hero-copy .lead { font-size: .98rem; }
}