/* ==========================================================================
   STARLIFE — редизайн за Lovable-дизайном.
   Всі нові класи з префіксом sl-. Старий style.css не чіпаємо
   (на ньому тримаються кабінет і модалки входу/OTP).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Шрифти
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
	font-weight: 600 700;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-Regular.woff2") format("woff2");
	font-weight: 400 500;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
	font-weight: 600 700;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   Токени
   -------------------------------------------------------------------------- */
:root {
	--sl-radius: 0.5rem;
	--sl-background: oklch(1 0 0);
	--sl-foreground: oklch(0.185 0 0);
	--sl-primary: oklch(0.69 0.131 211.5);
	--sl-primary-foreground: oklch(1 0 0);
	--sl-secondary: oklch(0.975 0.004 247.9);
	--sl-muted: oklch(0.968 0.003 247.9);
	--sl-muted-foreground: oklch(0.49 0.01 247.9);
	--sl-accent: oklch(0.968 0.003 247.9);
	--sl-border: oklch(0.91 0.005 247.9);
	--sl-input: oklch(0.91 0.005 247.9);
	--sl-ring: oklch(0.69 0.131 211.5);
	--sl-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
	--sl-font-display: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
	--sl-header-h: 5rem;
}

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--sl-background);
	color: var(--sl-foreground);
	font-family: var(--sl-font-sans);
	letter-spacing: 0;
	overflow-x: hidden;
}

::selection {
	background-color: color-mix(in oklab, var(--sl-primary) 28%, transparent);
}

.sl-main h1,
.sl-main h2,
.sl-main h3,
.sl-footer h2,
.sl-footer h3,
.sl-legal h1,
.sl-legal h2,
.sl-mobile-menu {
	font-family: var(--sl-font-display);
	letter-spacing: 0;
}

.sl-main *,
.sl-header *,
.sl-footer *,
.sl-legal *,
.sl-legal-header *,
.sl-mobile-menu * {
	box-sizing: border-box;
}

.sl-container {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 20px;
}

.sl-anchor {
	scroll-margin-top: var(--sl-header-h);
}

.sl-rotate-180 {
	transform: rotate(180deg);
}

.sl-scrollbar-none {
	scrollbar-width: none;
}
.sl-scrollbar-none::-webkit-scrollbar {
	display: none;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: calc(var(--sl-radius) - 2px);
	font-family: var(--sl-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sl-btn svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	pointer-events: none;
}
.sl-btn--lg {
	height: 3rem;
	padding: 0 1.5rem;
}
.sl-btn--primary {
	background: var(--sl-primary);
	color: var(--sl-primary-foreground);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.sl-btn--primary:hover {
	background: color-mix(in oklab, var(--sl-primary) 90%, transparent);
	color: var(--sl-primary-foreground);
}
.sl-btn--white {
	background: #fff;
	color: var(--sl-foreground);
}
.sl-btn--white:hover {
	background: rgba(255, 255, 255, 0.9);
	color: var(--sl-foreground);
}
.sl-btn--dark {
	background: var(--sl-foreground);
	color: #fff;
}
.sl-btn--dark:hover {
	background: color-mix(in oklab, var(--sl-foreground) 90%, transparent);
	color: #fff;
}
.sl-btn--outline {
	background: var(--sl-background);
	color: var(--sl-foreground);
	border: 1px solid var(--sl-input);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.sl-btn--outline:hover {
	background: var(--sl-accent);
	color: var(--sl-foreground);
}
.sl-btn--ghost {
	background: transparent;
	color: var(--sl-foreground);
}
.sl-btn--ghost:hover {
	background: var(--sl-accent);
	color: var(--sl-foreground);
}

.sl-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: calc(var(--sl-radius) - 2px);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sl-icon-btn svg {
	width: 1rem;
	height: 1rem;
	pointer-events: none;
}
.sl-icon-btn[hidden],
.sl-btn[hidden] {
	display: none;
}
.sl-icon-btn--ghost-light {
	color: #fff;
}
.sl-icon-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.sl-icon-btn--outline {
	border: 1px solid var(--sl-input);
	background: transparent;
	color: var(--sl-foreground);
}
.sl-icon-btn--outline:hover {
	background: var(--sl-accent);
}
.sl-icon-btn--dark {
	background: color-mix(in oklab, var(--sl-foreground) 65%, transparent);
	color: #fff;
}
.sl-icon-btn--dark:hover {
	background: color-mix(in oklab, var(--sl-foreground) 85%, transparent);
	color: #fff;
}

/* Перемикачі станів іконок (pause/play, звук, бургер) */
.sl-when-playing,
.sl-when-paused,
.sl-when-sound-on,
.sl-when-sound-off,
.sl-when-menu-closed,
.sl-when-menu-open {
	display: inline-flex;
}
.sl-when-paused,
.sl-when-sound-on,
.sl-when-menu-open {
	display: none;
}
.is-paused .sl-when-playing {
	display: none;
}
.is-paused .sl-when-paused {
	display: inline-flex;
}
[data-sl-sound].is-on .sl-when-sound-off {
	display: none;
}
[data-sl-sound].is-on .sl-when-sound-on {
	display: inline-flex;
}
.is-open .sl-when-menu-closed {
	display: none;
}
.is-open .sl-when-menu-open {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   Типографіка секцій
   -------------------------------------------------------------------------- */
.sl-eyebrow {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-primary);
}

.sl-reveal {
	max-width: 48rem;
}

.sl-heading {
	margin: 0.75rem 0 0;
	font-size: 1.875rem;
	line-height: 1.08;
	font-weight: 600;
	color: var(--sl-foreground);
}
.sl-heading--light {
	color: var(--sl-primary-foreground);
}

.sl-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.6em);
	transition: opacity 500ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sl-word.is-visible {
	opacity: 1;
	transform: translateY(0);
}
/* Без JS заголовки видимі */
.no-js .sl-word {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Лого
   -------------------------------------------------------------------------- */
.sl-logo {
	display: block;
	height: 32px;
	width: 134px;
	overflow: visible;
}
.sl-logo--inverse image {
	filter: brightness(0) invert(1);
}
.sl-logo__rays {
	fill: none;
	stroke: var(--sl-primary);
	stroke-linecap: round;
	stroke-width: 1.1;
	stroke-dasharray: 18;
	stroke-dashoffset: 18;
	animation: sl-logo-rays 5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Прогрес скролу
   -------------------------------------------------------------------------- */
.sl-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 70;
	height: 2px;
	width: 0;
	background: var(--sl-primary);
	transition: width 150ms linear;
}

/* --------------------------------------------------------------------------
   Хедер
   -------------------------------------------------------------------------- */
.sl-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.sl-header.is-scrolled,
.sl-header.is-menu-open,
.sl-header--solid {
	background: color-mix(in oklab, var(--sl-background) 95%, transparent);
	border-bottom-color: color-mix(in oklab, var(--sl-border) 70%, transparent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.sl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--sl-header-h);
}
.sl-header__logo {
	display: inline-flex;
	align-items: center;
	width: 134px;
	min-height: 2.75rem;
	flex-shrink: 0;
}

/* Тап-таргет ≥36px для лого-посилань (футер, правовий хедер) */
.sl-footer__col > a[aria-label],
.sl-legal-header__inner > a[aria-label] {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* На прозорому хедері (поверх hero) — світле лого і світла навігація */
.sl-header--over-hero:not(.is-scrolled):not(.is-menu-open) .sl-logo image {
	filter: brightness(0) invert(1);
}
.sl-header--over-hero:not(.is-scrolled):not(.is-menu-open) .sl-header__nav-link {
	color: rgba(255, 255, 255, 0.75);
}
.sl-header--over-hero:not(.is-scrolled):not(.is-menu-open) .sl-header__nav-link:hover {
	color: #fff;
}
.sl-header--over-hero:not(.is-scrolled):not(.is-menu-open) .sl-header__nav-link.is-active::after {
	display: none;
}
.sl-header--over-hero:not(.is-scrolled):not(.is-menu-open) .sl-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}
.sl-header--over-hero:not(.is-scrolled):not(.is-menu-open) .sl-btn--outline:hover {
	background: rgba(255, 255, 255, 0.15);
}
.sl-header--over-hero:not(.is-scrolled):not(.is-menu-open) .sl-header__burger {
	color: #fff;
}
.sl-header--over-hero:not(.is-scrolled):not(.is-menu-open) .sl-header__burger:hover {
	background: rgba(255, 255, 255, 0.15);
}

.sl-header__nav {
	display: none;
	align-items: center;
	gap: 1.75rem;
}
.sl-header__nav-link {
	position: relative;
	padding: 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: color-mix(in oklab, var(--sl-foreground) 65%, transparent);
	text-decoration: none;
	transition: color 0.2s ease;
}
.sl-header__nav-link:hover {
	color: var(--sl-primary);
}
.sl-header__nav-link.is-active {
	color: var(--sl-primary);
}
.sl-header__nav-link.is-active::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	height: 2px;
	background: var(--sl-primary);
}

.sl-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.sl-header__burger {
	color: var(--sl-foreground);
}
.sl-header__burger:hover {
	background: var(--sl-accent);
}
.sl-header__user {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.sl-header__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.sl-header__logout-icon {
	width: 1rem;
	height: 1rem;
}

/* Мобільне меню */
.sl-mobile-menu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: calc(100vh - var(--sl-header-h));
	min-height: calc(100dvh - var(--sl-header-h));
	padding: 2.5rem 20px;
	border-top: 1px solid var(--sl-border);
	background: var(--sl-background);
	overflow-y: auto;
}
.sl-mobile-menu[hidden] {
	display: none;
}
.sl-mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--sl-border);
	font-family: var(--sl-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--sl-foreground);
	text-decoration: none;
}
.sl-mobile-menu__link svg {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}
.sl-mobile-menu__index {
	margin-right: 1rem;
	font-family: var(--sl-font-sans);
	font-size: 0.75rem;
	color: var(--sl-primary);
}
.sl-mobile-menu__cta {
	margin-top: 2rem;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Hero-слайдер
   -------------------------------------------------------------------------- */
.sl-hero {
	position: relative;
	/* рівно на екран разом зі смужкою навігації слайдера; svh — без стрибків
	   через панель браузера на телефоні */
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	/* старий style.css дає кожній section padding 100px 0 — тут він зайвий */
	padding: 0;
	background: var(--sl-foreground);
}
.sl-hero__swiper {
	position: relative;
	height: 100%;
}
.sl-hero__slide {
	position: relative;
	height: 100%;
	overflow: hidden;
}
.sl-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.sl-hero__image,
.sl-hero__video {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 68% center;
}
.sl-hero__video {
	object-position: center;
}
.sl-ken-burns {
	animation: sl-ken-burns 12s ease-in-out infinite alternate;
}
.sl-hero__gradient {
	position: absolute;
	pointer-events: none;
}
.sl-hero__gradient--side {
	inset: 0;
	background: linear-gradient(
		to right,
		color-mix(in oklab, var(--sl-foreground) 85%, transparent),
		color-mix(in oklab, var(--sl-foreground) 36%, transparent) 50%,
		transparent
	);
}
.sl-hero__gradient--bottom {
	inset-inline: 0;
	bottom: 0;
	height: 66.666%;
	background: linear-gradient(
		to top,
		color-mix(in oklab, var(--sl-foreground) 50%, transparent),
		transparent
	);
}
.sl-hero__inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100%;
	padding-top: 7rem;
	padding-bottom: 8rem;
}
.sl-hero__content {
	max-width: 42rem;
	color: var(--sl-primary-foreground);
	/* кнопка завжди під текстом, хоч би яка довжина рядка */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.sl-hero__eyebrow {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-primary);
}
.sl-hero__title {
	margin: 0;
	max-width: 36rem;
	font-size: 2.25rem;
	line-height: 1.04;
	font-weight: 600;
	color: inherit;
}
.sl-hero__text {
	margin: 1.25rem 0 0;
	max-width: 32rem;
	font-size: 1rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.8);
}
.sl-hero__btn {
	margin-top: 2rem;
}
.sl-hero__controls {
	position: absolute;
	inset-inline: 0;
	bottom: 2rem;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.sl-hero__counter {
	width: 3.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-primary-foreground);
}

/* --------------------------------------------------------------------------
   Партнери
   -------------------------------------------------------------------------- */
.sl-partners {
	border-bottom: 1px solid var(--sl-border);
	background: var(--sl-background);
	padding-block: 1.75rem;
}
.sl-partners__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.sl-partners__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sl-muted-foreground);
}
.sl-partners__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 2rem;
	row-gap: 0.75rem;
}
.sl-partners__item {
	font-size: 0.875rem;
	font-weight: 600;
	color: color-mix(in oklab, var(--sl-foreground) 60%, transparent);
}
.sl-partners__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	text-decoration: none;
	color: inherit;
}
.sl-partners__logo {
	display: block;
	height: 2rem;
	width: auto;
	max-width: 7.5rem;
	object-fit: contain;
	opacity: 0.8;
	filter: grayscale(1);
	transition: opacity 0.3s ease, filter 0.3s ease;
}
.sl-partners__logo:hover,
.sl-partners__link:hover .sl-partners__logo,
.sl-partners__link:focus-visible .sl-partners__logo {
	opacity: 1;
	filter: grayscale(0);
}

/* непарний відфільтрований список продуктів: останній на весь ряд */
.sl-catalog__grid [data-sl-catalog-item].is-wide {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Про нас
   -------------------------------------------------------------------------- */
.sl-about {
	padding-block: 5rem;
}
.sl-about__grid {
	display: grid;
	align-items: center;
	gap: 3rem;
}
.sl-about__text {
	margin: 1.75rem 0 0;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 2;
	color: var(--sl-muted-foreground);
}
.sl-about__features {
	margin-top: 2rem;
	display: grid;
	gap: 0.75rem;
}
.sl-about__feature {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
}
.sl-about__feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: color-mix(in oklab, var(--sl-primary) 10%, transparent);
	color: var(--sl-primary);
}
.sl-about__feature-icon svg {
	width: 0.875rem;
	height: 0.875rem;
}
.sl-about__media {
	position: relative;
}
.sl-about__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	border-radius: var(--sl-radius);
	object-fit: cover;
}
.sl-about__card {
	position: absolute;
	bottom: -1.5rem;
	left: 1.5rem;
	max-width: 14rem;
	border-radius: var(--sl-radius);
	background: var(--sl-background);
	padding: 1.25rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.sl-about__card-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sl-primary);
}
.sl-about__card-title {
	margin: 0.5rem 0 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Напрями (горизонтальний скрол)
   -------------------------------------------------------------------------- */
.sl-products {
	background: var(--sl-secondary);
	padding-block: 5rem;
}
.sl-products__head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
}
.sl-products__arrows {
	display: flex;
	gap: 0.5rem;
}
.sl-products__scroller {
	margin-top: 3rem;
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.75rem;
	-webkit-overflow-scrolling: touch;
}
.sl-products__card {
	position: relative;
	min-height: 460px;
	/* картки вкладаються в контейнер рівно: 1 / 2 / 3 на ряд без обрізків */
	min-width: 100%;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--sl-radius);
	background: var(--sl-foreground);
	color: var(--sl-primary-foreground);
}
.sl-products__image {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	opacity: 0.65;
	transition: transform 0.7s ease, opacity 0.7s ease;
}
.sl-products__card:hover .sl-products__image {
	transform: scale(1.05);
	opacity: 0.75;
}
.sl-products__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--sl-foreground),
		color-mix(in oklab, var(--sl-foreground) 25%, transparent) 50%,
		color-mix(in oklab, var(--sl-foreground) 5%, transparent)
	);
	pointer-events: none;
}
.sl-products__number {
	position: absolute;
	right: 1.5rem;
	top: 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.65);
}
.sl-products__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1.75rem;
}
.sl-products__icon {
	display: inline-flex;
	color: var(--sl-primary);
}
.sl-products__icon svg {
	width: 2rem;
	height: 2rem;
}
.sl-products__title {
	margin: 1.25rem 0 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	color: inherit;
}
.sl-products__text {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: rgba(255, 255, 255, 0.7);
}
.sl-products__links {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.25rem;
	row-gap: 0.5rem;
}
.sl-products__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-primary);
	text-decoration: none;
}
.sl-products__link svg {
	width: 1rem;
	height: 1rem;
}
.sl-products__pdf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}
.sl-products__pdf:hover {
	color: #fff;
}
.sl-products__pdf svg {
	width: 1rem;
	height: 1rem;
}
.sl-products__progress {
	position: relative;
	margin-top: 1.25rem;
	height: 1px;
	overflow: hidden;
	background: var(--sl-border);
}
.sl-products__progress-bar {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 33.333%;
	background: var(--sl-primary);
	transition: width 0.2s ease, transform 0.2s ease;
}

/* --------------------------------------------------------------------------
   Як це працює
   -------------------------------------------------------------------------- */
.sl-steps {
	padding-block: 5rem;
}
.sl-steps__grid {
	margin-top: 3.5rem;
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	background: var(--sl-border);
}
.sl-steps__cell {
	background: var(--sl-background);
	padding: 1.75rem;
}
.sl-steps__number {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-primary);
}
.sl-steps__title {
	margin: 3rem 0 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
}
.sl-steps__text {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--sl-muted-foreground);
}

/* --------------------------------------------------------------------------
   Навчання (велком-відео)
   -------------------------------------------------------------------------- */
.sl-learning {
	position: relative;
	min-height: 600px;
	overflow: hidden;
	background: var(--sl-foreground);
	color: var(--sl-primary-foreground);
	padding-block: 5rem;
	display: flex;
	align-items: center;
}
.sl-learning__video {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 68% center;
}
.sl-learning__gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to right,
		color-mix(in oklab, var(--sl-foreground) 90%, transparent),
		color-mix(in oklab, var(--sl-foreground) 65%, transparent) 50%,
		color-mix(in oklab, var(--sl-foreground) 15%, transparent)
	);
}
.sl-learning__inner {
	position: relative;
	width: 100%;
	/* кнопка завжди ПІД текстом, а не поруч */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.sl-learning__text {
	margin: 1.75rem 0 0;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 2;
	color: rgba(255, 255, 255, 0.7);
}
.sl-learning__btn {
	margin-top: 2rem;
}
.sl-learning__controls {
	position: absolute;
	bottom: 1.5rem;
	right: 1.25rem;
	z-index: 10;
	display: flex;
	gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Блог
   -------------------------------------------------------------------------- */
.sl-blog {
	padding-block: 5rem;
}
.sl-blog__intro {
	margin: 1.5rem 0 0;
	max-width: 42rem;
	line-height: 1.75rem;
	color: var(--sl-muted-foreground);
}
.sl-blog__grid {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
}
.sl-blog__card {
	display: flex;
	flex-direction: column;
	min-height: 20rem;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	background: var(--sl-background);
	padding: 1.5rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sl-blog__card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.sl-blog__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sl-blog__tag {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sl-primary);
}
.sl-blog__number {
	font-size: 0.75rem;
	color: var(--sl-muted-foreground);
}
.sl-blog__title {
	margin: 2rem 0 0;
	font-size: 1.25rem;
	line-height: 1.375;
	font-weight: 600;
}
.sl-blog__text {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--sl-muted-foreground);
}
.sl-blog__acc {
	margin-top: auto;
}
.sl-acc__trigger.sl-blog__acc-trigger {
	padding-top: 1.5rem;
	color: var(--sl-primary);
}
.sl-blog__acc-content {
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--sl-muted-foreground);
}

/* --------------------------------------------------------------------------
   Акордеон (блог + FAQ)
   -------------------------------------------------------------------------- */
.sl-acc__trigger {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 0;
	border: 0;
	background: none;
	font-family: var(--sl-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	text-align: left;
	color: inherit;
	cursor: pointer;
	min-height: 2.75rem;
}
.sl-acc__chevron {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--sl-muted-foreground);
	transition: transform 0.2s ease;
}
.sl-acc.is-open .sl-acc__chevron {
	transform: rotate(180deg);
}
.sl-acc__panel {
	overflow: hidden;
	height: 0;
	transition: height 0.3s ease;
}
.sl-acc__panel[hidden] {
	display: block;
	height: 0;
}
.sl-acc__content {
	padding-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Контакти + FAQ
   -------------------------------------------------------------------------- */
.sl-contacts {
	background: var(--sl-primary);
	padding-block: 5rem;
}
.sl-contacts__grid {
	display: grid;
	gap: 3rem;
}
.sl-contacts__label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}
.sl-contacts__title {
	margin: 1rem 0 0;
	max-width: 36rem;
	font-size: 2.25rem;
	line-height: 1.25;
	font-weight: 600;
	color: var(--sl-primary-foreground);
}
.sl-contacts__text {
	margin: 1.5rem 0 0;
	max-width: 32rem;
	line-height: 1.75rem;
	color: rgba(255, 255, 255, 0.75);
}
.sl-contacts__btn {
	margin-top: 2rem;
}
.sl-contacts__faq {
	border-radius: var(--sl-radius);
	background: var(--sl-background);
	padding: 1.5rem;
	color: var(--sl-foreground);
}
.sl-contacts__faq-label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-primary);
}
.sl-contacts__faq-list {
	margin-top: 0.5rem;
}
.sl-contacts__faq-item {
	border-bottom: 1px solid var(--sl-border);
}
.sl-contacts__faq-trigger {
	padding-block: 1.25rem;
}
.sl-contacts__faq-content {
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--sl-muted-foreground);
}

/* --------------------------------------------------------------------------
   Футер
   -------------------------------------------------------------------------- */
.sl-footer {
	background: var(--sl-foreground);
	color: var(--sl-primary-foreground);
}
.sl-footer a {
	text-decoration: none;
}
.sl-footer__inner {
	padding-top: 4rem;
}
.sl-footer__cta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	padding-bottom: 2.5rem;
}
.sl-footer__cta-eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sl-primary);
}
.sl-footer__cta-title {
	margin: 1rem 0 0;
	font-size: 1.875rem;
	line-height: 1.2;
	font-weight: 600;
	color: inherit;
}
.sl-footer__cta-btn {
	align-self: flex-start;
}
.sl-footer__grid {
	display: grid;
	gap: 3rem;
	padding-block: 3rem;
}
.sl-footer__columns {
	display: grid;
	gap: 2.5rem;
}
.sl-footer__about {
	margin: 1.25rem 0 0;
	max-width: 20rem;
	font-size: 0.875rem;
	line-height: 1.75rem;
	color: rgba(255, 255, 255, 0.6);
}
.sl-footer__requisites {
	margin: 1.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.45);
}
.sl-footer__col-title {
	margin: 0;
	font-family: var(--sl-font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	color: inherit;
}
.sl-footer__contacts {
	margin-top: 1.25rem;
	display: grid;
	gap: 1rem;
}
.sl-footer__contact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.25rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.2s ease;
}
.sl-footer__contact:hover {
	color: var(--sl-primary);
}
.sl-footer__contact svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--sl-primary);
}
.sl-footer__contact--email {
	word-break: break-all;
}
.sl-footer__contact--address {
	align-items: flex-start;
	line-height: 1.5rem;
}
.sl-footer__contact--address svg {
	margin-top: 0.25rem;
}
.sl-footer__links {
	margin-top: 1.25rem;
	display: grid;
	gap: 0.25rem;
}
.sl-footer__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.2s ease;
}
.sl-footer__link:hover {
	color: var(--sl-primary);
}
.sl-footer__map-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.sl-footer__map-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 2.25rem;
	font-size: 0.75rem;
	color: var(--sl-primary);
}
.sl-footer__map-link svg {
	width: 0.875rem;
	height: 0.875rem;
}
.sl-footer__map {
	position: relative;
	height: 18rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--sl-radius);
	background: var(--sl-secondary);
}
.sl-footer__map-canvas {
	height: 100%;
	width: 100%;
}
.sl-footer__map-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sl-primary);
}
.sl-footer__map-fallback[hidden] {
	display: none;
}
.sl-footer__map-note {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5rem;
	color: rgba(255, 255, 255, 0.45);
}
.sl-footer__bottom {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-block: 1.5rem;
	font-size: 0.75rem;
	line-height: 1.5rem;
	color: rgba(255, 255, 255, 0.45);
}
.sl-footer__bottom p {
	margin: 0;
}
.sl-footer__bottom-note {
	max-width: 32rem;
}

/* Leaflet */
.leaflet-container {
	font-family: var(--sl-font-sans);
	z-index: 0;
}
.sl-map-marker {
	fill: var(--sl-primary);
	stroke: var(--sl-foreground);
	fill-opacity: 1;
	stroke-width: 3;
}

/* --------------------------------------------------------------------------
   Правові сторінки
   -------------------------------------------------------------------------- */
.sl-legal-header {
	border-bottom: 1px solid var(--sl-border);
	background: var(--sl-background);
}
.sl-legal-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--sl-header-h);
}
.sl-legal {
	background: var(--sl-background);
	color: var(--sl-foreground);
}
.sl-legal__grid {
	display: grid;
	gap: 3rem;
	padding-block: 4rem;
}
.sl-legal__aside-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sl-primary);
}
.sl-legal__toc {
	margin-top: 1.5rem;
	display: grid;
	gap: 0.5rem;
}
.sl-legal__toc-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--sl-muted-foreground);
	text-decoration: none;
	transition: color 0.2s ease;
}
.sl-legal__toc-link:hover {
	color: var(--sl-primary);
}
.sl-legal__article {
	max-width: 48rem;
}
.sl-legal__title {
	margin: 0;
	font-size: 1.875rem;
	line-height: 1.25;
	font-weight: 600;
}
.sl-legal__intro {
	margin: 1.5rem 0 0;
	font-size: 1.125rem;
	line-height: 2rem;
	color: var(--sl-muted-foreground);
}
.sl-legal__date {
	margin: 1.25rem 0 0;
	font-size: 0.75rem;
	color: var(--sl-muted-foreground);
}
.sl-legal__sections {
	margin-top: 3rem;
	border-top: 1px solid var(--sl-border);
}
.sl-legal__preamble,
.sl-legal__section {
	border-bottom: 1px solid var(--sl-border);
	padding-block: 2rem;
	scroll-margin-top: 2rem;
}
.sl-legal__section-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
}
.sl-legal__section p,
.sl-legal__preamble p {
	margin: 1rem 0 0;
	line-height: 2rem;
	color: var(--sl-muted-foreground);
}
.sl-legal__section ul,
.sl-legal__section ol {
	margin: 1rem 0 0;
	padding-left: 1.25rem;
	line-height: 2rem;
	color: var(--sl-muted-foreground);
}
.sl-legal__contact {
	margin-top: 2.5rem;
}
.sl-legal__contact-title {
	margin: 0;
	font-weight: 600;
}
.sl-legal__contact-link {
	margin-top: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	color: var(--sl-primary);
	text-decoration: none;
}
.sl-legal__contact-link svg {
	width: 1rem;
	height: 1rem;
}

/* --------------------------------------------------------------------------
   Анімації
   -------------------------------------------------------------------------- */
@keyframes sl-logo-rays {
	0%, 12% { opacity: 0; stroke-dashoffset: 18; }
	30%, 72% { opacity: 1; stroke-dashoffset: 0; }
	88%, 100% { opacity: 0; stroke-dashoffset: -18; }
}

@keyframes sl-ken-burns {
	from { transform: scale(1); }
	to { transform: scale(1.045); }
}

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
	.sl-about__features {
		grid-template-columns: repeat(2, 1fr);
	}
	.sl-products__card {
		min-width: calc((100% - 1rem) / 2);
	}
	.sl-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
	.sl-footer__bottom {
		flex-direction: row;
	}
}

@media (min-width: 768px) {
	.sl-container {
		padding-inline: 32px;
	}
	.sl-header__nav {
		display: flex;
	}
	.sl-header__burger,
	.sl-mobile-menu {
		display: none;
	}
	.sl-hero__inner {
		padding-bottom: 9rem;
	}
	.sl-hero__title {
		font-size: 3.75rem;
		line-height: 1.04;
	}
	.sl-hero__text {
		font-size: 1.125rem;
	}
	.sl-heading {
		font-size: 3rem;
		line-height: 1.08;
	}
	.sl-partners__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.sl-partners__list {
		column-gap: 3rem;
	}
	.sl-about {
		padding-block: 8rem;
	}
	.sl-about__card {
		left: auto;
		right: 1.5rem;
	}
	.sl-products {
		padding-block: 7rem;
	}
	.sl-products__head {
		flex-direction: row;
		align-items: flex-end;
	}
	.sl-products__scroller {
		gap: 1.25rem;
	}
	.sl-products__body {
		padding: 1.75rem;
	}
	.sl-steps {
		padding-block: 7rem;
	}
	.sl-steps__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.sl-steps__cell {
		min-height: 16rem;
		padding: 2rem;
	}
	.sl-learning {
		padding-block: 8rem;
	}
	.sl-learning__controls {
		right: 2rem;
	}
	.sl-blog {
		padding-block: 7rem;
	}
	.sl-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sl-contacts {
		padding-block: 7rem;
	}
	.sl-contacts__title {
		font-size: 3.75rem;
		line-height: 1.1;
	}
	.sl-contacts__faq {
		padding: 2rem;
	}
	.sl-footer__inner {
		padding-top: 5rem;
	}
	.sl-footer__cta {
		flex-direction: row;
		align-items: flex-end;
	}
	.sl-footer__cta-btn {
		align-self: auto;
	}
	.sl-footer__cta-title {
		font-size: 3rem;
	}
	.sl-footer__map {
		height: 20rem;
	}
	.sl-legal__grid {
		padding-block: 6rem;
	}
	.sl-legal__title {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	.sl-about__grid {
		grid-template-columns: 0.9fr 1.1fr;
		gap: 5rem;
	}
	.sl-products__card {
		min-width: calc((100% - 2.5rem) / 3);
	}
	.sl-blog__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.sl-contacts__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 5rem;
	}
	.sl-footer__grid {
		grid-template-columns: 1fr 1.1fr;
	}
	.sl-legal__grid {
		grid-template-columns: 0.35fr 1fr;
	}
}

/* Дрібні екрани: ховаємо текст кнопки «Уроки», щоб усе влазило на 390px */
@media (max-width: 419px) {
	.sl-header__lessons-btn {
		width: 2.5rem;
		padding: 0;
	}
	.sl-header__lessons-btn span {
		display: none;
	}
	.sl-header__lessons-btn svg {
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.sl-ken-burns,
	.sl-logo__rays {
		animation: none;
	}
	.sl-logo__rays {
		opacity: 0;
	}
	.sl-word,
	.sl-scroll-progress,
	.sl-header,
	.sl-products__image,
	.sl-blog__card,
	.sl-acc__panel,
	.sl-acc__chevron,
	.sl-products__progress-bar {
		transition: none !important;
	}
	.sl-word {
		opacity: 1;
		transform: none;
	}
	.sl-blog__card:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Каталог рішень партнерів (#catalog): фільтр тегів + акордеони компаній
   -------------------------------------------------------------------------- */
.sl-catalog {
	background: var(--sl-background);
	padding-block: 5rem;
}
.sl-catalog__intro {
	margin: 1.5rem 0 0;
	max-width: 42rem;
	line-height: 1.75rem;
	color: var(--sl-muted-foreground);
}
.sl-catalog__filters {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.sl-catalog__filter {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--sl-border);
	border-radius: 9999px;
	background: var(--sl-background);
	font-family: var(--sl-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: color-mix(in oklab, var(--sl-foreground) 70%, transparent);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sl-catalog__filter:hover {
	border-color: color-mix(in oklab, var(--sl-primary) 50%, transparent);
	color: var(--sl-primary);
}
.sl-catalog__filter.is-active {
	border-color: var(--sl-primary);
	background: var(--sl-primary);
	color: var(--sl-primary-foreground);
}
.sl-catalog__list {
	margin-top: 2.5rem;
}
.sl-catalog__partner {
	border-bottom: 1px solid var(--sl-border);
}
.sl-catalog__partner[hidden] {
	display: none;
}
.sl-catalog__trigger {
	padding-block: 1.5rem;
	font-family: var(--sl-font-display);
}
.sl-catalog__partner-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.25rem;
	row-gap: 0.5rem;
}
.sl-catalog__logo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.5rem;
	width: 8rem;
	flex-shrink: 0;
	padding-inline: 0.75rem;
	border: 1px solid var(--sl-border);
	border-radius: 0.75rem;
	background: var(--sl-background);
}
.sl-catalog__logo-box img {
	display: block;
	max-height: 2.25rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.sl-catalog__partner-name {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--sl-foreground);
}
.sl-catalog__count {
	font-family: var(--sl-font-sans);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--sl-muted-foreground);
}
.sl-catalog__grid {
	margin: 0;
	padding: 0 0 1rem;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}
.sl-catalog__grid li[hidden] {
	display: none;
}
.sl-catalog__product {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	background: var(--sl-background);
	padding: 1rem;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sl-catalog__product:hover {
	border-color: color-mix(in oklab, var(--sl-primary) 50%, transparent);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.sl-catalog__product-main {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}
.sl-catalog__product-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	color: var(--sl-primary);
}
.sl-catalog__product-info {
	min-width: 0;
}
.sl-catalog__product-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-foreground);
}
.sl-catalog__product-meta {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.75rem;
	color: var(--sl-muted-foreground);
}
.sl-catalog__product-arrow {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--sl-muted-foreground);
	transition: color 0.2s ease;
}
.sl-catalog__product:hover .sl-catalog__product-arrow {
	color: var(--sl-primary);
}
.sl-catalog__disclaimer {
	margin: 2rem 0 0;
	max-width: 48rem;
	font-size: 0.75rem;
	line-height: 1.5rem;
	color: var(--sl-muted-foreground);
}

/* --------------------------------------------------------------------------
   Документи (#documents): брошури PDF + офіційні документи
   -------------------------------------------------------------------------- */
.sl-documents {
	border-top: 1px solid var(--sl-border);
	background: var(--sl-background);
	padding-block: 5rem;
}
.sl-documents__intro {
	margin: 1.5rem 0 0;
	max-width: 42rem;
	line-height: 1.75rem;
	color: var(--sl-muted-foreground);
}
.sl-documents__grid {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
}
.sl-documents__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	background: var(--sl-background);
	padding: 1.75rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sl-documents__card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.sl-documents__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--sl-radius);
	background: color-mix(in oklab, var(--sl-primary) 10%, transparent);
	color: var(--sl-primary);
}
.sl-documents__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}
.sl-documents__subtitle {
	margin: 1.5rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sl-primary);
}
.sl-documents__title {
	margin: 0.5rem 0 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
}
.sl-documents__text {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--sl-muted-foreground);
}
.sl-documents__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1.75rem;
}
.sl-documents__pages {
	font-size: 0.75rem;
	color: var(--sl-muted-foreground);
}
.sl-documents__btn {
	background: transparent;
}
.sl-documents__subheading {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--sl-foreground);
}
.sl-documents__official {
	margin-top: 4rem;
}
.sl-documents__official-list {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	overflow: hidden;
}
.sl-documents__official-list li + li {
	border-top: 1px solid var(--sl-border);
}
.sl-documents__official-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 500;
	color: var(--sl-foreground);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sl-documents__official-link:hover {
	background: var(--sl-secondary);
	color: var(--sl-primary);
}
.sl-documents__official-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	color: var(--sl-primary);
}
.sl-documents__official-arrow {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	margin-left: auto;
	color: var(--sl-muted-foreground);
}

/* --------------------------------------------------------------------------
   Блог: шапка секції з кнопкою, лінк «Читати матеріал»
   -------------------------------------------------------------------------- */
.sl-blog__head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
}
.sl-blog__all-btn {
	align-self: flex-start;
	flex-shrink: 0;
}
.sl-blog__title-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.sl-blog__title-link:hover {
	color: var(--sl-primary);
}
.sl-blog__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding-top: 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-primary);
	text-decoration: none;
}
.sl-blog__more svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.sl-blog__more:hover svg {
	transform: translateX(0.25rem);
}

/* --------------------------------------------------------------------------
   Внутрішні сторінки: відступ під фіксований хедер + сторінковий хедер
   -------------------------------------------------------------------------- */
.sl-page {
	padding-top: var(--sl-header-h);
}
.sl-page-head {
	border-bottom: 1px solid var(--sl-border);
	background: var(--sl-secondary);
	padding-block: 3.5rem;
}
.sl-page-head__intro {
	margin: 1.5rem 0 0;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.75rem;
	color: var(--sl-muted-foreground);
}

/* --------------------------------------------------------------------------
   Архів блогу + пагінація
   -------------------------------------------------------------------------- */
.sl-blog-archive {
	padding-block: 4rem;
}
.sl-blog-archive__grid {
	margin-top: 0;
}
.sl-blog-archive__empty {
	max-width: 32rem;
	margin-inline: auto;
	padding-block: 3rem;
	text-align: center;
}
.sl-blog-archive__empty-title {
	margin: 0;
	font-family: var(--sl-font-display);
	font-size: 1.5rem;
	font-weight: 600;
}
.sl-blog-archive__empty-text {
	margin: 1rem 0 2rem;
	font-size: 1rem;
	line-height: 1.75rem;
	color: var(--sl-muted-foreground);
}
.sl-pagination {
	margin-top: 3rem;
}
.sl-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.sl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--sl-input);
	border-radius: calc(var(--sl-radius) - 2px);
	background: var(--sl-background);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--sl-foreground);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sl-pagination .page-numbers svg {
	width: 1rem;
	height: 1rem;
}
.sl-pagination a.page-numbers:hover {
	background: var(--sl-accent);
}
.sl-pagination .page-numbers.current {
	background: var(--sl-primary);
	border-color: var(--sl-primary);
	color: var(--sl-primary-foreground);
}
.sl-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--sl-muted-foreground);
}
.sl-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Стаття блогу (single.php)
   -------------------------------------------------------------------------- */
.sl-article {
	padding-block: 3rem 4rem;
}
.sl-article__inner {
	max-width: 45rem;
	margin-inline: auto;
}
.sl-article__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.sl-article__tag {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sl-primary);
}
.sl-article__date {
	font-size: 0.875rem;
	color: var(--sl-muted-foreground);
}
.sl-article__title {
	margin: 1rem 0 0;
	font-size: 1.875rem;
	line-height: 1.2;
	font-weight: 600;
}
.sl-article__media {
	margin: 2rem 0 0;
}
.sl-article__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sl-radius);
}
.sl-article__content {
	margin-top: 2rem;
}
.sl-article__content > * {
	margin: 1rem 0 0;
}
.sl-article__content p {
	font-size: 1rem;
	line-height: 2rem;
	color: var(--sl-muted-foreground);
}
.sl-article__content h2,
.sl-article__content h3,
.sl-article__content h4 {
	margin-top: 2.5rem;
	font-family: var(--sl-font-display);
	font-weight: 600;
	color: var(--sl-foreground);
}
.sl-article__content h2 {
	font-size: 1.5rem;
	line-height: 1.3;
}
.sl-article__content h3 {
	font-size: 1.25rem;
	line-height: 1.75rem;
}
.sl-article__content h4 {
	font-size: 1.125rem;
	line-height: 1.5rem;
}
.sl-article__content ul,
.sl-article__content ol {
	padding-left: 1.25rem;
	font-size: 1rem;
	line-height: 2rem;
	color: var(--sl-muted-foreground);
}
.sl-article__content li {
	margin-top: 0.25rem;
}
.sl-article__content a {
	color: var(--sl-primary);
}
.sl-article__content blockquote {
	margin: 2rem 0 0;
	border-left: 3px solid var(--sl-primary);
	border-radius: 0 var(--sl-radius) var(--sl-radius) 0;
	background: var(--sl-secondary);
	padding: 1.25rem 1.5rem;
}
.sl-article__content blockquote p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.875rem;
	color: var(--sl-foreground);
}
.sl-article__content blockquote p + p {
	margin-top: 0.75rem;
}
.sl-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sl-radius);
}
.sl-article__content figure {
	margin-inline: 0;
}
.sl-article__content figcaption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--sl-muted-foreground);
}
.sl-article__footer {
	margin-top: 3rem;
	border-top: 1px solid var(--sl-border);
	padding-top: 2rem;
}
.sl-article__related {
	max-width: 45rem;
	margin: 4rem auto 0;
	border-top: 1px solid var(--sl-border);
	padding-top: 2.5rem;
}
.sl-article__related-title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.3;
	font-weight: 600;
}
.sl-article__related-grid {
	margin-top: 1.5rem;
}
.sl-article__related-grid .sl-blog__card {
	min-height: 0;
}

/* --------------------------------------------------------------------------
   Адаптив нових блоків
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
	.sl-article__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.sl-catalog,
	.sl-documents {
		padding-block: 7rem;
	}
	.sl-partners__logo {
		height: 2.5rem;
	}
	.sl-catalog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sl-catalog__partner-name {
		font-size: 1.5rem;
	}
	.sl-documents__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.sl-blog__head {
		flex-direction: row;
		align-items: flex-end;
	}
	.sl-blog__all-btn {
		align-self: auto;
	}
	.sl-page-head {
		padding-block: 5rem;
	}
	.sl-blog-archive {
		padding-block: 5rem;
	}
	.sl-article {
		padding-block: 4rem 6rem;
	}
	.sl-article__title {
		font-size: 2.25rem;
		line-height: 1.15;
	}
}

@media (min-width: 1024px) {
	.sl-blog-archive__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-partners__logo,
	.sl-products__pdf,
	.sl-catalog__filter,
	.sl-catalog__product,
	.sl-catalog__product-arrow,
	.sl-documents__card,
	.sl-documents__official-link,
	.sl-blog__more svg,
	.sl-blog__title-link,
	.sl-pagination .page-numbers {
		transition: none !important;
	}
	.sl-blog__more:hover svg {
		transform: none;
	}
	.sl-documents__card:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Велком-тизер (sl-wl-*) — порт welcome.css з hydrophob під токени STARLIFE
   -------------------------------------------------------------------------- */
.sl-wl-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--sl-foreground);
	transform: translateY(0);
	/* довгий мʼякий хід: рушає майже непомітно, далі прискорюється
	   і плавно гальмує — вихід читається як завершення, а не як ривок */
	transition: transform 1.6s cubic-bezier(0.76, 0, 0.24, 1), opacity 1.6s ease;
	will-change: transform;
}
.sl-wl-overlay * {
	box-sizing: border-box;
}

/* ---------- прелоадер: лого + прогрес ---------- */
.sl-wl-preloader {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sl-foreground);
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sl-wl-preloader.is-hidden {
	transform: translateY(-100%);
}
.sl-wl-preloader__inner {
	opacity: 0;
	transform: scale(0.92);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	animation: sl-wl-pre-in 0.6s ease-out 0.1s forwards;
}
.sl-wl-preloader__logo {
	display: block;
	width: min(52vw, 240px);
	height: auto;
	/* лого на темному — білим, як .sl-logo--inverse */
	filter: brightness(0) invert(1);
	animation: sl-wl-pre-pulse 1.4s ease-in-out infinite;
}
.sl-wl-preloader__bar {
	width: 200px;
	max-width: 52vw;
	height: 2px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 2px;
	overflow: hidden;
}
.sl-wl-preloader__bar i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--sl-primary);
	border-radius: 2px;
	transition: width 0.25s ease;
}
.sl-wl-preloader__pct {
	font-family: var(--sl-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: rgba(255, 255, 255, 0.6);
	font-variant-numeric: tabular-nums;
}

/* ---------- інтро: відео на весь екран + тексти ---------- */
.sl-wl-intro {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--sl-foreground);
	will-change: transform, opacity;
}
.sl-wl-intro__video {
	position: absolute;
	inset: 0;
	filter: blur(22px) brightness(0.7);
	transform: scale(1.08);
	transition: filter 1.3s ease, transform 1.3s ease;
}
.sl-wl-intro.is-ready .sl-wl-intro__video {
	filter: blur(0) brightness(1);
	transform: scale(1);
}
.sl-wl-intro__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.sl-wl-intro__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}
.sl-wl-intro__content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 20px;
	color: #fff;
}
.sl-wl-intro__eyebrow,
.sl-wl-intro__title,
.sl-wl-intro__descr {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sl-wl-intro.is-ready .sl-wl-intro__eyebrow { opacity: 1; transform: none; transition-delay: 0.15s; }
.sl-wl-intro.is-ready .sl-wl-intro__title { opacity: 1; transform: none; transition-delay: 0.28s; }
.sl-wl-intro.is-ready .sl-wl-intro__descr { opacity: 1; transform: none; transition-delay: 0.5s; }
.sl-wl-intro__eyebrow {
	margin: 0 0 22px;
	font-family: var(--sl-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}
.sl-wl-intro__title {
	margin: 0;
	font-family: var(--sl-font-display);
	font-weight: 600;
	font-size: clamp(40px, 8vw, 96px);
	letter-spacing: 0;
	line-height: 1.02;
	color: #fff;
}
.sl-wl-intro__descr {
	margin: 24px auto 0;
	/* фіксована колонка: під час друкування рядки лягають у сталу ширину,
	   а блок не росте по горизонталі й не стрибає */
	display: block;
	width: min(520px, 100%);
	max-width: 520px;
	align-self: center;
	min-height: 3.3em;
	font-family: var(--sl-font-sans);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* ── очікування: кадр розмитий, доки людина не дала команду ─────────── */
.sl-wl-intro.is-blurred .sl-wl-intro__video {
	filter: blur(9px) brightness(0.72);
	transform: scale(1.04);
	transition: filter 1.5s cubic-bezier(0.22, 0.61, 0.36, 1),
				transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* повний розфокус доростає вже після прелоадера — як рух камери */
.sl-wl-intro.is-blurred.is-ready .sl-wl-intro__video {
	filter: blur(24px) brightness(0.55);
	transform: scale(1.08);
}

/* ── перегляд: тексти відступають, щоб не заважати дивитись ─────────── */
.sl-wl-intro.is-playing .sl-wl-intro__content {
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	pointer-events: none;
}

/* ── вихід: накладка їде вниз, кадр знову мʼяко розмивається ────────── */
.sl-wl-overlay.is-leaving {
	transform: translateY(100%);
	opacity: 0.96;
}
.sl-wl-overlay.is-leaving .sl-wl-intro__video {
	filter: blur(18px) brightness(0.5);
	transform: scale(1.06);
	transition: filter 1.4s ease, transform 1.6s ease;
}
.sl-wl-overlay.is-leaving .sl-wl-intro__content {
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* ── сторінка під тизером ───────────────────────────────────────────
   Головна стоїть розмитою, різкість повертається разом із виходом
   накладки. Фільтр — лише на main: на body він зламав би position: fixed,
   а фіксовані шапку/прогрес просто ховаємо на час тизера. */
body.sl-wl-behind > main,
body.sl-wl-behind > .sl-main {
	filter: blur(16px) brightness(0.8);
	transform: scale(1.015);
	transition: filter 1.5s cubic-bezier(0.76, 0, 0.24, 1),
				transform 1.6s cubic-bezier(0.76, 0, 0.24, 1);
	will-change: filter;
}
body.sl-wl-behind--out > main,
body.sl-wl-behind--out > .sl-main {
	filter: blur(0) brightness(1);
	transform: none;
	/* різкість повертається саме тоді, коли накладка відкриває сторінку:
	   перші ~250мс вона ще майже не зрушила (повільний старт кривої) */
	transition: filter 1.4s cubic-bezier(0.76, 0, 0.24, 1) 0.25s,
				transform 1.5s cubic-bezier(0.76, 0, 0.24, 1) 0.25s;
}
body.sl-wl-behind > header,
body.sl-wl-behind > footer,
body.sl-wl-behind > .sl-scroll-progress {
	visibility: hidden;
}
body.sl-wl-behind--out > header,
body.sl-wl-behind--out > footer,
body.sl-wl-behind--out > .sl-scroll-progress {
	visibility: visible;
	transition: visibility 0s linear 0.2s;
}

/* Замок прокрутки на час тизера. Класом, а не inline-стилем: інлайн
   перебили б власні правила overflow теми. */
html.sl-wl-lock,
html.sl-wl-lock body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

@keyframes sl-wl-pre-in {
	to { opacity: 1; transform: scale(1); }
}
@keyframes sl-wl-pre-pulse {
	0%, 100% { opacity: 0.45; transform: scale(0.98); }
	50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
	.sl-wl-intro__descr {
		padding: 0 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-wl-overlay,
	.sl-wl-preloader,
	.sl-wl-intro__video,
	.sl-wl-intro__eyebrow,
	.sl-wl-intro__title,
	.sl-wl-intro__descr {
		transition: none !important;
	}
	.sl-wl-preloader__inner {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.sl-wl-preloader__logo {
		animation: none;
	}
	body.sl-wl-behind > main,
	body.sl-wl-behind > .sl-main {
		filter: none;
		transform: none;
		transition: none;
	}
}