/*--------------------------------------------------------------
# HDS — landing usługi (/oferta/{slug}/), scope .hus
# Tokeny i komponenty (.page-hero, .card, .metrics, .steps, .faq, .form,
# .wyc-*) pochodzą z main.css — tu tylko to, czego tam nie ma.
--------------------------------------------------------------*/

.hus-crumbs {
	display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
	font-family: var(--font-head); font-size: var(--fs-200);
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--text-dim); margin-bottom: var(--sp-5);
}
.hus-crumbs a { color: var(--text-muted); }
.hus-crumbs a:hover { color: var(--g1); }

.hus-hero .eyebrow { margin-bottom: var(--sp-4); }
.hus-hero h1 { max-width: 18ch; margin-inline: auto; }
.hus-hero > .wrap > p { font-size: var(--fs-400); }

.hus-cta {
	display: flex; flex-wrap: wrap; gap: var(--sp-3);
	justify-content: center; margin-top: var(--sp-7);
}

/* Co dostajesz */
.hus-deliv { display: grid; gap: var(--sp-3); }
.hus-deliv li {
	display: flex; gap: var(--sp-3); align-items: flex-start;
	padding: var(--sp-4) var(--sp-5);
	background: var(--bg-elev); border: 1px solid var(--line);
	border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-400);
}
.hus-check { flex: none; width: 20px; height: 20px; margin-top: .15rem; color: var(--g1); }

/* Rolki (.hus-reel*) — w main.css, bo używa ich też strona główna */

/* Cross-sell */
.hus-cross-all { text-align: center; margin-top: var(--sp-6); }
.hus-cross-all a { color: var(--text-muted); font-size: var(--fs-300); }
.hus-cross-all a:hover { color: var(--g1); }

@media (max-width: 640px) {
	.hus-hero h1 { max-width: none; }
	.hus-cta { flex-direction: column; }
	.hus-cta .btn { width: 100%; }
}