@font-face {
	font-family: "Boldonse";
	src: url("../fonts/Boldonse-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-SemiBoldItalic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {

	--layla-font-primary: "Boldonse", sans-serif;
	--layla-font-body: "Inter Tight", sans-serif;
	--layla-font-decor: "Inter Tight", sans-serif;
	--layla-font-mono: "IBM Plex Mono", monospace;
	--layla-font-condensed: "Inter Tight", sans-serif;
	--layla-font-serif: "Inter Tight", sans-serif;


	--layla-color-heading: #271d49;
	--layla-color-subheading: #271d49;
	--layla-color-body: #2f2f2f;
	--layla-color-body-muted: #666666;
	--layla-color-accent: #6045bd;
	--layla-color-accent-hover: #5338ba;
	--layla-color-light: #fefefe;
	--layla-color-white: #ffffff;
	--layla-color-bg-grey: #f1eef7;
	--layla-color-bg-grey-2: #f6f6f6;
	--layla-color-bg-warm: #faf7f2;
	--layla-color-card-dark: #241b2f;
	--layla-color-success: #2e8b70;
	--layla-color-border: rgba(39, 29, 73, 0.1);
	--layla-color-border-light: rgba(254, 254, 254, 0.2);


	--layla-gradient-badge: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(216, 194, 236, 0.48) 24%, rgba(174, 127, 216, 0.4) 100%);
	--layla-gradient-accent: linear-gradient(135deg, #f1e5fb 0%, #a16ae7 28%, #ff9e73 63%, #ffe0d0 100%);
	--layla-gradient-btn: linear-gradient(180deg, #6846c7 0%, #6045bd 72%, #5338ba 100%);
	--layla-gradient-glow: linear-gradient(180deg, rgba(174, 127, 216, 0) 0%, rgba(174, 127, 216, 0.15) 100%);


	--layla-shadow-btn: 0px 4px 16px rgba(96, 69, 189, 0.24);
	--layla-shadow-btn-hover: 0px 8px 24px rgba(96, 69, 189, 0.36);
	--layla-shadow-sm: 0 2px 8px rgba(39, 29, 73, 0.06);
	--layla-shadow-md: 0 8px 24px rgba(39, 29, 73, 0.08);
	--layla-shadow-lg: 0 16px 36px rgba(39, 29, 73, 0.12);


	--layla-letter-spacing-h1: -5%;
	--layla-letter-spacing-h2: -4%;
	--layla-letter-spacing-h3: -4%;
	--layla-letter-spacing-h4: -2%;
	--layla-letter-spacing-decor: -4%;
	--layla-letter-spacing-body: 0%;
	--layla-letter-spacing-tag: 0%;
	--layla-letter-spacing-btn: 0%;


	--layla-container-max-width: 1336px;
}





:where(.layla-widget),
:where(.layla-widget) *,
:where(.layla-widget) *::before,
:where(.layla-widget) *::after {
	box-sizing: border-box;
}

:where(.layla-widget) .layla-container {
	width: 100%;
	max-width: var(--layla-container-max-width);
	margin: 0 auto;
}

:where(.layla-widget) .layla-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

:where(.layla-widget) .layla-text-body-sm {
	margin: 0;
	color: var(--layla-color-body, #2f2f2f);
	font-family: var(--layla-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: 0em;
	letter-spacing: var(--layla-letter-spacing-body, 0%);
	word-wrap: break-word;
}

:where(.layla-widget) .layla-background-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
	z-index: 1;
	overflow: hidden;
}

:where(.layla-widget) .layla-btn--lift:hover {
	transform: translateY(-2px);
	box-shadow: var(--layla-shadow-btn-hover);
}

:where(.layla-widget) .layla-btn--lift:active {
	transform: translateY(0);
}

:where(.layla-widget) .layla-btn--lift .layla-btn__icon svg {
	display: block;
	transition: transform 0.25s ease;
}

:where(.layla-widget) .layla-btn--lift:hover .layla-btn__icon svg {
	transform: translateX(3px);
}



.layla-h1 {
	margin: 0;
	color: var(--layla-color-heading);
	font-family: var(--layla-font-primary);
	font-size: clamp(42px, calc(42px + 22 * (100vw - 767px) / 673), 64px);
	font-weight: 400;
	font-style: normal;
	line-height: 160%;
	letter-spacing: -0.05em;
	letter-spacing: var(--layla-letter-spacing-h1, -5%);
	word-wrap: break-word;
}

.layla-h1 .layla-text-decor,
.layla-h1 .layla-text-serif,
.layla-h1 .layla-text-italic {
	font-family: var(--layla-font-decor, var(--layla-font-body));
	font-style: italic;
	font-weight: 400;
	font-size: clamp(60px, calc(60px + 30 * (100vw - 767px) / 673), 90px);
	line-height: 110%;
	letter-spacing: -0.04em;
	letter-spacing: var(--layla-letter-spacing-decor, -4%);
	text-align: inherit;
}

.layla-h2 {
	margin: 0;
	color: var(--layla-color-heading);
	font-family: var(--layla-font-primary);
	font-size: clamp(28px, calc(28px + 20 * (100vw - 767px) / 673), 48px);
	font-weight: 400;
	font-style: normal;
	line-height: 140%;
	letter-spacing: -0.04em;
	letter-spacing: var(--layla-letter-spacing-h2, -4%);
	word-wrap: break-word;
}

.layla-h2 .layla-text-decor,
.layla-h2 .layla-text-serif,
.layla-h2 .layla-text-italic {
	font-family: var(--layla-font-decor, var(--layla-font-body));
	font-style: italic;
	font-weight: 400;
	font-size: clamp(42px, calc(42px + 26 * (100vw - 767px) / 673), 68px);
	line-height: 110%;
	letter-spacing: -0.04em;
	letter-spacing: var(--layla-letter-spacing-decor, -4%);
	text-align: inherit;
}

.layla-h3 {
	margin: 0;
	color: var(--layla-color-heading);
	font-family: var(--layla-font-primary);
	font-size: clamp(22px, calc(22px + 10 * (100vw - 767px) / 673), 32px);
	font-weight: 400;
	font-style: normal;
	line-height: 150%;
	letter-spacing: -0.04em;
	letter-spacing: var(--layla-letter-spacing-h3, -4%);
	word-wrap: break-word;
}

.layla-h4 {
	margin: 0;
	color: var(--layla-color-heading);
	font-family: var(--layla-font-primary);
	font-size: clamp(20px, calc(20px + 4 * (100vw - 767px) / 673), 24px);
	font-weight: 400;
	font-style: normal;
	line-height: 150%;
	letter-spacing: -0.02em;
	letter-spacing: var(--layla-letter-spacing-h4, -2%);
	word-wrap: break-word;
}

.layla-text-body {
	margin: 0;
	color: var(--layla-color-body);
	font-family: var(--layla-font-body);
	font-size: 20px;
	font-weight: 500;
	font-style: normal;
	line-height: 120%;
	letter-spacing: 0em;
	letter-spacing: var(--layla-letter-spacing-body, 0%);
	word-wrap: break-word;
}

.layla-text-body-lg {
	margin: 0;
	color: var(--layla-color-body);
	font-family: var(--layla-font-body);
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	line-height: 150%;
	letter-spacing: 0em;
	letter-spacing: var(--layla-letter-spacing-body, 0%);
	word-wrap: break-word;
}

.layla-text-decor,
.layla-text-serif,
.layla-text-italic {
	margin: 0;
	color: inherit;
	font-family: var(--layla-font-decor, var(--layla-font-body));
	font-style: italic;
	font-weight: 400;
	line-height: 110%;
	letter-spacing: -0.04em;
	letter-spacing: var(--layla-letter-spacing-decor, -4%);
	word-wrap: break-word;
}

.layla-badge,
.layla-tag {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: var(--layla-color-bg-grey);
	border-radius: 9999px;
}

.layla-badge--gradient {
	background: var(--layla-gradient-badge);
}


html[data-layla-badge-font="loading"] .layla-badge,
html[data-layla-badge-font="loading"] .layla-tag {
	visibility: hidden !important;
}


html[data-layla-badge-font="fallback"] .layla-badge__text,
html[data-layla-badge-font="fallback"] .layla-tag__text {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.layla-label,
.layla-badge__text,
.layla-tag__text {
	color: var(--layla-color-heading);
	font-family: var(--layla-font-mono);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
	text-transform: uppercase;
	letter-spacing: 0em;
	letter-spacing: var(--layla-letter-spacing-tag, 0%);
	text-align: center;
	word-wrap: break-word;
}




.layla-btn,
.layla-btn__text,
:where(.layla-widget) button {
	letter-spacing: 0em;
	letter-spacing: var(--layla-letter-spacing-btn, 0%);
}

.layla-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	flex-shrink: 0;
	gap: 10px;
	padding: 8px 32px 8px 8px;
	background: var(--layla-btn-bg, var(--layla-color-accent));
	border: 0;
	border-radius: 56px;
	color: var(--layla-btn-color, var(--layla-color-light));
	font-family: var(--layla-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 100%;
	text-decoration: none;
	word-wrap: break-word;
	cursor: pointer;
	outline: none;
	box-shadow: none;
	transform: none;
}

button.layla-btn:hover,
button.layla-btn:focus,
a.layla-btn:hover,
a.layla-btn:focus,
.layla-btn:hover,
.layla-btn:focus {
	background: var(--layla-btn-bg, var(--layla-color-accent));
	color: var(--layla-btn-color, var(--layla-color-light));
	box-shadow: none;
	transform: none;
	text-decoration: none;
	outline: none;
}

button.layla-btn:focus-visible,
a.layla-btn:focus-visible,
.layla-btn:focus-visible {
	outline: 2px solid var(--layla-btn-focus-color, var(--layla-color-heading));
	outline-offset: 4px;
}

.layla-btn__text {
	color: inherit;
	font: inherit;
	word-wrap: break-word;
}

.layla-btn__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--layla-btn-icon-bg, var(--layla-color-light));
	color: var(--layla-btn-icon-color, var(--layla-color-accent));
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	flex-shrink: 0;
	transition: background-color 300ms ease-out, color 300ms ease-out;
}

.layla-btn__icon svg {
	width: 20px;
	height: 20px;
	display: block;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	transform: rotate(0deg);
	transition: transform 300ms ease-out;
}

.layla-btn:hover .layla-btn__icon,
.layla-btn:focus-visible .layla-btn__icon {
	background: var(--layla-color-heading);
	color: var(--layla-color-light);
}

.layla-btn:hover .layla-btn__icon svg,
.layla-btn:focus-visible .layla-btn__icon svg {
	transform: rotate(-30deg);
}


.layla-btn--secondary,
.layla-btn--light {
	--layla-btn-bg: var(--layla-color-light);
	--layla-btn-color: var(--layla-color-heading);
	--layla-btn-icon-bg: var(--layla-btn-accent, var(--layla-color-accent));
	--layla-btn-icon-color: var(--layla-color-light);
	--layla-btn-focus-color: var(--layla-color-light);
}


.layla-btn--reveal {
	animation: layla-btn-reveal 550ms ease-out 120ms both;
}

@keyframes layla-btn-reveal {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.layla-btn--reveal {
		animation: none;
	}

	.layla-btn__icon,
	.layla-btn__icon svg {
		transition: none;
	}
}

.layla-widget button.layla-slider-arrow {
	appearance: none;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--layla-slider-arrow-size, 32px);
	height: var(--layla-slider-arrow-size, 32px);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--layla-slider-arrow-color, var(--layla-color-accent, #6045bd));
	cursor: pointer;
	outline: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}


.layla-widget button.layla-slider-arrow:hover,
.layla-widget button.layla-slider-arrow:focus {
	background: transparent;
	color: var(--layla-slider-arrow-color, var(--layla-color-accent, #6045bd));
}

.layla-widget button.layla-slider-arrow:hover {
	transform: scale(1.15);
}

.layla-widget button.layla-slider-arrow:active {
	transform: scale(0.95);
}

.layla-widget button.layla-slider-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.layla-widget button.layla-slider-arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.layla-slider-arrow--light {
	--layla-slider-arrow-color: var(--layla-color-light, #fefefe);
}


@media (min-width: 768px) {
	.layla-slider-arrow--vertical svg {
		transform: rotate(90deg);
	}
}

.layla-btn--simple {
	padding: 12px 24px;
}





@media (max-width: 767px) {
	.layla-h1 {
		font-size: 42px;
		line-height: 160%;
		letter-spacing: -0.05em;
		letter-spacing: -5%;
	}

	.layla-h1 .layla-text-decor,
	.layla-h1 .layla-text-serif,
	.layla-h1 .layla-text-italic {
		font-size: 60px;
		line-height: 100%;
		letter-spacing: -0.03em;
		letter-spacing: -3%;
	}

	.layla-h2 {
		font-size: 28px;
		line-height: 150%;
		letter-spacing: -0.04em;
		letter-spacing: -4%;
	}

	.layla-h2 .layla-text-decor,
	.layla-h2 .layla-text-serif,
	.layla-h2 .layla-text-italic {
		font-size: 42px;
		line-height: 100%;
		letter-spacing: -0.04em;
		letter-spacing: -4%;
	}

	.layla-h3 {
		font-size: 22px;
		line-height: 150%;
		letter-spacing: -0.02em;
		letter-spacing: -2%;
	}

	.layla-h4 {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: -0.02em;
		letter-spacing: -2%;
	}

	.layla-text-body {
		font-size: 16px;
		line-height: 150%;
		letter-spacing: 0em;
		letter-spacing: 0%;
	}

	.layla-text-body-lg {
		font-size: 16px;
		line-height: 150%;
		letter-spacing: 0em;
		letter-spacing: 0%;
	}

	.layla-text-body-sm {
		font-size: 14px;
		line-height: 150%;
		letter-spacing: 0em;
		letter-spacing: 0%;
	}
}