/* Блоки новой главной — по образцу doirastan.uz, вёрстка своя.
 *
 * Все правила живут под .lp намеренно: на сайте уже есть .step, .dir и .case
 * со своим видом, и без обёртки новые правила молча переписали бы старую
 * главную. Один враппер дешевле, чем переименование половины классов.
 */

.lp .wrap--narrow { max-width: 860px; }
.lp .muted { color: var(--muted); }

/* ── Этапы ───────────────────────────────────────────────────────────────── */

.lp .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.lp .steps .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.lp .steps .step__num { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px;
	border-radius: 12px; background: var(--tint); color: var(--blue); font-weight: 800; font-size: 18px; }
.lp .steps .step h3 { margin: 0 0 8px; font-size: 17px; }
.lp .steps .step p { margin: 0; color: var(--muted); font-size: 15px; }

/* ── Кейсы ───────────────────────────────────────────────────────────────── */

.lp .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.lp .cases .case { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.lp .cases .case h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.35; font-weight: 700; }
.lp .cases .case p { margin: 0; color: var(--muted); font-size: 15px; }

/* ── Услуги: цветная шапка карточки и список возможностей ────────────────── */

.lp .dirs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.lp .dirs .dir { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: var(--ink);
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lp .dir__head { padding: 20px 22px; color: #fff; }
.lp .dir__head h3 { margin: 0; font-size: 20px; font-weight: 800; }

.lp .dir--bx   .dir__head { background: linear-gradient(135deg, #2ea4dd, #1a72b8); }
.lp .dir--amo  .dir__head { background: linear-gradient(135deg, #3f6fd8, #21407f); }
.lp .dir--onec .dir__head { background: linear-gradient(135deg, #f5d020, #e0aa00); color: #4a3400; }
.lp .dir--ai   .dir__head { background: linear-gradient(135deg, #22c08a, #0f9c6c); }

.lp .dir__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 20px 22px 22px; }
.lp .dir__body p { margin: 0; color: var(--muted); font-size: 15px; opacity: 1; }

.lp .dir__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lp .dir__list li { position: relative; padding: 0 0 0 26px; font-size: 15px; opacity: 1; }
.lp .dir__list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
	display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--blue); font-size: 11px; }

.lp .btn--wide { margin-top: auto; justify-content: center; align-self: stretch; }
.lp .dirs .dir .btn { background: var(--blue); color: #fff; }
.lp .dir--onec .btn { background: #4a3400; }

/* ── Цифры о компании ────────────────────────────────────────────────────── */

.lp .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lp .fact { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.lp .fact b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.lp .fact span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }

/* ── Виджеты ─────────────────────────────────────────────────────────────── */

.lp .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lp .widget { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; }
.lp .widget h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.lp .widget p { margin: 0; color: var(--muted); font-size: 15px; }

/* ── Партнёры ────────────────────────────────────────────────────────────── */

.lp .partner { display: grid; gap: 14px; place-items: center; text-align: center; padding: 26px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lp .partner img { max-width: 150px; max-height: 64px; object-fit: contain; }
.lp .partner span { font-weight: 600; font-size: 15px; }

/* ── Вопросы: на <details>, работают без скриптов ────────────────────────── */

.lp .faq { display: grid; gap: 10px; }
.lp .faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2px 22px; }
.lp .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 18px 0; font-weight: 600; cursor: pointer; list-style: none; }
.lp .faq__item summary::-webkit-details-marker { display: none; }
.lp .faq__item summary::after { content: "⌄"; color: var(--blue); font-size: 22px; line-height: 1; transition: transform .2s; }
.lp .faq__item[open] summary::after { transform: rotate(180deg); }
.lp .faq__answer { padding: 0 0 18px; color: var(--muted); font-size: 15px; }
.lp .faq__answer p { margin: 0; }

/* ── Адаптив ─────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.lp .steps, .lp .cases, .lp .grid-2, .lp .dirs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.lp .steps, .lp .cases, .lp .grid-2, .lp .dirs, .lp .facts { grid-template-columns: 1fr; }
}

/* ── Страница «О нас» ────────────────────────────────────────────────────── */

.lp .hero--page { padding: 64px 0 56px; }
.lp .hero--page h1 { max-width: 760px; }
.lp .hero__lead--wide { max-width: 720px; }

.lp .skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lp .skill { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; }
.lp .skill h3 { margin: 0 0 14px; font-size: 19px; font-weight: 800; }

@media (max-width: 980px) { .lp .skills { grid-template-columns: 1fr; } }