/**
 * Vionex — main stylesheet.
 *
 * Design tokens arrive as CSS custom properties injected by
 * Vionex\Assets::tokens_css() from the admin panel (colors, fonts,
 * radius, blur, container). Everything here consumes those tokens.
 *
 * Sections:
 *  01 Tokens & modes      07 Hero                13 Single demo / buy card
 *  02 Base & typography   08 Cards               14 Portfolio & case study
 *  03 Utilities           09 Marquee & slider    15 Blog, comments, reviews
 *  04 Buttons & inputs    10 Sections (home)     16 Contact, careers, misc pages
 *  05 Chrome (preloader…) 11 Toolbar & filters   17 Footer
 *  06 Header & nav        12 Modals & toast      18 Responsive & motion prefs
 */

/* ── 01 Tokens & modes ─────────────────────────────────────────────── */

:root {
	/* Fallbacks — the live values are injected inline from the panel. */
	--vx-accent: #6e56ff;
	--vx-accent-2: #00d4ff;
	--vx-bg: #05060a;
	--vx-surface: #0b0d15;
	--vx-text: #f4f5f7;
	--vx-muted: #9ba0ae;
	--vx-grad-from: #6e56ff;
	--vx-grad-to: #00d4ff;
	--vx-radius: 18px;
	--vx-blur: 16px;
	--vx-container: 1320px;
	--vx-font-heading: "Space Grotesk", sans-serif;
	--vx-font-body: "Inter", sans-serif;
	--vx-base-size: 16px;
	--vx-heading-weight: 600;
	--vx-anim-speed: 1;

	/* Derived */
	--vx-line: color-mix(in srgb, var(--vx-text) 9%, transparent);
	--vx-line-strong: color-mix(in srgb, var(--vx-text) 16%, transparent);
	--vx-glass: color-mix(in srgb, var(--vx-surface) 72%, transparent);
	--vx-glass-strong: color-mix(in srgb, var(--vx-surface) 88%, transparent);
	--vx-muted-2: color-mix(in srgb, var(--vx-muted) 55%, transparent);
	--vx-gradient: linear-gradient(120deg, var(--vx-grad-from), var(--vx-grad-to));
	--vx-glow: 0 0 60px color-mix(in srgb, var(--vx-accent) 35%, transparent);
	--vx-shadow: 0 20px 60px rgb(0 0 0 / 0.45);
	--vx-shadow-sm: 0 8px 28px rgb(0 0 0 / 0.35);
	--vx-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vx-header-h: 78px;
	--vx-space: clamp(4.5rem, 9vw, 8.5rem);
}

html[data-theme="light"] {
	--vx-bg: #f6f7fb;
	--vx-surface: #ffffff;
	--vx-text: #10121a;
	--vx-muted: #5b6170;
	--vx-shadow: 0 20px 60px rgb(20 24 60 / 0.12);
	--vx-shadow-sm: 0 8px 28px rgb(20 24 60 / 0.10);
	--vx-glow: 0 0 60px color-mix(in srgb, var(--vx-accent) 20%, transparent);
}

/* ── 02 Base & typography ──────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: var(--vx-base-size);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--vx-bg);
	color: var(--vx-text);
	font-family: var(--vx-font-body);
	font-size: 1rem;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* No horizontal scroll, ever. */
.vx-page { overflow-x: clip; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vx-font-heading);
	font-weight: var(--vx-heading-weight);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.2em; }

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s var(--vx-ease);
}
a:hover { color: var(--vx-accent-2); }

img, video, iframe, svg { max-width: 100%; height: auto; }
img { display: block; }

ul, ol { padding-left: 1.2em; }

::selection { background: var(--vx-accent); color: #fff; }

:focus-visible {
	outline: 2px solid var(--vx-accent-2);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.vx-skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 10000;
	width: auto; height: auto;
	clip-path: none;
	padding: 0.7em 1.2em;
	background: var(--vx-accent);
	color: #fff;
	border-radius: 999px;
}

/* ── 03 Utilities ──────────────────────────────────────────────────── */

.vx-container {
	width: min(100% - clamp(2.4rem, 6vw, 4rem), var(--vx-container));
	margin-inline: auto;
}
.vx-container--narrow { max-width: 840px; }

.vx-section { padding-block: var(--vx-space); }
.vx-section--flush { padding-block: clamp(2.5rem, 5vw, 4rem) var(--vx-space); }

.vx-main { min-height: 55vh; }

/* Film grain (Appearance toggle) */
.vx-grain .vx-page::after {
	content: "";
	position: fixed; inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gradient text */
.vx-gradient-text,
.vx-hero__line--accent {
	background: var(--vx-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Glow orbs & floating geometry */
.vx-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
	pointer-events: none;
}
.vx-orb--a { width: 42vw; height: 42vw; max-width: 620px; max-height: 620px; top: -12%; right: -8%; background: color-mix(in srgb, var(--vx-grad-from) 55%, transparent); }
.vx-orb--b { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; bottom: -18%; left: -10%; background: color-mix(in srgb, var(--vx-grad-to) 42%, transparent); }
.vx-orb--c { width: 22vw; height: 22vw; max-width: 320px; max-height: 320px; top: 38%; left: 32%; background: color-mix(in srgb, var(--vx-accent) 30%, transparent); opacity: 0.35; }

.vx-float { position: absolute; pointer-events: none; will-change: transform; }
.vx-float--ring {
	width: clamp(90px, 12vw, 170px); height: clamp(90px, 12vw, 170px);
	border: 1.5px solid var(--vx-line-strong);
	border-radius: 50%;
	top: 16%; right: 12%;
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--vx-accent) 18%, transparent), transparent 65%);
}
.vx-float--pill {
	width: clamp(70px, 9vw, 130px); height: clamp(26px, 3.4vw, 44px);
	border-radius: 999px;
	background: var(--vx-glass);
	border: 1px solid var(--vx-line);
	backdrop-filter: blur(var(--vx-blur));
	bottom: 24%; left: 7%;
	transform: rotate(-14deg);
}
.vx-float--dot {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--vx-gradient);
	box-shadow: var(--vx-glow);
	top: 30%; left: 18%;
}

/* CSS 3D cube */
.vx-float--cube {
	width: 56px; height: 56px;
	top: 58%; right: 22%;
	transform-style: preserve-3d;
	animation: vx-cube-spin calc(16s / var(--vx-anim-speed)) linear infinite;
}
.vx-float--cube i {
	position: absolute; inset: 0;
	border: 1px solid color-mix(in srgb, var(--vx-accent) 55%, transparent);
	background: color-mix(in srgb, var(--vx-accent) 10%, transparent);
	backdrop-filter: blur(4px);
}
.vx-float--cube i:nth-child(1) { transform: translateZ(28px); }
.vx-float--cube i:nth-child(2) { transform: rotateY(180deg) translateZ(28px); }
.vx-float--cube i:nth-child(3) { transform: rotateY(90deg) translateZ(28px); }
.vx-float--cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(28px); }
.vx-float--cube i:nth-child(5) { transform: rotateX(90deg) translateZ(28px); }
.vx-float--cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(28px); }

@keyframes vx-cube-spin {
	from { transform: rotateX(0) rotateY(0); }
	to { transform: rotateX(360deg) rotateY(360deg); }
}

/* Placeholder artwork (no-image fallback) */
.vx-placeholder {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: inherit;
	background:
		radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--vx-grad-from) 42%, transparent), transparent 55%),
		radial-gradient(120% 120% at 90% 90%, color-mix(in srgb, var(--vx-grad-to) 34%, transparent), transparent 55%),
		var(--vx-surface);
}
.vx-placeholder__glow {
	position: absolute; inset: -40%;
	background: conic-gradient(from 90deg, transparent, color-mix(in srgb, var(--vx-text) 7%, transparent), transparent);
	animation: vx-rotate calc(9s / var(--vx-anim-speed)) linear infinite;
}
.vx-placeholder__label {
	position: relative;
	font-family: var(--vx-font-heading);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vx-muted);
	padding: 0 1rem;
	text-align: center;
}
.vx-placeholder--avatar { aspect-ratio: 1; border-radius: 50%; }
.vx-placeholder--work { aspect-ratio: 4 / 5; }
.vx-placeholder--cover { aspect-ratio: 16 / 9; }

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

/* Skeleton loading */
.vx-skeleton {
	display: block;
	height: 280px;
	border-radius: var(--vx-radius);
	background: linear-gradient(100deg, var(--vx-surface) 40%, color-mix(in srgb, var(--vx-text) 6%, var(--vx-surface)) 50%, var(--vx-surface) 60%);
	background-size: 200% 100%;
	animation: vx-shimmer 1.4s ease infinite;
}
@keyframes vx-shimmer { to { background-position: -200% 0; } }

/* Stars */
.vx-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.vx-star { position: relative; display: inline-flex; color: color-mix(in srgb, var(--vx-text) 22%, transparent); }
.vx-star svg { fill: currentColor; stroke: none; }
.vx-star__fill {
	position: absolute; inset: 0;
	overflow: hidden;
	color: #f7b32b;
	display: inline-flex;
}
.vx-stars__count { margin-left: 0.5em; font-size: 0.82rem; color: var(--vx-muted); }

/* Tags & chips */
.vx-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; }
.vx-tag {
	display: inline-flex;
	padding: 0.32em 0.9em;
	font-size: 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--vx-line);
	background: var(--vx-glass);
	color: var(--vx-muted);
}
a.vx-tag:hover { color: var(--vx-text); border-color: var(--vx-accent); }

/* Prose (long-form content) */
.vx-prose { font-size: 1.06rem; color: color-mix(in srgb, var(--vx-text) 88%, var(--vx-muted)); }
.vx-prose h2 { margin-top: 1.8em; }
.vx-prose h3 { margin-top: 1.5em; }
.vx-prose img { border-radius: var(--vx-radius); }
.vx-prose a { color: var(--vx-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.vx-prose blockquote {
	margin: 2em 0;
	padding: 1.2em 1.6em;
	border-left: 3px solid var(--vx-accent);
	background: var(--vx-glass);
	border-radius: 0 var(--vx-radius) var(--vx-radius) 0;
	font-style: italic;
}
.vx-prose pre {
	background: var(--vx-surface);
	border: 1px solid var(--vx-line);
	border-radius: var(--vx-radius);
	padding: 1.2em;
	overflow-x: auto;
}
.vx-prose table { width: 100%; border-collapse: collapse; }
.vx-prose td, .vx-prose th { padding: 0.7em; border: 1px solid var(--vx-line); }

/* Alignments (Gutenberg) */
.alignwide { width: min(100vw - 3rem, calc(var(--vx-container) + 160px)); margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }

/* ── 04 Buttons & inputs ───────────────────────────────────────────── */

.vx-btn {
	--btn-pad-y: 0.85em;
	--btn-pad-x: 1.7em;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: var(--btn-pad-y) var(--btn-pad-x);
	font-family: var(--vx-font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.35s var(--vx-ease), box-shadow 0.35s var(--vx-ease), border-color 0.35s var(--vx-ease), color 0.35s var(--vx-ease);
	will-change: transform;
}
.vx-btnstyle-pill .vx-btn { border-radius: 999px; }
.vx-btnstyle-rounded .vx-btn { border-radius: 12px; }
.vx-btnstyle-sharp .vx-btn { border-radius: 2px; }

.vx-btn__label, .vx-btn__icon { position: relative; z-index: 1; display: inline-flex; }
.vx-btn__icon { transition: transform 0.35s var(--vx-ease); }
.vx-btn:hover .vx-btn__icon { transform: translateX(4px); }

.vx-btn__bg { position: absolute; inset: 0; z-index: 0; transition: opacity 0.35s var(--vx-ease), transform 0.5s var(--vx-ease); }

.vx-btn--primary { color: #fff; }
.vx-btn--primary .vx-btn__bg { background: var(--vx-gradient); }
.vx-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--vx-glow); color: #fff; }
.vx-btn--primary:hover .vx-btn__bg { transform: scale(1.06); }

.vx-btn--ghost { color: var(--vx-text); border-color: var(--vx-line-strong); background: var(--vx-glass); backdrop-filter: blur(var(--vx-blur)); }
.vx-btn--ghost:hover { border-color: var(--vx-accent); transform: translateY(-2px); color: var(--vx-text); }

.vx-btn--white { color: #0a0a12; }
.vx-btn--white .vx-btn__bg { background: #fff; }
.vx-btn--white:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgb(255 255 255 / 0.22); color: #0a0a12; }

.vx-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--vx-line);
	background: var(--vx-glass);
	backdrop-filter: blur(var(--vx-blur));
	color: var(--vx-text);
	cursor: pointer;
	position: relative;
	transition: border-color 0.25s var(--vx-ease), transform 0.25s var(--vx-ease), color 0.25s var(--vx-ease);
}
.vx-icon-btn:hover { border-color: var(--vx-accent); transform: translateY(-2px); }

.vx-chip-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.55em 1.1em;
	font-size: 0.83rem;
	font-weight: 600;
	border-radius: 999px;
	border: 1px solid var(--vx-line-strong);
	background: var(--vx-glass-strong);
	backdrop-filter: blur(var(--vx-blur));
	color: var(--vx-text);
	cursor: pointer;
	transition: transform 0.25s var(--vx-ease), border-color 0.25s var(--vx-ease), background 0.25s var(--vx-ease), color 0.25s var(--vx-ease);
}
.vx-chip-btn:hover { transform: translateY(-2px); border-color: var(--vx-accent); color: var(--vx-text); }
.vx-chip-btn--accent { background: var(--vx-gradient); border-color: transparent; color: #fff; }
.vx-chip-btn--accent:hover { color: #fff; box-shadow: var(--vx-glow); }

/* Wishlist heart */
.vx-wish {
	display: inline-grid; place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid var(--vx-line-strong);
	background: var(--vx-glass-strong);
	backdrop-filter: blur(var(--vx-blur));
	color: var(--vx-text);
	cursor: pointer;
	transition: transform 0.25s var(--vx-ease), color 0.25s var(--vx-ease), border-color 0.25s var(--vx-ease);
}
.vx-wish:hover { transform: scale(1.1); }
.vx-wish.is-active { color: #ff5e9e; border-color: #ff5e9e; }
.vx-wish.is-active svg { fill: currentColor; }

/* Forms */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="password"], input[type="number"], textarea, select {
	width: 100%;
	padding: 0.85em 1.1em;
	font: inherit;
	color: var(--vx-text);
	background: var(--vx-surface);
	border: 1px solid var(--vx-line-strong);
	border-radius: calc(var(--vx-radius) * 0.65);
	transition: border-color 0.25s var(--vx-ease), box-shadow 0.25s var(--vx-ease);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--vx-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-accent) 25%, transparent);
}
::placeholder { color: var(--vx-muted-2); }
label { font-size: 0.9rem; font-weight: 600; }

.vx-form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vx-form__field { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 1.1rem; }
.vx-form__hp { position: absolute !important; left: -9999px; }
.vx-form__status { min-height: 1.4em; font-weight: 600; }
.vx-form__status.is-success { color: #34e2a5; }
.vx-form__status.is-error { color: #ff6b6b; }
.vx-form.is-loading { opacity: 0.6; pointer-events: none; }

/* ── 05 Chrome: preloader, cursor, progress, back-to-top ───────────── */

.vx-preloader {
	position: fixed; inset: 0;
	z-index: 10001;
	display: grid; place-items: center;
	background: var(--vx-bg);
	transition: opacity 0.6s var(--vx-ease), visibility 0.6s;
}
.vx-preloader.is-done { opacity: 0; visibility: hidden; }
.vx-preloader__inner { text-align: center; }
.vx-preloader__logo {
	font-family: var(--vx-font-heading);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	background: var(--vx-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: block;
	animation: vx-pulse 1.4s var(--vx-ease) infinite alternate;
}
.vx-preloader__bar {
	display: block;
	width: 180px; height: 2px;
	margin: 1.2rem auto 0;
	background: var(--vx-line-strong);
	border-radius: 2px;
	overflow: hidden;
}
.vx-preloader__fill {
	display: block;
	height: 100%;
	width: 40%;
	background: var(--vx-gradient);
	border-radius: 2px;
	animation: vx-load 1.1s var(--vx-ease) infinite;
}
@keyframes vx-load { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes vx-pulse { from { opacity: 0.75; } to { opacity: 1; } }

/* Custom cursor (pointer devices only; hidden on touch via JS) */
.vx-cursor { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
.vx-cursor__dot, .vx-cursor__ring {
	position: absolute;
	top: 0; left: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	will-change: transform;
}
.vx-cursor__dot { width: 7px; height: 7px; background: var(--vx-accent-2); }
.vx-cursor__ring {
	width: 38px; height: 38px;
	border: 1.5px solid color-mix(in srgb, var(--vx-accent) 65%, transparent);
	transition: width 0.25s var(--vx-ease), height 0.25s var(--vx-ease), background 0.25s var(--vx-ease);
}
.vx-cursor.is-hover .vx-cursor__ring {
	width: 58px; height: 58px;
	background: color-mix(in srgb, var(--vx-accent) 14%, transparent);
}
body.vx-has-cursor a, body.vx-has-cursor button { cursor: none; }

.vx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; }
.vx-progress__bar {
	display: block;
	height: 100%; width: 100%;
	background: var(--vx-gradient);
	transform-origin: 0 50%;
	transform: scaleX(0);
}

.vx-backtop {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 900;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid var(--vx-line-strong);
	background: var(--vx-glass-strong);
	backdrop-filter: blur(var(--vx-blur));
	color: var(--vx-text);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s var(--vx-ease), transform 0.3s var(--vx-ease), visibility 0.3s;
}
.vx-backtop.is-visible { opacity: 1; visibility: visible; transform: none; }
.vx-backtop svg { transform: rotate(-45deg); }

.vx-toast {
	position: fixed;
	left: 50%; bottom: 28px;
	z-index: 10002;
	transform: translate(-50%, 20px);
	padding: 0.8em 1.5em;
	border-radius: 999px;
	background: var(--vx-glass-strong);
	border: 1px solid var(--vx-line-strong);
	backdrop-filter: blur(var(--vx-blur));
	box-shadow: var(--vx-shadow-sm);
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--vx-ease), transform 0.3s var(--vx-ease), visibility 0.3s;
}
.vx-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ── 06 Header & nav ───────────────────────────────────────────────── */

.vx-header {
	position: relative;
	z-index: 950;
	height: var(--vx-header-h);
	border-bottom: 1px solid var(--vx-line);
	background: var(--vx-glass-strong);
	backdrop-filter: blur(var(--vx-blur));
}
.vx-header-sticky .vx-header { position: sticky; top: 0; transition: transform 0.4s var(--vx-ease), background 0.3s; }
.vx-header-sticky .vx-header.is-hidden { transform: translateY(-100%); }
.vx-header-transparent .vx-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.vx-header-transparent .vx-header.is-scrolled {
	background: var(--vx-glass-strong);
	border-bottom-color: var(--vx-line);
	backdrop-filter: blur(var(--vx-blur));
}

.vx-header__inner { display: flex; align-items: center; gap: 2rem; height: 100%; }

.vx-logo { display: inline-flex; align-items: center; font-family: var(--vx-font-heading); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
.vx-logo__dot { color: var(--vx-accent); }
.vx-logo__img, .custom-logo { max-height: 44px; width: auto; }

.vx-nav { margin-inline: auto; }
.vx-nav__list, .vx-nav ul { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.vx-nav__list a, .vx-nav ul a {
	position: relative;
	display: inline-block;
	padding: 0.55em 0.95em;
	font-size: 0.94rem;
	font-weight: 500;
	color: color-mix(in srgb, var(--vx-text) 82%, var(--vx-muted));
	border-radius: 999px;
	transition: color 0.25s var(--vx-ease), background 0.25s var(--vx-ease);
}
.vx-nav__list a:hover, .vx-nav .current-menu-item > a, .vx-nav .current_page_item > a {
	color: var(--vx-text);
	background: color-mix(in srgb, var(--vx-text) 7%, transparent);
}

/* Dropdowns */
.vx-nav li { position: relative; }
.vx-nav li ul {
	position: absolute;
	top: calc(100% + 10px); left: 0;
	min-width: 220px;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.5rem;
	background: var(--vx-glass-strong);
	border: 1px solid var(--vx-line);
	border-radius: var(--vx-radius);
	backdrop-filter: blur(var(--vx-blur));
	box-shadow: var(--vx-shadow-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s var(--vx-ease), transform 0.25s var(--vx-ease), visibility 0.25s;
}
.vx-nav li:hover > ul, .vx-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.vx-nav li ul a { display: block; border-radius: calc(var(--vx-radius) * 0.5); }

.vx-header__actions { display: flex; align-items: center; gap: 0.7rem; }

.vx-cart-count {
	position: absolute;
	top: -4px; right: -4px;
	min-width: 18px; height: 18px;
	display: grid; place-items: center;
	padding: 0 4px;
	font-size: 0.66rem;
	font-weight: 700;
	border-radius: 999px;
	background: var(--vx-gradient);
	color: #fff;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.25s var(--vx-ease), transform 0.25s var(--vx-ease);
}
.vx-cart-count.is-active { opacity: 1; transform: none; }

.vx-mode-toggle__light, html[data-theme="light"] .vx-mode-toggle__dark { display: none; }
html[data-theme="light"] .vx-mode-toggle__light { display: inline-flex; }

/* Labeled theme toggle inside the mobile menu */
.vx-mobile-menu__mode {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 0.6em 1.15em;
	font-family: var(--vx-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--vx-text);
	border: 1px solid var(--vx-line-strong);
	border-radius: 999px;
	background: var(--vx-glass);
	backdrop-filter: blur(var(--vx-blur));
	cursor: pointer;
}
.vx-mobile-menu__mode span { align-items: center; gap: 0.55em; }
.vx-mobile-menu__mode .vx-mode-toggle__dark { display: inline-flex; }
html[data-theme="light"] .vx-mobile-menu__mode .vx-mode-toggle__dark { display: none; }

/* Burger */
.vx-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px; height: 42px;
	padding: 10px;
	border-radius: 50%;
	border: 1px solid var(--vx-line);
	background: var(--vx-glass);
	cursor: pointer;
}
.vx-burger span { display: block; height: 2px; border-radius: 2px; background: var(--vx-text); transition: transform 0.35s var(--vx-ease), opacity 0.25s; }
.vx-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vx-burger.is-active span:nth-child(2) { opacity: 0; }
.vx-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.vx-mobile-menu { position: fixed; inset: 0; z-index: 940; visibility: hidden; pointer-events: none; }
.vx-mobile-menu__bg {
	position: absolute; inset: 0;
	background: color-mix(in srgb, var(--vx-bg) 82%, transparent);
	backdrop-filter: blur(20px);
	opacity: 0;
	transition: opacity 0.4s var(--vx-ease);
}
.vx-mobile-menu__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(420px, 92vw);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.5rem;
	padding: calc(var(--vx-header-h) + 1rem) clamp(1.6rem, 6vw, 3rem) 2.5rem;
	background: var(--vx-surface);
	border-left: 1px solid var(--vx-line);
	transform: translateX(100%);
	transition: transform 0.5s var(--vx-ease);
	overflow-y: auto;
}
.vx-mobile-menu.is-open { visibility: visible; pointer-events: auto; }
.vx-mobile-menu.is-open .vx-mobile-menu__bg { opacity: 1; }
.vx-mobile-menu.is-open .vx-mobile-menu__panel { transform: none; }
.vx-mobile-menu__list, .vx-mobile-menu__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.vx-mobile-menu__panel ul a {
	display: block;
	padding: 0.5em 0;
	font-family: var(--vx-font-heading);
	font-size: clamp(1.5rem, 5vw, 1.9rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.4s var(--vx-ease), transform 0.4s var(--vx-ease), color 0.25s;
}
.vx-mobile-menu.is-open .vx-mobile-menu__panel ul a { opacity: 1; transform: none; }
.vx-mobile-menu__footer { display: flex; flex-direction: column; gap: 1.4rem; }

/* ── 07 Hero ───────────────────────────────────────────────────────── */

.vx-hero {
	position: relative;
	min-height: max(88svh, 640px);
	display: flex;
	align-items: center;
	padding-block: calc(var(--vx-header-h) + clamp(3rem, 8vh, 5rem)) clamp(4rem, 9vh, 6rem);
	overflow: clip;
}
.vx-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.vx-hero__video, .vx-hero__image img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0.35;
}
.vx-hero__image { position: absolute; inset: 0; }
.vx-hero__video-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--vx-bg) 55%, transparent), var(--vx-bg) 96%);
}
.vx-hero__grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(var(--vx-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--vx-line) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, black 30%, transparent 75%);
	opacity: 0.55;
}
.vx-hero--minimal .vx-hero__grid, .vx-hero--minimal .vx-float { display: none; }
.vx-hero--mesh .vx-orb { filter: blur(60px); opacity: 0.65; }

/* Aurora sweep */
.vx-hero--aurora .vx-hero__bg::before {
	content: "";
	position: absolute;
	inset: -30% -10%;
	background:
		radial-gradient(38% 45% at 68% 28%, color-mix(in srgb, var(--vx-grad-from) 34%, transparent), transparent 70%),
		radial-gradient(30% 42% at 28% 62%, color-mix(in srgb, var(--vx-grad-to) 26%, transparent), transparent 70%);
	animation: vx-aurora calc(18s / var(--vx-anim-speed)) ease-in-out infinite alternate;
}
@keyframes vx-aurora {
	from { transform: rotate(-3deg) scale(1); }
	to { transform: rotate(4deg) scale(1.12); }
}

.vx-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 3rem; align-items: center; }
.vx-hero__content { max-width: 720px; }

.vx-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.5em 1.1em;
	margin-bottom: 1.6rem;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 999px;
	border: 1px solid var(--vx-line-strong);
	background: var(--vx-glass);
	backdrop-filter: blur(var(--vx-blur));
}
.vx-hero__badge svg { color: var(--vx-accent-2); }
.vx-hero__badge-pulse {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #34e2a5;
	box-shadow: 0 0 0 0 rgb(52 226 165 / 0.6);
	animation: vx-ping 1.8s ease infinite;
}
@keyframes vx-ping { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.vx-hero__title {
	font-size: clamp(2.7rem, 6.6vw, 5.3rem);
	line-height: 1.04;
	margin-bottom: 1.4rem;
}
.vx-hero__line { display: block; }

.vx-hero__subtitle {
	max-width: 560px;
	font-size: clamp(1.02rem, 1.4vw, 1.2rem);
	color: var(--vx-muted);
	margin-bottom: 2.2rem;
}

.vx-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(2.4rem, 5vh, 3.6rem); }

.vx-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.6rem, 4vw, 3.2rem);
	margin: 0;
	padding-top: 1.8rem;
	border-top: 1px solid var(--vx-line);
}
.vx-hero__stat dd { margin: 0; }
.vx-counter, .vx-hero__stat-suffix {
	font-family: var(--vx-font-heading);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.vx-hero__stat-suffix { color: var(--vx-accent-2); }
.vx-hero__stat-label { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--vx-muted); }

/* Floating UI cards */
.vx-hero__cards { position: relative; min-height: 380px; }
.vx-hero-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.3rem;
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line-strong);
	background: var(--vx-glass-strong);
	backdrop-filter: blur(var(--vx-blur));
	box-shadow: var(--vx-shadow-sm);
	white-space: nowrap;
}
.vx-hero-card--1 { top: 6%; right: 8%; animation: vx-bob calc(6s / var(--vx-anim-speed)) ease-in-out infinite alternate; }
.vx-hero-card--2 { top: 42%; right: 30%; animation: vx-bob calc(7.5s / var(--vx-anim-speed)) ease-in-out 0.8s infinite alternate; }
.vx-hero-card--3 { bottom: 8%; right: 2%; animation: vx-bob calc(6.8s / var(--vx-anim-speed)) ease-in-out 1.4s infinite alternate; }
@keyframes vx-bob { from { translate: 0 -8px; } to { translate: 0 10px; } }

.vx-hero-card__icon {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--vx-gradient);
	color: #fff;
	box-shadow: var(--vx-glow);
}
.vx-hero-card__body { display: flex; flex-direction: column; line-height: 1.25; }
.vx-hero-card__body strong { font-family: var(--vx-font-heading); font-size: 1.05rem; }
.vx-hero-card__body em { font-style: normal; font-size: 0.8rem; color: var(--vx-muted); }

.vx-hero__scroll {
	position: absolute;
	left: 50%; bottom: 1.6rem;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vx-muted);
}
.vx-hero__scroll-track {
	width: 22px; height: 36px;
	border: 1.5px solid var(--vx-line-strong);
	border-radius: 999px;
	display: flex;
	justify-content: center;
	padding-top: 6px;
}
.vx-hero__scroll-thumb {
	width: 3px; height: 8px;
	border-radius: 3px;
	background: var(--vx-accent-2);
	animation: vx-scrollhint 1.8s var(--vx-ease) infinite;
}
@keyframes vx-scrollhint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ── 08 Cards ──────────────────────────────────────────────────────── */

/* Section heading block */
.vx-section-head { max-width: 680px; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.vx-section-head--center { margin-inline: auto; text-align: center; }
.vx-section-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.vx-section-row .vx-section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

.vx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vx-accent-2);
}
.vx-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vx-gradient); box-shadow: var(--vx-glow); }

.vx-section-title { margin-bottom: 0.4em; }
.vx-section-sub { color: var(--vx-muted); font-size: 1.05rem; margin: 0; }

/* Demo card */
.vx-demos__grid, .vx-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
	gap: clamp(1.2rem, 2.4vw, 2rem);
}
.vx-demo-card {
	position: relative;
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line);
	background: var(--vx-surface);
	overflow: hidden;
	transition: transform 0.4s var(--vx-ease), border-color 0.4s var(--vx-ease), box-shadow 0.4s var(--vx-ease);
	will-change: transform;
}
.vx-demo-card:hover { border-color: var(--vx-line-strong); box-shadow: var(--vx-shadow); }

.vx-demo-card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.vx-demo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--vx-ease); }
.vx-demo-card:hover .vx-demo-card__media img { transform: scale(1.06); }
.vx-demo-card__shine {
	position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 0.14) 50%, transparent 58%);
	transform: translateX(-110%);
	transition: transform 0.9s var(--vx-ease);
	pointer-events: none;
}
.vx-demo-card:hover .vx-demo-card__shine { transform: translateX(110%); }

.vx-demo-card__actions {
	position: absolute;
	top: 32%;
	left: 0; right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.55rem;
	padding: 1rem;
	transform: translateY(-8px);
	opacity: 0;
	transition: opacity 0.35s var(--vx-ease), transform 0.35s var(--vx-ease);
}
.vx-demo-card:hover .vx-demo-card__actions, .vx-demo-card:focus-within .vx-demo-card__actions { opacity: 1; transform: none; }

.vx-demo-card__body { padding: 1.15rem 1.3rem 1.3rem; }
.vx-demo-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.vx-demo-card__title { font-size: 1.08rem; margin: 0; }
.vx-demo-card__price .vx-price { font-family: var(--vx-font-heading); font-weight: 700; color: var(--vx-accent-2); white-space: nowrap; }
.vx-price--free { color: #34e2a5; }
.vx-demo-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.55rem; }
.vx-demo-card__cat { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-muted); }

/* Portfolio card */
.vx-work__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: clamp(1.4rem, 3vw, 2.4rem);
}
.vx-work-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--vx-radius);
	overflow: hidden;
	border: 1px solid var(--vx-line);
}
.vx-work-card__media img { width: 100%; height: 105%; object-fit: cover; transition: transform 0.9s var(--vx-ease); }
.vx-work-card:hover .vx-work-card__media img { transform: scale(1.05); }
.vx-work-card__overlay {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: color-mix(in srgb, var(--vx-bg) 42%, transparent);
	opacity: 0;
	transition: opacity 0.4s var(--vx-ease);
}
.vx-work-card:hover .vx-work-card__overlay, .vx-work-card:focus-within .vx-work-card__overlay { opacity: 1; }
.vx-work-card__view {
	display: grid; place-items: center;
	width: 68px; height: 68px;
	border-radius: 50%;
	background: var(--vx-glass-strong);
	border: 1px solid var(--vx-line-strong);
	backdrop-filter: blur(var(--vx-blur));
	transform: scale(0.7);
	transition: transform 0.4s var(--vx-ease);
}
.vx-work-card:hover .vx-work-card__view { transform: scale(1); }
.vx-work-card__body { padding-top: 1.1rem; }
.vx-work-card__title { font-size: 1.2rem; margin-bottom: 0.25rem; }
.vx-work-card__meta { font-size: 0.88rem; color: var(--vx-muted); margin: 0; }

/* Service card */
.vx-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: clamp(1.1rem, 2vw, 1.6rem);
}
.vx-service-card {
	position: relative;
	padding: clamp(1.6rem, 3vw, 2.2rem);
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line);
	background: var(--vx-glass);
	backdrop-filter: blur(var(--vx-blur));
	overflow: hidden;
	transition: transform 0.4s var(--vx-ease), border-color 0.4s var(--vx-ease), box-shadow 0.4s var(--vx-ease);
}
.vx-service-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--vx-accent) 45%, var(--vx-line)); box-shadow: var(--vx-shadow-sm); }
.vx-service-card__glow {
	position: absolute;
	inset: -60% 30% 40% -30%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--vx-accent) 22%, transparent), transparent);
	opacity: 0;
	transition: opacity 0.5s var(--vx-ease);
	pointer-events: none;
}
.vx-service-card:hover .vx-service-card__glow { opacity: 1; }
.vx-service-card__icon {
	display: grid; place-items: center;
	width: 56px; height: 56px;
	margin-bottom: 1.3rem;
	border-radius: 16px;
	background: var(--vx-gradient);
	color: #fff;
	box-shadow: var(--vx-glow);
}
.vx-service-card__title { font-size: 1.15rem; }
.vx-service-card__text { font-size: 0.94rem; color: var(--vx-muted); margin: 0; }
.vx-service-card__price { margin: 0.9rem 0 0; font-weight: 700; color: var(--vx-accent-2); }
.vx-service-card__link {
	position: absolute;
	top: 1.4rem; right: 1.4rem;
	color: var(--vx-muted);
	opacity: 0;
	transform: translate(-6px, 6px);
	transition: opacity 0.35s var(--vx-ease), transform 0.35s var(--vx-ease);
}
.vx-service-card:hover .vx-service-card__link { opacity: 1; transform: none; }

/* Post card */
.vx-journal__grid, .vx-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: clamp(1.3rem, 2.5vw, 2rem);
}
.vx-post-card { border-radius: var(--vx-radius); border: 1px solid var(--vx-line); background: var(--vx-surface); overflow: hidden; transition: transform 0.4s var(--vx-ease), box-shadow 0.4s var(--vx-ease); }
.vx-post-card:hover { transform: translateY(-6px); box-shadow: var(--vx-shadow-sm); }
.vx-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.vx-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--vx-ease); }
.vx-post-card:hover .vx-post-card__media img { transform: scale(1.05); }
.vx-post-card__body { padding: 1.4rem 1.5rem 1.6rem; }
.vx-post-card__date { font-size: 0.8rem; color: var(--vx-muted); }
.vx-post-card__title { font-size: 1.14rem; margin: 0.5rem 0 0.5rem; }
.vx-post-card__excerpt { font-size: 0.93rem; color: var(--vx-muted); margin-bottom: 1rem; }
.vx-post-card__more { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.88rem; font-weight: 600; color: var(--vx-accent-2); }

.vx-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.84rem; color: var(--vx-muted); }
.vx-post-meta__item { display: inline-flex; align-items: center; gap: 0.4em; }
.vx-post-meta__cat { color: var(--vx-accent-2); font-weight: 600; }

/* Team card */
.vx-team__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.vx-team-card__media { position: relative; border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-line); aspect-ratio: 4 / 5; }
.vx-team-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vx-team-card__social {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	padding: 1rem;
	background: linear-gradient(transparent, color-mix(in srgb, var(--vx-bg) 85%, transparent));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s var(--vx-ease), transform 0.35s var(--vx-ease);
}
.vx-team-card:hover .vx-team-card__social, .vx-team-card:focus-within .vx-team-card__social { opacity: 1; transform: none; }
.vx-team-card__social a {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--vx-glass-strong);
	border: 1px solid var(--vx-line-strong);
}
.vx-team-card__name { margin: 1rem 0 0.15rem; font-size: 1.1rem; }
.vx-team-card__role { margin: 0; font-size: 0.88rem; color: var(--vx-muted); }

/* Quote card */
.vx-quote-card {
	position: relative;
	margin: 0;
	padding: clamp(1.6rem, 3vw, 2.2rem);
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line);
	background: var(--vx-glass);
	backdrop-filter: blur(var(--vx-blur));
}
.vx-quote-card__mark { position: absolute; top: 1.4rem; right: 1.6rem; color: color-mix(in srgb, var(--vx-accent) 55%, transparent); }
.vx-quote-card__text { margin: 0.9rem 0 1.4rem; font-size: 1.04rem; line-height: 1.6; border: 0; padding: 0; font-style: normal; }
.vx-quote-card__author { display: flex; align-items: center; gap: 0.9rem; }
.vx-quote-card__avatar, .vx-quote-card__avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.vx-quote-card__author strong { display: block; font-size: 0.95rem; }
.vx-quote-card__author em { font-style: normal; font-size: 0.82rem; color: var(--vx-muted); }
.vx-quotes-masonry { columns: 3 320px; column-gap: 1.6rem; }
.vx-quotes-masonry .vx-quote-card { break-inside: avoid; margin-bottom: 1.6rem; }

/* Pricing */
.vx-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); align-items: stretch; }
.vx-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.8rem, 3vw, 2.4rem);
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line);
	background: var(--vx-surface);
	transition: transform 0.4s var(--vx-ease), box-shadow 0.4s var(--vx-ease), border-color 0.4s;
}
.vx-plan:hover { transform: translateY(-6px); box-shadow: var(--vx-shadow-sm); }
.vx-plan--featured {
	border-color: color-mix(in srgb, var(--vx-accent) 55%, var(--vx-line));
	background:
		linear-gradient(var(--vx-surface), var(--vx-surface)) padding-box,
		var(--vx-gradient) border-box;
	border: 1.5px solid transparent;
	box-shadow: var(--vx-glow);
}
.vx-plan__badge {
	position: absolute;
	top: -13px; left: 50%;
	transform: translateX(-50%);
	padding: 0.3em 1.1em;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	background: var(--vx-gradient);
	color: #fff;
	white-space: nowrap;
}
.vx-plan__name { font-size: 1.2rem; margin-bottom: 0.2rem; }
.vx-plan__desc { font-size: 0.9rem; color: var(--vx-muted); min-height: 2.6em; }
.vx-plan__price { display: flex; align-items: baseline; gap: 0.25rem; margin: 0.6rem 0 1.4rem; }
.vx-plan__currency { font-size: 1.3rem; color: var(--vx-muted); }
.vx-plan__amount { font-family: var(--vx-font-heading); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; }
.vx-plan__period { font-size: 0.85rem; color: var(--vx-muted); }
.vx-plan__features { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 0.65rem; flex: 1; }
.vx-plan__features li { display: flex; gap: 0.6em; align-items: flex-start; font-size: 0.93rem; }
.vx-plan__check, .vx-about__check, .vx-feature-list__check {
	display: inline-grid; place-items: center;
	width: 20px; height: 20px;
	margin-top: 2px;
	flex: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--vx-accent) 18%, transparent);
	color: var(--vx-accent-2);
}
.vx-plan .vx-btn { justify-content: center; }

/* Product card (WooCommerce loop) */
.vx-product-card {
	position: relative;
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line);
	background: var(--vx-surface);
	overflow: hidden;
	transition: transform 0.4s var(--vx-ease), box-shadow 0.4s var(--vx-ease);
}
.vx-product-card:hover { transform: translateY(-5px); box-shadow: var(--vx-shadow-sm); }
.vx-product-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.vx-product-card__media a { display: block; height: 100%; }
.vx-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--vx-ease); }
.vx-product-card:hover .vx-product-card__media img { transform: scale(1.05); }
.vx-product-card__badge {
	position: absolute;
	top: 0.9rem; left: 0.9rem;
	padding: 0.28em 0.9em;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 999px;
	background: var(--vx-gradient);
	color: #fff;
}
.vx-product-card__actions {
	position: absolute;
	inset-inline: 0;
	bottom: 0.9rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s var(--vx-ease), transform 0.3s var(--vx-ease);
}
.vx-product-card:hover .vx-product-card__actions, .vx-product-card:focus-within .vx-product-card__actions { opacity: 1; transform: none; }
.vx-product-card__body { padding: 1.15rem 1.3rem 1.3rem; }
.vx-product-card__title { font-size: 1.05rem; margin-bottom: 0.4rem; }
.vx-product-card__rating { margin-bottom: 0.6rem; }
.vx-product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vx-product-card .price { font-family: var(--vx-font-heading); font-weight: 700; color: var(--vx-accent-2); }
.vx-product-card .price del { color: var(--vx-muted); font-weight: 400; margin-right: 0.4em; }

/* ── 09 Marquee & slider ───────────────────────────────────────────── */

.vx-clients { padding-block: clamp(2.5rem, 5vw, 4rem); }
.vx-clients__title { text-align: center; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vx-muted); margin-bottom: 2rem; }
.vx-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.vx-marquee__track { display: flex; width: max-content; animation: vx-marquee calc(32s / var(--vx-anim-speed)) linear infinite; }
.vx-marquee:hover .vx-marquee__track { animation-play-state: paused; }
.vx-marquee__group { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); }
.vx-marquee__wordmark {
	font-family: var(--vx-font-heading);
	font-size: clamp(1.2rem, 2.4vw, 1.7rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: color-mix(in srgb, var(--vx-text) 34%, transparent);
	white-space: nowrap;
	transition: color 0.3s var(--vx-ease);
}
.vx-marquee__item:hover .vx-marquee__wordmark { color: var(--vx-text); }
.vx-marquee__logo { max-height: 42px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity 0.3s, filter 0.3s; }
.vx-marquee__item:hover .vx-marquee__logo { opacity: 1; filter: none; }
@keyframes vx-marquee { to { transform: translateX(-50%); } }

/* Slider (testimonials) */
.vx-slider { position: relative; }
.vx-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(100%, 620px);
	gap: 1.6rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
}
.vx-slider__track::-webkit-scrollbar { display: none; }
.vx-slider__slide { scroll-snap-align: center; }
.vx-slider__nav { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.8rem; }
.vx-slider__btn {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--vx-line-strong);
	background: var(--vx-glass);
	color: var(--vx-text);
	cursor: pointer;
	transition: border-color 0.25s, transform 0.25s var(--vx-ease);
}
.vx-slider__btn:hover { border-color: var(--vx-accent); transform: scale(1.06); }
.vx-slider__dots { display: flex; gap: 0.5rem; }
.vx-slider__dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: var(--vx-line-strong); cursor: pointer; transition: width 0.3s var(--vx-ease), background 0.3s; }
.vx-slider__dot.is-active { width: 26px; background: var(--vx-gradient); }

/* ── 10 Home sections ──────────────────────────────────────────────── */

/* About */
.vx-about__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.vx-about__media { position: relative; }
.vx-about__image { border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-line); aspect-ratio: 4 / 5; }
.vx-about__image img, .vx-about__image .vx-placeholder { width: 100%; height: 105%; object-fit: cover; }
.vx-about__badge {
	position: absolute;
	right: -18px; bottom: 2rem;
	padding: 1.1rem 1.5rem;
	text-align: center;
	border-radius: var(--vx-radius);
	background: var(--vx-glass-strong);
	border: 1px solid var(--vx-line-strong);
	backdrop-filter: blur(var(--vx-blur));
	box-shadow: var(--vx-shadow-sm);
}
.vx-about__badge-num { display: block; font-family: var(--vx-font-heading); font-size: 2rem; font-weight: 700; background: var(--vx-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vx-about__badge-label { font-size: 0.8rem; color: var(--vx-muted); }
.vx-about__text { color: var(--vx-muted); font-size: 1.05rem; }
.vx-about__points { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: 0.8rem; }
.vx-about__points li { display: flex; gap: 0.7em; align-items: flex-start; font-weight: 500; }

/* Stats */
.vx-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 1.2rem;
	margin: 0;
}
.vx-stats__item {
	padding: clamp(1.6rem, 3vw, 2.4rem) 1.4rem;
	text-align: center;
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line);
	background: var(--vx-glass);
	backdrop-filter: blur(var(--vx-blur));
	transition: transform 0.4s var(--vx-ease), border-color 0.4s;
}
.vx-stats__item:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--vx-accent) 40%, var(--vx-line)); }
.vx-stats__value { margin: 0; }
.vx-stats__value .vx-counter, .vx-stats__suffix { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.vx-stats__suffix { color: var(--vx-accent-2); }
.vx-stats__label { margin-top: 0.4rem; font-size: 0.88rem; color: var(--vx-muted); }

/* Process */
.vx-process__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1.4rem;
	list-style: none;
	margin: 0; padding: 0;
	counter-reset: step;
}
.vx-process__step { position: relative; padding: clamp(1.6rem, 3vw, 2rem); border-radius: var(--vx-radius); border: 1px solid var(--vx-line); background: var(--vx-surface); }
.vx-process__num {
	position: absolute;
	top: 1.2rem; right: 1.4rem;
	font-family: var(--vx-font-heading);
	font-size: 2.4rem;
	font-weight: 700;
	color: color-mix(in srgb, var(--vx-text) 8%, transparent);
	line-height: 1;
}
.vx-process__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.2rem; border-radius: 14px; background: color-mix(in srgb, var(--vx-accent) 16%, transparent); color: var(--vx-accent-2); }
.vx-process__title { font-size: 1.1rem; }
.vx-process__text { margin: 0; font-size: 0.92rem; color: var(--vx-muted); }
.vx-process__connector { display: none; }

/* CTA panel */
.vx-cta__panel {
	position: relative;
	padding: clamp(3rem, 7vw, 5.5rem) clamp(1.6rem, 5vw, 4rem);
	text-align: center;
	border-radius: calc(var(--vx-radius) * 1.4);
	border: 1px solid var(--vx-line-strong);
	background:
		radial-gradient(90% 130% at 50% 0%, color-mix(in srgb, var(--vx-accent) 22%, transparent), transparent 60%),
		var(--vx-surface);
	overflow: clip;
}
.vx-cta__panel .vx-orb { opacity: 0.35; }
.vx-cta__title { font-size: clamp(2rem, 4.6vw, 3.4rem); position: relative; }
.vx-cta__text { position: relative; color: var(--vx-muted); max-width: 480px; margin: 0 auto 2rem; }

/* ── 11 Toolbar, filters, pagination ───────────────────────────────── */

.vx-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.vx-toolbar__right { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-left: auto; }
.vx-toolbar__search { position: relative; display: inline-flex; align-items: center; }
.vx-toolbar__search svg { position: absolute; left: 0.9rem; color: var(--vx-muted); pointer-events: none; }
.vx-toolbar__search input { width: 220px; padding-left: 2.5rem; border-radius: 999px; }
.vx-toolbar__sort select { width: auto; border-radius: 999px; padding-right: 2.4rem; }

.vx-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vx-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 1.15em;
	font-size: 0.88rem;
	font-weight: 600;
	border-radius: 999px;
	border: 1px solid var(--vx-line);
	background: transparent;
	color: var(--vx-muted);
	cursor: pointer;
	transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.vx-filter:hover { color: var(--vx-text); border-color: var(--vx-line-strong); }
.vx-filter.is-active { color: #fff; background: var(--vx-gradient); border-color: transparent; }
.vx-filter__count { font-size: 0.72rem; opacity: 0.75; }

.vx-loadmore-wrap { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.vx-loadmore.is-loading { opacity: 0.6; pointer-events: none; }

.vx-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; }
.vx-pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 44px; height: 44px;
	padding: 0 0.8em;
	border-radius: 999px;
	border: 1px solid var(--vx-line);
	font-weight: 600;
	transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.vx-pagination .page-numbers:hover { border-color: var(--vx-accent); color: var(--vx-text); }
.vx-pagination .page-numbers.current { background: var(--vx-gradient); border-color: transparent; color: #fff; }

/* Accordion */
.vx-accordion { display: grid; gap: 0.9rem; }
.vx-accordion__item {
	border: 1px solid var(--vx-line);
	border-radius: var(--vx-radius);
	background: var(--vx-surface);
	overflow: hidden;
	transition: border-color 0.3s;
}
.vx-accordion__item[open] { border-color: color-mix(in srgb, var(--vx-accent) 45%, var(--vx-line)); }
.vx-accordion__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	font-family: var(--vx-font-heading);
	font-size: 1.02rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.vx-accordion__q::-webkit-details-marker { display: none; }
.vx-accordion__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--vx-accent) 15%, transparent); color: var(--vx-accent-2); transition: transform 0.35s var(--vx-ease); }
.vx-accordion__item[open] .vx-accordion__icon { transform: rotate(45deg); }
.vx-accordion__a { padding: 0 1.4rem 1.3rem; color: var(--vx-muted); }

/* Tabs */
.vx-tabs__nav { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--vx-line); margin: 2rem 0 1.8rem; }
.vx-tabs__tab {
	position: relative;
	padding: 0.8em 1.2em;
	font-family: var(--vx-font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--vx-muted);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.25s;
}
.vx-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0.8em; right: 0.8em; bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--vx-gradient);
	transform: scaleX(0);
	transition: transform 0.35s var(--vx-ease);
}
.vx-tabs__tab:hover { color: var(--vx-text); }
.vx-tabs__tab.is-active { color: var(--vx-text); }
.vx-tabs__tab.is-active::after { transform: scaleX(1); }
.vx-tabs__count { font-size: 0.75rem; padding: 0.1em 0.55em; border-radius: 999px; background: color-mix(in srgb, var(--vx-text) 10%, transparent); }

/* ── 12 Modals & toast ─────────────────────────────────────────────── */

.vx-modal { position: fixed; inset: 0; z-index: 990; display: grid; place-items: center; padding: 1.2rem; visibility: hidden; pointer-events: none; }
.vx-modal__backdrop {
	position: absolute; inset: 0;
	background: color-mix(in srgb, var(--vx-bg) 72%, transparent);
	backdrop-filter: blur(14px);
	opacity: 0;
	transition: opacity 0.35s var(--vx-ease);
}
.vx-modal__panel {
	position: relative;
	width: min(720px, 100%);
	max-height: min(86vh, 780px);
	overflow-y: auto;
	padding: clamp(1.6rem, 4vw, 2.6rem);
	border-radius: calc(var(--vx-radius) * 1.2);
	border: 1px solid var(--vx-line-strong);
	background: var(--vx-glass-strong);
	backdrop-filter: blur(calc(var(--vx-blur) * 1.5));
	box-shadow: var(--vx-shadow);
	opacity: 0;
	transform: translateY(24px) scale(0.97);
	transition: opacity 0.4s var(--vx-ease), transform 0.4s var(--vx-ease);
}
.vx-modal.is-open { visibility: visible; pointer-events: auto; }
.vx-modal.is-open .vx-modal__backdrop { opacity: 1; }
.vx-modal.is-open .vx-modal__panel { opacity: 1; transform: none; }
.vx-modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vx-line); background: var(--vx-glass); color: var(--vx-text); cursor: pointer; }
.vx-modal__panel--search { padding-top: 3.4rem; }
.vx-modal__panel--quickview { width: min(880px, 100%); }

/* Quick view */
.vx-quickview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.vx-quickview__media { border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-line); }
.vx-quickview__media img { width: 100%; object-fit: cover; }
.vx-quickview__title { font-size: 1.4rem; margin-bottom: 0.4rem; }
.vx-quickview__price { font-family: var(--vx-font-heading); font-size: 1.3rem; font-weight: 700; color: var(--vx-accent-2); margin: 0.4rem 0 0.8rem; }
.vx-quickview__excerpt { color: var(--vx-muted); font-size: 0.95rem; }
.vx-quickview__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 0.9rem; }
.vx-quickview__details { font-size: 0.88rem; font-weight: 600; color: var(--vx-accent-2); }

/* ── 13 Page hero, single demo, buy card ───────────────────────────── */

.vx-page-hero {
	position: relative;
	padding: calc(var(--vx-header-h) + clamp(2.5rem, 7vh, 4.5rem)) 0 clamp(2.5rem, 6vh, 4rem);
	overflow: clip;
}
body:not(.vx-header-transparent) .vx-page-hero { padding-top: clamp(2.5rem, 7vh, 4.5rem); }
.vx-page-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.vx-page-hero__title { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 0.6rem 0 0.5rem; }
.vx-page-hero__sub { max-width: 620px; color: var(--vx-muted); font-size: 1.08rem; margin: 0; }

.vx-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: var(--vx-muted); }
.vx-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5em; opacity: 0.5; }
.vx-breadcrumbs a:hover { color: var(--vx-text); }
.vx-breadcrumbs [aria-current] { color: var(--vx-text); }

/* Demo single */
.vx-demo-hero { position: relative; padding: calc(var(--vx-header-h) + clamp(2rem, 6vh, 3.5rem)) 0 clamp(1.8rem, 4vh, 2.6rem); overflow: clip; }
body:not(.vx-header-transparent) .vx-demo-hero { padding-top: clamp(2rem, 6vh, 3.5rem); }
.vx-demo-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem; }
.vx-demo-hero__title { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0.5rem 0 0.7rem; }
.vx-demo-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; font-size: 0.9rem; color: var(--vx-muted); }
.vx-demo-hero__cat { padding: 0.3em 0.95em; border-radius: 999px; border: 1px solid var(--vx-line-strong); font-weight: 600; color: var(--vx-text); }
.vx-demo-hero__author { display: inline-flex; align-items: center; gap: 0.4em; }
.vx-demo-hero__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.vx-demo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; padding-bottom: var(--vx-space); }
.vx-demo-cover { position: relative; border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-line); margin: 0; }
.vx-demo-cover img { width: 100%; }
.vx-demo-cover__play {
	position: absolute;
	left: 50%; bottom: 1.4rem;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.75em 1.5em;
	font-weight: 700;
	font-size: 0.92rem;
	border-radius: 999px;
	background: var(--vx-glass-strong);
	border: 1px solid var(--vx-line-strong);
	backdrop-filter: blur(var(--vx-blur));
	box-shadow: var(--vx-shadow-sm);
	transition: transform 0.3s var(--vx-ease), box-shadow 0.3s;
}
.vx-demo-cover__play:hover { transform: translateX(-50%) translateY(-3px); box-shadow: var(--vx-glow); color: var(--vx-text); }

.vx-buy-card {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line-strong);
	background: var(--vx-glass);
	backdrop-filter: blur(var(--vx-blur));
}
.vx-buy-card__price { font-family: var(--vx-font-heading); font-size: 2.1rem; font-weight: 700; margin: 0 0 0.3rem; }
.vx-buy-card__price .vx-price { color: var(--vx-accent-2); }
.vx-buy-card__rating { margin: 0 0 1.2rem; }
.vx-buy-card__actions { display: grid; gap: 0.7rem; margin-bottom: 1.5rem; }
.vx-buy-card__actions .vx-btn { justify-content: center; }
.vx-buy-card__row { display: flex; justify-content: center; gap: 0.7rem; }
.vx-buy-card__tags { margin-top: 1.2rem; }

.vx-spec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vx-spec-table th, .vx-spec-table td { padding: 0.65em 0; border-bottom: 1px solid var(--vx-line); text-align: left; }
.vx-spec-table th { color: var(--vx-muted); font-weight: 500; }
.vx-spec-table td { text-align: right; font-weight: 600; }
.vx-spec-table tr:last-child th, .vx-spec-table tr:last-child td { border-bottom: 0; }

.vx-feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 0.8rem; }
.vx-feature-list li { display: flex; align-items: flex-start; gap: 0.6em; }

.vx-shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.vx-shot { display: block; border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-line); transition: transform 0.35s var(--vx-ease); }
.vx-shot:hover { transform: translateY(-4px); }

/* ── 14 Portfolio single / case study ──────────────────────────────── */

.vx-case-hero__result { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.55em 1.2em; border-radius: 999px; background: color-mix(in srgb, #34e2a5 14%, transparent); color: #34e2a5; font-weight: 700; }
.vx-case-cover { border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-line); }
.vx-case-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-block: var(--vx-space); }
.vx-case-meta { display: grid; gap: 1.1rem; margin: 0 0 1.6rem; padding: 1.5rem; border-radius: var(--vx-radius); border: 1px solid var(--vx-line); background: var(--vx-surface); }
.vx-case-meta dt { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vx-muted); }
.vx-case-meta dd { margin: 0.15rem 0 0; font-weight: 600; }
.vx-case-gallery { display: grid; gap: 1.4rem; margin-top: 2rem; }
.vx-case-gallery figure { margin: 0; border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-line); }
.vx-case-nav, .vx-single__nav { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 2rem calc(var(--vx-space) * 0.75); font-weight: 600; }

/* ── 15 Blog single, comments, reviews ─────────────────────────────── */

.vx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 4vw, 3rem); align-items: start; padding-block: clamp(2rem, 5vw, 3.5rem) var(--vx-space); }
.vx-layout__sidebar { display: grid; gap: 1.6rem; position: sticky; top: calc(var(--vx-header-h) + 1.5rem); }
.vx-widget { padding: 1.5rem; border-radius: var(--vx-radius); border: 1px solid var(--vx-line); background: var(--vx-surface); }
.vx-widget__title { font-size: 1rem; margin-bottom: 1rem; }
.vx-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.vx-widget a { color: var(--vx-muted); }
.vx-widget a:hover { color: var(--vx-text); }

.vx-single__cover { border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-line); margin-bottom: clamp(2rem, 4vw, 3rem); }
.vx-single .vx-prose { padding-bottom: 2rem; }
.vx-single__footer { border-top: 1px solid var(--vx-line); padding-top: 2rem; display: grid; gap: 1.8rem; }
.vx-single__author { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.4rem; border-radius: var(--vx-radius); background: var(--vx-surface); border: 1px solid var(--vx-line); }
.vx-single__avatar img { border-radius: 50%; }
.vx-single__author p { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--vx-muted); }

.vx-comments { margin-top: 2.5rem; }
.vx-comments__title { font-size: 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vx-comments__avg { display: inline-flex; align-items: center; gap: 0.5em; font-size: 1rem; }
.vx-comments__list { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: 1.1rem; }
.vx-comments__list ol { list-style: none; padding-left: clamp(1rem, 4vw, 2.5rem); margin: 1.1rem 0 0; display: grid; gap: 1.1rem; }
.vx-comment__body { padding: 1.3rem 1.5rem; border-radius: var(--vx-radius); border: 1px solid var(--vx-line); background: var(--vx-surface); }
.vx-comment__header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.8rem; }
.vx-comment__avatar img { border-radius: 50%; display: block; }
.vx-comment__meta { display: flex; flex-direction: column; }
.vx-comment__meta time { font-size: 0.78rem; color: var(--vx-muted); }
.vx-comment__verified { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.75rem; font-weight: 700; color: #34e2a5; }
.vx-comment__rating { margin-left: auto; }
.vx-comment__content { color: color-mix(in srgb, var(--vx-text) 88%, var(--vx-muted)); }
.vx-comment__content p:last-child { margin: 0; }
.vx-comment__pending { font-size: 0.82rem; color: #f7b32b; }
.vx-comment__reply { margin-top: 0.7rem; font-size: 0.85rem; font-weight: 600; }
.vx-comment-form { margin-top: 1.6rem; }

/* Star selector in review form */
.vx-rating-field { border: 0; padding: 0; margin: 0 0 1.2rem; }
.vx-rating-field legend { font-weight: 600; margin-bottom: 0.5rem; }
.vx-rating-field__stars { display: inline-flex; flex-direction: row-reverse; gap: 0.2rem; }
.vx-rating-field__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vx-rating-field__stars label { cursor: pointer; color: color-mix(in srgb, var(--vx-text) 25%, transparent); transition: color 0.15s, transform 0.15s; }
.vx-rating-field__stars label svg { fill: currentColor; stroke: none; }
.vx-rating-field__stars label:hover, .vx-rating-field__stars label:hover ~ label,
.vx-rating-field__stars input:checked ~ label { color: #f7b32b; }
.vx-rating-field__stars input:focus-visible + label { outline: 2px solid var(--vx-accent-2); border-radius: 4px; }

/* Reviews page */
.vx-review-list { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.vx-review { padding: 1.4rem 1.6rem; border-radius: var(--vx-radius); border: 1px solid var(--vx-line); background: var(--vx-surface); }
.vx-review__header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.7rem; }
.vx-review__avatar img { border-radius: 50%; display: block; }
.vx-review__header time { display: block; font-size: 0.78rem; color: var(--vx-muted); }
.vx-review__stars { margin-left: auto; }
.vx-review__text { color: color-mix(in srgb, var(--vx-text) 88%, var(--vx-muted)); }
.vx-review__product { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.85rem; font-weight: 600; color: var(--vx-accent-2); }

/* ── 16 Contact, careers, wishlist, 404, misc ──────────────────────── */

.vx-contact__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); padding-bottom: var(--vx-space); }
.vx-contact__list { list-style: none; margin: 1.8rem 0; padding: 0; display: grid; gap: 1.3rem; }
.vx-contact__list li { display: flex; gap: 1rem; align-items: flex-start; }
.vx-contact__list strong { display: block; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vx-muted); }
.vx-contact__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--vx-accent) 16%, transparent); color: var(--vx-accent-2); }
.vx-contact__form-wrap { padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: var(--vx-radius); border: 1px solid var(--vx-line-strong); background: var(--vx-glass); backdrop-filter: blur(var(--vx-blur)); }

.vx-social { display: flex; gap: 0.6rem; }
.vx-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vx-line); color: var(--vx-muted); transition: color 0.25s, border-color 0.25s, transform 0.25s var(--vx-ease); }
.vx-social a:hover { color: var(--vx-text); border-color: var(--vx-accent); transform: translateY(-3px); }

/* Careers */
.vx-job-list { display: grid; gap: 1rem; padding-bottom: var(--vx-space); }
.vx-job {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: var(--vx-radius);
	border: 1px solid var(--vx-line);
	background: var(--vx-surface);
	transition: transform 0.35s var(--vx-ease), border-color 0.35s;
}
.vx-job:hover { transform: translateX(6px); border-color: color-mix(in srgb, var(--vx-accent) 45%, var(--vx-line)); color: var(--vx-text); }
.vx-job__title { font-size: 1.25rem; margin-bottom: 0.4rem; }
.vx-job-meta { display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; margin: 0 0 1.2rem; padding: 0; font-size: 0.88rem; color: var(--vx-muted); }
.vx-job-meta li { display: inline-flex; align-items: center; gap: 0.4em; }
.vx-job .vx-job-meta { margin: 0; }
.vx-job__arrow { color: var(--vx-muted); transition: transform 0.3s var(--vx-ease), color 0.3s; }
.vx-job:hover .vx-job__arrow { transform: translate(4px, -4px); color: var(--vx-accent-2); }
.vx-service-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin: 2.4rem 0 var(--vx-space); padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--vx-radius); border: 1px solid var(--vx-line-strong); background: var(--vx-glass); }
.vx-service-cta__price { margin: 0; font-family: var(--vx-font-heading); font-size: 1.3rem; font-weight: 700; color: var(--vx-accent-2); }

/* Wishlist */
.vx-wishlist { padding-bottom: var(--vx-space); }
.vx-wishlist__skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.6rem; }
.vx-wishlist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.6rem; }
.vx-wishlist-item { position: relative; border-radius: var(--vx-radius); border: 1px solid var(--vx-line); background: var(--vx-surface); overflow: hidden; }
.vx-wishlist-item__media { display: block; aspect-ratio: 4 / 3; }
.vx-wishlist-item__media img { width: 100%; height: 100%; object-fit: cover; }
.vx-wishlist-item__media .vx-placeholder { height: 100%; }
.vx-wishlist-item__body { padding: 1.1rem 1.3rem 1.3rem; }
.vx-wishlist-item__title { font-size: 1.05rem; margin-bottom: 0.3rem; }
.vx-wishlist-item__price { font-weight: 700; color: var(--vx-accent-2); }
.vx-wishlist-item__actions { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.vx-wishlist-item__remove { position: absolute; top: 0.8rem; right: 0.8rem; }

/* 404 / Thank you */
.vx-404 { position: relative; min-height: 78vh; display: grid; place-items: center; padding: calc(var(--vx-header-h) + 3rem) 0 4rem; overflow: clip; text-align: center; }
.vx-404__bg { position: absolute; inset: 0; pointer-events: none; }
.vx-404__inner { position: relative; max-width: 640px; }
.vx-404__code {
	font-family: var(--vx-font-heading);
	font-size: clamp(6rem, 18vw, 12rem);
	font-weight: 700;
	line-height: 1;
	margin: 0;
	background: var(--vx-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.9;
}
.vx-404__title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.vx-404__text { color: var(--vx-muted); }
.vx-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 1.8rem 0; }
.vx-404__search { max-width: 440px; margin-inline: auto; }
.vx-thankyou__icon { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 1.4rem; border-radius: 50%; background: color-mix(in srgb, #34e2a5 16%, transparent); color: #34e2a5; }

/* Empty state */
.vx-empty { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem; max-width: 480px; margin-inline: auto; }
.vx-empty__icon { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 1.2rem; border-radius: 50%; background: var(--vx-glass); border: 1px solid var(--vx-line-strong); color: var(--vx-muted); }
.vx-empty__title { font-size: 1.4rem; }
.vx-empty__text { color: var(--vx-muted); }

/* Search form */
.vx-search { position: relative; display: flex; align-items: center; }
.vx-search__icon { position: absolute; left: 1.1rem; color: var(--vx-muted); pointer-events: none; }
.vx-search__input { padding-left: 2.8rem; padding-right: 7.2rem; border-radius: 999px; height: 54px; }
.vx-search__submit {
	position: absolute;
	right: 6px;
	height: 42px;
	padding: 0 1.4em;
	border: 0;
	border-radius: 999px;
	background: var(--vx-gradient);
	color: #fff;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	transition: box-shadow 0.3s;
}
.vx-search__submit:hover { box-shadow: var(--vx-glow); }
.vx-search-form-wrap { max-width: 560px; margin: 0 auto clamp(2rem, 5vw, 3rem); }

/* FAQ groups */
.vx-faq-group { margin-bottom: clamp(2rem, 5vw, 3rem); }
.vx-faq-group__title { font-size: 1.3rem; margin-bottom: 1.2rem; }

/* Newsletter */
.vx-newsletter { position: relative; max-width: 340px; }
.vx-newsletter input { padding-right: 3.6rem; border-radius: 999px; }
.vx-newsletter button {
	position: absolute;
	top: 5px; right: 5px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--vx-gradient);
	color: #fff;
	cursor: pointer;
	transition: box-shadow 0.3s, transform 0.3s var(--vx-ease);
}
.vx-newsletter button:hover { box-shadow: var(--vx-glow); transform: scale(1.06); }
.vx-newsletter__msg { margin: 0.5rem 0 0; font-size: 0.85rem; min-height: 1.3em; }
.vx-newsletter__msg.is-success { color: #34e2a5; }
.vx-newsletter__msg.is-error { color: #ff6b6b; }

/* ── 17 Footer ─────────────────────────────────────────────────────── */

.vx-footer { border-top: 1px solid var(--vx-line); background: color-mix(in srgb, var(--vx-surface) 55%, var(--vx-bg)); }
.vx-footer__cta { padding-top: var(--vx-space); }
.vx-footer-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(2.4rem, 5vw, 4rem);
	border-radius: calc(var(--vx-radius) * 1.4);
	background: var(--vx-gradient);
	color: #fff;
	overflow: clip;
}
.vx-footer-cta__glow { position: absolute; inset: -50% 40% -20% -20%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.25), transparent); pointer-events: none; }
.vx-footer-cta__title { color: #fff; font-size: clamp(1.7rem, 3.8vw, 2.8rem); margin: 0; max-width: 620px; position: relative; }

.vx-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.vx-footer__about { color: var(--vx-muted); font-size: 0.95rem; max-width: 340px; margin: 1.1rem 0 1.4rem; }
.vx-footer__heading { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vx-muted); margin-bottom: 1.2rem; }
.vx-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vx-footer__links a { color: color-mix(in srgb, var(--vx-text) 78%, var(--vx-muted)); font-size: 0.95rem; }
.vx-footer__links a:hover { color: var(--vx-accent-2); }
.vx-footer__contact { display: grid; gap: 0.5rem; margin-top: 1.4rem; font-style: normal; font-size: 0.92rem; color: var(--vx-muted); }
.vx-footer__contact a:hover { color: var(--vx-text); }
.vx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.6rem;
	border-top: 1px solid var(--vx-line);
}
.vx-footer__copy { margin: 0; font-size: 0.85rem; color: var(--vx-muted); }
.vx-footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.vx-footer__legal a { color: var(--vx-muted); }
.vx-footer__legal a:hover { color: var(--vx-text); }

/* ── 18 Responsive & motion preferences ────────────────────────────── */

@media (max-width: 1200px) {
	.vx-hero__inner { grid-template-columns: 1fr; }
	.vx-hero__cards { display: none; }
	.vx-demo-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1024px) {
	/* Mobile header: logo on the left; search + theme toggle + menu on
	   the right. The "Start a Project" CTA moves into the mobile menu. */
	.vx-nav, .vx-header__cta { display: none; }
	.vx-burger { display: flex; }
	.vx-header__inner { gap: 1rem; }
	.vx-header__actions { gap: 0.5rem; margin-left: auto; }
	.vx-layout, .vx-case-layout, .vx-contact__grid, .vx-about__grid { grid-template-columns: 1fr; }
	.vx-layout__sidebar { position: static; }
	.vx-demo-layout { grid-template-columns: 1fr; }
	.vx-buy-card { position: static !important; }
	.vx-about__media { max-width: 480px; }
	.vx-quotes-masonry { columns: 2 300px; }
}

@media (max-width: 640px) {
	:root { --vx-header-h: 64px; }
	/* Compact the header so logo + 3 controls always fit without wrapping
	   or horizontal scroll, even on 360px phones. */
	.vx-header__inner { gap: 0.6rem; }
	.vx-logo, .vx-logo--text { font-size: 1.2rem; }
	.vx-icon-btn, .vx-burger { width: 40px; height: 40px; }
	.vx-header__actions { gap: 0.4rem; }
	.vx-hero { min-height: max(78svh, 560px); }
	.vx-hero__stats { gap: 1.3rem; }
	.vx-hero__actions .vx-btn { width: 100%; justify-content: center; }
	.vx-section-row { flex-direction: column; align-items: flex-start; }
	.vx-toolbar { flex-direction: column; align-items: stretch; }
	.vx-toolbar__right { margin-left: 0; }
	.vx-toolbar__search input { width: 100%; }
	.vx-quickview { grid-template-columns: 1fr; }
	.vx-demo-hero__actions .vx-btn { flex: 1; justify-content: center; }
	.vx-job { flex-direction: column; align-items: flex-start; }
	.vx-footer__grid { grid-template-columns: 1fr; }
	.vx-quotes-masonry { columns: 1; }
	.vx-float--cube, .vx-float--dot { display: none; }
	.vx-backtop { width: 42px; height: 42px; }
}

@media (min-width: 2000px) {
	:root { --vx-base-size: calc(var(--vx-base-size, 16px)); }
	html { font-size: 17px; }
	.vx-hero { min-height: 900px; }
}

/* Touch devices: cursor + tilt off, actions always visible */
@media (hover: none) {
	.vx-cursor { display: none !important; }
	.vx-demo-card__actions, .vx-product-card__actions, .vx-team-card__social { opacity: 1; transform: none; }
	.vx-work-card__overlay { opacity: 0.001; }
}

/* Reduced motion: kill every animation & transition */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
		scroll-behavior: auto !important;
	}
	.vx-preloader { display: none !important; }
	.vx-cursor { display: none !important; }
	.vx-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* Print */
@media print {
	.vx-header, .vx-footer, .vx-cursor, .vx-preloader, .vx-backtop, .vx-progress, .vx-mobile-menu { display: none !important; }
	body { background: #fff; color: #000; }
}