/*
 * Site chrome: announcement bar, sticky glass header, mega-menu spotlights.
 * See inc/chrome.php. Everything is scoped under .prosyo-theme so it wins over
 * the Webflow export without !important, and uses the template's own tokens.
 */

/* ------------------------------------------------------------------
 * Sticky host
 *
 * The header block renders inside the header template part, a direct child
 * of .wp-site-blocks, so that wrapper is what sticks. Its negative top equals
 * the announcement bar's height: the bar scrolls away and the header stays.
 * ---------------------------------------------------------------- */
.prosyo-theme .wp-block-template-part:has(> .prosyo-chrome),
.prosyo-theme .prosyo-chrome-host {
	position: sticky;
	top: calc(var(--chrome-bar, 0px) * -1);
	z-index: 99990;
}

.prosyo-theme.admin-bar .wp-block-template-part:has(> .prosyo-chrome),
.prosyo-theme.admin-bar .prosyo-chrome-host {
	top: calc(32px - var(--chrome-bar, 0px));
}

@media screen and (max-width: 782px) {
	.prosyo-theme.admin-bar .wp-block-template-part:has(> .prosyo-chrome),
	.prosyo-theme.admin-bar .prosyo-chrome-host {
		top: calc(var(--chrome-bar, 0px) * -1);
	}
}

html {
	scroll-padding-top: 96px;
}

.prosyo-theme .prosyo-chrome {
	position: relative;
}

/* ------------------------------------------------------------------
 * Header states
 * ---------------------------------------------------------------- */
/*
 * The export ships a Webflow scroll interaction on this element that slides
 * the bar up out of view on the way down and paints it solid (inline
 * transform and background-color). The bar is now meant to stay put with the
 * glass layer below, so the inline values are overridden here.
 */
.prosyo-theme .prosyo-chrome .header-section {
	position: relative;
	top: auto;
	transform: none !important;
	background-color: transparent !important;
	transition: background-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}

.prosyo-theme .prosyo-chrome .header-section::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Webflow's .w-nav clearfix makes this display:table, which ignores inset. */
	display: block;
	width: 100%;
	height: 100%;
	grid-area: auto;
	z-index: -1;
	opacity: 0;
	background:
		radial-gradient(60% 140% at 50% -40%, rgba(134, 58, 255, .18), transparent 70%),
		rgba(3, 0, 20, .72);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	transition: opacity .35s ease;
	pointer-events: none;
}

.prosyo-theme .prosyo-chrome .header-block {
	transition: padding .35s cubic-bezier(.2, .75, .2, 1);
}

.prosyo-theme .prosyo-chrome .header-divider {
	transition: opacity .35s ease;
}

.prosyo-theme .prosyo-chrome.is-scrolled .header-section::before {
	opacity: 1;
}

.prosyo-theme .prosyo-chrome.is-scrolled .header-section {
	box-shadow: 0 12px 40px -18px rgba(0, 0, 0, .7);
}

@media screen and (min-width: 992px) {
	.prosyo-theme .prosyo-chrome.is-scrolled .header-block {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/*
	 * Mega panels centre on the header container, not on the pill: the pill
	 * shifts with the logo, language and button widths, and a panel centred on
	 * it drifts off the page centre. The panel starts at the pill's bottom edge
	 * (the pill is vertically centred, so 50% + half its height), and its top
	 * padding is the hover bridge from the toggle - correct in both the tall
	 * and the compact bar without any measuring of the scroll state.
	 */
	.prosyo-theme .prosyo-chrome .header-block {
		position: relative;
	}

	.prosyo-theme .prosyo-chrome .header-navigation {
		position: static;
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-panel {
		top: calc(50% + var(--chrome-nav-h, 50px) / 2);
		padding-top: 12px;
	}

	.prosyo-theme .prosyo-chrome .header-nav-link,
	.prosyo-theme .prosyo-chrome .header-dropdown-text {
		white-space: nowrap;
	}
}

/* A thin progress line that fills as the page is read. */
.prosyo-theme .prosyo-chrome .chrome-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	transform-origin: 0 50%;
	transform: scaleX(var(--chrome-read, 0));
	background: linear-gradient(90deg, var(--tertiary, #7350ff), #8b5cf6 55%, #a78bfa);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.prosyo-theme .prosyo-chrome.is-scrolled .chrome-progress {
	opacity: .9;
}

/* Header CTA: a slow sheen so the one action in the bar is the one seen. */
.prosyo-theme .prosyo-chrome .header-button .card-primary-button,
.prosyo-theme .prosyo-chrome .header-button a {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.prosyo-theme .prosyo-chrome .header-button .card-primary-button::after,
.prosyo-theme .prosyo-chrome .header-button > a::after {
	content: "";
	position: absolute;
	top: -50%;
	bottom: -50%;
	left: -60%;
	width: 40%;
	z-index: 1;
	transform: rotate(18deg) translateX(-160%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
	animation: chrome-sheen 6s ease-in-out 2.5s infinite;
	pointer-events: none;
}

@keyframes chrome-sheen {
	0%, 70% { transform: rotate(18deg) translateX(-160%); }
	100% { transform: rotate(18deg) translateX(520%); }
}

/* ------------------------------------------------------------------
 * Announcement bar
 * ---------------------------------------------------------------- */
.prosyo-theme .prosyo-announce {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 6px 48px;
	overflow: visible;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	background:
		linear-gradient(90deg, rgba(115, 80, 255, .16), rgba(139, 92, 246, .22) 50%, rgba(124, 92, 255, .14)),
		#07031a;
	color: #ece4fb;
	font-size: 13.5px;
	line-height: 1.4;
	letter-spacing: -.005em;
}

.prosyo-announce-closed .prosyo-theme .prosyo-announce,
html.prosyo-announce-closed .prosyo-announce {
	display: none;
}

.prosyo-theme .prosyo-announce-inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	text-align: center;
}

.prosyo-theme .prosyo-announce-glow {
	position: absolute;
	inset: -10px -40px;
	z-index: -1;
	background: radial-gradient(50% 100% at 50% 50%, rgba(139, 92, 246, .25), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}

.prosyo-theme .prosyo-announce-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 3px 10px 3px 8px;
	border: 1px solid rgba(205, 191, 255, .28);
	border-radius: 99px;
	background: rgba(255, 255, 255, .06);
	color: #cdbfff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}

.prosyo-theme .prosyo-announce-dot {
	position: relative;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
	animation: chrome-pulse 2.2s ease-out infinite;
}

@keyframes chrome-pulse {
	0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
	80%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}

.prosyo-theme .prosyo-announce-text strong {
	background: linear-gradient(90deg, #fff, #cdbfff 40%, #a78bfa);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 700;
}

.prosyo-theme .prosyo-announce-code {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border: 1px dashed rgba(205, 191, 255, .5);
	border-radius: 7px;
	background: rgba(255, 255, 255, .05);
	color: #fff;
	font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .06em;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.prosyo-theme .prosyo-announce-code:hover,
.prosyo-theme .prosyo-announce-code:focus-visible {
	border-color: #cdbfff;
	background: rgba(139, 92, 246, .18);
}

.prosyo-theme .prosyo-announce-code.is-copied::after {
	content: attr(data-copied);
	margin-left: 2px;
	color: #4ade80;
	font-family: Inter, sans-serif;
	letter-spacing: 0;
}

/* The "i": a real button, so the note opens on hover, focus and tap. */
.prosyo-theme .prosyo-announce-info {
	position: relative;
	display: inline-flex;
}

.prosyo-theme .prosyo-announce-i {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(236, 228, 251, .7);
	cursor: help;
	transition: color .2s ease, background-color .2s ease;
}

.prosyo-theme .prosyo-announce-i:hover,
.prosyo-theme .prosyo-announce-i:focus-visible,
.prosyo-theme .prosyo-announce-info.is-open .prosyo-announce-i {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.prosyo-theme .prosyo-announce-tip {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	z-index: 100000;
	width: max-content;
	max-width: min(300px, calc(100vw - 32px));
	padding: 10px 14px;
	border: 1px solid rgba(205, 191, 255, .22);
	border-radius: 12px;
	background: #120a2b;
	box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
	color: #e8e0f6;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition: opacity .18s ease, transform .2s ease, visibility .18s ease;
	pointer-events: none;
}

.prosyo-theme .prosyo-announce-tip::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 1px solid rgba(205, 191, 255, .22);
	border-left: 1px solid rgba(205, 191, 255, .22);
	background: #120a2b;
	transform: translateX(-50%) rotate(45deg);
}

.prosyo-theme .prosyo-announce-info:hover .prosyo-announce-tip,
.prosyo-theme .prosyo-announce-i:focus-visible + .prosyo-announce-tip,
.prosyo-theme .prosyo-announce-info.is-open .prosyo-announce-tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.prosyo-theme .prosyo-announce-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	transition: border-color .2s ease, gap .2s ease;
}

.prosyo-theme .prosyo-announce-link:hover,
.prosyo-theme .prosyo-announce-link:focus-visible {
	gap: 9px;
	border-color: #fff;
	color: #fff;
}

.prosyo-theme .prosyo-announce-close {
	position: absolute;
	top: 50%;
	right: 12px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: rgba(236, 228, 251, .6);
	transform: translateY(-50%);
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.prosyo-theme .prosyo-announce-close:hover,
.prosyo-theme .prosyo-announce-close:focus-visible {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

@media screen and (max-width: 767px) {
	.prosyo-theme .prosyo-announce {
		padding: 7px 40px 7px 14px;
		font-size: 12.5px;
	}

	.prosyo-theme .prosyo-announce-inner {
		justify-content: flex-start;
		text-align: left;
		gap: 4px 8px;
	}

	.prosyo-theme .prosyo-announce-badge {
		display: none;
	}

	/* On a phone the note spans the bar, anchored to the bar itself, so it
	 * can never run past the screen edge whatever line the "i" lands on. */
	.prosyo-theme .prosyo-announce-info {
		position: static;
	}

	.prosyo-theme .prosyo-announce-tip {
		top: calc(100% + 8px);
		left: 14px;
		right: 14px;
		width: auto;
		max-width: none;
		transform: translateY(-4px);
	}

	.prosyo-theme .prosyo-announce-tip::before {
		display: none;
	}

	.prosyo-theme .prosyo-announce-info:hover .prosyo-announce-tip,
	.prosyo-theme .prosyo-announce-i:focus-visible + .prosyo-announce-tip,
	.prosyo-theme .prosyo-announce-info.is-open .prosyo-announce-tip {
		transform: none;
	}

	.prosyo-theme .prosyo-announce-close {
		right: 6px;
	}
}

/* ------------------------------------------------------------------
 * Mega menu: panel, cards, spotlight, footer strip
 * ---------------------------------------------------------------- */
@media screen and (min-width: 992px) {
	.prosyo-theme .prosyo-chrome .prosyo-mega-inner {
		position: relative;
		overflow: hidden auto;
		padding: 0;
		gap: 0;
		border-color: rgba(255, 255, 255, .09);
		background:
			radial-gradient(70% 60% at 100% 0%, rgba(134, 58, 255, .13), transparent 60%),
			radial-gradient(50% 50% at 0% 100%, rgba(124, 92, 255, .06), transparent 60%),
			rgba(8, 5, 25, .97);
		box-shadow:
			0 40px 90px -20px rgba(0, 0, 0, .75),
			0 0 0 1px rgba(0, 0, 0, .35),
			inset 0 1px 0 rgba(255, 255, 255, .06);
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-inner.has-spot {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-rows {
		display: grid;
		align-content: start;
		gap: 20px;
		padding: 26px 26px 22px;
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-panel.is-content .prosyo-mega-inner.has-spot {
		grid-template-columns: minmax(0, 1fr) 270px;
	}

	/* Stagger the content in as the panel opens. */
	.prosyo-theme .prosyo-chrome .prosyo-mega-panel .prosyo-mega-column,
	.prosyo-theme .prosyo-chrome .prosyo-mega-panel .pm-spot {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .35s ease, transform .45s cubic-bezier(.2, .75, .2, 1);
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-menu.is-open .prosyo-mega-column,
	.prosyo-theme .prosyo-chrome .prosyo-mega-panel.w--open .prosyo-mega-column,
	.prosyo-theme .prosyo-chrome .prosyo-mega-menu.is-open .pm-spot,
	.prosyo-theme .prosyo-chrome .prosyo-mega-panel.w--open .pm-spot {
		opacity: 1;
		transform: none;
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-column:nth-child(2) { transition-delay: .04s; }
	.prosyo-theme .prosyo-chrome .prosyo-mega-column:nth-child(3) { transition-delay: .08s; }
	.prosyo-theme .prosyo-chrome .prosyo-mega-column:nth-child(4) { transition-delay: .12s; }
	.prosyo-theme .prosyo-chrome .pm-spot { transition-delay: .1s; }

	.prosyo-theme .prosyo-chrome .prosyo-mega-row:not(.columns-1) .prosyo-mega-column + .prosyo-mega-column {
		position: relative;
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-row:not(.columns-1) .prosyo-mega-column + .prosyo-mega-column::before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		left: -11px;
		width: 1px;
		background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .07) 20%, rgba(255, 255, 255, .07) 80%, transparent);
	}
}

.prosyo-theme .prosyo-chrome .prosyo-mega-column-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #a29fb0;
}

.prosyo-theme .prosyo-chrome .prosyo-mega-column-title::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #8b5cf6;
	box-shadow: 0 0 10px #8b5cf6;
}

.prosyo-theme .prosyo-chrome .prosyo-menu-card {
	position: relative;
	grid-template-columns: auto minmax(0, 1fr) auto;
	border-color: transparent;
	background: transparent;
	transition: background-color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2, .75, .2, 1);
}

.prosyo-theme .prosyo-chrome .prosyo-menu-card::after {
	content: "";
	align-self: center;
	width: 14px;
	height: 14px;
	opacity: 0;
	transform: translateX(-6px);
	background: currentColor;
	color: #cdbfff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.7 2.3a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 1 1-1.4-1.4L12 9H2a1 1 0 1 1 0-2h10L8.7 3.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.7 2.3a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 1 1-1.4-1.4L12 9H2a1 1 0 1 1 0-2h10L8.7 3.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity .2s ease, transform .25s ease;
}

.prosyo-theme .prosyo-chrome .prosyo-menu-card:hover,
.prosyo-theme .prosyo-chrome .prosyo-menu-card:focus-visible {
	border-color: rgba(139, 92, 246, .22);
	background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(115, 80, 255, .04));
	transform: none;
}

.prosyo-theme .prosyo-chrome .prosyo-menu-card:hover::after,
.prosyo-theme .prosyo-chrome .prosyo-menu-card:focus-visible::after {
	opacity: 1;
	transform: none;
}

.prosyo-theme .prosyo-chrome .prosyo-menu-card-icon {
	position: relative;
	transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .3s cubic-bezier(.2, .75, .2, 1);
}

.prosyo-theme .prosyo-chrome .prosyo-menu-card:hover .prosyo-menu-card-icon,
.prosyo-theme .prosyo-chrome .prosyo-menu-card:focus-visible .prosyo-menu-card-icon {
	border-color: rgba(139, 92, 246, .5);
	background: rgba(139, 92, 246, .16);
	box-shadow: 0 0 22px -4px rgba(139, 92, 246, .65);
	transform: translateY(-1px) scale(1.04);
}

.prosyo-theme .prosyo-chrome .prosyo-menu-card:hover .prosyo-menu-card-title {
	color: #fff;
}

.prosyo-theme .prosyo-chrome .prosyo-menu-card:hover .prosyo-menu-card-description {
	color: #a9a6b6;
}

/* Spotlight card */
.prosyo-theme .pm-spot {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 12px 12px 12px 0;
	padding: 20px;
	overflow: hidden;
	border: 1px solid rgba(205, 191, 255, .14);
	border-radius: 16px;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(139, 92, 246, .32), transparent 55%),
		radial-gradient(90% 70% at 0% 100%, rgba(115, 80, 255, .25), transparent 60%),
		#0f0826;
	color: var(--text, #f3f3f3);
	text-decoration: none;
	isolation: isolate;
	transition: border-color .3s ease, transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s ease;
}

.prosyo-theme .pm-spot::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000, transparent 75%);
	mask-image: radial-gradient(80% 70% at 70% 20%, #000, transparent 75%);
}

.prosyo-theme .pm-spot:hover,
.prosyo-theme .pm-spot:focus-visible {
	border-color: rgba(205, 191, 255, .35);
	box-shadow: 0 20px 50px -20px rgba(139, 92, 246, .55);
	color: var(--text, #f3f3f3);
}

.prosyo-theme .pm-spot-copy {
	display: grid;
	gap: 6px;
	margin-top: auto;
}

.prosyo-theme .pm-spot-eyebrow {
	justify-self: start;
	padding: 2px 9px;
	border-radius: 99px;
	background: rgba(205, 191, 255, .12);
	color: #cdbfff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.prosyo-theme .pm-spot-title {
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.02em;
}

.prosyo-theme .pm-spot-text {
	color: #aba7bb;
	font-size: 12.5px;
	line-height: 1.5;
}

.prosyo-theme .pm-spot-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 6px;
	color: #cdbfff;
	font-size: 13px;
	font-weight: 600;
	transition: gap .25s ease, color .25s ease;
}

.prosyo-theme .pm-spot:hover .pm-spot-cta {
	gap: 11px;
	color: #fff;
}

/* Spotlight visuals */
.prosyo-theme .pm-spot-visual {
	position: relative;
	display: block;
	min-height: 112px;
}

.prosyo-theme .pm-spot-avatar {
	position: relative;
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	padding: 2px;
	background: conic-gradient(from 180deg, var(--tertiary, #7350ff), #8b5cf6, #a78bfa, var(--tertiary, #7350ff));
	animation: pm-spin 8s linear infinite;
}

.prosyo-theme .pm-spot-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border: 2px solid #0f0826;
	border-radius: 50%;
	object-fit: cover;
	animation: pm-spin 8s linear infinite reverse;
}

.prosyo-theme .pm-spot-live {
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 12px;
	height: 12px;
	border: 2px solid #0f0826;
	border-radius: 50%;
	background: #4ade80;
	animation: pm-spin 8s linear infinite reverse;
}

@keyframes pm-spin {
	to { transform: rotate(360deg); }
}

.prosyo-theme .pm-spot-bubble {
	position: absolute;
	display: block;
	max-width: 190px;
	padding: 8px 11px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #ded8ea;
	font-size: 11px;
	line-height: 1.4;
	animation: pm-float 5s ease-in-out infinite;
}

.prosyo-theme .is-penny .pm-spot-bubble.is-1 {
	top: 0;
	right: 0;
	border-top-left-radius: 4px;
}

.prosyo-theme .is-penny .pm-spot-bubble.is-2 {
	top: 66px;
	right: 22px;
	padding-left: 24px;
	animation-delay: -2.5s;
}

.prosyo-theme .is-penny .pm-spot-bubble.is-2::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	transform: translateY(-50%);
}

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

.prosyo-theme .is-demo .pm-spot-slots {
	position: absolute;
	top: 6px;
	right: 0;
	display: grid;
	gap: 6px;
	width: 120px;
}

.prosyo-theme .is-demo .pm-spot-slots span {
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	background: rgba(255, 255, 255, .04);
	color: #cfc8de;
	font-size: 11px;
	text-align: center;
}

.prosyo-theme .is-demo .pm-spot-slots span:first-child {
	border: 0;
	background: none;
	color: #cdbfff;
	font-weight: 600;
	text-align: left;
}

.prosyo-theme .is-demo .pm-spot-slots .is-on {
	border-color: rgba(139, 92, 246, .6);
	background: linear-gradient(135deg, rgba(139, 92, 246, .45), rgba(115, 80, 255, .35));
	color: #fff;
	box-shadow: 0 0 20px -6px rgba(139, 92, 246, .8);
}

.prosyo-theme .is-chat .pm-spot-bubble {
	position: relative;
	animation: none;
}

.prosyo-theme .is-chat .pm-spot-bubble.is-me {
	max-width: 220px;
	margin-left: auto;
	border-bottom-right-radius: 4px;
	background: linear-gradient(135deg, rgba(139, 92, 246, .4), rgba(115, 80, 255, .3));
	color: #fff;
}

.prosyo-theme .is-chat .pm-spot-bubble.is-ai {
	display: inline-flex;
	gap: 4px;
	margin-top: 10px;
	padding: 10px 12px;
	border-bottom-left-radius: 4px;
}

.prosyo-theme .is-chat .pm-spot-bubble.is-ai i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #cdbfff;
	animation: pm-typing 1.2s ease-in-out infinite;
}

.prosyo-theme .is-chat .pm-spot-bubble.is-ai i:nth-child(2) { animation-delay: .15s; }
.prosyo-theme .is-chat .pm-spot-bubble.is-ai i:nth-child(3) { animation-delay: .3s; }

@keyframes pm-typing {
	0%, 60%, 100% { opacity: .3; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-3px); }
}

.prosyo-theme .is-tools {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 7px;
}

.prosyo-theme .pm-spot-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	background: rgba(255, 255, 255, .04);
	color: #ded8ea;
	font-size: 11.5px;
	font-weight: 600;
}

.prosyo-theme .pm-spot-check b {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #4ade80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23052e16' d='M6.6 11.4 3.2 8l1.1-1.1 2.3 2.3 5.1-5.1L12.8 5z'/%3E%3C/svg%3E") center / 11px no-repeat;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
	transition-delay: calc(.25s + var(--i, 0) * .12s);
}

.prosyo-theme .prosyo-mega-menu.is-open .pm-spot-check b,
.prosyo-theme .prosyo-mega-panel.w--open .pm-spot-check b {
	opacity: 1;
	transform: none;
}

/* Footer strip */
.prosyo-theme .pm-foot {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding: 14px 26px;
	border-top: 1px solid rgba(255, 255, 255, .07);
	background: rgba(255, 255, 255, .025);
	font-size: 12.5px;
}

.prosyo-theme .pm-foot-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	color: #a29fb0;
}

.prosyo-theme .pm-foot-facts > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.prosyo-theme .pm-foot-facts > span::before {
	content: "";
	width: 12px;
	height: 12px;
	background: #4ade80;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.6 11.4 3.2 8l1.1-1.1 2.3 2.3 5.1-5.1L12.8 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.6 11.4 3.2 8l1.1-1.1 2.3 2.3 5.1-5.1L12.8 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.prosyo-theme .pm-foot-facts .prosyo-price {
	color: #fff;
	font-weight: 600;
}

.prosyo-theme .pm-foot-links {
	display: flex;
	align-items: center;
	gap: 18px;
}

.prosyo-theme .pm-foot-links a {
	color: #d8d2e6;
	font-weight: 500;
	text-decoration: none;
	transition: color .2s ease;
}

.prosyo-theme .pm-foot-links a:hover,
.prosyo-theme .pm-foot-links a:focus-visible {
	color: #fff;
}

.prosyo-theme .pm-foot-links a.is-primary {
	padding: 7px 14px;
	border: 1px solid rgba(139, 92, 246, .55);
	border-radius: 9px;
	background: linear-gradient(180deg, #7a2bd6, #4b1690);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 18px -6px rgba(139, 92, 246, .7);
	transition: filter .2s ease, transform .2s ease;
}

.prosyo-theme .pm-foot-links a.is-primary:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------
 * Collapsed (tablet / phone) menu
 * ---------------------------------------------------------------- */
@media screen and (max-width: 991px) {
	/*
	 * The header is sticky now, so the open menu no longer needs the
	 * pin-to-viewport workaround in content-polish.css (which also lifted the
	 * header over the offer bar). The menu scrolls inside the space left
	 * below the header's actual bottom edge, measured as it opens.
	 */
	.prosyo-theme .prosyo-chrome .header-section:has(.w-nav-button.w--open) {
		position: relative;
		top: auto;
	}

	.prosyo-theme .prosyo-chrome-host:has(.w-nav-button.w--open),
	.prosyo-theme .wp-block-template-part:has(> .prosyo-chrome .w-nav-button.w--open) {
		min-height: 0;
	}

	.prosyo-theme .prosyo-chrome .header-section:has(.w-nav-button.w--open) .w-nav-overlay,
	.prosyo-theme .prosyo-chrome .w-nav-overlay {
		max-height: calc(100dvh - var(--chrome-menu-top, 72px));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.prosyo-theme .prosyo-chrome .header-section:has(.w-nav-button.w--open)::before {
		opacity: 1;
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-inner.has-spot {
		grid-template-columns: minmax(0, 1fr);
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-rows {
		display: grid;
		gap: 18px;
	}

	.prosyo-theme .pm-spot {
		flex-direction: row;
		align-items: center;
		margin: 6px 0 0;
		padding: 14px;
	}

	.prosyo-theme .pm-spot-visual,
	.prosyo-theme .pm-spot-text {
		display: none;
	}

	.prosyo-theme .pm-spot-copy {
		gap: 4px;
	}

	.prosyo-theme .pm-spot-title {
		font-size: 15px;
	}

	.prosyo-theme .pm-foot {
		margin: 6px 0 0;
		padding: 12px 0 0;
		border-top: 1px solid rgba(255, 255, 255, .07);
		background: none;
	}

	.prosyo-theme .pm-foot-links {
		display: none;
	}

	.prosyo-theme .prosyo-chrome .prosyo-menu-card::after {
		display: none;
	}

	.prosyo-theme .prosyo-chrome .prosyo-menu-card {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.prosyo-theme .pm-spot-avatar,
	.prosyo-theme .pm-spot-avatar img,
	.prosyo-theme .pm-spot-live,
	.prosyo-theme .pm-spot-bubble,
	.prosyo-theme .prosyo-announce-dot,
	.prosyo-theme .prosyo-chrome .header-button .card-primary-button::after,
	.prosyo-theme .prosyo-chrome .header-button > a::after {
		animation: none;
	}
}

/* Compact panels: a short list beside the spotlight. */
@media screen and (min-width: 992px) {
	.prosyo-theme .prosyo-chrome .prosyo-mega-panel.is-compact {
		width: min(780px, calc(100vw - 48px));
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-panel.is-compact .prosyo-mega-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-panel.is-compact .prosyo-mega-column + .prosyo-mega-column::before {
		display: none;
	}

	.prosyo-theme .prosyo-chrome .prosyo-mega-panel.is-compact .prosyo-mega-inner.has-spot {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

/* ------------------------------------------------------------------
 * Other sticky elements clear the sticky header
 * ---------------------------------------------------------------- */
.prosyo-theme .blog-details-card-wrap {
	top: calc(var(--chrome-head, 80px) + 28px);
}

.prosyo-theme .pc-section .pc-table:not(#pc) thead th {
	top: var(--chrome-head, 80px);
}

@media screen and (max-width: 767px) {
	.prosyo-theme .pc-section .pc-table:not(#pc) thead th {
		top: auto;
	}
}

/* ------------------------------------------------------------------
 * Footer wordmark
 * ---------------------------------------------------------------- */
.prosyo-theme .footer-mark {
	position: relative;
	margin-top: clamp(8px, 2vw, 24px);
	overflow: hidden;
	text-align: center;
	user-select: none;
	pointer-events: auto;
	--fm-x: 50%;
	--fm-y: 40%;
}

.prosyo-theme .footer-mark-text {
	display: block;
	margin-bottom: -.04em;
	background:
		radial-gradient(22% 60% at var(--fm-x) var(--fm-y), rgba(255, 255, 255, .9), transparent 70%),
		linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(167, 139, 250, .42) 45%, rgba(76, 29, 149, .18) 80%, rgba(3, 0, 20, 0) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(88px, 19vw, 300px);
	font-weight: 600;
	line-height: .9;
	letter-spacing: -.075em;
	transform: translateY(18%);
	opacity: .2;
	transition: transform 1.4s cubic-bezier(.2, .75, .2, 1), opacity 1.2s ease;
}

.prosyo-theme .footer-mark.is-in .footer-mark-text,
html:not(.w-mod-js) .prosyo-theme .footer-mark-text {
	transform: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.prosyo-theme .footer-mark-text {
		transform: none;
		opacity: 1;
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Transparent header over the hero
 *
 * On every page that opens with one of the theme's heroes, the header no
 * longer sits in its own band: it floats over the hero, whose backdrop
 * (glows, grid, stars) now runs up behind the menu. The hero gains the
 * header's height on top, so nothing inside it moves. Pages that open with
 * anything else (plugin templates, docs, status) keep the header in flow.
 * ---------------------------------------------------------------- */
:root {
	--chrome-overlay: 100px;
}

@media screen and (max-width: 991px) {
	:root {
		--chrome-overlay: 76px;
	}
}

@media screen and (max-width: 767px) {
	:root {
		--chrome-overlay: 72px;
	}
}

.prosyo-theme:has(.main-wrapper > .wp-block-post-content:first-child > :is(.home-section, .lh-section, .hero-section, ._404-section):first-child, .main-wrapper > :is(.hero-section, .lh-section, ._404-section, .cs-index, .cmp-hub, .cmp-page):first-child) :is(.prosyo-chrome-host, .wp-block-template-part:has(> .prosyo-chrome)) {
	margin-bottom: calc(var(--chrome-overlay) * -1);
}

/* Heroes without top padding of their own: add the header's height. */
.prosyo-theme .main-wrapper > .wp-block-post-content:first-child > :is(.home-section, .hero-section, ._404-section):first-child,
.prosyo-theme .main-wrapper > :is(.hero-section, ._404-section):first-child {
	padding-top: var(--chrome-overlay);
}

/* Landing heroes keep their own breathing room below the header. */
.prosyo-theme .main-wrapper > .wp-block-post-content:first-child > .lh-section:first-child,
.prosyo-theme .main-wrapper > .lh-section:first-child {
	padding-top: calc(var(--chrome-overlay) + clamp(40px, 4.5vw, 64px));
}

@media screen and (max-width: 767px) {
	.prosyo-theme .main-wrapper > .wp-block-post-content:first-child > .lh-section:first-child,
	.prosyo-theme .main-wrapper > .lh-section:first-child {
		padding-top: calc(var(--chrome-overlay) + 36px);
	}
}

.prosyo-theme .main-wrapper > :is(.cmp-hub, .cmp-page):first-child > .cmp-hero:first-child {
	padding-top: calc(var(--chrome-overlay) + clamp(32px, 5vw, 64px));
}

/* The divider under the bar only appears once it has something to separate. */
.prosyo-theme .prosyo-chrome:not(.is-scrolled) .header-divider {
	opacity: 0;
}

/* ------------------------------------------------------------------
 * Inner-page hero (prosyo/hero): the landing-hero atmosphere
 * ---------------------------------------------------------------- */
.prosyo-theme .hero-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.prosyo-theme .ph-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.prosyo-theme .ph-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 64px 64px;
	background-position: center top;
	-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%);
}

.prosyo-theme .ph-aurora {
	position: absolute;
	top: -30%;
	left: 50%;
	width: min(1100px, 120vw);
	height: 120%;
	transform: translateX(-50%);
	background:
		radial-gradient(40% 45% at 35% 40%, rgba(115, 80, 255, .32), transparent 70%),
		radial-gradient(35% 40% at 68% 45%, rgba(139, 92, 246, .26), transparent 70%);
	filter: blur(30px);
	animation: ph-drift 16s ease-in-out infinite alternate;
}

@keyframes ph-drift {
	from { transform: translateX(-52%) scale(1); }
	to { transform: translateX(-48%) scale(1.06); }
}

.prosyo-theme .ph-stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, .7), transparent),
		radial-gradient(1px 1px at 82% 18%, rgba(255, 255, 255, .6), transparent),
		radial-gradient(1.5px 1.5px at 68% 62%, rgba(205, 191, 255, .7), transparent),
		radial-gradient(1px 1px at 28% 70%, rgba(255, 255, 255, .5), transparent),
		radial-gradient(1px 1px at 92% 48%, rgba(255, 255, 255, .5), transparent),
		radial-gradient(1.5px 1.5px at 6% 52%, rgba(205, 191, 255, .6), transparent);
	opacity: .8;
}

.prosyo-theme .hero-section .hero-block {
	position: relative;
}

.prosyo-theme .hero-section .hero-info {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-left: 12px;
	border-color: rgba(167, 139, 250, .3);
	background: rgba(139, 92, 246, .1);
	color: #e4dcff;
}

.prosyo-theme .hero-section .hero-info::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 10px rgba(74, 222, 128, .8);
}

.prosyo-theme .hero-section .hero-title :is(.h2, .h4) {
	font-size: clamp(36px, 5.2vw, 66px);
	line-height: 1.06;
	letter-spacing: -.045em;
	text-wrap: balance;
}

.prosyo-theme .hero-section .hero-except {
	max-width: 680px;
	margin-inline: auto;
	color: #b3aec4;
	font-size: clamp(16px, 1.35vw, 18px);
	line-height: 1.65;
}

.prosyo-theme .ph-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

.prosyo-theme .ph-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 24px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	background: rgba(255, 255, 255, .04);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .25s cubic-bezier(.2, .75, .2, 1), filter .2s ease, background-color .2s ease, border-color .2s ease;
}

.prosyo-theme .ph-btn:hover,
.prosyo-theme .ph-btn:focus-visible {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	transform: translateY(-2px);
}

.prosyo-theme .ph-btn.is-primary {
	border-color: rgba(167, 139, 250, .6);
	background: linear-gradient(180deg, #7c3aed, #4c1d95);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 32px -12px rgba(124, 58, 237, .9);
}

.prosyo-theme .ph-btn.is-primary:hover {
	filter: brightness(1.12);
}

.prosyo-theme .ph-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	color: #9d98ae;
	font-size: 13.5px;
}

.prosyo-theme .ph-trust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.prosyo-theme .ph-trust li::before {
	content: "";
	width: 12px;
	height: 12px;
	background: #4ade80;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.6 11.4 3.2 8l1.1-1.1 2.3 2.3 5.1-5.1L12.8 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.6 11.4 3.2 8l1.1-1.1 2.3 2.3 5.1-5.1L12.8 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media screen and (max-width: 767px) {
	.prosyo-theme .ph-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 340px;
		margin-inline: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prosyo-theme .ph-aurora {
		animation: none;
	}
}

/* ------------------------------------------------------------------
 * Brand palette: Prosyo violet, no magenta or pink. The template's own
 * tokens are retuned here so every section that reads them follows (the
 * export also redeclares them on body, hence the body selector).
 * ---------------------------------------------------------------- */
:root,
body.prosyo-theme {
	--primary: #8b5cf6;
	--secondary: #a78bfa;
	--quinary: #d4c8ff;
}

/* ------------------------------------------------------------------
 * Bento cards: the screen sits on a lit stage that fills the card, so
 * cards in a row with shorter copy show a backdrop, not an empty gap.
 * ---------------------------------------------------------------- */
.prosyo-theme .bento-card.has-visual .bento-visual {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 180px;
	margin-inline: -26px;
	padding-inline: 26px;
	isolation: isolate;
}

.prosyo-theme .bento-card.has-visual .bento-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(70% 60% at 50% 100%, rgba(124, 92, 255, .32), transparent 72%),
		radial-gradient(40% 30% at 50% 60%, rgba(139, 92, 246, .12), transparent 70%),
		radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.4px) 0 0 / 18px 18px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 35%);
	mask-image: linear-gradient(180deg, transparent, #000 35%);
}

@media screen and (min-width: 992px) {
	.prosyo-theme .bento-card.is-full.has-visual .bento-visual {
		margin-inline: 0;
		padding-inline: 0;
	}
}

.prosyo-theme .footer-mark {
	margin-top: clamp(-40px, -3vw, -12px);
	padding-bottom: clamp(8px, 1.5vw, 20px);
}

/* Footer next step */
.prosyo-theme .footer-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 22px;
}

.prosyo-theme .footer-cta .ph-btn {
	min-height: 44px;
	padding: 0 18px;
	font-size: 14px;
}

.prosyo-theme .footer-cta-link {
	color: #cfc6ee;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color .2s ease;
}

.prosyo-theme .footer-cta-link:hover,
.prosyo-theme .footer-cta-link:focus-visible {
	color: #fff;
}