/* Timeline copied from sergeev.studio child theme bloki.css; scoped to this homepage. */
.lp-home .ss-tok{--ss-dark-ink:#fff;--ss-dark-muted:rgba(255,255,255,.66);--ss-dark-line:rgba(255,255,255,.14);--ss-dark-surface:rgba(255,255,255,.06);--ss-accent:#25cbc2;--ss-accent-2:#1affd3;position:relative;isolation:isolate;overflow-x:clip;padding-block:80px;background:linear-gradient(160deg,#111 0%,#191919 55%,#111 100%);color:#fff;border-radius:32px;scroll-margin-top:90px}
.lp-home .ss-tok::before{content:'';position:absolute;inset-block:0;left:50%;width:calc(min(1440px,100vw - 112px) + 18px);transform:translateX(-50%);pointer-events:none;z-index:-1;background-image:linear-gradient(#ffffff0f,#ffffff0f),linear-gradient(#ffffff0f,#ffffff0f),linear-gradient(#ffffff0f,#ffffff0f),linear-gradient(#ffffff0f,#ffffff0f);background-position:0 0,33.333333% 0,66.666666% 0,100% 0;background-repeat:no-repeat;background-size:1px 100%}
.lp-home .ss-tok .ss-razdel__zag{font-family:Unbounded,system-ui,sans-serif;font-size:clamp(28px,2.9vw,40px);line-height:1.25;letter-spacing:-.02em;font-weight:700}
.lp-home .ss-tok__intro{font-size:16px;line-height:1.7;color:var(--ss-dark-muted);margin-top:18px;max-width:650px}
.lp-home .ss-tok__slova>p+p{margin-top:14px!important}
.lp-home .ss-tok__link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:#1affd3;text-decoration:underline;text-underline-offset:5px;font-size:14px;max-width:100%}
.lp-home .ss-tok__link svg{width:16px;height:16px}
@media(max-width:1200px){.lp-home .ss-tok::before{width:calc(100vw - 54px)}}
@media(max-width:1024px){.lp-home .ss-tok{padding-block:65px}}
@media(max-width:980px){.lp-home .ss-tok::before{width:calc(100vw - 22px)}}
@media(max-width:767px){.lp-home .ss-tok{padding-block:50px;border-radius:24px}.lp-home .ss-tok .ss-razdel__zag{font-size:clamp(22px,7vw,28px)}.lp-home .ss-tok__intro{font-size:14px}.lp-home .ss-tok__link{font-size:13px}.lp-home .ss-tok::before{background-position:0 0,100% 0;background-image:linear-gradient(#ffffff0f,#ffffff0f),linear-gradient(#ffffff0f,#ffffff0f)}}
.lp-home .ss-tok .ss-razdel__zag {
	color: var(--ss-dark-ink);
}

.lp-home .ss-tok__put {
	--tok: 1;
	--ss-tok-uzel: 64px;
	--ss-tok-zag: clamp(20px, 2vw, 28px);

	margin-block-start: clamp(32px, 4vw, 56px);
	position: relative;
}

/* ----------------------------------------------------------------- линия */

/* Ось — по центру колонки номеров. */
.lp-home .ss-tok__liniya {
	background: var(--ss-dark-line);
	inline-size: 2px;
	inset-block: 0;
	inset-inline-start: calc(var(--ss-tok-uzel) / 2 - 1px);
	position: absolute;
}

.lp-home .ss-tok__zalivka {
	background: linear-gradient(rgba(37, 203, 194, 0.2), var(--ss-accent) 70%, var(--ss-accent-2));
	block-size: calc(var(--tok) * 100%);
	box-shadow: 0 0 12px rgba(37, 203, 194, 0.45);
	display: block;
	inline-size: 100%;
	position: relative;
}

/* Голова тока — светящаяся точка на конце заливки. */
.lp-home .ss-tok__golova {
	background: var(--ss-accent-2);
	block-size: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(26, 255, 211, 0.18), 0 0 18px 4px rgba(26, 255, 211, 0.55);
	inline-size: 10px;
	inset-block-end: -5px;
	inset-inline-start: -4px;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s;
}

/* Голова видна, пока ток идёт; дошёл до конца — гаснет в последнем узле. */
.lp-home .ss-tok.is-zhivaya .ss-tok__put:not(.is-dokonca) .ss-tok__golova {
	opacity: 1;
}

/* ----------------------------------------------------------------- шаги */

.lp-home .ss-tok__shagi {
	display: grid;
	gap: clamp(48px, 7vw, 96px);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/*
 * Номер — на линии, текст — от него, картинка — колонкой справа.
 * Всё по верху: номер стоит на уровне первой строки заголовка шага
 * (слово заказчика 8 октября 2026 — «выровнять»), поэтому слова
 * опущены на разницу высот номера и строки заголовка.
 */
.lp-home .ss-tok__shag {
	align-items: start;
	display: grid;
	gap: 0 clamp(24px, 3vw, 48px);
	grid-template-areas: "uzel slova kartinka";
	grid-template-columns: var(--ss-tok-uzel) minmax(0, 1fr) minmax(0, 380px);
	margin: 0;
}

.lp-home .ss-tok__uzel {
	align-items: center;
	background: #121414;
	block-size: var(--ss-tok-uzel);
	border: 2px solid var(--ss-dark-line);
	border-radius: 50%;
	color: var(--ss-dark-muted);
	display: flex;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	grid-area: uzel;
	inline-size: var(--ss-tok-uzel);
	justify-content: center;
	position: relative;
	transition: background-color 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s;
	z-index: 1;
}

.lp-home .ss-tok__slova {
	grid-area: slova;
	padding-block-start: calc((var(--ss-tok-uzel) - var(--ss-tok-zag) * 1.2) / 2);
}

.lp-home .ss-tok__zag {
	color: var(--ss-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-tok-zag);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.lp-home .ss-tok__zag em {
	color: var(--ss-accent);
	font-style: normal;
}

/* Текст — почти во всю колонку между номером и картинкой (~660 px на ПК):
   в 520 абзац шёл узкой лентой в десяток строк (слово заказчика 8 октября 2026). */
.lp-home .ss-tok__slova > p:not(.ss-tok__replika) {
	color: var(--ss-dark-muted);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	max-inline-size: 640px;
}

/* Реплика — плашкой-сообщением, как у этапов в Elementor. */
.lp-home .ss-tok__replika {
	align-items: center;
	background: var(--ss-dark-surface);
	border: 1px solid var(--ss-dark-line);
	border-radius: 14px;
	color: var(--ss-dark-ink);
	display: inline-flex;
	font-size: 14px;
	gap: 10px;
	line-height: 1.4;
	margin: 18px 0 0;
	max-inline-size: 640px;
	padding: 10px 14px;
}

/* Одноцветный значок — красным, как у реплик этапов (#f30000);
   цветной смайлик со своей заливкой остаётся своим. */
.lp-home .ss-tok__znak {
	block-size: 22px;
	fill: #f30000;
	flex: none;
	inline-size: 22px;
}

.lp-home .ss-tok__znak svg,
.lp-home img.ss-tok__znak {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

.lp-home .ss-tok__kartinka {
	display: flex;
	grid-area: kartinka;
	justify-content: center;
}

.lp-home .ss-tok__kartinka img {
	block-size: auto;
	display: block;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
	max-block-size: 340px;
	max-inline-size: min(100%, 360px);
	object-fit: contain;
}

/* --------------------------------------------- горит: дошёл ток (и без JS) */

.lp-home .ss-tok:not(.is-zhivaya) .ss-tok__uzel,
.lp-home .ss-tok__shag.is-gorit .ss-tok__uzel {
	background: var(--ss-accent);
	border-color: var(--ss-accent);
	box-shadow: 0 0 0 8px rgba(37, 203, 194, 0.12), 0 0 32px rgba(37, 203, 194, 0.45);
	color: #0b0c0c;
}

/* Только что загорелся — одна волна вокруг узла. */
.lp-home .ss-tok__shag.is-gorit .ss-tok__uzel::after {
	animation: ss-tok-volna 0.9s ease-out;
	border: 2px solid var(--ss-accent);
	border-radius: 50%;
	content: "";
	inset: -2px;
	pointer-events: none;
	position: absolute;
}

@keyframes ss-tok-volna {
	from { opacity: 0.9; transform: scale(1); }
	to { opacity: 0; transform: scale(1.8); }
}

/* --------------------------------------------- выезд: текст и картинка */

/* Выезжают справа — слева линия. */
.lp-home .ss-tok.is-zhivaya .ss-tok__slova,
.lp-home .ss-tok.is-zhivaya .ss-tok__kartinka {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-home .ss-tok.is-zhivaya .ss-tok__slova {
	transform: translateX(32px);
}

.lp-home .ss-tok.is-zhivaya .ss-tok__kartinka {
	transform: translateX(48px) scale(0.9) rotate(3deg);
}

.lp-home .ss-tok.is-zhivaya .ss-tok__shag.is-viden .ss-tok__slova,
.lp-home .ss-tok.is-zhivaya .ss-tok__shag.is-viden .ss-tok__kartinka {
	opacity: 1;
	transform: none;
}

.lp-home .ss-tok.is-zhivaya .ss-tok__shag.is-viden .ss-tok__kartinka {
	transition-delay: 0.12s;
}

/* Картинка, когда шаг горит, чуть покачивается — живая, но не мельтешит. */
.lp-home .ss-tok__shag.is-gorit .ss-tok__kartinka img {
	animation: ss-tok-plyvyot 5s ease-in-out infinite;
}

@keyframes ss-tok-plyvyot {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.lp-home .ss-tok *,
	.lp-home .ss-tok *::after {
		animation: none !important;
		transition: none !important;
	}

	.lp-home .ss-tok.is-zhivaya .ss-tok__slova,
	.lp-home .ss-tok.is-zhivaya .ss-tok__kartinka {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------- планшет и телефон */

/* Картинка — под текстом, номер мельче. */
@media (max-width: 1024px) {
	.lp-home .ss-tok__put {
		--ss-tok-uzel: 48px;
	}

	.lp-home .ss-tok__shag {
		gap: 16px 20px;
		grid-template-areas: "uzel slova" ". kartinka";
		grid-template-columns: var(--ss-tok-uzel) minmax(0, 1fr);
	}

	.lp-home .ss-tok__uzel {
		font-size: 14px;
	}

	.lp-home .ss-tok__kartinka {
		justify-content: flex-start;
	}

	.lp-home .ss-tok__kartinka img {
		max-block-size: 220px;
		max-inline-size: min(100%, 240px);
	}

	.lp-home .ss-tok.is-zhivaya .ss-tok__slova {
		transform: translateX(24px);
	}

	.lp-home .ss-tok.is-zhivaya .ss-tok__kartinka {
		transform: translateX(24px) scale(0.92);
	}
}

@media (max-width: 767px) {
	.lp-home .ss-tok__put {
		--ss-tok-zag: clamp(18px, 5.4vw, 22px);
	}

	.lp-home .ss-tok__slova > p:not(.ss-tok__replika) {
		font-size: 15px;
	}

	.lp-home .ss-tok__replika {
		font-size: 13px;
	}
}


/* Demos and purchase steps form one continuous dark section. */
.lp-home .lp-demo-journey{position:relative;isolation:isolate;margin-block:90px;border-radius:clamp(20px,2.4vw,36px);background:radial-gradient(ellipse 1100px 700px at 65% 0%,#29302e 0,transparent 75%),#101212}
.lp-home .lp-demo-journey::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:url('../images/landing/demo-backdrop.svg') center top / 100% 900px no-repeat;mask-image:linear-gradient(180deg,#000 0, #000 450px,transparent 900px)}
.lp-home .lp-demo-journey .lp-demo,.lp-home .lp-demo-journey .ss-tok{background:transparent;border-radius:0;margin-block:0}
.lp-home .lp-demo-journey .lp-demo{overflow:visible}
.lp-home .lp-demo-journey .lp-demo::before,.lp-home .lp-demo-journey .ss-tok::before{display:none}
@media(max-width:1024px){.lp-home .lp-demo-journey{margin-block:60px}}
@media(max-width:599px){.lp-home .lp-demo-journey{margin-block:45px}.lp-home .lp-demo-journey::before{background-size:auto 750px}}