/* ============================================================
   БАЗА 30–39 (класс .vb): выбранные решения
   Проекты — «Бенто» (вариант 25), калькулятор — «Финал» (29)
   ============================================================ */


/* ---------- Типографика из варианта 25 ---------- */
.vb .hero__slogan { font-size: clamp(42px, 6.4vw, 100px); letter-spacing: -0.02em; }
.vb .section { padding-top: 120px; padding-bottom: 120px; }
.vb .section__title {
  font-size: clamp(42px, 6vw, 92px); font-weight: 900; letter-spacing: -0.03em; line-height: 1;
}

/* ---------- Проекты: бенто-сетка ---------- */
@media (min-width: 1025px) {
  .vb .projects-hscroll { overflow: visible; }
  .vb .projects-hscroll .container { max-width: 1400px; padding: 0 40px; }
  .vb .projects-hscroll .section__title { padding: 0; max-width: none; }
  .vb .projects-hscroll .projects-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 210px; grid-auto-flow: dense; gap: 20px;
    width: auto; padding: 0; will-change: auto;
  }
  .vb .projects-hscroll .section__more { display: block; margin-top: 48px; }
  .vb .projects-hscroll .project-card { width: auto; }
  .vb .projects-hscroll.reveal { opacity: 1; transform: none; }

  .vb .project-card:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
  .vb .project-card:nth-child(6n+4) { grid-column: span 2; }
  .vb .project-card:nth-child(6n+5) { grid-row: span 2; }

  .vb .project-card { position: relative; overflow: hidden; border-radius: 8px; }
  .vb .project-card__link { display: block; height: 100%; }
  .vb .project-card__img-wrap { position: absolute; inset: 0; aspect-ratio: auto; }
  .vb .project-card__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
  }
  .vb .project-card:hover .project-card__img { transform: scale(1.06); }
  .vb .project-card__more { display: none; }

  .vb .project-card__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 60px 20px 18px;
    background: linear-gradient(to top, rgba(0,0,0,0.88), transparent);
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
  }
  /* В статике название, дата и цена видны полностью;
     при наведении — подпись плавно приподнимается */
  .vb .project-card:hover .project-card__body { transform: translateY(-8px); }
  .vb .project-card__title { font-size: 19px; }
  .vb .project-card:nth-child(6n+1) .project-card__title { font-size: 26px; }
  .vb .project-card__price { color: var(--brand-yellow); font-weight: 500; margin: 0; }
}

@media (max-width: 1024px) {
  .vb .project-card__meta { opacity: 1; }
}

/* ---------- Калькулятор: финальная сцена со счётчиком ---------- */
.vb .calc-cta { position: relative; overflow: hidden; }
.vb .calc-cta__inner { position: relative; z-index: 2; }
.vb .finale-count {
  display: block; margin: 34px 0 6px;
  font-size: clamp(56px, 9vw, 150px); font-weight: 900; letter-spacing: -0.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.vb .finale-steps {
  display: flex; gap: 18px; margin-top: 22px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.vb .finale-steps span { transition: color 0.4s ease; }
.vb .finale-steps span.lit { color: var(--brand-yellow); }
.vb .finale-steps i { font-style: normal; color: rgba(255,255,255,0.2); }