/* ==========================================================================
 * FlowKit widgets.
 *
 * Loaded only when a page actually contains one, via each widget's
 * get_style_depends(). The gradient ring these widgets wear lives in
 * flowkit.css — here they only mark their host element .fk-ring.
 *
 * Two custom properties are written by JavaScript and nothing else:
 * --fk-mx / --fk-my (the button's magnetic offset) and --fk-sx / --fk-sy
 * (the card's spotlight position). They are deliberately named apart, since a
 * card containing a button would otherwise inherit its coordinates into it.
 * ========================================================================== */

/* Elementor sets this globally, but a card with height:100% and padding
   overflows its row without it, so the widgets do not rely on the theme. */
.fk-btn,
.fk-card,
.fk-marquee,
.fk-marquee__group,
.fk-marquee__item,
.fk-acc,
.fk-tabs,
.fk-feat,
.fk-price {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Button -- */

.fk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	background-color: var( --fk-btn-bg, #6d5efc );
	border: 0;
	cursor: pointer;
	transform: translate3d( var( --fk-mx, 0 ), calc( var( --fk-my, 0 ) - var( --fk-lift, 0 ) ), 0 );
	transition: transform 0.25s cubic-bezier( 0.2, 0.7, 0.3, 1 ), color 0.25s ease, background-color 0.25s ease;
}

.fk-btn:hover {
	--fk-lift: var( --fk-btn-lift, 0px );
}

.fk-btn--grad {
	background-color: transparent;
	background-image: linear-gradient( var( --fk-btn-ang, 90deg ), var( --fk-btn-c1, #6d5efc ), var( --fk-btn-c2, #ec4899 ) );
}

/* A three-stop gradient and a 220% canvas, so the drift returns to where it
   started instead of snapping back at the end of the cycle. */
.fk-btn--drift {
	background-image: linear-gradient(
		var( --fk-btn-ang, 90deg ),
		var( --fk-btn-c1, #6d5efc ),
		var( --fk-btn-c2, #ec4899 ),
		var( --fk-btn-c1, #6d5efc )
	);
	background-size: 220% 100%;
	animation: fk-btn-drift var( --fk-btn-drift, 5s ) ease-in-out infinite alternate;
}

@keyframes fk-btn-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

.fk-btn--bare {
	background-color: transparent;
	background-image: none;
}

.fk-btn__inner {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.fk-btn__icon {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.fk-btn__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.fk-btn:hover .fk-btn__icon--slide.fk-btn__icon--after  { transform: translateX( 4px ); }
.fk-btn:hover .fk-btn__icon--slide.fk-btn__icon--before { transform: translateX( -4px ); }
.fk-btn:hover .fk-btn__icon--spin                       { transform: rotate( 180deg ); }

/* The sweep is clipped by its own wrapper rather than by the button, so the
   button keeps overflow visible and the ring's outer glow is not cut off. */
.fk-btn__sheenwrap {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.fk-btn__sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient( 100deg, transparent, var( --fk-btn-sheen, rgba(255,255,255,0.35) ), transparent );
	transform: skewX( -18deg );
}

.fk-btn:hover .fk-btn__sheen {
	animation: fk-btn-sheen 0.7s ease-out;
}

@keyframes fk-btn-sheen {
	from { left: -60%; }
	to   { left: 130%; }
}

/* ------------------------------------------------------------------ Card -- */

/* Cards sitting side by side in a stretched container should end level, so
   the height is handed down from the widget rather than set by the text. */
.elementor-widget-flowkit-card,
.elementor-widget-flowkit-card > .elementor-widget-container {
	height: 100%;
}

.fk-card {
	position: relative;
	display: block;
	height: 100%;
	background: var( --fk-card-bg, #12121c );
	border: 1px solid var( --fk-card-line, rgba(255,255,255,0.1) );
	transform: translate3d( 0, calc( -1 * var( --fk-lift, 0px ) ), 0 );
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.3, 1 ), border-color 0.3s ease;
}

.fk-card:hover {
	--fk-lift: var( --fk-card-lift, 0px );
}

.fk-card--glass {
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur( var( --fk-card-blur, 20px ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --fk-card-blur, 20px ) ) saturate( 160% );
}

/* A radial gradient never paints outside its own box, so the spotlight needs
   no overflow clipping — which is what keeps the ring's glow intact. */
.fk-card__spot {
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		var( --fk-spot-size, 260px ) circle at var( --fk-sx, 50% ) var( --fk-sy, 0% ),
		var( --fk-spot-color, rgba(109,94,252,0.28) ),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.fk-card:hover .fk-card__spot {
	opacity: 1;
}

.fk-card__icon,
.fk-card__title,
.fk-card__text {
	position: relative;
	z-index: 1;
}

.fk-card__icon {
	display: inline-flex;
	align-items: center;
	margin-bottom: 16px;
	color: #6d5efc;
}

.fk-card__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.fk-card__title {
	margin: 0 0 10px;
	color: #fff;
}

.fk-card__text {
	margin: 0;
	color: rgba(255,255,255,0.62);
}

.fk-card__cover {
	position: absolute;
	z-index: 2;
	inset: 0;
	border-radius: inherit;
}

/* --------------------------------------------------------------- Marquee -- */

.fk-marquee {
	--fk-mq-dur: 30s;
	--fk-mq-gap: 48px;
	--fk-mq-fade: 12%;

	overflow: hidden;
}

.fk-marquee--fade {
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 var( --fk-mq-fade ), #000 calc( 100% - var( --fk-mq-fade ) ), transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 var( --fk-mq-fade ), #000 calc( 100% - var( --fk-mq-fade ) ), transparent );
}

/* The track holds the items twice, so sliding exactly half its width lands
   the copy where the original began — a seam with nothing to measure. */
.fk-marquee__track {
	display: flex;
	width: max-content;
	animation: fk-mq-slide var( --fk-mq-dur ) linear infinite;
}

.fk-marquee[data-fk-dir="right"] .fk-marquee__track {
	animation-direction: reverse;
}

.fk-marquee--pause:hover .fk-marquee__track {
	animation-play-state: paused;
}

.fk-marquee__group {
	display: flex;
	align-items: center;
	gap: var( --fk-mq-gap );
	padding-right: var( --fk-mq-gap );
}

.fk-marquee__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: rgba(255,255,255,0.72);
}

.fk-marquee__item img {
	display: block;
	width: auto;
	height: 32px;
	transition: opacity 0.3s ease;
}

.fk-marquee__sep {
	color: rgba(255,255,255,0.25);
}

@keyframes fk-mq-slide {
	to { transform: translateX( -50% ); }
}

/* --------------------------------------------------------------- Counter -- */

.fk-count__number {
	display: flex;
	align-items: baseline;
	justify-content: inherit;
	line-height: 1.05;
	color: #fff;
}

.fk-count__number--grad {
	background-image: linear-gradient( var( --fk-count-ang, 90deg ), var( --fk-count-c1, #6d5efc ), var( --fk-count-c2, #ec4899 ) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.fk-count__value {
	display: inline-flex;
	align-items: flex-start;
}

/* One column per digit: a window exactly one digit tall, with the 0–9 strip
   sliding behind it. JS measures the digit height rather than guessing from
   line-height, which is the only part of this that has to be a script. */
.fk-count__col {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.fk-count__strip {
	display: block;
	transform: translateY( 0 );
}

.fk-count__d {
	display: block;
}

/* A thousands separator is often a space, which a flex row would collapse
   to nothing. */
.fk-count__gap {
	white-space: pre;
}

/* Each column repaints the gradient for itself — see the comment in
   widgets.js: a clipped column cannot receive the number's own text clip. */
.fk-count__number--grad .fk-count__col {
	background-image: linear-gradient( var( --fk-count-ang, 90deg ), var( --fk-count-c1, #6d5efc ), var( --fk-count-c2, #ec4899 ) );
	background-size: var( --fk-count-w, 100% ) 100%;
	background-position: calc( -1 * var( --fk-col-x, 0px ) ) 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.fk-count__label {
	color: rgba(255,255,255,0.55);
}

/* ------------------------------------------------------------- Mask Text -- */

/* The colour is declared before the clip, so a browser that ignores
   background-clip:text still paints readable type. */
.fk-mask {
	margin: 0;
	color: #6d5efc;
}

.fk-mask--filled {
	background-image: var( --fk-mask-img );
	background-position: center;
	background-size: var( --fk-mask-size, cover );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.fk-mask--drift {
	background-size: auto 160%;
	animation: fk-mask-drift var( --fk-mask-dur, 18s ) ease-in-out infinite alternate;
}

@keyframes fk-mask-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* ----------------------------------------------------------- Image Card -- */

/* Cards in a stretched container end level, like the feature Card. */
.elementor-widget-flowkit-image-card,
.elementor-widget-flowkit-image-card > .elementor-widget-container,
.fk-imgcard {
	height: 100%;
}

.fk-imgcard {
	position: relative;
	overflow: hidden;
	border-radius: var( --fk-ic-radius, 20px );
}

.fk-imgcard__media {
	height: 100%;
	aspect-ratio: var( --fk-ic-ratio, 4/3 );
	overflow: hidden;
}

/* The zoom is a transform inside the clipped media box — no reflow, and the
   ring/glow outside the card is never cut. 1.001 at rest, so a 0% zoom still
   shares one code path. */
.fk-imgcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale( 1.001 );
	transition: transform 0.8s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-imgcard:hover .fk-imgcard__media img {
	transform: scale( var( --fk-ic-zoom, 1.08 ) );
}

.fk-imgcard__caption {
	position: absolute;
	inset: auto 0 0;
	padding: 48px 24px 20px;
	background: linear-gradient( to top, rgba( 5, 5, 10, var( --fk-ic-scrim, 0.7 ) ), transparent );
}

.fk-imgcard__title {
	margin: 0 0 4px;
	color: #fff;
}

.fk-imgcard__text {
	margin: 0;
	color: rgba(255,255,255,0.68);
}

/* Peek mode: the caption waits below the fold of the scrim until hovered. */
.fk-imgcard--peek .fk-imgcard__caption {
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-imgcard--peek:hover .fk-imgcard__caption {
	opacity: 1;
	transform: none;
}

.fk-imgcard__cover {
	position: absolute;
	z-index: 2;
	inset: 0;
	border-radius: inherit;
}

/* --------------------------------------------------------------- Divider -- */

.fk-divider {
	padding-block: 24px;
}

/* An inline-block, so the wrapper's text-align places it at any width. */
.fk-divider__line {
	display: inline-block;
	vertical-align: middle;
	width: var( --fk-div-w, 100% );
	height: var( --fk-div-h, 2px );
	border-radius: 999px;
	background: linear-gradient( 90deg, var( --fk-div-c1, #6d5efc ), var( --fk-div-c2, #ec4899) );
	transform-origin: left center;
}

/* Hairlines look mechanical with blunt ends; fade them out instead. */
.fk-divider--fade .fk-divider__line {
	mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
}

/* Scroll-driven draw, zero JavaScript. Where animation-timeline is unknown
   the keyframes never run and the line simply rests fully drawn. */
@supports ( animation-timeline: view() ) {
	.fk-divider--draw .fk-divider__line {
		animation: fk-divider-draw linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 60%;
	}
}

@keyframes fk-divider-draw {
	from { transform: scaleX( 0 ); }
	to   { transform: scaleX( 1 ); }
}

/* ----------------------------------------------------------------- Badge -- */

.fk-badge-wrap {
	line-height: 0; /* the pill sizes itself; the wrapper must not add leading */
}

.fk-badge-link {
	display: inline-block;
	text-decoration: none;
}

.fk-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var( --fk-badge-bg, rgba(255,255,255,0.06) );
	border: 1px solid var( --fk-badge-line, rgba(255,255,255,0.14) );
	color: var( --fk-badge-color, rgba(255,255,255,0.88) );
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.fk-badge--glass {
	backdrop-filter: blur( 12px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 160% );
}

.fk-badge__dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --fk-badge-dot, #4ade80 );
}

/* The pulse is an expanding ring of the dot's own colour. */
.fk-badge__dot--pulse {
	animation: fk-badge-pulse 2s cubic-bezier( 0.4, 0, 0.6, 1 ) infinite;
}

@keyframes fk-badge-pulse {
	0%   { box-shadow: 0 0 0 0 var( --fk-badge-dot, #4ade80 ); }
	70%  { box-shadow: 0 0 0 6px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.fk-badge__icon {
	display: inline-flex;
	align-items: center;
	font-size: 1em;
}

.fk-badge__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

/* ------------------------------------------------------------ Media Steps --

/* Two columns; the media one is sticky, the steps scroll past it. */
.fk-steps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --fk-steps-gap, 48px );
	align-items: start;
}

.fk-steps--right .fk-steps__media {
	order: 2;
}

.fk-steps__media {
	position: sticky;
	top: var( --fk-steps-top, 100px );
}

.fk-steps__frame {
	position: relative;
	height: var( --fk-steps-h, 70vh );
	border-radius: var( --fk-steps-radius, 20px );
	overflow: hidden;
	background: rgba(255,255,255,0.04);
}

/* All frames stacked; the active one crossfades in. */
.fk-steps__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var( --fk-steps-speed, 0.6s ) ease;
}

.fk-steps__img.is-active {
	opacity: 1;
}

/* Each step is a tall stop on the way down; the center hairline in widgets.js
   decides which one owns the frame. */
.fk-steps__step {
	min-height: var( --fk-steps-step-h, 60vh );
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: var( --fk-steps-dim, 0.35 );
	transform: translateY( 8px );
	transition: opacity var( --fk-steps-speed, 0.6s ) ease,
	            transform var( --fk-steps-speed, 0.6s ) cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-steps__step.is-active {
	opacity: 1;
	transform: none;
}

.fk-steps__num {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #6d5efc;
	margin-bottom: 12px;
}

.fk-steps__title {
	margin: 0 0 10px;
	color: #fff;
}

.fk-steps__text {
	margin: 0;
	color: rgba(255,255,255,0.62);
}

/* Narrow screens: the media becomes a plain block on top, the steps flow
   under it and still drive the frame as they pass the middle. */
@media ( width <= 767px ) {
	.fk-steps {
		grid-template-columns: 1fr;
	}

	.fk-steps--right .fk-steps__media {
		order: 0;
	}

	.fk-steps__media {
		position: relative;
		top: 0;
	}

	.fk-steps__frame {
		height: 50vh;
	}

	.fk-steps__step {
		min-height: 40vh;
	}
}

/* ------------------------------------------------------------ Accordion --

/* A native button carries the header, so focus and screen readers work before
   any JavaScript. The panel opens via grid-template-rows 0fr → 1fr — the only
   way to animate to an auto height without measuring in JS. */
.fk-acc {
	display: flex;
	flex-direction: column;
}

.fk-acc__item {
	border-bottom: 1px solid var( --fk-acc-line, rgba(255,255,255,0.1) );
}

.fk-acc--solid .fk-acc__item,
.fk-acc--glass .fk-acc__item {
	border: 1px solid var( --fk-acc-line, rgba(255,255,255,0.1) );
}

.fk-acc--solid .fk-acc__item {
	background: var( --fk-acc-bg, #12121c );
}

.fk-acc--glass .fk-acc__item {
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur( var( --fk-acc-blur, 20px ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --fk-acc-blur, 20px ) ) saturate( 160% );
}

.fk-acc__heading {
	margin: 0;
}

/* The title text sits on the left and never moves; the chevron lives on the
   right and only rotates. */
.fk-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 0;
	background: none;
	border: 0;
	color: #fff;
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.fk-acc--solid .fk-acc__head,
.fk-acc--glass .fk-acc__head {
	padding: 20px 24px;
}

.fk-acc__icon {
	display: inline-flex;
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-acc__icon svg {
	width: 18px;
	height: 18px;
}

.fk-acc__item.is-open .fk-acc__icon {
	transform: rotate( 180deg );
}

.fk-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-acc__item.is-open .fk-acc__panel {
	grid-template-rows: 1fr;
}

.fk-acc__inner {
	overflow: hidden;
	min-height: 0;
}

.fk-acc__content {
	padding: 0 0 18px;
	color: rgba(255,255,255,0.62);
	opacity: 0;
	transform: translateY( -4px );
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-acc--solid .fk-acc__content,
.fk-acc--glass .fk-acc__content {
	padding: 0 24px 20px;
}

.fk-acc__item.is-open .fk-acc__content {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------------------------------- Tabs --

/* Panels are stacked in one grid cell, so the container is always as tall as
   the tallest panel — switching tabs never moves the content below. */
.fk-tabs__list {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid var( --fk-tabs-line, rgba(255,255,255,0.1) );
}

.fk-tabs--vertical {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 32px;
}

.fk-tabs--vertical .fk-tabs__list {
	flex-direction: column;
	gap: 8px;
	border-bottom: 0;
	border-right: 1px solid var( --fk-tabs-line, rgba(255,255,255,0.1) );
}

.fk-tabs__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 2px;
	background: none;
	border: 0;
	color: rgba(255,255,255,0.55);
	font: inherit;
	cursor: pointer;
	transition: color 0.25s ease;
}

.fk-tabs--vertical .fk-tabs__tab {
	padding: 10px 20px 10px 2px;
}

/* The active indicator is a transform on a pseudo-element — it never touches
   layout. Horizontal: an underline growing with scaleX; vertical: a side bar
   growing with scaleY. */
.fk-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var( --fk-tabs-accent, #6d5efc );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-tabs--vertical .fk-tabs__tab::after {
	inset: 0 -1px 0 auto;
	width: 2px;
	height: auto;
	transform: scaleY( 0 );
	transform-origin: top;
}

.fk-tabs__tab.is-active::after {
	transform: scaleX( 1 );
}

.fk-tabs--vertical .fk-tabs__tab.is-active::after {
	transform: scaleY( 1 );
}

.fk-tabs__icon {
	display: inline-flex;
	align-items: center;
}

.fk-tabs__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.fk-tabs__panels {
	display: grid;
}

.fk-tabs--panel-solid .fk-tabs__panels {
	background: var( --fk-tabs-bg, #12121c );
	border: 1px solid var( --fk-tabs-line, rgba(255,255,255,0.1) );
}

.fk-tabs--panel-glass .fk-tabs__panels {
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur( var( --fk-tabs-blur, 20px ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --fk-tabs-blur, 20px ) ) saturate( 160% );
	border: 1px solid var( --fk-tabs-line, rgba(255,255,255,0.1) );
}

/* Inactive panels keep their cell but are transparent, unclickable and
   invisible — visibility is delayed so the fade-out finishes first. */
.fk-tabs__panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	pointer-events: none;
	transition: opacity 0.3s ease,
	            transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ),
	            visibility 0s linear 0.3s;
}

.fk-tabs__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity 0.3s ease,
	            transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* --------------------------------------------------------- Feature List --

/* Pure CSS — this widget loads no JavaScript at all. */
.fk-feat {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
}

.fk-feat__item {
	display: flex;
}

.fk-feat--top .fk-feat__item {
	flex-direction: column;
	align-items: flex-start;
}

.fk-feat--left .fk-feat__item {
	flex-direction: row;
	align-items: flex-start;
	gap: 18px;
}

.fk-feat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 16px;
	color: #a78bfa;
}

.fk-feat--left .fk-feat__icon {
	margin-bottom: 0;
}

.fk-feat__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

/* The glass chip: a frosted tile with a hairline and a soft accent glow —
   the same glass vocabulary as the cards. */
.fk-feat--chip .fk-feat__icon {
	width: var( --fk-feat-chip, 52px );
	height: var( --fk-feat-chip, 52px );
	border-radius: 14px;
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur( 12px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 160% );
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),
	            0 0 24px var( --fk-feat-glow, rgba(109,94,252,0.35) );
}

.fk-feat__title {
	margin: 0 0 8px;
	color: #fff;
}

.fk-feat__text {
	margin: 0;
	color: rgba(255,255,255,0.62);
}

@media ( width <= 767px ) {
	.fk-feat {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------- Pricing --

/* Tier cards sit side by side in a stretched container and should end level,
   so the height is handed down from the widget, like the feature Card. */
.elementor-widget-flowkit-pricing,
.elementor-widget-flowkit-pricing > .elementor-widget-container {
	height: 100%;
}

.fk-price {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var( --fk-price-bg, #12121c );
	border: 1px solid var( --fk-price-line, rgba(255,255,255,0.12) );
	transform: translate3d( 0, calc( -1 * var( --fk-lift, 0px ) ), 0 );
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.3, 1 ), border-color 0.3s ease;
}

.fk-price:hover {
	--fk-lift: var( --fk-price-lift, 0px );
}

.fk-price--glass {
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur( var( --fk-price-blur, 24px ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --fk-price-blur, 24px ) ) saturate( 160% );
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
	            0 24px 48px -24px rgba(0,0,0,0.5);
}

/* The glow is a static blurred aura painted behind the card — light, not
   motion, so no layout property is ever animated. The featured plan burns
   brighter. */
.fk-price::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc( -0.4 * var( --fk-price-glow-size, 48px ) );
	border-radius: inherit;
	background: radial-gradient(
		60% 60% at 50% 50%,
		var( --fk-price-glow, rgba(109,94,252,0.35) ),
		transparent 70%
	);
	filter: blur( var( --fk-price-glow-size, 48px ) );
	pointer-events: none;
}

.fk-price--featured::after {
	inset: calc( -0.6 * var( --fk-price-glow-size, 48px ) );
	filter: blur( calc( var( --fk-price-glow-size, 48px ) * 1.3 ) );
}

/* Same spotlight pattern as the feature Card — the radial gradient paints
   inside its own box, so no overflow clipping is needed and the glow stays. */
.fk-price__spot {
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		var( --fk-spot-size, 300px ) circle at var( --fk-sx, 50% ) var( --fk-sy, 0% ),
		var( --fk-spot-color, rgba(255,255,255,0.1) ),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.fk-price:hover .fk-price__spot {
	opacity: 1;
}

.fk-price__name,
.fk-price__row,
.fk-price__features,
.fk-price__cta,
.fk-price__badge {
	position: relative;
	z-index: 1;
}

.fk-price__badge {
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background-image: linear-gradient( 90deg, var( --fk-price-c1, #6d5efc ), var( --fk-price-c2, #ec4899 ) );
	box-shadow: 0 8px 24px -8px var( --fk-price-glow, rgba(109,94,252,0.35) );
}

.fk-price__name {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.62);
}

.fk-price__row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.fk-price__cur {
	font-size: 24px;
	font-weight: 600;
	color: rgba(255,255,255,0.75);
}

.fk-price__value {
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}

.fk-price__old {
	font-size: 20px;
}

.fk-price__features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 28px;
	padding: 24px 0 0;
	list-style: none;
	border-top: 1px solid var( --fk-price-line, rgba(255,255,255,0.12) );
}

.fk-price__feature {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fk-price__fi {
	display: inline-flex;
	flex-shrink: 0;
}

.fk-price__fi svg {
	width: 16px;
	height: 16px;
}

/* The button slides its gradient instead of lifting — the card already owns
   the hover lift, a second translate would double it. */
.fk-price__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	background-image: linear-gradient( 90deg, var( --fk-price-c1, #6d5efc ), var( --fk-price-c2, #ec4899 ), var( --fk-price-c1, #6d5efc ) );
	background-size: 220% 100%;
	background-position: 0% 50%;
	box-shadow: 0 8px 24px -8px var( --fk-price-glow, rgba(109,94,252,0.35) );
	transition: background-position 0.4s ease, box-shadow 0.3s ease;
}

.fk-price__cta:hover {
	background-position: 100% 50%;
}

/* ==========================================================================
 * 0.12 widgets: Button Outline, Kicker, Stats, Numbered Rows, Card Grid,
 * Logo Grid, Quote Form.
 *
 * Same vocabulary as the rest of the file: box-sizing per widget, colors as
 * custom properties written by the panel, hover on transform/background only.
 * ========================================================================== */

/* ------------------------------------------------- Button: outline mode -- */

.fk-btn--outline {
	background-color: transparent;
	background-image: none;
	border: var( --fk-btn-bw, 1px ) solid var( --fk-btn-bc, currentColor );
	transition: transform 0.25s cubic-bezier( 0.2, 0.7, 0.3, 1 ), color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.fk-btn--outline:hover {
	border-color: var( --fk-btn-bch, var( --fk-btn-bc, currentColor ) );
}

.fk-btn--outline-fill:hover {
	background-color: var( --fk-btn-bfill, #6d5efc );
}

.fk-btn--plain {
	background-color: var( --fk-btn-bg, #6d5efc );
	background-image: none;
}

/* ---------------------------------------------------------------- Kicker -- */

.fk-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 500;
	text-transform: uppercase;
}

.fk-kicker__dot {
	width: 7px;
	height: 7px;
	flex: none;
	background: currentcolor;
	transform: rotate( 45deg );
}

.fk-kicker__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	flex: none;
}

.fk-kicker__ico svg {
	width: 100%;
	height: 100%;
	fill: currentcolor;
	stroke: none;
}

.fk-kicker__num {
	flex: none;
	font-family: var( --fk-kicker-mono, inherit );
	font-weight: 600;
}

/* ----------------------------------------------------------------- Stats -- */

.fk-stats,
.fk-stats__cell {
	box-sizing: border-box;
}

.fk-stats {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	margin: 0;
}

.fk-stats--dividers {
	border-top: 1px solid var( --fk-stats-line, rgba(237, 238, 240, 0.09) );
}

.fk-stats__cell {
	position: relative;
	padding: 22px 28px 4px 0;
}

.fk-stats--dividers .fk-stats__cell + .fk-stats__cell {
	padding-left: 28px;
	border-left: 1px solid var( --fk-stats-line, rgba(237, 238, 240, 0.09) );
}

.fk-stats dt {
	display: flex;
	align-items: baseline;
	margin: 0 0 10px;
	font-variant-numeric: tabular-nums;
}

.fk-stats__value {
	font-size: clamp( 26px, 3vw, 38px );
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #edeef0;
}

.fk-stats__affix {
	font-style: normal;
	font-size: 0.62em;
	color: #f2661c;
	margin-left: 2px;
}

.fk-stats__affix--pre {
	margin-left: 0;
	margin-right: 2px;
}

.fk-stats__label {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	color: #7c8188;
}

/* --------------------------------------------------------- Numbered Rows -- */

.fk-rows,
.fk-rows__row {
	box-sizing: border-box;
}

.fk-rows__row {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 30px 8px;
	border-top: 1px solid rgba(16, 19, 24, 0.13);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.35s ease, transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-rows__row:last-child {
	border-bottom: 1px solid rgba(16, 19, 24, 0.13);
}

.fk-rows__row:hover {
	background: var( --fk-rows-hbg, transparent );
	transform: translateX( var( --fk-rows-hindent, 0px ) );
}

.fk-rows__num {
	flex: none;
	padding-top: 3px;
	font-family: var( --fk-rows-mono, inherit );
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #9ba0a7;
}

.fk-rows__body {
	flex: 1;
}

.fk-rows__title {
	margin: 0;
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: #101318;
}

.fk-rows__text {
	margin: 6px 0 0;
	max-width: 520px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5a5f66;
}

.fk-rows__arr {
	flex: none;
	width: 20px;
	height: 20px;
	color: #f2661c;
	opacity: 0;
	transform: translateX( -8px );
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-rows__arr svg {
	width: 100%;
	height: 100%;
}

.fk-rows--static-arr .fk-rows__arr,
.fk-rows__row:hover .fk-rows__arr {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------- Card Grid -- */

.fk-cgrid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fk-cgrid__cell {
	box-sizing: border-box;
	height: 100%;
}

.fk-cgrid__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	min-height: 210px;
	padding: 26px 26px 24px;
	background: var( --fk-cgrid-bg, #0f1113 );
	border: 1px solid var( --fk-cgrid-border, rgba(237, 238, 240, 0.09) );
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.fk-cgrid--cards .fk-cgrid__link:hover {
	background: var( --fk-cgrid-bg-h, #15181c );
	border-color: var( --fk-cgrid-border-h, rgba(242, 102, 28, 0.45) );
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
}

/* Divided: one hairline grid, cells share 1px separators. */
.fk-cgrid--divided {
	gap: 1px;
	background: var( --fk-cgrid-border, rgba(237, 238, 240, 0.09) );
	border: 1px solid var( --fk-cgrid-border, rgba(237, 238, 240, 0.09) );
	border-radius: 8px;
	overflow: hidden;
}

.fk-cgrid--divided .fk-cgrid__link {
	border: 0;
	border-radius: 0;
	transition: background-color 0.35s ease;
}

.fk-cgrid--divided .fk-cgrid__link:hover {
	background: var( --fk-cgrid-bg-h, #15181c );
}

.fk-cgrid__num {
	position: absolute;
	top: 14px;
	right: 16px;
	font-family: var( --fk-cgrid-mono, inherit );
	font-size: 11px;
	letter-spacing: 0.12em;
	opacity: 0.7;
}

.fk-cgrid__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	font-size: 22px;
	background: rgba(242, 102, 28, 0.13);
	color: #ff7d36;
	border-radius: 10px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.fk-cgrid__ico svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
	stroke: none;
}

.fk-cgrid__link:hover .fk-cgrid__ico {
	background: var( --fk-cgrid-chip-h, #f2661c );
	color: #fff;
}

.fk-cgrid__name {
	font-size: 17.5px;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: #edeef0;
	transition: color 0.3s ease;
}

.fk-cgrid__meta {
	margin-top: auto;
	font-family: var( --fk-cgrid-mono, inherit );
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: #7c8188;
}

.fk-cgrid__arr {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 18px;
	height: 18px;
	color: #ff7d36;
	opacity: 0;
	transform: translate( -4px, 4px );
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-cgrid__arr svg {
	width: 100%;
	height: 100%;
}

.fk-cgrid__link:hover .fk-cgrid__arr {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------- Logo Grid -- */

.fk-lgrid {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fk-lgrid__cell {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 86px;
	padding: 12px 18px;
	background: #fbfaf8;
	border: 1px solid var( --fk-lgrid-border, rgba(16, 19, 24, 0.13) );
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.fk-lgrid--cards .fk-lgrid__cell:hover {
	background: var( --fk-lgrid-bg-h, #fff );
	border-color: var( --fk-lgrid-border-h, rgba(242, 102, 28, 0.5) );
	transform: translateY( -2px );
	box-shadow: 0 14px 30px -16px rgba(16, 19, 24, 0.3);
}

.fk-lgrid--hairline {
	gap: 1px;
	background: var( --fk-lgrid-border, rgba(16, 19, 24, 0.13) );
	border-radius: 12px;
	overflow: hidden;
}

.fk-lgrid--hairline .fk-lgrid__cell {
	border: 0;
	border-radius: 0;
	transition: background-color 0.35s ease;
}

.fk-lgrid--hairline .fk-lgrid__cell:hover {
	background: var( --fk-lgrid-bg-h, #fff );
}

.fk-lgrid__num {
	position: absolute;
	top: 13px;
	left: 17px;
	font-family: var( --fk-lgrid-mono, inherit );
	font-size: 9.5px;
	letter-spacing: 0.16em;
	color: #6a6f76;
	opacity: 0.5;
	transition: opacity 0.35s ease;
}

.fk-lgrid__cell:hover .fk-lgrid__num {
	opacity: 0.9;
}

.fk-lgrid__logo {
	display: block;
	max-height: 30px;
	max-width: 78%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: var( --fk-lgrid-opacity, 84% );
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-lgrid__cell:hover .fk-lgrid__logo {
	opacity: 1;
	transform: scale( 1.03 );
}

/* Heterogeneous logos into one ink mass; hover restores a little density. */
.fk-lgrid--mono .fk-lgrid__logo {
	filter: grayscale( 1 ) brightness( var( --fk-lgrid-ink, 62% ) ) contrast( 1.06 );
	mix-blend-mode: multiply;
}

.fk-lgrid--mono .fk-lgrid__cell:hover .fk-lgrid__logo {
	filter: grayscale( 1 ) brightness( calc( var( --fk-lgrid-ink, 62% ) + 16% ) ) contrast( 1.04 );
}

.fk-lgrid__txt {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #101318;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ------------------------------------------------------------- Quote Form -- */

.fk-qform,
.fk-qform__form,
.fk-qfield {
	box-sizing: border-box;
}

.fk-qform {
	background: #0f1113;
	color: #edeef0;
	padding: 40px;
	border-radius: 8px;
}

.fk-qform--light input::placeholder,
.fk-qform--light textarea::placeholder {
	color: rgba(16, 19, 24, 0.35);
}

.fk-qform--light select option {
	background: #fff;
	color: #101318;
}

.fk-qform__title {
	margin: 0 0 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(237, 238, 240, 0.09);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Honeypot: visible to bots, invisible and unreachable for everyone else. */
.fk-qform__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.fk-qform__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px;
	margin-bottom: 4px;
}

.fk-qfield {
	display: block;
	margin-bottom: 14px;
}

.fk-qfield--full {
	grid-column: 1 / -1;
}

.fk-qfield__label {
	display: block;
	margin-bottom: 8px;
	font-family: var( --fk-qform-mono, inherit );
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7c8188;
}

.fk-qfield input,
.fk-qfield textarea,
.fk-qfield select {
	width: 100%;
	background: var( --fk-qf-field-bg, rgba(237, 238, 240, 0.045) );
	border: 1px solid var( --fk-qf-field-border, rgba(237, 238, 240, 0.09) );
	color: var( --fk-qf-field-text, #edeef0 );
	font: inherit;
	font-size: 15px;
	padding: 13px 16px;
	border-radius: var( --fk-qf-radius, 8px );
	transition: border-color 0.3s ease, background-color 0.3s ease;
	appearance: none;
}

.fk-qfield textarea {
	min-height: 84px;
	resize: vertical;
	scrollbar-width: thin;
	scrollbar-color: rgba(237, 238, 240, 0.22) transparent;
}

.fk-qfield input:focus,
.fk-qfield textarea:focus,
.fk-qfield select:focus {
	outline: none;
	border-color: var( --fk-qf-accent, #f2661c );
}

.fk-qfield input::placeholder,
.fk-qfield textarea::placeholder {
	color: rgba(237, 238, 240, 0.32);
}

.fk-qfield input.is-error,
.fk-qfield textarea.is-error {
	border-color: #e5484d !important;
}

.fk-qselect {
	position: relative;
	display: block;
}

.fk-qselect select {
	cursor: pointer;
	padding-right: 40px;
}

.fk-qselect select option {
	background: #14171b;
	color: #edeef0;
}

.fk-qselect::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	transform: rotate( 45deg ) translateY( -2px );
	opacity: 0.55;
	pointer-events: none;
}

.fk-qagree {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 24px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.fk-qagree input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fk-qagree__box {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: none;
	border: 1px solid rgba(237, 238, 240, 0.3);
	border-radius: 5px;
	color: transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fk-qagree__box svg {
	width: 12px;
	height: 12px;
}

.fk-qagree input:checked + .fk-qagree__box {
	background: var( --fk-qf-accent, #f2661c );
	border-color: var( --fk-qf-accent, #f2661c );
	color: #fff;
}

.fk-qagree input:focus-visible + .fk-qagree__box {
	outline: 2px solid var( --fk-qf-accent, #f2661c );
	outline-offset: 2px;
}

.fk-qagree__text {
	font-size: 13px;
	color: #7c8188;
}

.fk-qform__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-top: 8px;
}

.fk-qform__submit {
	min-width: 240px;
	justify-content: center;
	padding: 16px 30px;
}

.fk-qform__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.fk-qform__status {
	margin: 0;
	min-height: 20px;
	font-size: 13.5px;
	flex: 1 1 200px;
}

.fk-qform__status.is-ok {
	color: #6bcb77;
}

.fk-qform__status.is-bad {
	color: #e5484d;
}

/* Narrow screens: the form grid collapses via the responsive Columns control,
   the foot stacks, full-width submit. */
@media ( max-width: 640px ) {
	.fk-qform {
		padding: 28px 20px;
	}

	.fk-qform__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.fk-qform__submit {
		min-width: 0;
		width: 100%;
	}
}

/* ==========================================================================
 * 0.13: design presets.
 *
 * One preset control per widget switches a curated version — layout, hover
 * behavior and decoration together. Colors stay overridable: presets consume
 * the same custom properties the regular controls write.
 * ========================================================================== */

/* --------------------------------------------------- Numbered Rows presets */

.fk-rows--design-card .fk-rows__row {
	border: 1px solid var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
	border-radius: 10px;
	background: #fff;
	margin-bottom: 12px;
	transition: transform 0.35s var( --ease, ease ), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.fk-rows--design-card .fk-rows__row:hover {
	transform: translateY( -3px );
	background: var( --fk-rows-hbg, #FBFAF8 );
	border-color: var( --fk-rows-fill, #F2661C );
	box-shadow: 0 14px 30px -16px rgba(16, 19, 24, 0.25);
}

.fk-rows--design-card .fk-rows__num {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding-top: 0;
	border: 1px solid var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
	border-radius: 9px;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.fk-rows--design-card .fk-rows__row:hover .fk-rows__num {
	background: var( --fk-rows-fill, #F2661C );
	border-color: var( --fk-rows-fill, #F2661C );
	color: #fff;
}

.fk-rows--design-card .fk-rows__arr {
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
	border-radius: 50%;
}

.fk-rows--design-card .fk-rows__row:hover .fk-rows__arr {
	border-color: var( --fk-rows-fill, #F2661C );
}

.fk-rows--design-timeline {
	position: relative;
}

.fk-rows--design-timeline::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 14px;
	bottom: 14px;
	width: 1px;
	background: var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
}

.fk-rows--design-timeline .fk-rows__row {
	position: relative;
	border: 0;
	padding: 24px 8px 24px 44px;
}

.fk-rows--design-timeline .fk-rows__row::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var( --fk-rows-fill, #F2661C );
	transition: transform 0.3s var( --ease, ease );
}

.fk-rows--design-timeline .fk-rows__row:hover::before {
	transform: scale( 1.35 );
}

.fk-rows--design-timeline .fk-rows__num {
	display: none;
}

.fk-rows--design-ghost .fk-rows__row {
	border: 0;
	align-items: center;
	padding: 26px 8px;
}

.fk-rows--design-ghost .fk-rows__num {
	font-size: clamp( 34px, 4vw, 54px );
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	padding-top: 0;
	min-width: clamp( 58px, 6vw, 90px );
	transition: color 0.3s ease;
}

.fk-rows--design-ghost .fk-rows__row:hover .fk-rows__num {
	color: var( --fk-rows-fill, #F2661C );
}

.fk-rows--design-ghost .fk-rows__title {
	font-size: 21px;
}

.fk-rows--design-accent .fk-rows__row {
	border: 0;
	border-radius: 10px;
	padding: 24px 22px;
	transition: background-color 0.35s var( --ease, ease );
}

.fk-rows--design-accent .fk-rows__row:hover {
	background: var( --fk-rows-fill, #F2661C );
}

.fk-rows--design-accent .fk-rows__row:hover .fk-rows__title,
.fk-rows--design-accent .fk-rows__row:hover .fk-rows__text,
.fk-rows--design-accent .fk-rows__row:hover .fk-rows__num {
	color: #fff;
}

.fk-rows--design-accent .fk-rows__row:hover .fk-rows__arr {
	opacity: 1;
	transform: none;
	color: #fff;
}

/* ------------------------------------------------------ Card Grid presets */

.fk-cgrid--glass .fk-cgrid__link {
	background: rgba( 255, 255, 255, 0.055 );
	border-color: rgba( 255, 255, 255, 0.13 );
	-webkit-backdrop-filter: blur( 14px ) saturate( 1.35 );
	backdrop-filter: blur( 14px ) saturate( 1.35 );
}

.fk-cgrid--glass .fk-cgrid__link:hover {
	background: rgba( 255, 255, 255, 0.09 );
	border-color: var( --fk-cgrid-border-h, rgba( 242, 102, 28, 0.45 ) );
}

.fk-cgrid--spotlight .fk-cgrid__link {
	overflow: hidden;
}

.fk-cgrid--spotlight .fk-cgrid__link::after {
	content: '';
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient( 240px circle at var( --fk-sx, 50% ) var( --fk-sy, 50% ), var( --fk-cgrid-spot, rgba( 242, 102, 28, 0.18 ) ), transparent 65% );
	transition: opacity 0.3s ease;
}

.fk-cgrid--spotlight .fk-cgrid__link:hover::after {
	opacity: 1;
}

.fk-cgrid--spotlight .fk-cgrid__ico,
.fk-cgrid--spotlight .fk-cgrid__name,
.fk-cgrid--spotlight .fk-cgrid__meta,
.fk-cgrid--spotlight .fk-cgrid__num,
.fk-cgrid--spotlight .fk-cgrid__arr {
	position: relative;
	z-index: 1;
}

.fk-cgrid--outline .fk-cgrid__link {
	background: transparent;
	box-shadow: none;
}

.fk-cgrid--outline .fk-cgrid__link:hover {
	background: var( --fk-cgrid-bg-h, #15181c );
}

/* ------------------------------------------------------ Logo Grid presets */

.fk-lgrid--ghost .fk-lgrid__cell {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.fk-lgrid--ghost .fk-lgrid__cell:hover {
	background: var( --fk-lgrid-bg-h, #fff );
	border-color: var( --fk-lgrid-border-h, rgba( 242, 102, 28, 0.4 ) );
}

.fk-lgrid--glass .fk-lgrid__cell {
	background: rgba( 255, 255, 255, 0.05 );
	border-color: rgba( 255, 255, 255, 0.12 );
	-webkit-backdrop-filter: blur( 12px ) saturate( 1.3 );
	backdrop-filter: blur( 12px ) saturate( 1.3 );
}

.fk-lgrid--glass .fk-lgrid__cell:hover {
	background: rgba( 255, 255, 255, 0.09 );
}

.fk-lgrid--glass .fk-lgrid__logo {
	/* multiply collapses logos into the dark tile — glass swaps to light glyphs */
	mix-blend-mode: normal;
	filter: grayscale( 1 ) brightness( 2.4 ) contrast( 1.05 );
	opacity: 0.9;
}

.fk-lgrid--glass .fk-lgrid__num {
	color: rgba( 255, 255, 255, 0.5 );
}

/* --------------------------------------------------------- Kicker presets */

.fk-kicker--design-line::before {
	content: '';
	width: 44px;
	height: 1px;
	flex: none;
	background: var( --fk-kicker-accent, currentcolor );
	opacity: 0.55;
}

.fk-kicker--design-bracket .fk-kicker__text::before {
	content: '[ ';
	opacity: 0.45;
}

.fk-kicker--design-bracket .fk-kicker__text::after {
	content: ' ]';
	opacity: 0.45;
}

.fk-kicker--design-pill {
	border: 1px solid var( --fk-kicker-accent, rgba( 242, 102, 28, 0.4 ) );
	padding: 8px 16px;
	border-radius: 999px;
}

.fk-kicker--design-tag {
	background: var( --fk-kicker-accent, #f2661c );
	padding: 8px 16px;
	border-radius: 6px;
	color: #fff !important;
}

.fk-kicker--design-tag .fk-kicker__num,
.fk-kicker--design-tag .fk-kicker__text {
	color: #fff !important;
}

.fk-kicker--design-tag .fk-kicker__dot {
	background: #fff !important;
}

.fk-kicker--design-tag .fk-kicker__ico {
	color: #fff !important;
}

/* ---------------------------------------------------------- Stats presets */

.fk-stats--design-cards .fk-stats__cell {
	background: var( --fk-stats-card, #0f1113 );
	border: 1px solid var( --fk-stats-line, rgba( 237, 238, 240, 0.09 ) );
	border-radius: 10px;
}

.fk-stats--design-bare .fk-stats__cell {
	padding-left: 0 !important;
}

.fk-stats--design-bare .fk-stats__cell + .fk-stats__cell {
	border-left: 0;
}