/*
Theme Name:   Astra Child
Theme URI:    https://wpastra.com/
Description:  Child theme for Astra.
Author:       WP Swings
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
*/

/* Add your custom styles below. */

/* ==========================================================================
   Brand tokens (taken from the live header gradient & accent elements)
   ========================================================================== */
:root {
	--webk-purple: #3f199b;        /* brand primary */
	--webk-purple-deep: #250977;   /* header gradient start */
	--webk-teal: #047e7b;          /* header gradient end (secondary) */
	--webk-mint: #3de3c2;          /* accent: links, growth badge */
	--webk-mint-light: #43eac9;
	--webk-mint-dark: #31d3b3;
	--webk-ink: #0b0c13;           /* text on mint */
	--webk-cta-gradient: linear-gradient(135deg, var(--webk-mint-light), var(--webk-mint-dark));
	--webk-cta-gradient-light: linear-gradient(135deg, var(--webk-purple), var(--webk-teal));
}

/* ==========================================================================
   CTA hover effect (uiverse.io/gharsh11032000/loud-chicken-53)
   Markup (.webk-fx-circle, .webk-fx-arr-*, .webk-fx-text) is injected by
   assets/js/cta-effect.js. `body` prefix outranks the inline <style> in the
   Elementor HTML widgets.
   ========================================================================== */
body .webk-fx {
	--fx-ring: var(--webk-mint);
	--fx-color: var(--webk-mint);
	--fx-fill: var(--webk-cta-gradient);
	--fx-hover-color: var(--webk-ink);
	--fx-ease: cubic-bezier(0.23, 1, 0.32, 1);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding-left: 40px;
	padding-right: 40px;
	border: 0;
	border-radius: 100px;
	background: transparent;
	background-image: none;
	color: var(--fx-color);
	box-shadow: 0 0 0 2px var(--fx-ring);
	font-weight: 600;
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	transform: none;
	filter: none;
	transition: all 0.6s var(--fx-ease);
}

body .webk-fx .webk-fx-arr {
	position: absolute;
	top: 50%;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	fill: currentColor;
	z-index: 2;
	transition: all 0.8s var(--fx-ease);
}

body .webk-fx .webk-fx-arr-1 {
	right: 16px;
}

body .webk-fx .webk-fx-arr-2 {
	left: -25%;
}

body .webk-fx .webk-fx-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--fx-fill);
	opacity: 0;
	z-index: 0;
	transition: all 0.8s var(--fx-ease);
}

body .webk-fx .webk-fx-text {
	position: relative;
	z-index: 1;
	transform: translateX(-12px);
	transition: all 0.8s var(--fx-ease);
}

body .webk-fx:hover,
body .webk-fx:focus-visible {
	background: transparent;
	color: var(--fx-hover-color);
	border-color: transparent;
	border-radius: 12px;
	box-shadow: 0 0 0 12px transparent;
	transform: none;
}

body .webk-fx:hover .webk-fx-arr-1,
body .webk-fx:focus-visible .webk-fx-arr-1 {
	right: -25%;
}

body .webk-fx:hover .webk-fx-arr-2,
body .webk-fx:focus-visible .webk-fx-arr-2 {
	left: 16px;
}

body .webk-fx:hover .webk-fx-text,
body .webk-fx:focus-visible .webk-fx-text {
	transform: translateX(12px);
}

body .webk-fx:hover .webk-fx-circle,
body .webk-fx:focus-visible .webk-fx-circle {
	width: 150%;
	opacity: 1;
}

body .webk-fx:active {
	scale: 0.95;
	box-shadow: 0 0 0 4px var(--fx-ring);
}

body .webk-fx:focus-visible {
	outline: 2px solid var(--fx-ring);
	outline-offset: 4px;
}

/* --- Variants ------------------------------------------------------------ */

/* Header: dark tint behind the label so mint text stays legible on the teal end of the gradient. */
body .webk-quote-btn.webk-fx {
	background-color: rgba(11, 12, 19, 0.35);
}

/* Secondary on dark: quieter ring, white label, same mint fill on hover. */
body .webk-btn-secondary.webk-fx,
body .webk-custom-pricing-btn.webk-fx {
	--fx-ring: rgba(255, 255, 255, 0.25);
	--fx-color: #fff;
}

/* Light surface (white CTA band): purple ring, brand gradient fill. */
body .webk-cta-wrapper .webk-fx {
	--fx-ring: var(--webk-purple);
	--fx-color: var(--webk-purple);
	--fx-fill: var(--webk-cta-gradient-light);
	--fx-hover-color: #fff;
}

/* Light popup (Get a Quote form). */
body .elementor-popup-modal .webk-fx {
	--fx-ring: var(--webk-purple);
	--fx-color: var(--webk-purple);
	--fx-fill: var(--webk-cta-gradient-light);
	--fx-hover-color: #fff;
}

body .webk-cta-wrapper .webk-btn-outline-purple.webk-fx {
	--fx-ring: rgba(63, 25, 155, 0.3);
}

/* Elementor form submit: beat Elementor's per-widget selector. */
body .elementor .elementor-element.elementor-widget-form .elementor-button[type="submit"].webk-fx,
body .elementor .elementor-element.elementor-widget-form .elementor-button[type="submit"].webk-fx:hover,
body .elementor .elementor-element.elementor-widget-form .elementor-button[type="submit"].webk-fx:focus {
	background: transparent;
	color: var(--fx-color);
	border: 0;
	border-radius: 100px;
	padding-left: 40px;
	padding-right: 40px;
}

body .elementor .elementor-element.elementor-widget-form .elementor-button[type="submit"].webk-fx:hover,
body .elementor .elementor-element.elementor-widget-form .elementor-button[type="submit"].webk-fx:focus-visible {
	color: var(--fx-hover-color);
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	body .webk-fx,
	body .webk-fx .webk-fx-arr,
	body .webk-fx .webk-fx-circle,
	body .webk-fx .webk-fx-text {
		transition: none;
	}
}

/* ==========================================================================
   Service card hover effect (uiverse.io/Smit-Prajapati/massive-insect-5)
   "Scale your business with professional services" cards. Glass panels
   (.webk-glass-1…4) are injected by assets/js/card-effect.js and slide in
   from the bottom-left, staggered; tinted with brand colors and kept behind
   the content so text stays readable.
   ========================================================================== */
body .webk-glass-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.6s ease-in-out, border-color 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
}

body .webk-glass-card > :not(.webk-glass):not(.webk-card-num) {
	position: relative;
	z-index: 1;
}

body .webk-glass-card .webk-glass {
	position: absolute;
	z-index: 0;
	border-top: 2px solid rgba(61, 227, 194, 0.35);
	border-right: 1px solid rgba(61, 227, 194, 0.2);
	border-radius: 10% 13% 42% 0% / 10% 12% 75% 0%;
	box-shadow: rgba(0, 0, 0, 0.35) -7px 7px 29px 0;
	transform-origin: bottom left;
	pointer-events: none;
	transition: all 1s ease-in-out;
}

body .webk-glass-card .webk-glass-1 {
	width: 70%;
	height: 70%;
	bottom: -70%;
	left: -70%;
	background: rgba(63, 25, 155, 0.18);
}

body .webk-glass-card .webk-glass-2 {
	width: 50%;
	height: 50%;
	bottom: -50%;
	left: -50%;
	background: rgba(4, 126, 123, 0.2);
	transition-delay: 0.2s;
}

body .webk-glass-card .webk-glass-3 {
	width: 30%;
	height: 30%;
	bottom: -30%;
	left: -30%;
	background: rgba(61, 227, 194, 0.14);
	transition-delay: 0.4s;
}

body .webk-glass-card .webk-glass-4 {
	width: 10%;
	height: 10%;
	bottom: -10%;
	left: -10%;
	background: var(--webk-cta-gradient);
	opacity: 0.8;
	transition-delay: 0.6s;
}

body .webk-glass-card:hover,
body .webk-glass-card:focus-within {
	transform: translateY(-6px) scale(1.03);
	border-color: rgba(61, 227, 194, 0.4);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

body .webk-glass-card:hover .webk-glass,
body .webk-glass-card:focus-within .webk-glass {
	bottom: -1px;
	left: -1px;
}

body .webk-glass-card .webk-expertise-icon {
	transition: filter 0.6s ease-in-out, transform 0.6s ease-in-out;
}

body .webk-glass-card:hover .webk-expertise-icon,
body .webk-glass-card:focus-within .webk-expertise-icon {
	filter: drop-shadow(0 0 8px rgba(61, 227, 194, 0.6));
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	body .webk-glass-card,
	body .webk-glass-card .webk-glass,
	body .webk-glass-card .webk-expertise-icon {
		transition: none;
	}
	body .webk-glass-card:hover,
	body .webk-glass-card:focus-within {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Service card rest-state styling: layered surface, gradient hairline border,
   icon tile, index number, cursor spotlight.
   -------------------------------------------------------------------------- */
body .webk-glass-card {
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(63, 25, 155, 0.22), transparent 55%),
		radial-gradient(90% 60% at 0% 100%, rgba(4, 126, 123, 0.12), transparent 60%),
		linear-gradient(160deg, #161722 0%, #0e0f15 100%);
	border-color: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Gradient hairline border (mint → purple → fade). */
body .webk-glass-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.55), rgba(63, 25, 155, 0.45) 35%, transparent 65%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 1;
	pointer-events: none;
	transition: opacity 0.6s ease-in-out;
}

/* Cursor spotlight. */
body .webk-glass-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(61, 227, 194, 0.12), transparent 60%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

body .webk-glass-card:hover::before,
body .webk-glass-card:focus-within::before {
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.9), rgba(63, 25, 155, 0.7) 45%, rgba(4, 126, 123, 0.5) 100%);
}

body .webk-glass-card:hover::after,
body .webk-glass-card:focus-within::after {
	opacity: 1;
}

/* Icon tile. */
body .webk-glass-card .webk-expertise-icon {
	box-sizing: content-box;
	padding: 12px;
	border: 1px solid rgba(61, 227, 194, 0.22);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.14), rgba(63, 25, 155, 0.22));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.3);
}

body .webk-glass-card:hover .webk-expertise-icon,
body .webk-glass-card:focus-within .webk-expertise-icon {
	transform: scale(1.08) rotate(-4deg);
	border-color: rgba(61, 227, 194, 0.5);
}

/* Index number. */
body .webk-glass-card .webk-card-num {
	position: absolute;
	top: 22px;
	right: 28px;
	z-index: 1;
	font-family: Oswald, Inter, sans-serif;
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
	pointer-events: none;
	transition: all 0.6s ease-in-out;
}

body .webk-glass-card:hover .webk-card-num,
body .webk-glass-card:focus-within .webk-card-num {
	-webkit-text-stroke-color: rgba(61, 227, 194, 0.45);
	transform: translateY(-4px);
}

/* Title & link. */
body .webk-glass-card h3 {
	transition: color 0.4s ease;
}

body .webk-glass-card:hover h3,
body .webk-glass-card:focus-within h3 {
	/* Widget CSS forces white with !important. */
	color: var(--webk-mint) !important;
}

body .webk-glass-card .webk-expertise-link i {
	transition: transform 0.3s ease;
}

body .webk-glass-card:hover .webk-expertise-link i,
body .webk-glass-card:focus-within .webk-expertise-link i {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	body .webk-glass-card::before,
	body .webk-glass-card::after,
	body .webk-glass-card .webk-card-num {
		transition: none;
	}
}

/* ==========================================================================
   Pricing card effect (uiverse.io/ElSombrero2/tricky-robin-67)
   "Choose Your Package" cards. Adapted for content-heavy cards:
   - spinning border beam → animated conic-gradient ring (no overflow clip,
     so the "Most Popular" badge stays visible);
   - floating blurred orbs → drifting radial gradients inside the card;
   - card flip → content splits into front (summary) and back (features +
     CTA) faces built by assets/js/pricing-effect.js; the frame, beam and
     orbs stay put while the content flips.
   ========================================================================== */
@property --webk-beam {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes webk-beam-spin {
	to {
		--webk-beam: 360deg;
	}
}

@keyframes webk-orbs-float {
	0%,
	100% {
		background-position: 0% 0%, 100% 100%, 80% 10%;
	}
	33% {
		background-position: 30% 20%, 70% 60%, 40% 40%;
	}
	66% {
		background-position: 10% 50%, 90% 30%, 100% 70%;
	}
}

body .webk-pricing-card {
	isolation: isolate;
	transform-style: preserve-3d;
	transition: transform 0.25s ease-out, box-shadow 0.4s ease, border-color 0.4s ease;
	will-change: transform;
}

body .webk-pricing-card > *:not(.webk-popular-badge) {
	position: relative;
	z-index: 1;
}

body .webk-pricing-card .webk-popular-badge {
	z-index: 3;
	box-shadow: 0 6px 20px rgba(61, 227, 194, 0.35);
}

/* Spinning border beam. */
body .webk-pricing-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 2;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--webk-beam),
		transparent 0deg,
		transparent 230deg,
		rgba(4, 126, 123, 0.9) 280deg,
		var(--webk-mint) 325deg,
		var(--webk-purple) 350deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	filter: drop-shadow(0 0 6px rgba(61, 227, 194, 0.6));
	opacity: 0;
	pointer-events: none;
	animation: webk-beam-spin 5s linear infinite;
	transition: opacity 0.5s ease;
}

/* Floating orbs. */
body .webk-pricing-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle, rgba(61, 227, 194, 0.16) 0%, transparent 65%),
		radial-gradient(circle, rgba(63, 25, 155, 0.35) 0%, transparent 65%),
		radial-gradient(circle, rgba(4, 126, 123, 0.22) 0%, transparent 65%);
	background-size: 70% 50%, 80% 60%, 60% 45%;
	background-repeat: no-repeat;
	opacity: 0.45;
	pointer-events: none;
	animation: webk-orbs-float 14s ease-in-out infinite;
	transition: opacity 0.5s ease;
}

body .webk-pricing-card:hover,
body .webk-pricing-card:focus-within {
	transform: translateY(-8px);
	border-color: rgba(61, 227, 194, 0.15);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(61, 227, 194, 0.08);
}

body .webk-pricing-card:hover::before,
body .webk-pricing-card:focus-within::before,
body .webk-pricing-card:hover::after,
body .webk-pricing-card:focus-within::after {
	opacity: 1;
}

/* Featured plan: beam always running, orbs fully visible. */
body .webk-pricing-card.webk-popular {
	border-color: rgba(61, 227, 194, 0.25);
	box-shadow: 0 0 50px rgba(61, 227, 194, 0.08);
}

body .webk-pricing-card.webk-popular::before,
body .webk-pricing-card.webk-popular::after {
	opacity: 1;
}

body .webk-pricing-card .webk-pricing-price {
	transition: color 0.4s ease, text-shadow 0.4s ease;
}

body .webk-pricing-card:hover .webk-pricing-price,
body .webk-pricing-card:focus-within .webk-pricing-price {
	text-shadow: 0 0 24px rgba(61, 227, 194, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	body .webk-pricing-card,
	body .webk-pricing-card::before,
	body .webk-pricing-card::after {
		animation: none;
		transition: none;
	}
	body .webk-pricing-card:hover,
	body .webk-pricing-card:focus-within {
		transform: none;
	}
}

/* --- Pricing card flip faces ------------------------------------------- */
body .webk-pricing-card.webk-flip {
	perspective: 1400px;
}

body .webk-flip .webk-flip-inner {
	display: grid;
	flex-grow: 1;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}

body .webk-flip:hover .webk-flip-inner,
body .webk-flip:focus-within .webk-flip-inner,
body .webk-flip.is-flipped .webk-flip-inner {
	transform: rotateY(180deg);
}

body .webk-flip .webk-flip-face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

body .webk-flip .webk-flip-back {
	transform: rotateY(180deg);
}

/* Front: summary on top, hint pinned to the bottom. */
body .webk-flip .webk-flip-front {
	justify-content: space-between;
}

body .webk-flip .webk-flip-summary .webk-pricing-price {
	margin-bottom: 0;
}

body .webk-flip .webk-flip-hint {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 40px 0 0;
	padding: 18px 20px;
	border: 1px solid rgba(61, 227, 194, 0.18);
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

body .webk-flip .webk-flip-hint-count {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 10px;
	background: rgba(61, 227, 194, 0.12);
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

body .webk-flip .webk-flip-hint-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #c5c6c7;
	font-size: 15px;
	font-weight: 600;
}

body .webk-flip .webk-flip-hint-cta i {
	color: var(--webk-mint);
}

/* Back: compact name, features grow, CTA at the bottom. */
body .webk-flip .webk-flip-back-name {
	margin: 0 0 24px;
	color: var(--webk-mint);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-flip .webk-flip-back .webk-pricing-features {
	flex-grow: 1;
}

@media (hover: none) {
	body .webk-flip .webk-flip-hint-cta::after {
		content: "(tap)";
		color: #8f929e;
		font-weight: 500;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-flip .webk-flip-inner {
		transition: none;
	}
}

/* --- Pricing card front: icon, power meter, feature preview ------------- */
@keyframes webk-meter-shimmer {
	from {
		background-position: -200% 0;
	}
	to {
		background-position: 200% 0;
	}
}

@keyframes webk-icon-bob {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-6px) rotate(-6deg);
	}
}

body .webk-flip .webk-flip-summary {
	position: relative;
}

body .webk-flip .webk-flip-summary .webk-pricing-name,
body .webk-flip .webk-flip-summary .webk-pricing-desc {
	padding-right: 72px;
}

/* Plan icon tile (top-right). */
body .webk-flip .webk-flip-icon {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(61, 227, 194, 0.3);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.18), rgba(63, 25, 155, 0.35));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 24px rgba(61, 227, 194, 0.15);
	color: var(--webk-mint);
	font-size: 22px;
	animation: webk-icon-bob 4s ease-in-out infinite;
}

body .webk-flip.webk-popular .webk-flip-icon {
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
	box-shadow: 0 10px 30px rgba(61, 227, 194, 0.35);
}

/* Power meter. */
body .webk-flip .webk-flip-meter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.025);
}

body .webk-flip .webk-flip-meter-label {
	color: #8f929e;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

body .webk-flip .webk-flip-bars {
	display: flex;
	gap: 6px;
	flex: 1;
	max-width: 160px;
}

body .webk-flip .webk-flip-bar {
	flex: 1;
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
}

body .webk-flip .webk-flip-bar.is-on {
	background: linear-gradient(90deg, var(--webk-teal), var(--webk-mint), #b9fff0, var(--webk-mint), var(--webk-teal));
	background-size: 200% 100%;
	box-shadow: 0 0 10px rgba(61, 227, 194, 0.45);
	animation: webk-meter-shimmer 3s linear infinite;
}

/* Feature preview. */
body .webk-flip .webk-flip-preview {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

body .webk-flip .webk-flip-preview li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	color: #c5c6c7;
	font-size: 14px;
	line-height: 1.4;
}

body .webk-flip .webk-flip-preview li:last-child {
	margin-bottom: 0;
}

body .webk-flip .webk-flip-preview li i {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(61, 227, 194, 0.15);
	color: var(--webk-mint);
	font-size: 9px;
}

body .webk-flip .webk-flip-hint {
	margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
	body .webk-flip .webk-flip-icon,
	body .webk-flip .webk-flip-bar.is-on {
		animation: none;
	}
}

/* ==========================================================================
   Footer redesign
   Extra markup (.webk-prefooter, .webk-footer-aurora, .webk-footer-wordmark,
   .webk-footer-mail) is injected by assets/js/footer-effect.js.
   ========================================================================== */
@keyframes webk-aurora-drift {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(40px, -30px) scale(1.15);
	}
}

body .webk-main-footer {
	position: relative;
	isolation: isolate;
	border-top: 0;
}

/* Aurora glows. */
/* Spans the full viewport width so the glow isn't clipped to the content box. */
body .webk-footer-aurora {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

body .webk-footer-aurora span {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
	animation: webk-aurora-drift 16s ease-in-out infinite;
}

body .webk-footer-aurora span:nth-child(1) {
	top: 30%;
	left: -10%;
	width: 420px;
	height: 420px;
	background: rgba(63, 25, 155, 0.55);
}

body .webk-footer-aurora span:nth-child(2) {
	top: 45%;
	right: -8%;
	width: 380px;
	height: 380px;
	background: rgba(4, 126, 123, 0.45);
	animation-delay: -5s;
}

body .webk-footer-aurora span:nth-child(3) {
	bottom: -10%;
	left: 40%;
	width: 300px;
	height: 300px;
	background: rgba(61, 227, 194, 0.18);
	animation-delay: -10s;
}

/* --- Pre-footer CTA band -------------------------------------------------- */
body .webk-prefooter {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin: 0 0 80px;
	padding: 56px 60px;
	overflow: hidden;
	border: 1px solid rgba(61, 227, 194, 0.25);
	border-radius: 28px;
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(61, 227, 194, 0.28), transparent 60%),
		linear-gradient(135deg, var(--webk-purple-deep) 0%, var(--webk-purple) 45%, var(--webk-teal) 100%);
	box-shadow: 0 30px 80px rgba(37, 9, 119, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Fine grid texture, faded toward the left. */
body .webk-prefooter::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 90%);
	mask-image: linear-gradient(90deg, transparent 10%, #000 90%);
	pointer-events: none;
}

body .webk-prefooter > * {
	position: relative;
	z-index: 1;
}

body .webk-prefooter-copy {
	max-width: 600px;
}

body .webk-prefooter-eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-footer-wrapper .webk-prefooter-title {
	margin: 0 0 16px;
	color: #fff;
	font-family: Oswald, Inter, sans-serif;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

body .webk-prefooter-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 16px;
	line-height: 1.6;
}

body .webk-prefooter-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

/* Dark tint behind the mint button label for contrast on the gradient. */
body .webk-prefooter .webk-prefooter-btn.webk-fx {
	padding-top: 18px;
	padding-bottom: 18px;
	background-color: rgba(11, 12, 19, 0.45);
	font-size: 16px;
}

body .webk-prefooter-mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	text-decoration: none;
	transition: color 0.3s ease;
}

body .webk-prefooter-mail:hover {
	color: var(--webk-mint);
}

/* --- Brand column ------------------------------------------------------- */
body .webk-footer-mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: -10px 0 26px;
	padding: 10px 16px;
	border: 1px solid rgba(61, 227, 194, 0.2);
	border-radius: 12px;
	background: rgba(61, 227, 194, 0.06);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
}

body .webk-footer-mail i {
	color: var(--webk-mint);
}

body .webk-footer-mail:hover {
	border-color: var(--webk-mint);
	background: rgba(61, 227, 194, 0.12);
	color: var(--webk-mint);
}

body .webk-footer-social .webk-social-link {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	color: #c5c6c7;
	transition: all 0.3s ease;
}

body .webk-footer-social .webk-social-link:hover,
body .webk-footer-social .webk-social-link:focus-visible {
	border-color: transparent;
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(61, 227, 194, 0.35);
}

/* --- Link columns ------------------------------------------------------- */
body .webk-footer-col h4 {
	position: relative;
	padding-bottom: 14px;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-footer-col h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--webk-mint), var(--webk-purple));
}

body .webk-footer-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0;
	transition: color 0.3s ease, gap 0.3s ease;
}

body .webk-footer-nav a::before {
	content: "";
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--webk-mint);
	transition: width 0.3s ease;
}

body .webk-footer-nav a:hover,
body .webk-footer-nav a:focus-visible {
	gap: 8px;
	color: var(--webk-mint);
}

body .webk-footer-nav a:hover::before,
body .webk-footer-nav a:focus-visible::before {
	width: 12px;
}

/* --- Wordmark ----------------------------------------------------------- */
body .webk-footer-wordmark {
	margin: 10px 0 -10px;
	background: linear-gradient(180deg, rgba(61, 227, 194, 0.55), rgba(63, 25, 155, 0.15) 70%, transparent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1px rgba(61, 227, 194, 0.18);
	font-family: Oswald, Inter, sans-serif;
	font-size: clamp(40px, 14vw, 190px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 0.9;
	text-align: center;
	white-space: nowrap;
	opacity: 0.35;
	user-select: none;
	pointer-events: none;
}

/* --- Bottom bar --------------------------------------------------------- */
body .webk-footer-bottom {
	flex-direction: row;
	justify-content: space-between;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body .webk-footer-bottom .webk-location {
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.03);
}

body .webk-footer-bottom .webk-location i {
	color: var(--webk-mint);
}

/* --- Scroll-to-top (Astra) in brand colors ------------------------------ */
body #ast-scroll-top {
	border-radius: 14px;
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
	box-shadow: 0 10px 24px rgba(61, 227, 194, 0.35);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body #ast-scroll-top:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(61, 227, 194, 0.5);
}

body #ast-scroll-top .ast-arrow-svg {
	fill: var(--webk-ink);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 992px) {
	body .webk-prefooter {
		flex-direction: column;
		align-items: flex-start;
		padding: 44px 36px;
	}
	body .webk-prefooter-actions {
		align-items: flex-start;
	}
}

@media (max-width: 576px) {
	body .webk-prefooter {
		padding: 36px 24px;
		border-radius: 20px;
	}
	body .webk-footer-bottom {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-footer-aurora span {
		animation: none;
	}
}

/* --- Footer separator: full-width glowing line + center gem ------------- */
@keyframes webk-gem-pulse {
	0%,
	100% {
		box-shadow: 0 0 10px rgba(61, 227, 194, 0.6), 0 0 0 0 rgba(61, 227, 194, 0.4);
	}
	50% {
		box-shadow: 0 0 18px rgba(61, 227, 194, 0.9), 0 0 0 8px rgba(61, 227, 194, 0);
	}
}

body .webk-main-footer {
	padding-top: 90px;
}

body .webk-main-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 2px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent 0%, rgba(63, 25, 155, 0.9) 22%, var(--webk-mint) 50%, rgba(4, 126, 123, 0.9) 78%, transparent 100%);
	box-shadow: 0 0 16px rgba(61, 227, 194, 0.45), 0 0 40px rgba(63, 25, 155, 0.45);
	pointer-events: none;
}

body .webk-main-footer::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	transform: rotate(45deg);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 3px;
	background: var(--webk-cta-gradient);
	animation: webk-gem-pulse 3s ease-in-out infinite;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	body .webk-main-footer::after {
		animation: none;
	}
}

/* Soft glow spilling down from the separator. */
body .webk-footer-aurora::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 220px;
	background: radial-gradient(50% 100% at 50% 0%, rgba(61, 227, 194, 0.1), rgba(63, 25, 155, 0.08) 45%, transparent 75%);
}

/* ==========================================================================
   "Get In Touch" section redesign
   Extra markup (.webk-contact-eyebrow, .webk-contact-grad, .webk-form-intro,
   .webk-info-link, .webk-hours-status) is injected by
   assets/js/contact-effect.js. The widget CSS uses !important on the form
   fields, so those overrides need it too.
   ========================================================================== */
@keyframes webk-dot-ping {
	0% {
		box-shadow: 0 0 0 0 rgba(61, 227, 194, 0.6);
	}
	100% {
		box-shadow: 0 0 0 10px rgba(61, 227, 194, 0);
	}
}

body .webk-contact-section {
	position: relative;
	isolation: isolate;
}

/* Glow + dotted texture behind the section. */
body .webk-contact-section::before {
	content: "";
	position: absolute;
	inset: -60px 0 auto;
	height: 520px;
	z-index: -1;
	background:
		radial-gradient(40% 60% at 50% 0%, rgba(63, 25, 155, 0.35), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 100% 100%, 22px 22px;
	-webkit-mask-image: radial-gradient(60% 70% at 50% 20%, #000, transparent 75%);
	mask-image: radial-gradient(60% 70% at 50% 20%, #000, transparent 75%);
	pointer-events: none;
}

/* --- Header ------------------------------------------------------------- */
body .webk-contact-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60px;
}

body .webk-contact-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 7px 16px;
	border: 1px solid rgba(61, 227, 194, 0.3);
	border-radius: 30px;
	background: rgba(61, 227, 194, 0.08);
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-contact-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--webk-mint);
	animation: webk-dot-ping 1.8s ease-out infinite;
}

body .webk-footer-wrapper .webk-contact-title {
	font-family: Oswald, Inter, sans-serif;
	font-size: clamp(40px, 5vw, 64px);
	letter-spacing: 0.5px;
	line-height: 1.05;
	text-transform: uppercase;
}

body .webk-contact-grad {
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body .webk-contact-subtitle {
	max-width: 520px;
	font-size: 17px;
	line-height: 1.6;
}

/* --- Shared card surface ------------------------------------------------ */
body .webk-contact-form-container,
body .webk-contact-card {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 24px;
	background:
		radial-gradient(80% 50% at 0% 0%, rgba(63, 25, 155, 0.2), transparent 60%),
		linear-gradient(160deg, #13141d 0%, #0b0c12 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.35);
	transition: border-color 0.4s ease, transform 0.4s ease;
}

body .webk-contact-form-container::before,
body .webk-contact-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.5), rgba(63, 25, 155, 0.35) 35%, transparent 65%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

body .webk-contact-card:hover {
	transform: translateY(-4px);
}

/* --- Form --------------------------------------------------------------- */
body .webk-contact-form-container {
	padding: 44px;
}

body .webk-form-intro {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body .webk-form-intro-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--webk-cta-gradient);
	box-shadow: 0 10px 24px rgba(61, 227, 194, 0.3);
	color: var(--webk-ink);
	font-size: 20px;
}

body .webk-footer-wrapper .webk-form-intro-title {
	margin: 0 0 4px;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
}

body .webk-form-intro-text {
	margin: 0;
	color: #8f929e;
	font-size: 14px;
}

body .webk-contact-form-container .elementor-field-label {
	color: #c5c6c7;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

body .webk-contact-form-container .elementor-field-textual {
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	background-color: rgba(255, 255, 255, 0.03) !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}

body .webk-contact-form-container .elementor-field-textual:hover {
	border-color: rgba(255, 255, 255, 0.16) !important;
}

body .webk-contact-form-container .elementor-field-textual:focus {
	border-color: var(--webk-mint) !important;
	background-color: rgba(61, 227, 194, 0.04) !important;
	box-shadow: 0 0 0 4px rgba(61, 227, 194, 0.12) !important;
}

/* Name + Phone side by side on wider screens. */
@media (min-width: 768px) {
	body .webk-contact-form-container .elementor-field-group-name,
	body .webk-contact-form-container .elementor-field-group-field_c1c6ea5 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* --- Contact info card -------------------------------------------------- */
body .webk-contact-info-col {
	gap: 24px;
}

body .webk-contact-card {
	padding: 36px;
}

body .webk-footer-wrapper .webk-contact-card-title {
	margin-bottom: 24px;
	font-size: 18px;
}

body .webk-contact-card .webk-info-item {
	position: relative;
	align-items: center;
	margin-bottom: 12px;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: 16px;
	transition: all 0.3s ease;
}

body .webk-contact-card .webk-info-item:last-child {
	margin-bottom: 0;
}

body .webk-contact-card .webk-info-icon {
	width: 46px;
	height: 46px;
	border: 1px solid rgba(61, 227, 194, 0.22);
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.14), rgba(63, 25, 155, 0.25));
	font-size: 17px;
	transition: all 0.3s ease;
}

body .webk-info-link {
	color: inherit;
	text-decoration: none;
}

body .webk-info-link .webk-info-arrow {
	margin-left: auto;
	color: var(--webk-mint);
	opacity: 0;
	transform: translateX(-8px);
	transition: all 0.3s ease;
}

body .webk-info-link:hover,
body .webk-info-link:focus-visible {
	border-color: rgba(61, 227, 194, 0.2);
	background: rgba(61, 227, 194, 0.05);
}

body .webk-info-link:hover .webk-info-icon,
body .webk-info-link:focus-visible .webk-info-icon {
	border-color: transparent;
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
}

body .webk-info-link:hover .webk-info-arrow,
body .webk-info-link:focus-visible .webk-info-arrow {
	opacity: 1;
	transform: translateX(0);
}

body .webk-info-link:hover .webk-info-text p {
	color: var(--webk-mint);
}

/* --- Business hours ----------------------------------------------------- */
body .webk-hours-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

body .webk-hours-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 107, 107, 0.3);
	border-radius: 30px;
	background: rgba(255, 107, 107, 0.08);
	color: #ff8a8a;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

body .webk-hours-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

body .webk-hours-status.is-open {
	border-color: rgba(61, 227, 194, 0.35);
	background: rgba(61, 227, 194, 0.1);
	color: var(--webk-mint);
}

body .webk-hours-status.is-open .webk-hours-status-dot {
	animation: webk-dot-ping 1.8s ease-out infinite;
}

body .webk-hours-item {
	margin-bottom: 8px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.02);
}

body .webk-hours-item.is-today {
	border-color: rgba(61, 227, 194, 0.3);
	background: linear-gradient(90deg, rgba(61, 227, 194, 0.1), rgba(63, 25, 155, 0.08));
}

body .webk-hours-item.is-today .webk-hours-day {
	color: #fff;
	font-weight: 600;
}

body .webk-hours-item.is-today .webk-hours-day::after {
	content: "Today";
	margin-left: 10px;
	padding: 2px 8px;
	border-radius: 8px;
	background: rgba(61, 227, 194, 0.15);
	color: var(--webk-mint);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	vertical-align: 1px;
}

@media (max-width: 576px) {
	body .webk-contact-form-container,
	body .webk-contact-card {
		padding: 28px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-contact-dot,
	body .webk-hours-status.is-open .webk-hours-status-dot {
		animation: none;
	}
	body .webk-contact-card:hover {
		transform: none;
	}
}

/* Align the Elementor form with the card's intro (drop container padding). */
body .webk-contact-form-container .e-con {
	--padding-left: 0px;
	--padding-right: 0px;
	--padding-top: 0px;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

body .webk-contact-form-container .elementor-element.elementor-widget-form {
	padding: 0;
}

/* reCAPTCHA wrapper shouldn't look like an input. */
body .webk-contact-form-container .elementor-field-type-recaptcha .elementor-field {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Full-width submit. */
body .webk-contact-form-container .e-form__buttons .elementor-button.webk-fx {
	width: 100%;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 16px;
}

/* ==========================================================================
   "Ready to scale your business?" band redesign
   The white band becomes a floating light panel on the dark page background.
   Extra markup (.webk-cta-mesh, .webk-cta-chip-*, .webk-cta-eyebrow,
   .webk-cta-grad, .webk-cta-trust) is injected by assets/js/cta-band-effect.js.
   ========================================================================== */
@keyframes webk-mesh-drift {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(30px, 20px) scale(1.12);
	}
}

@keyframes webk-chip-float {
	0%,
	100% {
		transform: translateY(0) rotate(var(--chip-rot, 0deg));
	}
	50% {
		transform: translateY(-12px) rotate(var(--chip-rot, 0deg));
	}
}

body .webk-cta-wrapper {
	padding: 40px 5% 100px;
	background: linear-gradient(to right, #000000, #0c042d);
}

body .webk-cta-wrapper .webk-cta-inner {
	position: relative;
	max-width: 1200px;
	padding: 90px 60px 80px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 32px;
	background: linear-gradient(180deg, #fbfaff 0%, #f1efff 100%);
	box-shadow: 0 40px 100px rgba(63, 25, 155, 0.35), 0 0 0 1px rgba(63, 25, 155, 0.08), inset 0 1px 0 #fff;
}

/* Fine grid, fading out toward the edges. */
body .webk-cta-wrapper .webk-cta-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(63, 25, 155, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(63, 25, 155, 0.07) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%);
	mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%);
	pointer-events: none;
}

/* Mesh blobs. */
body .webk-cta-mesh {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}

body .webk-cta-mesh span {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	animation: webk-mesh-drift 14s ease-in-out infinite;
}

body .webk-cta-mesh span:nth-child(1) {
	top: -120px;
	left: -80px;
	width: 380px;
	height: 380px;
	background: rgba(139, 108, 255, 0.45);
}

body .webk-cta-mesh span:nth-child(2) {
	right: -100px;
	bottom: -140px;
	width: 420px;
	height: 420px;
	background: rgba(61, 227, 194, 0.45);
	animation-delay: -5s;
}

body .webk-cta-mesh span:nth-child(3) {
	top: 30%;
	left: 55%;
	width: 260px;
	height: 260px;
	background: rgba(4, 126, 123, 0.18);
	animation-delay: -9s;
}

/* Text column. */
body .webk-cta-wrapper .webk-cta-eyebrow,
body .webk-cta-wrapper .webk-cta-title,
body .webk-cta-wrapper .webk-cta-desc {
	position: relative;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

body .webk-cta-wrapper .webk-cta-eyebrow {
	display: table;
	margin-bottom: 24px;
	padding: 8px 18px;
	border: 1px solid rgba(63, 25, 155, 0.18);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 6px 20px rgba(63, 25, 155, 0.1);
	color: var(--webk-purple);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body .webk-cta-wrapper .webk-cta-eyebrow i {
	margin-right: 8px;
	color: var(--webk-teal);
}

body .webk-cta-wrapper .webk-cta-title {
	color: #0b0c13;
	font-size: clamp(38px, 5.4vw, 64px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1.05;
}

body .webk-cta-grad {
	background: linear-gradient(90deg, var(--webk-purple), var(--webk-teal));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body .webk-cta-wrapper .webk-cta-desc {
	max-width: 600px;
	color: #4a4d5c;
	font-size: 18px;
}

body .webk-cta-wrapper .webk-cta-actions {
	position: relative;
}

/* Solid background behind the outline button so the grid/mesh don't show through. */
body .webk-cta-wrapper .webk-fx {
	background-color: #fff;
}

/* Trust row. */
body .webk-cta-trust {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

body .webk-cta-trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #4a4d5c;
	font-size: 14px;
	font-weight: 600;
}

body .webk-cta-trust i {
	color: var(--webk-teal);
}

/* Floating chips. */
body .webk-cta-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 18px 40px rgba(63, 25, 155, 0.18);
	text-align: left;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	animation: webk-chip-float 6s ease-in-out infinite;
	pointer-events: none;
}

body .webk-cta-chip strong {
	display: block;
	color: #0b0c13;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.1;
}

body .webk-cta-chip small {
	display: block;
	color: #6a6d7a;
	font-size: 12px;
	font-weight: 600;
}

body .webk-cta-chip-left {
	--chip-rot: -6deg;
	top: 70px;
	left: 48px;
}

body .webk-cta-chip-right {
	--chip-rot: 5deg;
	right: 48px;
	bottom: 70px;
	animation-delay: -3s;
}

body .webk-cta-chip-right strong {
	font-size: 14px;
}

body .webk-cta-chip-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
	font-size: 18px;
}

body .webk-cta-chip-stack {
	display: flex;
}

body .webk-cta-chip-stack i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-left: -10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--webk-purple), var(--webk-teal));
	color: #fff;
	font-size: 13px;
}

body .webk-cta-chip-stack i:first-child {
	margin-left: 0;
}

@media (max-width: 1100px) {
	body .webk-cta-chip {
		display: none;
	}
}

@media (max-width: 768px) {
	body .webk-cta-wrapper {
		padding: 20px 4% 60px;
	}
	body .webk-cta-wrapper .webk-cta-inner {
		padding: 60px 24px 50px;
		border-radius: 24px;
	}
	body .webk-cta-wrapper .webk-cta-title {
		letter-spacing: -1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-cta-mesh span,
	body .webk-cta-chip {
		animation: none;
	}
}

/* Skip transitions on the frame the button effect is first applied. */
body .webk-fx.webk-fx-init,
body .webk-fx.webk-fx-init * {
	transition: none !important;
}

/* ==========================================================================
   "Why Choose WebKookie?" section redesign
   Extra markup (.webk-why-eyebrow, .webk-why-grad, .webk-why-step,
   .webk-testi-mark, .webk-testi-rating, .webk-testi-stats) is injected by
   assets/js/why-effect.js.
   ========================================================================== */
@keyframes webk-line-pulse {
	0% {
		top: 0;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}

body .webk-why {
	position: relative;
	isolation: isolate;
}

body .webk-why::before {
	content: "";
	position: absolute;
	top: 10%;
	right: 5%;
	z-index: -1;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(63, 25, 155, 0.35), transparent 65%);
	filter: blur(20px);
	pointer-events: none;
}

body .webk-why-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Title -------------------------------------------------------------- */
body .webk-why-eyebrow {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 7px 16px;
	border: 1px solid rgba(61, 227, 194, 0.3);
	border-radius: 30px;
	background: rgba(61, 227, 194, 0.08);
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-why .webk-why-title {
	font-size: clamp(36px, 4.4vw, 56px);
	line-height: 1.05;
}

body .webk-why-grad {
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Timeline ----------------------------------------------------------- */
body .webk-why .webk-why-list {
	position: relative;
	gap: 16px;
}

/* Connector line through the icon column, with a travelling pulse. */
body .webk-why .webk-why-list::before,
body .webk-why .webk-why-list::after {
	content: "";
	position: absolute;
	left: 50px;
	pointer-events: none;
}

body .webk-why .webk-why-list::before {
	top: 50px;
	bottom: 50px;
	width: 2px;
	margin-left: -1px;
	background: linear-gradient(180deg, var(--webk-mint), var(--webk-purple) 50%, var(--webk-teal));
	opacity: 0.45;
}

body .webk-why .webk-why-list::after {
	top: 50px;
	width: 8px;
	height: 40px;
	margin-left: -4px;
	border-radius: 8px;
	background: linear-gradient(180deg, transparent, var(--webk-mint), transparent);
	filter: drop-shadow(0 0 6px var(--webk-mint));
	animation: webk-line-pulse 4s ease-in-out infinite;
}

body .webk-why .webk-why-item {
	position: relative;
	align-items: center;
	padding: 22px 70px 22px 22px;
	border: 1px solid transparent;
	border-radius: 20px;
	transition: all 0.4s ease;
}

body .webk-why .webk-why-item:hover {
	border-color: rgba(61, 227, 194, 0.18);
	background: linear-gradient(90deg, rgba(61, 227, 194, 0.06), rgba(63, 25, 155, 0.06));
	transform: translateX(6px);
}

body .webk-why .webk-why-icon-wrap {
	position: relative;
	z-index: 1;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(61, 227, 194, 0.3);
	border-radius: 18px;
	background: linear-gradient(135deg, #1b1442, #0e2b30);
	box-shadow: 0 0 0 6px #08070f, 0 10px 24px rgba(0, 0, 0, 0.4);
	transition: all 0.4s ease;
}

body .webk-why .webk-why-item:hover .webk-why-icon-wrap {
	border-color: var(--webk-mint);
	box-shadow: 0 0 0 6px #08070f, 0 0 24px rgba(61, 227, 194, 0.45);
	transform: rotate(-6deg) scale(1.06);
}

body .webk-why .webk-why-item-content h4 {
	transition: color 0.3s ease;
}

body .webk-why .webk-why-item:hover .webk-why-item-content h4 {
	color: var(--webk-mint) !important;
}

body .webk-why-step {
	position: absolute;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	color: transparent;
	font-family: Oswald, Inter, sans-serif;
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
	transition: all 0.4s ease;
}

body .webk-why .webk-why-item:hover .webk-why-step {
	-webkit-text-stroke-color: rgba(61, 227, 194, 0.5);
}

/* --- Testimonial card --------------------------------------------------- */
body .webk-why .webk-why-testimonial {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px 50px 44px;
	border-color: rgba(255, 255, 255, 0.06);
	border-radius: 28px;
	background:
		radial-gradient(80% 60% at 100% 0%, rgba(61, 227, 194, 0.12), transparent 60%),
		radial-gradient(70% 60% at 0% 100%, rgba(63, 25, 155, 0.3), transparent 60%),
		linear-gradient(160deg, #15161f 0%, #0c0d13 100%);
}

/* Gradient hairline border. */
body .webk-why .webk-why-testimonial::before {
	content: "";
	position: absolute;
	inset: -1px;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.6), rgba(63, 25, 155, 0.5) 40%, transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Tilted ghost card behind for depth. */
body .webk-why .webk-why-testimonial::after {
	content: "";
	position: absolute;
	inset: 18px -14px -14px 18px;
	z-index: -1;
	border: 1px solid rgba(61, 227, 194, 0.12);
	border-radius: inherit;
	background: linear-gradient(160deg, rgba(63, 25, 155, 0.25), rgba(4, 126, 123, 0.15));
	transform: rotate(2.5deg);
}

body .webk-testi-mark {
	position: absolute;
	top: 28px;
	right: 36px;
	background: linear-gradient(135deg, var(--webk-mint), var(--webk-purple));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 84px;
	line-height: 1;
	opacity: 0.35;
	pointer-events: none;
}

body .webk-why .webk-testi-avatar {
	border-radius: 50%;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	object-fit: cover;
	box-sizing: content-box;
	padding: 3px;
	background: linear-gradient(135deg, var(--webk-mint), var(--webk-purple));
	box-shadow: 0 0 24px rgba(61, 227, 194, 0.3);
}

body .webk-why .webk-testi-quote {
	position: relative;
	font-size: 21px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.65;
}

body .webk-testi-rating {
	display: flex;
	align-items: center;
	gap: 14px;
}

body .webk-testi-rating .webk-testi-stars {
	font-size: 18px;
	letter-spacing: 3px;
	filter: drop-shadow(0 0 8px rgba(61, 227, 194, 0.45));
}

body .webk-testi-score {
	color: #fff;
	font-size: 20px;
	font-weight: 800;
}

body .webk-testi-score small {
	margin-left: 6px;
	color: #8f929e;
	font-size: 13px;
	font-weight: 600;
}

body .webk-testi-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 32px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.25);
}

body .webk-testi-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 16px;
	text-align: center;
}

body .webk-testi-stat + .webk-testi-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.06);
}

body .webk-testi-stat strong {
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: Oswald, Inter, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}

body .webk-testi-stat span {
	color: #8f929e;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	body .webk-why .webk-why-list::before,
	body .webk-why .webk-why-list::after,
	body .webk-why-step {
		display: none;
	}
	body .webk-why .webk-why-item {
		padding: 20px;
	}
	body .webk-why .webk-why-testimonial {
		padding: 44px 24px 32px;
	}
	body .webk-why .webk-why-testimonial::after {
		inset: 12px -8px -8px 12px;
	}
	body .webk-testi-stat strong {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-why .webk-why-list::after {
		animation: none;
		display: none;
	}
	body .webk-why .webk-why-item:hover,
	body .webk-why .webk-why-item:hover .webk-why-icon-wrap {
		transform: none;
	}
}

/* ==========================================================================
   Hero section redesign
   Extra markup (.webk-hero-bg, .webk-hero-badge, .webk-hero-hl,
   .webk-hero-proof, .webk-hero-visual-wrap, .webk-hero-orbits,
   .webk-hero-chip-*) is injected by assets/js/hero-effect.js.
   ========================================================================== */
@keyframes webk-draw {
	from {
		stroke-dashoffset: 320;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes webk-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes webk-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes webk-bar {
	0%,
	100% {
		transform: scaleY(0.45);
	}
	50% {
		transform: scaleY(1);
	}
}

body .webk-hero {
	position: relative;
	isolation: isolate;
	padding-top: 100px;
	padding-bottom: 110px;
}

body .webk-hero-bg {
	position: absolute;
	inset: 0 -5%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(40% 55% at 15% 30%, rgba(63, 25, 155, 0.35), transparent 70%),
		radial-gradient(35% 50% at 85% 55%, rgba(61, 227, 194, 0.14), transparent 70%);
}

body .webk-hero-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%);
	mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%);
}

/* --- Text column -------------------------------------------------------- */
body .webk-hero .webk-hero-badge {
	gap: 10px;
	margin-bottom: 28px;
	padding: 8px 18px;
	border-color: rgba(61, 227, 194, 0.3);
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

body .webk-hero .webk-hero-title {
	font-size: clamp(40px, 4.6vw, 64px);
	line-height: 1.02;
}

body .webk-hero-hl {
	position: relative;
	display: inline-block;
}

body .webk-hero-grad {
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff 70%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body .webk-hero-underline {
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 18px;
	overflow: visible;
}

body .webk-hero-underline path {
	fill: none;
	stroke: var(--webk-mint);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	filter: drop-shadow(0 0 6px rgba(61, 227, 194, 0.6));
	animation: webk-draw 1.4s 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

body .webk-hero .webk-hero-desc {
	color: #b4b8c6;
	font-size: 19px;
}

body .webk-hero-proof {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 36px;
	color: #8f929e;
	font-size: 14px;
}

body .webk-hero-proof strong {
	color: #fff;
}

body .webk-hero-proof-icons {
	display: flex;
}

body .webk-hero-proof-icons i {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-left: -10px;
	border: 2px solid #07060d;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--webk-purple), var(--webk-teal));
	color: #fff;
	font-size: 13px;
}

body .webk-hero-proof-icons i:first-child {
	margin-left: 0;
}

body .webk-hero-proof-icons i:last-child {
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
}

/* --- Visual ------------------------------------------------------------- */
body .webk-hero-visual-wrap {
	position: relative;
	flex: 0.9;
	min-width: 0;
	perspective: 1400px;
}

body .webk-hero .webk-hero-visual {
	position: relative;
	z-index: 1;
	overflow: visible;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.35), rgba(63, 25, 155, 0.45) 50%, rgba(4, 126, 123, 0.35));
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(63, 25, 155, 0.35);
	transform: rotateY(-8deg) rotateX(4deg);
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .webk-hero-visual-wrap:hover .webk-hero-visual {
	transform: rotateY(0deg) rotateX(0deg);
}

body .webk-hero .webk-hero-mockup {
	border-radius: 22px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Orbit rings. */
body .webk-hero-orbits span {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px dashed rgba(61, 227, 194, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: webk-spin 60s linear infinite;
	pointer-events: none;
}

body .webk-hero-orbits span:nth-child(1) {
	width: 125%;
	aspect-ratio: 1;
}

body .webk-hero-orbits span:nth-child(2) {
	width: 150%;
	aspect-ratio: 1;
	border-color: rgba(139, 108, 255, 0.15);
	animation-direction: reverse;
	animation-duration: 90s;
}

/* Existing +142% card: readable dark text, floating, not clipped. */
body .webk-hero .webk-hero-stat-card {
	bottom: -28px;
	left: -32px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 24px 50px rgba(61, 227, 194, 0.3);
	animation: webk-float 5s ease-in-out infinite;
}

body .webk-hero .webk-hero-stat-icon,
body .webk-hero .webk-hero-stat-text p {
	color: var(--webk-ink) !important;
}

body .webk-hero .webk-hero-stat-text h4 {
	color: rgba(11, 12, 19, 0.7) !important;
}

/* Floating UI chips. */
body .webk-hero-chip {
	position: absolute;
	z-index: 2;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background: rgba(17, 18, 28, 0.75);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
	color: #fff;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	animation: webk-float 6s ease-in-out infinite;
	pointer-events: none;
}

body .webk-hero-chip-live {
	top: -26px;
	right: -24px;
	width: 170px;
	animation-delay: -2s;
}

body .webk-hero-chip-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

body .webk-hero-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff5d73;
	animation: webk-dot-ping 1.6s ease-out infinite;
}

body .webk-hero-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 44px;
}

body .webk-hero-bars span {
	flex: 1;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--webk-mint), var(--webk-purple));
	transform-origin: bottom;
	animation: webk-bar 2.4s ease-in-out infinite;
}

body .webk-hero-bars span:nth-child(2) { animation-delay: -0.4s; }
body .webk-hero-bars span:nth-child(3) { animation-delay: -0.8s; }
body .webk-hero-bars span:nth-child(4) { animation-delay: -1.2s; }
body .webk-hero-bars span:nth-child(5) { animation-delay: -1.6s; }
body .webk-hero-bars span:nth-child(6) { animation-delay: -2s; }

body .webk-hero-chip-lead {
	display: flex;
	align-items: center;
	gap: 12px;
	right: -30px;
	bottom: 70px;
	animation-delay: -4s;
}

body .webk-hero-chip-lead strong {
	display: block;
	font-size: 14px;
}

body .webk-hero-chip-lead small {
	display: block;
	color: #8f929e;
	font-size: 12px;
}

body .webk-hero-chip-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	body .webk-hero-visual-wrap {
		width: 100%;
		max-width: 600px;
		margin-top: 30px;
	}
	body .webk-hero .webk-hero-visual {
		max-width: none;
		transform: none;
	}
	body .webk-hero-proof {
		justify-content: center;
	}
	body .webk-hero-orbits {
		display: none;
	}
}

@media (max-width: 768px) {
	body .webk-hero-chip {
		display: none;
	}
	body .webk-hero .webk-hero-stat-card {
		left: 12px;
		bottom: -20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-hero-underline path {
		animation: none;
		stroke-dashoffset: 0;
	}
	body .webk-hero-orbits span,
	body .webk-hero .webk-hero-stat-card,
	body .webk-hero-chip,
	body .webk-hero-bars span {
		animation: none;
	}
	body .webk-hero .webk-hero-visual {
		transform: none;
	}
}

/* ==========================================================================
   Header redesign
   Behaviour (floating state, progress line, nav indicator, mega menu markup)
   comes from assets/js/header-effect.js.
   ========================================================================== */
@keyframes webk-header-drop {
	from {
		opacity: 0;
		transform: translate(-50%, -24px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

body .webk-header-wrap {
	position: relative;
	z-index: 9990;
	border-bottom: 0;
	background:
		radial-gradient(60% 140% at 85% 0%, rgba(61, 227, 194, 0.25), transparent 60%),
		linear-gradient(135deg, var(--webk-purple-deep), var(--webk-teal));
}

/* Glowing bottom edge at the top of the page. */
body .webk-header-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(61, 227, 194, 0.7), rgba(139, 108, 255, 0.6), transparent);
	pointer-events: none;
}

body .webk-header-wrap .webk-header {
	transition: padding 0.4s ease;
}

body .webk-header-wrap .webk-logo-container img {
	transition: height 0.4s ease, filter 0.4s ease;
}

body .webk-header-wrap .webk-logo-container:hover img {
	filter: drop-shadow(0 0 10px rgba(61, 227, 194, 0.55));
}

/* Scroll progress line. */
body .webk-header-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 2px;
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff);
	box-shadow: 0 0 10px rgba(61, 227, 194, 0.6);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* --- Floating state ----------------------------------------------------- */
body .webk-header-wrap.is-scrolled {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 14px);
	left: 50%;
	width: min(1240px, calc(100% - 32px));
	overflow: visible;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	background:
		radial-gradient(50% 120% at 90% 0%, rgba(61, 227, 194, 0.12), transparent 60%),
		rgba(12, 10, 30, 0.9);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	transform: translateX(-50%);
	animation: webk-header-drop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .webk-header-wrap.is-scrolled::after {
	display: none;
}

body .webk-header-wrap.is-scrolled .webk-header {
	padding: 10px 14px 10px 24px;
}

body .webk-header-wrap.is-scrolled .webk-logo-container img {
	height: 34px !important;
}

body .webk-header-wrap.is-scrolled .webk-header-progress {
	left: 20px;
	right: 20px;
	border-radius: 2px;
}

/* --- Desktop menu ------------------------------------------------------- */
@media (min-width: 993px) {
	body .webk-header-wrap .webk-nav {
		position: relative;
		gap: 2px;
		padding: 5px;
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.06);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	body .webk-header-wrap .webk-nav-link {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 9px 16px;
		border-radius: 10px;
		color: rgba(255, 255, 255, 0.82);
		transition: color 0.3s ease;
	}

	body .webk-header-wrap .webk-nav-link:hover,
	body .webk-header-wrap .webk-dropdown:hover > .webk-nav-link {
		color: #fff;
	}

	body .webk-header-wrap .webk-nav-link.is-active {
		color: var(--webk-mint);
	}

	body .webk-nav-indicator {
		position: absolute;
		top: 5px;
		bottom: 5px;
		left: 0;
		width: 0;
		border: 1px solid rgba(61, 227, 194, 0.25);
		border-radius: 10px;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(61, 227, 194, 0.1));
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
	}

	body .webk-nav.has-indicator .webk-nav-indicator {
		opacity: 1;
	}

	/* Mega menu. */
	body .webk-header-wrap .webk-dropdown::after {
		height: 22px;
	}

	body .webk-header-wrap .webk-dropdown-content.webk-mega {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 4px;
		left: 50%;
		width: 560px;
		margin-top: 18px;
		padding: 10px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 20px;
		background:
			radial-gradient(60% 80% at 100% 0%, rgba(61, 227, 194, 0.12), transparent 60%),
			rgba(14, 12, 32, 0.94);
		box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 10px);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	}

	body .webk-header-wrap .webk-dropdown:hover .webk-dropdown-content.webk-mega,
	body .webk-header-wrap .webk-dropdown:focus-within .webk-dropdown-content.webk-mega {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	/* Caret. */
	body .webk-header-wrap .webk-mega::before {
		content: "";
		position: absolute;
		top: -6px;
		left: 50%;
		width: 12px;
		height: 12px;
		margin-left: -6px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		border-left: 1px solid rgba(255, 255, 255, 0.1);
		background: #121029;
		transform: rotate(45deg);
	}
}

body .webk-header-wrap .webk-mega .webk-mega-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border-radius: 14px;
	color: #fff;
	transition: background-color 0.3s ease;
}

body .webk-header-wrap .webk-mega .webk-mega-item:hover {
	background: rgba(61, 227, 194, 0.08);
	color: #fff;
}

body .webk-mega-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(61, 227, 194, 0.22);
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.14), rgba(63, 25, 155, 0.3));
	color: var(--webk-mint);
	font-size: 16px;
	transition: all 0.3s ease;
}

body .webk-mega-item:hover .webk-mega-icon {
	border-color: transparent;
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
	transform: rotate(-6deg);
}

body .webk-mega-text strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

body .webk-mega-text small {
	display: block;
	margin-top: 2px;
	color: #8f929e;
	font-size: 12px;
	font-weight: 500;
}

body .webk-header-wrap .webk-mega .webk-mega-footer {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
	padding: 14px 14px 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--webk-mint);
	font-size: 13px;
	font-weight: 700;
}

body .webk-header-wrap .webk-mega .webk-mega-footer:hover {
	background: none;
	color: #fff;
}

body .webk-mega-footer i {
	transition: transform 0.3s ease;
}

body .webk-mega-footer:hover i {
	transform: translateX(4px);
}

/* --- Mobile menu -------------------------------------------------------- */
@media (max-width: 992px) {
	body .webk-nav-indicator {
		display: none;
	}
	body .webk-header-wrap .webk-nav {
		border-radius: 0 0 20px 20px;
		background: rgba(12, 10, 30, 0.96);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
	}
	body .webk-header-wrap.is-scrolled .webk-nav {
		top: calc(100% + 8px);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 20px;
	}
	body .webk-header-wrap .webk-dropdown-content.webk-mega {
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.04);
	}
	body .webk-header-wrap .webk-mega-text small {
		display: none;
	}
	body .webk-header-wrap .webk-mobile-menu-btn {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.06);
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-header-wrap.is-scrolled {
		animation: none;
	}
	body .webk-nav-indicator {
		transition: opacity 0.25s ease;
	}
}

/* --- Header logo: halo, masked shine sweep, tagline --------------------- */
@keyframes webk-logo-shine {
	0% {
		background-position: 160% 0;
	}
	30%,
	100% {
		background-position: -60% 0;
	}
}

@keyframes webk-logo-halo {
	0%,
	100% {
		opacity: 0.45;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1.15);
	}
}

body .webk-header-wrap .webk-logo-container {
	gap: 14px;
}

body .webk-logo-mark {
	position: relative;
	display: inline-flex;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Soft halo behind the mark. */
body .webk-logo-mark::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 130%;
	height: 160%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(61, 227, 194, 0.35), transparent);
	filter: blur(6px);
	transform: translate(-50%, -50%);
	animation: webk-logo-halo 4s ease-in-out infinite;
	pointer-events: none;
}

/* Shine that only paints over the logo's own pixels. */
body .webk-logo-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 38%, rgba(61, 227, 194, 0.95) 45%, #ffffff 50%, rgba(139, 108, 255, 0.95) 55%, transparent 62%);
	background-size: 250% 100%;
	background-position: 160% 0;
	-webkit-mask: var(--webk-logo-url) center / contain no-repeat;
	mask: var(--webk-logo-url) center / contain no-repeat;
	animation: webk-logo-shine 6s ease-in-out infinite;
	pointer-events: none;
}

body .webk-logo-container:hover .webk-logo-mark {
	transform: translateY(-2px) rotate(-3deg) scale(1.05);
}

body .webk-logo-container:hover .webk-logo-shine {
	animation-duration: 1.6s;
}

/* Tagline. */
body .webk-logo-tag {
	display: flex;
	flex-direction: column;
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.35;
	text-transform: uppercase;
	transition: opacity 0.4s ease;
}

body .webk-logo-tag span:last-child {
	color: var(--webk-mint);
}

@media (max-width: 576px) {
	body .webk-logo-tag {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-logo-mark::before,
	body .webk-logo-shine {
		animation: none;
	}
	body .webk-logo-container:hover .webk-logo-mark {
		transform: none;
	}
}

/* ==========================================================================
   "Get a Quote" popup redesign
   .webk-quote-modal + .webk-quote-aside are added by assets/js/quote-effect.js.
   Elementor sets the popup width/colours per popup, so the core surface
   overrides use !important.
   ========================================================================== */
body .webk-quote-modal {
	background-color: rgba(5, 4, 15, 0.72) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

body .webk-quote-modal .dialog-widget-content {
	width: min(940px, calc(100vw - 32px)) !important;
	max-height: calc(100vh - 40px);
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 28px !important;
	background: linear-gradient(160deg, #13141d 0%, #0b0c12 100%) !important;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 80px rgba(63, 25, 155, 0.35) !important;
}

body .webk-quote-modal .dialog-message {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	width: 100% !important;
	max-width: none !important;
}

/* --- Brand panel -------------------------------------------------------- */
body .webk-quote-aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	overflow: hidden;
	padding: 48px 40px;
	background:
		radial-gradient(70% 60% at 100% 0%, rgba(61, 227, 194, 0.3), transparent 60%),
		linear-gradient(150deg, var(--webk-purple-deep) 0%, var(--webk-purple) 50%, var(--webk-teal) 100%);
	color: #fff;
}

body .webk-quote-aside::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
	mask-image: linear-gradient(180deg, #000, transparent 85%);
	pointer-events: none;
}

body .webk-quote-aside > * {
	position: relative;
}

body .webk-quote-orb {
	position: absolute !important;
	border-radius: 50%;
	filter: blur(50px);
	pointer-events: none;
	animation: webk-mesh-drift 12s ease-in-out infinite;
}

body .webk-quote-orb-1 {
	right: -60px;
	bottom: -60px;
	width: 240px;
	height: 240px;
	background: rgba(61, 227, 194, 0.45);
}

body .webk-quote-orb-2 {
	top: 30%;
	left: -80px;
	width: 200px;
	height: 200px;
	background: rgba(139, 108, 255, 0.4);
	animation-delay: -6s;
}

body .webk-quote-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-quote-eyebrow i {
	color: var(--webk-mint);
}

body .webk-quote-modal .webk-quote-title {
	margin: 0 0 16px;
	color: #fff;
	font-family: Oswald, Inter, sans-serif;
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

body .webk-quote-grad {
	background: linear-gradient(90deg, var(--webk-mint), #b9fff0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body .webk-quote-text {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 15px;
	line-height: 1.6;
}

body .webk-quote-perks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .webk-quote-perks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
}

body .webk-quote-perks i {
	color: var(--webk-mint);
}

body .webk-quote-chips {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body .webk-quote-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	background: rgba(11, 12, 19, 0.3);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: all 0.3s ease;
}

body .webk-quote-chip i {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
	font-size: 13px;
}

body .webk-quote-chip:hover {
	border-color: var(--webk-mint);
	background: rgba(11, 12, 19, 0.5);
	color: var(--webk-mint);
}

/* --- Form side ---------------------------------------------------------- */
body .webk-quote-modal .elementor-location-header {
	padding: 44px 40px 36px;
}

body .webk-quote-modal .e-con {
	--content-width: 100%;
	width: 100% !important;
	max-width: 100% !important;
	--padding-left: 0px;
	--padding-right: 0px;
	padding-left: 0;
	padding-right: 0;
}

body .webk-quote-modal .elementor-widget-heading .elementor-heading-title {
	color: #fff !important;
	font-family: Inter, sans-serif;
	font-size: 26px !important;
	font-weight: 800 !important;
	text-align: left !important;
}

body .webk-quote-form-sub {
	margin: -4px 0 24px;
	color: #8f929e;
	font-size: 14px;
}

body .webk-quote-modal .elementor-field-label {
	color: #c5c6c7 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
}

body .webk-quote-modal .elementor-field-textual {
	padding: 12px 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	color: #fff !important;
	font-size: 15px !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

body .webk-quote-modal .elementor-field-textual::placeholder {
	color: #6a6e7d !important;
}

body .webk-quote-modal .elementor-field-textual:hover {
	border-color: rgba(255, 255, 255, 0.16) !important;
}

body .webk-quote-modal .elementor-field-textual:focus {
	border-color: var(--webk-mint) !important;
	background-color: rgba(61, 227, 194, 0.05) !important;
	box-shadow: 0 0 0 4px rgba(61, 227, 194, 0.12) !important;
	outline: none;
}

body .webk-quote-modal textarea.elementor-field-textual {
	min-height: 100px;
	resize: vertical;
}

@media (min-width: 768px) {
	body .webk-quote-modal .elementor-field-group-name,
	body .webk-quote-modal .elementor-field-group-field_c1c6ea5 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

body .webk-quote-modal .elementor-field-type-recaptcha .elementor-field {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* Submit: mint variant on the dark surface, full width. */
body .webk-quote-modal .webk-fx {
	--fx-ring: var(--webk-mint);
	--fx-color: var(--webk-mint);
	--fx-fill: var(--webk-cta-gradient);
	--fx-hover-color: var(--webk-ink);
}

body .webk-quote-modal .e-form__buttons .elementor-button.webk-fx {
	width: 100%;
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 16px;
}

/* Close button. */
body .webk-quote-modal .dialog-close-button {
	top: 18px !important;
	right: 18px !important;
	z-index: 20 !important;
	/* Elementor forces display:flex without horizontal centering. */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	transition: all 0.3s ease;
}

body .webk-quote-modal .dialog-close-button svg {
	width: 14px;
	height: 14px;
	fill: #fff !important;
}

body .webk-quote-modal .dialog-close-button:hover {
	border-color: var(--webk-mint);
	background: var(--webk-mint);
	transform: rotate(90deg);
}

body .webk-quote-modal .dialog-close-button:hover svg {
	fill: var(--webk-ink) !important;
}

/* --- Small screens ------------------------------------------------------ */
@media (max-width: 768px) {
	body .webk-quote-modal .dialog-message {
		grid-template-columns: 1fr;
	}
	body .webk-quote-aside {
		gap: 0;
		padding: 36px 24px 28px;
	}
	body .webk-quote-text,
	body .webk-quote-perks,
	body .webk-quote-chips {
		display: none;
	}
	body .webk-quote-modal .webk-quote-title {
		margin: 0;
		font-size: 28px;
	}
	body .webk-quote-modal .elementor-location-header {
		padding: 28px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-quote-orb {
		animation: none;
	}
}

body .webk-quote-modal .e-con-inner {
	width: 100% !important;
	max-width: 100% !important;
}

body .webk-quote-modal .elementor-element.elementor-widget-form {
	padding: 0;
}

/* ==========================================================================
   Responsive fixes (verified at 390 / 820 / 1024 / 1280 / 1440 px)
   ========================================================================== */

/* Clip decorative glows at each full-width wrapper so nothing creates a
   horizontal scroll (mobile Safari ignores body overflow-x:hidden). `clip`
   doesn't create a scroll container, so fixed/sticky behaviour is unaffected. */
body .webk-home-wrapper,
body .webk-cta-wrapper,
body .webk-footer-wrapper {
	overflow-x: clip;
}

/* --- Tablet & below (≤992): header bar layout -------------------------- */
@media (max-width: 992px) {
	/* Logo left; quote button + menu toggle grouped on the right. */
	body .webk-header-wrap .webk-header {
		gap: 12px;
	}
	body .webk-header-wrap .webk-header-actions {
		order: 2;
		margin-left: auto;
	}
	body .webk-header-wrap .webk-mobile-menu-btn {
		order: 3;
	}

	/* Mobile menu panel: left-aligned rows with separators. */
	body .webk-header-wrap .webk-nav {
		align-items: stretch;
		gap: 0;
		padding: 12px 20px 20px;
	}
	body .webk-header-wrap .webk-nav > .webk-nav-link,
	body .webk-header-wrap .webk-dropdown > .webk-nav-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
		font-size: 16px;
	}
	body .webk-header-wrap .webk-nav-link.is-active {
		color: var(--webk-mint);
	}

	/* Services: tap the chevron button to open the submenu. */
	body .webk-header-wrap .webk-dropdown {
		position: relative;
	}
	body .webk-header-wrap .webk-dropdown > .webk-nav-link i {
		display: none;
	}
	body .webk-sub-toggle {
		position: absolute;
		top: 6px;
		right: 0;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.05);
		color: #fff;
		cursor: pointer;
	}
	body .webk-sub-toggle i {
		transition: transform 0.3s ease;
	}
	body .webk-dropdown.is-open .webk-sub-toggle i {
		transform: rotate(180deg);
	}
	/* Hover-open is unreliable on touch; only open via the toggle. */
	body .webk-header-wrap .webk-dropdown:hover .webk-dropdown-content.webk-mega {
		display: none;
	}
	body .webk-header-wrap .webk-dropdown.is-open .webk-dropdown-content.webk-mega {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		margin: 8px 0 4px;
		padding: 8px;
	}
	body .webk-header-wrap .webk-mega .webk-mega-item {
		padding: 10px;
		font-size: 13px;
	}
	body .webk-header-wrap .webk-mega .webk-mega-icon {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}
	body .webk-header-wrap .webk-mega .webk-mega-footer {
		padding: 12px 10px 6px;
	}

	/* Quote button inside the mobile menu. */
	body .webk-nav-quote {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 18px;
		padding: 15px 20px;
		border-radius: 14px;
		background: var(--webk-cta-gradient);
		box-shadow: 0 10px 24px rgba(61, 227, 194, 0.3);
		color: var(--webk-ink);
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
	}
}

@media (min-width: 993px) {
	body .webk-sub-toggle,
	body .webk-nav-quote {
		display: none;
	}
}

/* --- Tablet (769–1024): center the orphaned 3rd pricing card ----------- */
@media (min-width: 769px) and (max-width: 1024px) {
	body .webk-pricing-grid > .webk-pricing-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 15px);
	}
}

/* --- Phones (≤768) ------------------------------------------------------ */
@media (max-width: 768px) {
	/* Hero badge on one line. */
	body .webk-hero .webk-hero-badge {
		padding: 7px 14px;
		font-size: 11px;
		letter-spacing: 0.3px;
		white-space: nowrap;
	}

	/* Smaller +142% card. */
	body .webk-hero .webk-hero-stat-card {
		gap: 14px;
		padding: 16px 20px;
	}
	body .webk-hero .webk-hero-stat-icon {
		font-size: 22px;
	}
	body .webk-hero .webk-hero-stat-text p {
		font-size: 28px;
	}

	/* "Why choose": left-aligned rows (icon beside text) to match the title. */
	body .webk-why .webk-why-item {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		text-align: left;
	}
	body .webk-why .webk-why-icon-wrap {
		width: 48px;
		height: 48px;
		border-radius: 14px;
	}
	body .webk-why .webk-why-icon-wrap img {
		width: 26px;
		height: 26px;
	}

	/* Testimonial quote mark clear of the author line. */
	body .webk-testi-mark {
		top: 18px;
		right: 20px;
		font-size: 52px;
	}
	body .webk-why .webk-testi-author {
		padding-right: 50px;
	}

	/* Business hours: keep day and time each on one line. */
	body .webk-hours-item {
		flex-wrap: wrap;
		gap: 4px 12px;
	}
	body .webk-hours-day,
	body .webk-hours-time {
		white-space: nowrap;
	}

	/* Room for the fixed scroll-to-top button at the very bottom. */
	body .webk-main-footer {
		padding-bottom: 90px;
	}
}

/* --- Section rhythm on smaller screens (all pages) ---------------------
   Inner pages keep their 100px desktop section padding on phones, which
   stacks into ~300px gaps. Tighten it; the heroes keep their own spacing. */
@media (max-width: 1024px) {
	body .webk-section:not(.webk-hero):not(.webk-sp-hero):not(.webk-services-hero) {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

@media (max-width: 768px) {
	body .webk-section:not(.webk-hero):not(.webk-sp-hero):not(.webk-services-hero) {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	body .webk-mission {
		margin-bottom: 56px;
	}
}

/* Contact-card forms (any Elementor form template) fill the card width.
   Template 102 on /contact/ centres its children, which shrink-wraps the
   form to ~170px on phones. */
body .webk-contact-form-container .e-con,
body .webk-contact-form-container .e-con-inner {
	align-items: stretch;
}

body .webk-contact-form-container .elementor-widget-form,
body .webk-contact-form-container .elementor-widget-heading {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100%;
	padding-left: 0;
	padding-right: 0;
}

/* reCAPTCHA is a fixed 304px iframe; scale it down on narrow cards. */
@media (max-width: 400px) {
	body .webk-contact-form-container .elementor-g-recaptcha,
	body .webk-quote-modal .elementor-g-recaptcha {
		transform: scale(0.88);
		transform-origin: left top;
	}
}

/* Careers: job meta wraps as whole items instead of breaking words. */
body .webk-job-meta {
	flex-wrap: wrap;
	row-gap: 6px;
}

body .webk-job-meta > span {
	white-space: nowrap;
}

/* Quote popup: a single scroll container, sized to the visible viewport.
   Elementor gives .dialog-message its own max-height:100vh + overflow, which
   nests a second scroller inside ours and leaves Submit unreachable on
   phones. */
body .webk-quote-modal .dialog-message {
	max-height: none !important;
	overflow: visible !important;
}

body .webk-quote-modal .dialog-widget-content {
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 48px) !important;
	max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 48px) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}

/* Keep the close button pinned while the popup content scrolls. It's the
   first child of the scroll container, so sticky works; the negative bottom
   margin overlays it on the content instead of pushing the content down. */
body .webk-quote-modal .dialog-close-button {
	position: sticky !important;
	top: 14px !important;
	right: auto !important;
	float: right;
	margin: 14px 14px -54px 0;
}

/* ==========================================================================
   Service page heroes (individual services + Services overview)
   Extra markup is injected by assets/js/service-hero-effect.js.
   ========================================================================== */
body .webk-sp-hero,
body .webk-services-hero {
	position: relative;
	isolation: isolate;
}

body .webk-sp-hero {
	padding-top: 110px;
	padding-bottom: 110px;
}

/* Background glow + grid (shared). */
body .webk-sp-hero-bg {
	position: absolute;
	inset: 0 -5%;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(40% 60% at 15% 35%, rgba(63, 25, 155, 0.38), transparent 70%),
		radial-gradient(35% 55% at 85% 55%, rgba(61, 227, 194, 0.14), transparent 70%);
}

body .webk-sp-hero-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000, transparent 80%);
	mask-image: radial-gradient(60% 70% at 50% 45%, #000, transparent 80%);
}

/* Per-service outlined watermark. */
body .webk-sp-mark {
	position: absolute;
	left: 50%;
	bottom: -30px;
	z-index: -1;
	transform: translateX(-50%);
	background: linear-gradient(180deg, rgba(61, 227, 194, 0.35), rgba(63, 25, 155, 0.08) 75%, transparent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1px rgba(61, 227, 194, 0.14);
	font-family: Oswald, Inter, sans-serif;
	font-size: clamp(90px, 20vw, 300px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 0.8;
	white-space: nowrap;
	opacity: 0.3;
	pointer-events: none;
	user-select: none;
}

/* --- Text column -------------------------------------------------------- */
body .webk-sp-crumb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	padding: 8px 16px;
	border: 1px solid rgba(61, 227, 194, 0.3);
	border-radius: 30px;
	background: rgba(61, 227, 194, 0.08);
	font-size: 12px;
	letter-spacing: 1.2px;
}

body .webk-sp-crumb a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.3s ease;
}

body .webk-sp-crumb a:hover {
	color: #fff;
}

body .webk-sp-crumb i {
	color: rgba(61, 227, 194, 0.6);
	font-size: 9px;
}

body .webk-sp-crumb span {
	color: var(--webk-mint);
}

body .webk-sp-hero .webk-sp-title {
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.02;
}

body .webk-sp-grad {
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body .webk-sp-hero .webk-sp-subtitle {
	max-width: 540px;
	color: #b4b8c6;
	font-size: 19px;
	line-height: 1.6;
}

body .webk-sp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

body .webk-sp-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

body .webk-sp-highlights li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.04);
	color: #c5c6c7;
	font-size: 13px;
	font-weight: 600;
}

body .webk-sp-highlights i {
	color: var(--webk-mint);
}

/* --- Visual ------------------------------------------------------------- */
body .webk-sp-visual {
	position: relative;
	flex: 1;
	min-width: 0;
	perspective: 1400px;
}

body .webk-sp-hero .webk-sp-hero-img-wrap {
	position: relative;
	z-index: 1;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.35), rgba(63, 25, 155, 0.45) 50%, rgba(4, 126, 123, 0.35));
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(63, 25, 155, 0.35);
	transform: rotateY(-8deg) rotateX(4deg);
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .webk-sp-visual:hover .webk-sp-hero-img-wrap {
	transform: none;
}

body .webk-sp-hero .webk-sp-hero-img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 22px;
}

body .webk-sp-orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130%;
	aspect-ratio: 1;
	border: 1px dashed rgba(61, 227, 194, 0.18);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: webk-spin 70s linear infinite;
	pointer-events: none;
}

body .webk-sp-chip {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 18px;
	pointer-events: none;
	animation: webk-float 6s ease-in-out infinite;
}

body .webk-sp-chip strong {
	display: block;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
}

body .webk-sp-chip small {
	display: block;
	font-size: 12px;
	font-weight: 600;
}

body .webk-sp-chip-icon {
	top: -24px;
	right: -20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(17, 18, 28, 0.8);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
	color: #fff;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

body .webk-sp-chip-icon small {
	color: #8f929e;
}

body .webk-sp-chip-tile {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--webk-purple), var(--webk-teal));
	color: #fff;
	font-size: 17px;
}

body .webk-sp-chip-stat {
	bottom: -26px;
	left: -28px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: var(--webk-cta-gradient);
	box-shadow: 0 24px 50px rgba(61, 227, 194, 0.3);
	color: var(--webk-ink);
	animation-delay: -3s;
}

body .webk-sp-chip-stat i {
	font-size: 22px;
}

body .webk-sp-chip-stat strong {
	font-size: 24px;
}

body .webk-sp-chip-stat small {
	color: rgba(11, 12, 19, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

/* --- Services overview hero ------------------------------------------- */
body .webk-services-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 110px;
	padding-bottom: 90px;
}

body .webk-services-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 7px 16px;
	border: 1px solid rgba(61, 227, 194, 0.3);
	border-radius: 30px;
	background: rgba(61, 227, 194, 0.08);
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-services-hero .webk-services-title {
	font-size: clamp(44px, 6vw, 80px);
	line-height: 1;
}

body .webk-services-hero .webk-services-subtitle {
	max-width: 620px;
	color: #b4b8c6;
	font-size: 19px;
	line-height: 1.6;
}

body .webk-services-chips {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: center;
	gap: 12px;
	max-width: 860px;
	margin-top: 40px;
}

body .webk-services-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px 10px 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 40px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
}

body .webk-services-chip i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.18), rgba(63, 25, 155, 0.35));
	color: var(--webk-mint);
	font-size: 13px;
	transition: all 0.3s ease;
}

body .webk-services-chip:hover,
body .webk-services-chip:focus-visible {
	border-color: rgba(61, 227, 194, 0.4);
	background: rgba(61, 227, 194, 0.08);
	color: #fff;
	transform: translateY(-3px);
}

body .webk-services-chip:hover i,
body .webk-services-chip:focus-visible i {
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	body .webk-sp-hero {
		padding-top: 80px;
		padding-bottom: 90px;
	}
	body .webk-sp-hero .webk-sp-subtitle {
		margin-left: auto;
		margin-right: auto;
	}
	body .webk-sp-actions,
	body .webk-sp-highlights {
		justify-content: center;
	}
	body .webk-sp-visual {
		width: 100%;
		max-width: 600px;
		margin-top: 30px;
	}
	body .webk-sp-hero .webk-sp-hero-img-wrap {
		transform: none;
	}
	body .webk-sp-orbit {
		display: none;
	}
}

@media (max-width: 768px) {
	body .webk-sp-hero {
		padding-top: 50px;
		padding-bottom: 70px;
	}
	body .webk-sp-hero .webk-sp-title {
		font-size: clamp(34px, 9vw, 44px);
	}
	body .webk-sp-hero .webk-sp-subtitle {
		font-size: 17px;
	}
	body .webk-sp-actions {
		flex-direction: column;
		align-items: stretch;
	}
	body .webk-sp-chip-icon {
		display: none;
	}
	body .webk-sp-chip-stat {
		left: 12px;
		bottom: -20px;
		padding: 12px 16px;
	}
	body .webk-sp-chip-stat strong {
		font-size: 20px;
	}
	body .webk-services-hero {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	body .webk-services-chip {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-sp-orbit,
	body .webk-sp-chip {
		animation: none;
	}
	body .webk-sp-hero .webk-sp-hero-img-wrap {
		transform: none;
	}
}

body .webk-service-page-wrapper {
	overflow-x: clip;
}

@media (max-width: 768px) {
	body .webk-services-chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}
	body .webk-services-chip {
		min-width: 0;
	}
	body .webk-services-chip span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Service hero buttons: the secondary-button base styles only exist on the
   homepage, so give both CTAs explicit sizing here. */
body .webk-sp-actions .webk-sp-btn,
body .webk-sp-actions .webk-sp-secondary {
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

/* Overview chips on phones: wrap long names instead of truncating. */
@media (max-width: 768px) {
	body .webk-services-chip span {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		line-height: 1.25;
		text-align: left;
	}
}

/* ==========================================================================
   Service pages: content sections (below the hero)
   Scoped to .webk-service-page-wrapper / .webk-services-wrapper so the shared
   header, footer, contact section and forms are untouched. Extra markup comes
   from assets/js/service-sections-effect.js.
   ========================================================================== */

/* Reveal on scroll (only when JS has tagged the element). Uses the
   individual `translate` property so hover `transform`s don't clash. */
body .webk-reveal {
	opacity: 0;
	translate: 0 28px;
	transition: opacity 0.7s ease var(--reveal-delay, 0s), translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0s);
}

body .webk-reveal.is-visible {
	opacity: 1;
	translate: 0 0;
}

/* Section eyebrow (shared). */
body .webk-sec-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 7px 16px;
	border: 1px solid rgba(61, 227, 194, 0.3);
	border-radius: 30px;
	background: rgba(61, 227, 194, 0.08);
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-service-page-wrapper .webk-sp-benefits-title {
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.05;
}

/* --- Benefit cards ------------------------------------------------------ */
body .webk-service-page-wrapper .webk-sp-benefits .webk-sp-benefits-title {
	margin-bottom: 56px;
}

body .webk-service-page-wrapper .webk-sp-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 40px 36px 36px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 24px;
	background:
		radial-gradient(110% 70% at 100% 0%, rgba(63, 25, 155, 0.24), transparent 55%),
		radial-gradient(90% 60% at 0% 100%, rgba(4, 126, 123, 0.12), transparent 60%),
		linear-gradient(160deg, #161722 0%, #0e0f15 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.3);
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Gradient hairline border. */
body .webk-service-page-wrapper .webk-sp-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.55), rgba(63, 25, 155, 0.45) 35%, transparent 65%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/* Cursor spotlight. */
body .webk-service-page-wrapper .webk-sp-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(61, 227, 194, 0.13), transparent 60%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

body .webk-service-page-wrapper .webk-sp-card:hover {
	transform: translateY(-8px);
	border-color: rgba(61, 227, 194, 0.3);
	box-shadow: 0 26px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(61, 227, 194, 0.08);
}

body .webk-service-page-wrapper .webk-sp-card:hover::after {
	opacity: 1;
}

body .webk-sp-card-tile {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: 26px;
	border: 1px solid rgba(61, 227, 194, 0.25);
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.16), rgba(63, 25, 155, 0.28));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.35);
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

body .webk-sp-card-tile img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

body .webk-service-page-wrapper .webk-sp-card:hover .webk-sp-card-tile {
	border-color: rgba(61, 227, 194, 0.6);
	box-shadow: 0 0 28px rgba(61, 227, 194, 0.35);
	transform: rotate(-6deg) scale(1.06);
}

body .webk-sp-card-num {
	position: absolute;
	top: 26px;
	right: 28px;
	color: transparent;
	font-family: Oswald, Inter, sans-serif;
	font-size: 58px;
	font-weight: 700;
	line-height: 1;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
	pointer-events: none;
	transition: all 0.4s ease;
}

body .webk-service-page-wrapper .webk-sp-card:hover .webk-sp-card-num {
	-webkit-text-stroke-color: rgba(61, 227, 194, 0.5);
	transform: translateY(-4px);
}

body .webk-service-page-wrapper .webk-sp-card h3 {
	transition: color 0.3s ease;
}

body .webk-service-page-wrapper .webk-sp-card:hover h3 {
	/* Widget CSS forces white with !important. */
	color: var(--webk-mint) !important;
}

body .webk-service-page-wrapper .webk-sp-card p {
	color: #a9adbb;
	line-height: 1.65;
}

/* --- Process timeline --------------------------------------------------- */
body .webk-sp-timeline {
	--badge: 64px;
	--pad: 36px;
	position: relative;
	gap: 22px;
}

body .webk-sp-track {
	position: absolute;
	top: calc(var(--pad) + var(--badge) / 2);
	bottom: calc(var(--pad) + var(--badge) / 2);
	left: calc(var(--pad) + var(--badge) / 2 - 1px);
	z-index: 0;
	width: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

body .webk-sp-track-fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, var(--webk-mint), #8b6cff);
	box-shadow: 0 0 12px rgba(61, 227, 194, 0.6);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.15s linear;
}

body .webk-service-page-wrapper .webk-sp-timeline .webk-sp-step {
	position: relative;
	flex-direction: row;
	align-items: flex-start;
	gap: 28px;
	padding: var(--pad);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 22px;
	background: linear-gradient(160deg, rgba(22, 23, 34, 0.75), rgba(14, 15, 21, 0.75));
	text-align: left;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

body .webk-service-page-wrapper .webk-sp-timeline .webk-sp-step.is-active {
	border-color: rgba(61, 227, 194, 0.22);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

body .webk-service-page-wrapper .webk-sp-timeline .webk-sp-step-num {
	position: relative;
	z-index: 1;
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: var(--badge);
	height: var(--badge);
	border: 2px solid transparent;
	border-radius: 50%;
	background:
		linear-gradient(#0f0e1f, #0f0e1f) padding-box,
		linear-gradient(135deg, var(--webk-mint), #8b6cff) border-box;
	box-shadow: 0 0 0 6px #08070f;
	color: #fff;
	font-family: Oswald, Inter, sans-serif;
	font-size: 22px;
	font-weight: 700;
	transition: all 0.4s ease;
}

body .webk-service-page-wrapper .webk-sp-timeline .webk-sp-step.is-active .webk-sp-step-num {
	background:
		var(--webk-cta-gradient) padding-box,
		linear-gradient(135deg, var(--webk-mint), #8b6cff) border-box;
	box-shadow: 0 0 0 6px #08070f, 0 0 26px rgba(61, 227, 194, 0.5);
	color: var(--webk-ink);
}

body .webk-sp-step-label {
	display: block;
	margin-bottom: 6px;
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body .webk-service-page-wrapper .webk-sp-timeline .webk-sp-step-content p {
	color: #a9adbb;
	line-height: 1.65;
}

/* --- Services overview rows -------------------------------------------- */
body .webk-services-wrapper .webk-service-row {
	position: relative;
	margin-bottom: 120px;
}

body .webk-services-wrapper .webk-service-img-wrap {
	padding: 10px;
	overflow: visible;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.3), rgba(63, 25, 155, 0.45) 50%, rgba(4, 126, 123, 0.3));
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(63, 25, 155, 0.25);
	transform: perspective(1400px) rotateY(7deg);
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .webk-services-wrapper .webk-service-row:nth-child(even) .webk-service-img-wrap {
	transform: perspective(1400px) rotateY(-7deg);
}

body .webk-services-wrapper .webk-service-row:hover .webk-service-img-wrap {
	transform: perspective(1400px) rotateY(0deg);
}

body .webk-services-wrapper .webk-service-img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 22px;
}

body .webk-services-wrapper .webk-service-content {
	position: relative;
	isolation: isolate;
}

body .webk-service-num {
	position: absolute;
	top: -50px;
	right: 0;
	z-index: -1;
	color: transparent;
	font-family: Oswald, Inter, sans-serif;
	font-size: 150px;
	font-weight: 700;
	line-height: 1;
	-webkit-text-stroke: 1px rgba(61, 227, 194, 0.14);
	pointer-events: none;
}

body .webk-services-wrapper .webk-service-icon {
	width: 64px;
	height: 64px;
	border: 1px solid rgba(61, 227, 194, 0.25);
	border-radius: 20px;
	/* Some rows set an inline purple background. */
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.16), rgba(63, 25, 155, 0.3)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.35);
}

body .webk-service-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

body .webk-service-label::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff);
}

body .webk-services-wrapper .webk-service-heading {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.08;
}

body .webk-services-wrapper .webk-service-text {
	color: #a9adbb;
	line-height: 1.7;
}

body .webk-services-wrapper .webk-service-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

body .webk-services-wrapper .webk-service-features li {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	font-size: 14px;
	line-height: 1.35;
	transition: border-color 0.3s ease, background 0.3s ease;
}

body .webk-services-wrapper .webk-service-features li:hover {
	border-color: rgba(61, 227, 194, 0.3);
	background: rgba(61, 227, 194, 0.05);
}

body .webk-services-wrapper .webk-service-features i {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(61, 227, 194, 0.15);
	/* Some rows set an inline colour. */
	color: var(--webk-mint) !important;
	font-size: 10px;
}

body .webk-service-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

body .webk-service-actions a {
	margin: 0;
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

/* --- Responsive --------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 992px) {
	body .webk-service-page-wrapper .webk-sp-grid > .webk-sp-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 15px);
	}
}

@media (max-width: 992px) {
	body .webk-services-wrapper .webk-service-row {
		margin-bottom: 80px;
	}
	body .webk-services-wrapper .webk-service-img-wrap,
	body .webk-services-wrapper .webk-service-row:nth-child(even) .webk-service-img-wrap {
		width: 100%;
		transform: none;
	}
	body .webk-service-num {
		top: -30px;
		font-size: 110px;
	}
}

@media (max-width: 768px) {
	body .webk-service-page-wrapper .webk-sp-card {
		padding: 32px 26px 28px;
	}
	body .webk-sp-timeline {
		--badge: 48px;
		--pad: 22px;
	}
	body .webk-service-page-wrapper .webk-sp-timeline .webk-sp-step {
		gap: 18px;
	}
	body .webk-service-page-wrapper .webk-sp-timeline .webk-sp-step-num {
		font-size: 17px;
	}
	body .webk-service-page-wrapper .webk-sp-timeline .webk-sp-step-content h3 {
		font-size: 20px;
	}
	body .webk-services-wrapper .webk-service-features {
		grid-template-columns: 1fr;
	}
	body .webk-service-actions {
		flex-direction: column;
	}
	body .webk-service-num {
		font-size: 84px;
		top: -20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-reveal {
		opacity: 1;
		translate: none;
		transition: none;
	}
	body .webk-services-wrapper .webk-service-img-wrap,
	body .webk-services-wrapper .webk-service-row:nth-child(even) .webk-service-img-wrap {
		transform: none;
	}
}

/* ==========================================================================
   Case Studies, About & Blog pages
   Scoped to each page's content wrapper (+ the Blog posts widget) so the
   shared header, footer, contact section and forms are untouched. Extra
   markup comes from assets/js/pages-effect.js.
   ========================================================================== */

/* --- Shared page hero --------------------------------------------------- */
body .webk-page-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 110px;
	padding-bottom: 80px;
	text-align: center;
}

body .webk-page-hero .webk-title,
body .webk-page-hero .webk-about-title,
body .webk-page-hero .webk-blog-title {
	font-size: clamp(42px, 6vw, 80px);
	line-height: 1.02;
}

body .webk-page-hero .webk-subtitle,
body .webk-page-hero .webk-about-subtitle,
body .webk-page-hero .webk-blog-desc {
	max-width: 640px;
	color: #b4b8c6;
	font-size: 19px;
	line-height: 1.6;
}

body .webk-page-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

body .webk-page-chips-center {
	justify-content: center;
}

body .webk-page-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.04);
	color: #d4d6dd;
	font-size: 14px;
	font-weight: 600;
}

body .webk-page-chips i {
	color: var(--webk-mint);
}

/* Shared card surface for these pages. */
body .webk-cs-wrapper .webk-cs-card,
body .webk-about-wrapper .webk-team-card,
body .webk-posts .elementor-post .elementor-post__card {
	position: relative;
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 24px !important;
	background:
		radial-gradient(110% 70% at 100% 0%, rgba(63, 25, 155, 0.22), transparent 55%),
		linear-gradient(160deg, #161722 0%, #0e0f15 100%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.35) !important;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

body .webk-cs-wrapper .webk-cs-card::before,
body .webk-about-wrapper .webk-team-card::before,
body .webk-posts .elementor-post .elementor-post__card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 3;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.55), rgba(63, 25, 155, 0.45) 35%, transparent 65%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

body .webk-cs-wrapper .webk-cs-card:hover,
body .webk-about-wrapper .webk-team-card:hover,
body .webk-posts .elementor-post .elementor-post__card:hover {
	transform: translateY(-8px);
	border-color: rgba(61, 227, 194, 0.3) !important;
	box-shadow: 0 28px 56px rgba(0, 0, 0, 0.5), 0 0 40px rgba(61, 227, 194, 0.08) !important;
}

/* --- Case Studies ------------------------------------------------------- */
body .webk-cs-stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 180px);
	margin-top: 44px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.03);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body .webk-cs-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 18px;
}

body .webk-cs-stat + .webk-cs-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.07);
}

body .webk-cs-stat strong {
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: Oswald, Inter, sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

body .webk-cs-stat span {
	color: #8f929e;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

body .webk-cs-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 44px;
}

body .webk-cs-filter {
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.04);
	color: #d4d6dd;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

body .webk-cs-filter:hover {
	border-color: rgba(61, 227, 194, 0.4);
	color: #fff;
}

body .webk-cs-filter.is-active {
	border-color: transparent;
	background: var(--webk-cta-gradient);
	box-shadow: 0 8px 20px rgba(61, 227, 194, 0.3);
	color: var(--webk-ink);
}

body .webk-cs-filter:focus-visible {
	outline: 2px solid var(--webk-mint);
	outline-offset: 3px;
}

body .webk-cs-wrapper .webk-cs-card.is-filtered-out {
	display: none;
}

body .webk-cs-wrapper .webk-cs-card {
	overflow: hidden;
}

body .webk-cs-wrapper .webk-cs-img-wrap {
	position: relative;
	height: 320px;
}

body .webk-cs-wrapper .webk-cs-img-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(8, 7, 15, 0.85));
	pointer-events: none;
}

body .webk-cs-wrapper .webk-cs-card:hover .webk-cs-img {
	transform: scale(1.08);
}

body .webk-cs-wrapper .webk-cs-img-wrap .webk-cs-tag {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(11, 12, 19, 0.55);
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

body .webk-cs-result {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 16px;
	background: var(--webk-cta-gradient);
	box-shadow: 0 14px 30px rgba(61, 227, 194, 0.35);
	color: var(--webk-ink);
}

body .webk-cs-result strong {
	font-family: Oswald, Inter, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

body .webk-cs-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

body .webk-cs-label::before {
	content: "";
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--webk-mint), #8b6cff);
}

body .webk-cs-wrapper .webk-cs-content {
	padding: 30px 36px 36px;
}

body .webk-cs-wrapper .webk-cs-heading {
	transition: color 0.3s ease;
}

body .webk-cs-wrapper .webk-cs-card:hover .webk-cs-heading {
	color: var(--webk-mint) !important;
}

body .webk-cs-wrapper .webk-cs-desc {
	color: #a9adbb;
	line-height: 1.65;
}

body .webk-cs-wrapper .webk-cs-link {
	display: inline-flex;
	color: var(--webk-mint);
}

body .webk-cs-wrapper .webk-cs-link i {
	transition: transform 0.3s ease;
}

body .webk-cs-wrapper .webk-cs-link:hover i,
body .webk-cs-wrapper .webk-cs-card:hover .webk-cs-link i {
	transform: translateX(5px);
}

/* --- About -------------------------------------------------------------- */
body .webk-about-wrapper .webk-mission-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px;
	border: 1px solid rgba(61, 227, 194, 0.3);
	border-radius: 30px;
	background: rgba(61, 227, 194, 0.08);
	font-size: 12px;
	letter-spacing: 1.5px;
}

body .webk-about-wrapper .webk-mission-heading {
	font-size: clamp(32px, 3.8vw, 48px);
	line-height: 1.08;
}

body .webk-mission-visual {
	position: relative;
	flex: 1;
	min-width: 0;
	perspective: 1400px;
}

body .webk-about-wrapper .webk-mission-img-wrap {
	padding: 10px;
	overflow: visible;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(61, 227, 194, 0.3), rgba(63, 25, 155, 0.45) 50%, rgba(4, 126, 123, 0.3));
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(63, 25, 155, 0.3);
	transform: rotateY(8deg);
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .webk-mission-visual:hover .webk-mission-img-wrap {
	transform: none;
}

body .webk-about-wrapper .webk-mission-img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 22px;
}

body .webk-mission-badge {
	position: absolute;
	right: -24px;
	bottom: -26px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 18px;
	background: var(--webk-cta-gradient);
	box-shadow: 0 24px 50px rgba(61, 227, 194, 0.3);
	color: var(--webk-ink);
	animation: webk-float 6s ease-in-out infinite;
}

body .webk-mission-badge i {
	font-size: 22px;
}

body .webk-mission-badge strong {
	display: block;
	font-size: 16px;
	font-weight: 800;
}

body .webk-mission-badge small {
	display: block;
	color: rgba(11, 12, 19, 0.7);
	font-size: 12px;
	font-weight: 600;
}

body .webk-about-wrapper .webk-mission-text {
	color: #a9adbb;
	line-height: 1.7;
}

body .webk-about-wrapper .webk-team-grid {
	margin-top: 50px;
}

body .webk-about-wrapper .webk-team-card {
	padding: 40px 30px 32px;
}

body .webk-team-ring {
	display: inline-grid;
	place-items: center;
	margin-bottom: 22px;
	padding: 4px;
	border-radius: 50%;
	background: conic-gradient(from 180deg, var(--webk-mint), #8b6cff, var(--webk-teal), var(--webk-mint));
	box-shadow: 0 0 30px rgba(61, 227, 194, 0.2);
	transition: box-shadow 0.4s ease, transform 0.5s ease;
}

body .webk-about-wrapper .webk-team-ring .webk-team-img {
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 50% !important;
	margin: 0;
	border: 4px solid #0f1018;
}

body .webk-about-wrapper .webk-team-card:hover .webk-team-ring {
	box-shadow: 0 0 44px rgba(61, 227, 194, 0.45);
	transform: scale(1.05);
}

body .webk-about-wrapper .webk-team-role {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 20px;
	background: rgba(61, 227, 194, 0.1);
	font-size: 13px;
}

body .webk-about-wrapper .webk-team-social {
	margin-top: 4px;
}

body .webk-about-wrapper .webk-team-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	color: #c5c6c7;
	transition: all 0.3s ease;
}

body .webk-about-wrapper .webk-team-social a:hover {
	border-color: transparent;
	background: var(--webk-cta-gradient);
	color: var(--webk-ink);
	transform: translateY(-3px);
}

/* --- Blog --------------------------------------------------------------- */
body .webk-blog-wrapper .webk-blog-hero::before {
	display: none;
}

body .webk-posts {
	padding-bottom: 60px;
}

body .webk-posts-head {
	margin-bottom: 26px;
}

body .webk-posts .elementor-post .elementor-post__card {
	overflow: hidden;
}

body .webk-posts .elementor-post__text {
	padding: 30px 30px 10px !important;
}

body .webk-post-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 5px 12px;
	border-radius: 20px;
	background: rgba(61, 227, 194, 0.1);
	color: var(--webk-mint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

body .webk-posts .elementor-post__title,
body .webk-posts .elementor-post__title a {
	color: #fff !important;
	font-family: Inter, sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	text-decoration: none;
	transition: color 0.3s ease;
}

body .webk-posts .elementor-post__card:hover .elementor-post__title a {
	color: var(--webk-mint) !important;
}

body .webk-posts .elementor-post__read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	color: var(--webk-mint) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px;
	text-transform: none !important;
}

body .webk-posts .elementor-post__read-more i {
	transition: transform 0.3s ease;
}

body .webk-posts .elementor-post__card:hover .elementor-post__read-more i {
	transform: translateX(5px);
}

body .webk-posts .elementor-post__meta-data {
	padding: 16px 30px 22px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
	color: #8f929e !important;
	font-size: 13px !important;
}

body .webk-posts .elementor-post-date i {
	margin-right: 8px;
	color: var(--webk-mint);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 992px) {
	body .webk-about-wrapper .webk-mission-img-wrap {
		transform: none;
	}
	body .webk-mission-visual {
		width: 100%;
	}
	body .webk-mission-badge {
		right: 16px;
	}
	body .webk-about-wrapper .webk-team-grid > .webk-team-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 15px);
	}
}

@media (max-width: 768px) {
	body .webk-page-hero {
		padding-top: 60px;
		padding-bottom: 50px;
	}
	body .webk-cs-stats {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-columns: auto;
		width: 100%;
	}
	body .webk-cs-stat {
		padding: 16px 10px;
	}
	body .webk-cs-stat strong {
		font-size: 26px;
	}
	body .webk-cs-stat span {
		font-size: 11px;
		letter-spacing: 0;
	}
	body .webk-cs-filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-left: -5%;
		margin-right: -5%;
		padding: 0 5% 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	body .webk-cs-filters::-webkit-scrollbar {
		display: none;
	}
	body .webk-cs-filter {
		flex-shrink: 0;
	}
	body .webk-cs-wrapper .webk-cs-img-wrap {
		height: 230px;
	}
	body .webk-cs-wrapper .webk-cs-content {
		padding: 24px 24px 28px;
	}
	body .webk-about-wrapper .webk-team-grid > .webk-team-card:last-child:nth-child(odd) {
		width: 100%;
	}
	body .webk-mission-badge {
		right: 12px;
		bottom: -20px;
		padding: 12px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .webk-mission-badge {
		animation: none;
	}
	body .webk-about-wrapper .webk-mission-img-wrap {
		transform: none;
	}
}

/* Elementor's "hover gradient" posts skin paints titles/links with a
   background-clip gradient + transparent text fill; neutralise it. */
body .webk-posts .elementor-post__title a,
body .webk-posts .elementor-post__read-more {
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
}

body .webk-posts .elementor-post__read-more {
	gap: 8px !important;
}

/* Posts sit in their own Elementor container; match the hero background. */
body .webk-posts-section {
	background: linear-gradient(to right, #000000, #0c042d);
}

body .webk-posts .elementor-post__read-more {
	display: inline-flex !important;
	align-items: center;
}

body .webk-posts .elementor-post__meta-data,
body .webk-posts .elementor-post-date {
	font-family: Inter, sans-serif !important;
}

/* Quote popup on very narrow phones (≤400px, e.g. 320px wide).
   The reCAPTCHA iframe is a fixed 304px, which forced the single grid
   column (and everything in it) wider than the popup. Let the column
   shrink, tighten padding and scale the reCAPTCHA to fit. */
@media (max-width: 768px) {
	body .webk-quote-modal .dialog-message {
		grid-template-columns: minmax(0, 1fr);
	}
	body .webk-quote-modal .dialog-message > *,
	body .webk-quote-modal .e-con,
	body .webk-quote-modal .e-con-inner,
	body .webk-quote-modal .elementor-widget,
	body .webk-quote-modal .elementor-form,
	body .webk-quote-modal .elementor-form-fields-wrapper {
		min-width: 0;
	}
}

@media (max-width: 400px) {
	body .webk-quote-modal .dialog-widget-content {
		width: calc(100vw - 24px) !important;
	}
	body .webk-quote-aside {
		padding: 30px 20px 24px;
	}
	body .webk-quote-modal .webk-quote-title {
		padding-right: 44px;
		font-size: 26px;
	}
	body .webk-quote-modal .elementor-location-header {
		padding: 24px 18px;
	}
	body .webk-quote-modal .elementor-widget-heading .elementor-heading-title {
		font-size: 22px !important;
	}
	body .webk-quote-modal .elementor-field-type-recaptcha .elementor-field {
		height: calc(78px * var(--webk-rc-scale, 0.82));
		overflow: visible;
	}
	body .webk-quote-modal .elementor-g-recaptcha {
		transform: scale(var(--webk-rc-scale, 0.82));
		transform-origin: left top;
	}
}

@media (max-width: 340px) {
	body .webk-quote-modal {
		--webk-rc-scale: 0.82;
	}
}

@media (min-width: 341px) and (max-width: 400px) {
	body .webk-quote-modal {
		--webk-rc-scale: 0.92;
	}
}

@media (max-width: 400px) {
	/* The scaled reCAPTCHA keeps its 304px layout box; clip the wrapper to
	   the column so it can't create sideways scroll inside the popup. */
	body .webk-quote-modal .elementor-field-type-recaptcha .elementor-field {
		max-width: 100%;
		overflow: hidden !important;
	}
	body .webk-quote-modal .dialog-widget-content {
		overflow-x: hidden !important;
	}
}

/* Home hero: extra outer border on the "Live campaign" card only (not the
   main image). A gradient ring 5px outside the card's own border with a
   light beam circling it; reuses the pricing beam keyframes. */
body .webk-hero-chip-live::before {
	content: "";
	position: absolute;
	inset: -6px;
	z-index: -1;
	padding: 1.5px;
	border-radius: 24px;
	background:
		conic-gradient(from var(--webk-beam), transparent 0deg 250deg, var(--webk-mint) 310deg, #8b6cff 345deg, transparent 360deg),
		linear-gradient(135deg, rgba(61, 227, 194, 0.45), rgba(139, 108, 255, 0.35), rgba(4, 126, 123, 0.45));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	filter: drop-shadow(0 0 6px rgba(61, 227, 194, 0.45));
	pointer-events: none;
	animation: webk-beam-spin 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	body .webk-hero-chip-live::before {
		animation: none;
	}
}