/* Общие стили лендинговых страниц: главная (/), вход (/auth/), витрина стендов (/start/). */

* { box-sizing: border-box; }
body { margin: 0; background: #0B0605; font-family: var(--bs-body-font-family), 'Karla', sans-serif; }

.sparks-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
}

.hero {
	position: relative;
	padding: 2.5rem 2rem 3.5rem;
	display: flex;
	justify-content: center;
	color: #F2EEE7;
	font-family: 'Karla', sans-serif;
}

.inner { position: relative; z-index: 1; max-width: 1180px; width: 100%; margin: 0 auto; }

.hero-text { max-width: 100%; text-align: left; }
.tagline {
	display: inline-block;
	font-family: 'Karla', sans-serif;
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #C9C2B8;
}

.back-home {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: .45rem;
	margin-bottom: 1.4rem;
	font-family: 'Karla', sans-serif;
	font-weight: 600;
	font-size: .86rem;
	color: #ADA8A2;
	text-decoration: none;
	transition: color .15s ease;
}
.back-home:hover { color: #E8A23A; }
h1 {
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 4.2vw, 3rem);
	line-height: 1.22;
	margin: 1.2rem 0 1.8rem;
	color: #F2EEE7;
}
h2 {
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	color: #F2EEE7;
}
.hero-text p, .lead-text p {
	color: #ADA8A2;
	font-size: 1.03rem;
	line-height: 1.7;
	margin: 0 0 1.15rem;
	max-width: 100%;
}
.hero-text p:last-child, .lead-text p:last-child { margin-bottom: 0; }

/* Плитки демо-стендов (главная и /start/) */
.card-row {
	margin-top: 3.6rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}
@media (max-width: 860px) { .card-row { grid-template-columns: 1fr; } }

.card {
	background: #1C100C;
	border: 1px solid rgba(var(--ac-rgb), .3);
	padding: 2rem 1.7rem 1.8rem;
	text-decoration: none;
	color: #F2EEE7;
	display: flex;
	flex-direction: column;
	box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover {
	border-color: var(--ac);
	transform: translateY(-4px);
	box-shadow: 0 22px 46px -18px rgba(0,0,0,.75);
}
.card .tag {
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ac);
	margin-bottom: 1.1rem;
}
.card h3 {
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 .7rem;
	color: #F2EEE7;
}
.card p {
	font-size: .92rem;
	line-height: 1.55;
	color: #A79E96;
	margin: 0 0 1.5rem;
}
.card .go {
	margin-top: auto;
	font-weight: 600;
	font-size: .88rem;
	color: var(--ac);
}
.card.c1 { --ac: #E8A23A; --ac-rgb: 232,162,58; }
.card.c2 { --ac: #C6432E; --ac-rgb: 198,67,46; }
.card.c3 { --ac: #E8C34A; --ac-rgb: 232,195,74; }

/* Кнопка запуска пошагового сценария-гида (/start/) */
.scenario-cta {
	margin-top: 1.4rem;
	background: #1C100C;
	border: 1px solid rgba(232,162,58,.35);
	padding: 1.6rem 1.8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	flex-wrap: wrap;
}
.scenario-cta-text .tag {
	display: block;
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #E8A23A;
	margin-bottom: .6rem;
}
.scenario-cta-text h3 {
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 .5rem;
	color: #F2EEE7;
}
.scenario-cta-text p {
	font-size: .9rem;
	line-height: 1.55;
	color: #A79E96;
	margin: 0;
	max-width: 46ch;
}
.scenario-cta-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: none;
	background: #E8A23A;
	color: #1C100C;
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	font-size: .95rem;
	padding: .85rem 1.5rem;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.scenario-cta-btn:hover,
.scenario-cta-btn:focus-visible {
	background: #F5B152;
	transform: translateY(-2px);
}

.foot-links {
	margin-top: 2.6rem;
	padding-top: 1.3rem;
	border-top: 1px solid rgba(255,255,255,.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: .8rem;
	font-family: 'Karla', sans-serif;
	font-size: .78rem;
}
.foot-links .refs { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot-links a {
	color: #766F68;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.foot-links a:hover { color: #ADA8A2; border-color: #766F68; }
.foot-links .dev { color: #6B655F; }
.foot-links .dev a { color: #6B655F; }
.foot-links .dev a:hover { color: #ADA8A2; }

/* Блоки "картинка + описание" на главной */
.features {
	position: relative;
	padding: 1rem 2rem 4.6rem;
	display: flex;
	justify-content: center;
}
.features .inner h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 .8rem;
}
.features .inner > p.lead {
	color: #ADA8A2;
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 3rem;
	max-width: 720px;
}

.feature-row {
	display: flex;
	align-items: center;
	gap: 3rem;
	margin-bottom: 4.5rem;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse { flex-direction: row-reverse; }
.feature-media { flex: 0 0 44%; }
.feature-media img {
	width: 100%;
	display: block;
	border-radius: 10px;
	box-shadow: 0 25px 60px -25px rgba(0,0,0,.75);
}
.feature-text { flex: 1 1 auto; }
.feature-text h3 {
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	color: #F2EEE7;
	margin: 0 0 .8rem;
	line-height: 1.3;
}
.feature-text p {
	color: #ADA8A2;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
}
@media (max-width: 860px) {
	.feature-row, .feature-row.reverse { flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
	.feature-media { flex: none; width: 100%; }
}

.hero-cta-note {
	margin-top: 1rem;
	font-size: .82rem;
	color: #766F68;
}

.features-cta {
	margin-top: 4rem;
	text-align: center;
}
.features-cta .hero-cta-note { margin-top: .9rem; }

/* Форма входа (/auth/) */
.auth-card {
	background: #1C100C;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px;
	padding: 2.4rem 2.2rem;
	max-width: 460px;
	margin: 0 auto;
	box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
.auth-card h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 1rem; }
.auth-card .auth-sub { color: #ADA8A2; font-size: .94rem; line-height: 1.6; margin-bottom: 1.6rem; }
.auth-card label {
	display: block;
	font-size: .82rem;
	color: #C9C2B8;
	margin-bottom: .4rem;
	font-weight: 600;
}
.auth-card input {
	width: 100%;
	background: #0B0605;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 6px;
	padding: .65rem .8rem;
	color: #F2EEE7;
	font-size: .95rem;
	margin-bottom: 1.1rem;
}
.auth-card input::placeholder { color: #6B655F; }
.auth-card input:focus { outline: none; border-color: #E8A23A; }
.auth-card button {
	width: 100%;
	background: #E8A23A;
	border: none;
	border-radius: 6px;
	padding: .75rem 1rem;
	font-weight: 700;
	font-size: .96rem;
	color: #170A08;
	cursor: pointer;
	transition: background .15s ease;
}
.auth-card button:hover { background: #f0b25c; }
.auth-alert {
	background: rgba(198,67,46,.15);
	border: 1px solid rgba(198,67,46,.4);
	color: #E8A23A;
	border-radius: 6px;
	padding: .65rem .9rem;
	font-size: .86rem;
	margin-bottom: 1.2rem;
}
.auth-alert.d-none { display: none; }
.auth-foot {
	margin-top: 1.6rem;
	text-align: center;
	font-size: .82rem;
	color: #6B655F;
}

/* Панель "вы вошли" на /start/ */
.session-bar {
	font-size: .8rem;
	color: #766F68;
}
.session-bar a { color: #E8A23A; text-decoration: none; }
.session-bar a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.card { transition: none; }
}