/* Страница «Индивидуальная разработка» (pages/page-razrabotka.php), поверх analytics.css.
   Только переменные темы и схемы 4l (--accent / --on-accent / --accent-tint) — светлая и тёмная темы без отдельных правил. */

/* ---------- Hero: от идеи до запуска ---------- */
.dv-flow { display: flex; flex-direction: column; gap: .75rem; padding: 2rem; border-radius: var(--radius-xl); background: var(--color-bg-2); border: 1px solid var(--color-border-secondary); box-shadow: 0 18px 40px -24px rgba(31, 31, 31, .35); }
.dv-flow__row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-base); background: var(--color-bg-4); color: var(--color-text); }
.dv-flow__row p { margin: 0; line-height: 1.45; }
.dv-flow__row b { color: var(--color-text-heading); }
.dv-flow__row--idea { flex-direction: column; align-items: flex-start; gap: .5rem; background: var(--accent-tint); border: 1px dashed var(--accent-line); }
.dv-flow__row--idea p { font-style: italic; color: var(--color-text-heading); }
.dv-flow__label { padding: .3rem .8rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .8125rem; font-weight: 700; }
.dv-flow__num { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-bg-2); border: 1px solid var(--accent-line); color: var(--accent); font-weight: 800; }
.dv-flow__row--accent { background: var(--accent); color: var(--on-accent); }
.dv-flow__row--accent b { color: var(--on-accent); }
.dv-flow__row--accent .dv-flow__num { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent); }

/* ---------- Что можем сделать ---------- */
.dv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.dv-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 1.5rem; border-radius: var(--radius-xl); background: var(--color-bg-2); border: 1px solid var(--color-border-secondary); }
.dv-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: .25rem; border-radius: 1rem; background: var(--accent); color: var(--on-accent); }
.dv-card__title { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: var(--color-text-heading); }
.dv-card__text { margin: 0; line-height: 1.5; color: var(--color-text); }
.dv-callout { align-items: center; }
.dv-callout > div { flex: 1 1 auto; }
.dv-callout__btn { flex: none; }

/* ---------- Что уже построили ---------- */
.dv-built { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.dv-built__item { grid-column: span 2; display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 1.5rem; border-radius: var(--radius-xl); background: var(--color-bg-2); border: 1px solid var(--color-border-secondary); border-top: 4px solid var(--accent); }
.dv-built__item:nth-child(4), .dv-built__item:nth-child(5) { grid-column: span 3; }
.dv-built__title { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: var(--color-text-heading); }
.dv-built__text { margin: 0; line-height: 1.5; color: var(--color-text); }
.dv-built__link { margin-top: auto; padding-top: .5rem; align-self: flex-start; }

/* ---------- Почему с нами проще ---------- */
.dv-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.dv-reason { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border-radius: var(--radius-xl); background: var(--color-bg-2); border: 1px solid var(--color-border-secondary); }
.dv-reason b { font-size: 1.375rem; font-weight: 800; color: var(--color-text-primary, var(--accent)); }
.dv-reason span { color: var(--color-text); line-height: 1.45; }

/* ---------- Адаптив ---------- */
@media (max-width: 992px) {
  .dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-built { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-built__item, .dv-built__item:nth-child(4), .dv-built__item:nth-child(5) { grid-column: span 1; }
  .dv-built__item:first-child { grid-column: 1 / -1; }
  .dv-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-callout { align-items: flex-start; }
}

@media (max-width: 576px) {
  .dv-flow { padding: 1.25rem; }
  .dv-grid, .dv-built, .dv-reasons { grid-template-columns: minmax(0, 1fr); }
  .dv-callout__btn, .dv-page .an-hero__actions .an-cta-btn { width: 100%; justify-content: center; }
}