/* Pyxios – site styles. Prefix: px-  (safe next to Bootstrap / NativePageBuilder) */

:root {
	--px-ink: #0e0c22;
	--px-ink-2: #17143a;
	--px-ink-3: #231f52;
	--px-blue: #4fc3f7;
	--px-violet: #7e6cf0;
	--px-purple: #9b4dca;
	--px-grad: linear-gradient(115deg, #4fc3f7 0%, #7e6cf0 52%, #a04fd0 100%);
	--px-bg: #f6f6fb;
	--px-surface: #fff;
	--px-text: #17152f;
	--px-muted: #5d5a78;
	--px-line: #e5e3f0;
	--px-on-dark: #ecebff;
	--px-on-dark-muted: #a9a6cf;
	--px-ok: #16a34a;
	--px-err: #dc2626;
	--px-r: 16px;
	--px-r-sm: 10px;
	--px-shadow: 0 1px 2px rgba(23, 21, 47, .05), 0 8px 24px -12px rgba(23, 21, 47, .12);
	--px-shadow-lg: 0 2px 4px rgba(23, 21, 47, .06), 0 24px 48px -20px rgba(60, 40, 140, .28);
	--px-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--px-display: "Space Grotesk", var(--px-font);
	--px-wrap: 1200px;
	--px-header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--px-header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16.5px/1.65 var(--px-font); color: var(--px-text); background: var(--px-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--px-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--px-violet); outline-offset: 3px; border-radius: 6px; }

.px-wrap { width: 100%; max-width: var(--px-wrap); margin: 0 auto; padding: 0 24px; }
.px-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
.px-skip:focus { left: 8px; }
.px-ico { width: 1.15em; height: 1.15em; flex: none; }
.px-grad { background: var(--px-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.px-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem/1 var(--px-font); letter-spacing: .14em; text-transform: uppercase; color: var(--px-violet); margin-bottom: 18px; }
.px-kicker::before { content: ""; width: 18px; height: 2px; background: var(--px-grad); border-radius: 2px; }
.px-lead { font-size: 1.12rem; color: var(--px-muted); max-width: 640px; }
.px-note { margin-top: 28px; color: var(--px-muted); text-align: center; font-size: .95rem; }
.px-fine { font-size: .82rem; color: var(--px-muted); margin: 12px 0 0; display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.px-fine a { color: var(--px-violet); }
.px-fine:has(> a:only-child) { display: block; }

/* ---------- buttons ---------- */
.px-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px;
	font: 600 .95rem/1 var(--px-font); text-decoration: none; cursor: pointer; white-space: nowrap;
	color: #fff; background: var(--px-grad); background-size: 140% 100%; background-position: 0 0;
	box-shadow: 0 6px 18px -6px rgba(126, 108, 240, .6);
	transition: background-position .35s ease, box-shadow .2s ease, color .2s, border-color .2s;
}
.px-btn:hover { background-position: 100% 0; box-shadow: 0 10px 26px -8px rgba(126, 108, 240, .75); }
.px-btn--sm { min-height: 40px; padding: 0 18px; font-size: .88rem; }
.px-btn--lg { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.px-btn--block { width: 100%; }
.px-btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: var(--px-on-dark); box-shadow: none; }
.px-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); box-shadow: none; }
.px-btn--ghost-dark { background: transparent; border-color: var(--px-line); color: var(--px-text); box-shadow: none; margin-top: 10px; }
.px-btn--ghost-dark:hover { border-color: var(--px-violet); color: var(--px-violet); box-shadow: none; }
.px-btn--light { background: #fff; color: var(--px-ink); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5); }
.px-btn--light:hover { background: #f0eeff; }
.px-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.px-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--px-violet); text-decoration: none; }
.px-link .px-ico { transition: transform .2s; }
.px-link:hover .px-ico { transform: translateX(3px); }

/* ---------- header ---------- */
.px-header { position: sticky; top: 0; z-index: 50; background: rgba(14, 12, 34, .88); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.px-header__in { display: flex; align-items: center; justify-content: space-between; height: var(--px-header-h); gap: 24px; }
.px-logo img { height: 46px; width: auto; }
.px-nav { display: flex; align-items: center; gap: 28px; }
.px-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.px-nav ul a { display: block; padding: 8px 14px; border-radius: 999px; color: var(--px-on-dark-muted); text-decoration: none; font-weight: 500; font-size: .95rem; transition: color .2s, background .2s; }
.px-nav ul a:hover, .px-nav ul a[aria-current] { color: #fff; background: rgba(255, 255, 255, .07); }
.px-lang { display: flex; padding: 3px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; }
.px-lang a { padding: 4px 10px; border-radius: 999px; font: 600 .75rem/1.4 var(--px-font); letter-spacing: .06em; color: var(--px-on-dark-muted); text-decoration: none; }
.px-lang a[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; }
.px-burger { display: none; background: none; border: 0; color: #fff; width: 44px; height: 44px; padding: 10px; cursor: pointer; border-radius: 10px; }
.px-burger .px-ico { width: 24px; height: 24px; }
.px-burger .px-ico + .px-ico, .px-burger[aria-expanded="true"] .px-ico:first-child { display: none; }
.px-burger[aria-expanded="true"] .px-ico + .px-ico { display: block; }

/* ---------- hero ---------- */
.px-hero, .px-pagehead { position: relative; overflow: hidden; background: var(--px-ink); color: var(--px-on-dark); isolation: isolate; }
.px-hero { padding: 88px 0 104px; }
.px-hero::before, .px-pagehead::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(700px 420px at 85% 10%, rgba(126, 108, 240, .35), transparent 60%),
		radial-gradient(600px 400px at 0% 100%, rgba(79, 195, 247, .18), transparent 60%),
		radial-gradient(500px 300px at 60% 110%, rgba(160, 79, 208, .25), transparent 60%);
}
.px-hero::after, .px-pagehead::after {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
	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: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
}
.px-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.px-hero__bg i { position: absolute; width: 18px; height: 18px; border-radius: 4px; opacity: .85; animation: px-float 9s ease-in-out infinite; }
.px-hero__bg i:nth-child(1) { top: 14%; right: 9%; background: #3a3fa8; }
.px-hero__bg i:nth-child(2) { top: 8%; right: 13%; width: 14px; height: 14px; background: #7a3aa8; animation-delay: -2s; }
.px-hero__bg i:nth-child(3) { top: 20%; right: 5%; width: 12px; height: 12px; background: #1f8fd0; animation-delay: -4s; }
.px-hero__bg i:nth-child(4) { bottom: 16%; left: 4%; width: 10px; height: 10px; background: #9b4dca; animation-delay: -1s; }
.px-hero__bg i:nth-child(5) { top: 6%; right: 6%; width: 22px; height: 22px; background: #2b2d6e; animation-delay: -6s; }
@keyframes px-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.px-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.px-hero h1 { color: #fff; }
.px-hero .px-lead, .px-pagehead .px-lead { color: var(--px-on-dark-muted); }
.px-hero .px-kicker, .px-pagehead .px-kicker { color: var(--px-blue); }
.px-hero .px-actions { margin: 32px 0 30px; }
.px-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9rem; color: var(--px-on-dark-muted); }
.px-trust li { display: flex; align-items: center; gap: 8px; }
.px-trust .px-ico { color: var(--px-blue); }

.px-hero__art { position: relative; }
.px-window { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden; }
.px-window__bar { display: flex; gap: 7px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.px-window__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.px-window__body { padding: 28px; }
.px-sk { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .1); margin-bottom: 12px; }
.px-sk--h { height: 22px; width: 70%; background: var(--px-grad); opacity: .85; margin-bottom: 18px; }
.px-sk--s { width: 55%; }
.px-window__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.px-window__cards div { aspect-ratio: 4/5; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.px-window__cards div::before { content: ""; position: absolute; inset: 10px 10px 45%; border-radius: 8px; background: linear-gradient(135deg, rgba(79, 195, 247, .35), rgba(160, 79, 208, .35)); }
.px-window__cards div::after { content: ""; position: absolute; left: 10px; right: 30%; bottom: 14px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.px-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(23, 20, 58, .92); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); font-size: .86rem; color: var(--px-on-dark-muted); animation: px-float 7s ease-in-out infinite; }
.px-float b { color: #fff; }
.px-float .px-ico { color: var(--px-blue); width: 20px; height: 20px; }
.px-float--a { left: -28px; bottom: 40px; }
.px-float--b { right: -16px; top: 54px; animation-delay: -3s; }

.px-pagehead { padding: 72px 0 64px; }
.px-pagehead h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.px-pagehead .px-lead { margin-bottom: 0; }

/* ---------- sections ---------- */
.px-sec { padding: 96px 0; }
.px-sec--tint { background: linear-gradient(180deg, #efeefa, var(--px-bg)); }
.px-head { margin-bottom: 44px; max-width: 720px; }
.px-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; }
.px-head--row .px-lead { margin-bottom: 0; }
.px-grid { display: grid; gap: 24px; }
.px-grid--3 { grid-template-columns: repeat(3, 1fr); }
.px-grid--4 { grid-template-columns: repeat(4, 1fr); }
.px-card { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-r); box-shadow: var(--px-shadow); transition: box-shadow .25s, border-color .25s; }

/* product card */
.px-pcard { display: flex; flex-direction: column; overflow: hidden; }
.px-pcard:hover { box-shadow: var(--px-shadow-lg); border-color: #d6d2f2; }
.px-pcard__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--px-ink-2); }
.px-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.px-pcard:hover .px-pcard__media img { transform: scale(1.04); }
.px-pcard__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.px-pcard__title { font-size: 1.22rem; margin: 10px 0 8px; color: var(--px-text); }
.px-pcard__title a, .px-pcard .px-pcard__title .px-pcard__link { text-decoration: none; color: var(--px-text); }
/* cards keep their own (light) colours even when a builder section sets a light text colour */
.px-pcard { color: var(--px-text); }
.px-pcard__title a:hover, .px-pcard .px-pcard__title .px-pcard__link:hover { color: var(--px-violet); }
.px-pcard__text { color: var(--px-muted); font-size: .95rem; flex: 1; }
.px-pcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--px-line); margin-top: 6px; }
.px-tag { display: inline-block; align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: #f0edff; color: #5a45d6; font: 600 .74rem/1 var(--px-font); letter-spacing: .03em; }
.px-price { font: 700 1.2rem/1 var(--px-display); color: var(--px-text); white-space: nowrap; }
.px-price s { font-weight: 500; font-size: .85em; color: var(--px-muted); margin-right: 8px; }
.px-price small { font: 500 .8rem var(--px-font); color: var(--px-muted); }

/* placeholder visual */
.px-ph { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(126, 108, 240, .55), transparent 60%), radial-gradient(circle at 80% 90%, rgba(79, 195, 247, .4), transparent 55%), var(--px-ink-2); overflow: hidden; }
.px-ph--prestashop { background-color: #1b1540; }
.px-ph--templates { background-color: #13213f; }
.px-ph__ico { width: 64px; height: 64px; color: #fff; opacity: .92; stroke-width: 1.4; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .4)); }
.px-ph i { position: absolute; width: 14px; height: 14px; border-radius: 3px; }
.px-ph i:nth-of-type(1) { top: 18%; right: 16%; background: #4fc3f7; }
.px-ph i:nth-of-type(2) { top: 10%; right: 24%; width: 10px; height: 10px; background: #9b4dca; }
.px-ph i:nth-of-type(3) { bottom: 18%; left: 14%; width: 10px; height: 10px; background: #7e6cf0; }

/* services */
.px-srv { display: flex; flex-direction: column; padding: 28px 26px; }
.px-srv:hover { box-shadow: var(--px-shadow-lg); border-color: #d6d2f2; }
.px-srv__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--px-grad); color: #fff; margin-bottom: 20px; box-shadow: 0 8px 20px -8px rgba(126, 108, 240, .7); flex: none; }
.px-srv__ico .px-ico { width: 24px; height: 24px; }
.px-srv p { color: var(--px-muted); font-size: .95rem; }
.px-srv__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--px-line); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.px-checks li { display: flex; gap: 10px; align-items: flex-start; }
.px-checks .px-ico { color: var(--px-ok); margin-top: 3px; }
.px-checks--2 { grid-template-columns: 1fr 1fr; gap: 12px 24px; }

/* steps */
.px-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.px-step { position: relative; padding: 28px; border-radius: var(--px-r); background: var(--px-surface); border: 1px solid var(--px-line); }
.px-step__n { display: inline-block; font: 700 .9rem/1 var(--px-display); padding: 8px 10px; border-radius: 10px; background: var(--px-ink); color: #fff; margin-bottom: 18px; }
.px-step p { color: var(--px-muted); margin: 0; font-size: .95rem; }
.px-steps--mini { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
.px-steps--mini .px-step { display: flex; gap: 16px; padding: 18px; }
.px-steps--mini .px-step__n { margin: 0; align-self: flex-start; }
.px-steps--mini h3 { font-size: 1rem; margin-bottom: 4px; }

/* faq */
.px-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.px-faq__list { display: grid; gap: 12px; }
.px-faq details { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-r-sm); padding: 0 22px; transition: border-color .2s; }
.px-faq details[open] { border-color: #cfc8f7; }
.px-faq summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq summary::after { content: "+"; font: 400 1.4rem/1 var(--px-display); color: var(--px-violet); transition: transform .2s; }
.px-faq details[open] summary::after { transform: rotate(45deg); }
.px-faq details p { color: var(--px-muted); padding-bottom: 18px; margin: 0; }

/* cta band */
.px-cta { padding: 0 0 96px; background: var(--px-bg); }
.px-sec--tint + .px-cta { background: var(--px-bg); padding-top: 0; }
.px-cta__in { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: 56px; border-radius: 24px; background: var(--px-ink); color: var(--px-on-dark); isolation: isolate; }
.px-cta__in::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 300px at 100% 0%, rgba(126, 108, 240, .5), transparent 60%), radial-gradient(400px 260px at 0% 100%, rgba(79, 195, 247, .25), transparent 60%); }
.px-cta h2 { color: #fff; margin-bottom: 8px; }
.px-cta p { color: var(--px-on-dark-muted); margin: 0; max-width: 520px; }

/* shop */
.px-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.px-chips a { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: var(--px-on-dark-muted); text-decoration: none; font-size: .9rem; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.px-chips a:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.px-chips a[aria-current] { background: #fff; color: var(--px-ink); border-color: #fff; }
.px-badges { list-style: none; margin: 56px 0 0; padding: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-radius: var(--px-r); background: var(--px-surface); border: 1px solid var(--px-line); }
.px-badges li { display: flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 500; }
.px-badges .px-ico { color: var(--px-violet); width: 22px; height: 22px; }
.px-empty { text-align: center; color: var(--px-muted); padding: 48px 0; }

/* product */
.px-product { padding-top: 40px; }
.px-crumbs { display: flex; gap: 8px; font-size: .88rem; color: var(--px-muted); margin-bottom: 24px; }
.px-crumbs a { color: var(--px-muted); text-decoration: none; }
.px-crumbs a:hover { color: var(--px-violet); }
.px-product__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
.px-gallery__main { aspect-ratio: 16/10; border-radius: var(--px-r); overflow: hidden; background: var(--px-ink-2); border: 1px solid var(--px-line); }
.px-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.px-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.px-gallery__thumbs button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; opacity: .7; transition: opacity .2s, border-color .2s; }
.px-gallery__thumbs button[aria-current], .px-gallery__thumbs button:hover { opacity: 1; border-color: var(--px-violet); }
.px-buy { position: sticky; top: calc(var(--px-header-h) + 20px); padding: 30px; }
.px-buy h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 12px 0 10px; }
.px-buy .px-lead { font-size: 1rem; }
.px-buy__price { margin: 6px 0 22px; }
.px-buy__price .px-price { font-size: 2rem; }
.px-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--px-muted); margin-bottom: 16px; cursor: pointer; line-height: 1.5; }
.px-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--px-violet); flex: none; }
.px-buy__badges { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--px-line); display: grid; gap: 10px; font-size: .9rem; }
.px-buy__badges li { display: flex; gap: 10px; align-items: center; }
.px-buy__badges .px-ico { color: var(--px-violet); }
.px-meta { display: flex; gap: 24px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--px-line); font-size: .88rem; }
.px-meta dt { color: var(--px-muted); }
.px-meta dd { margin: 0; font-weight: 600; }
.px-product__info { display: grid; gap: 32px; margin-top: 48px; max-width: 820px; }
.px-feats { padding: 30px; }
.px-feats h2, .px-prose h2 { font-size: 1.5rem; }

/* prose */
.px-prose { font-size: 1.05rem; }
.px-prose--narrow { max-width: 780px; }
.px-prose h2 { margin-top: 1.6em; }
.px-prose h2:first-child { margin-top: 0; }
.px-prose a { color: var(--px-violet); }
.px-prose img { border-radius: var(--px-r-sm); height: auto; }
.px-prose ul, .px-prose ol { padding-left: 1.2em; }

/* contact */
.px-contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.px-form { padding: 36px; }
.px-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.px-form label > span, .px-radios legend { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 7px; }
.px-form input[type=text], .px-form input[type=email], .px-form select, .px-form textarea {
	width: 100%; font: inherit; font-size: .98rem; color: var(--px-text); background: #fbfbfe;
	border: 1px solid var(--px-line); border-radius: var(--px-r-sm); padding: 12px 14px; transition: border-color .2s, box-shadow .2s;
}
.px-form textarea { resize: vertical; min-height: 140px; }
.px-form input:focus, .px-form select:focus, .px-form textarea:focus { outline: 0; border-color: var(--px-violet); box-shadow: 0 0 0 4px rgba(126, 108, 240, .15); background: #fff; }
.px-form [aria-invalid] { border-color: var(--px-err); }
.px-full { display: block; margin-bottom: 22px; }
.px-radios { border: 0; padding: 0; margin: 0 0 18px; }
.px-radios label { display: inline-block; margin: 0 6px 8px 0; cursor: pointer; }
.px-radios input { position: absolute; opacity: 0; pointer-events: none; }
.px-radios span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--px-line); font-size: .88rem; background: #fbfbfe; transition: border-color .2s, background .2s, color .2s; }
.px-radios input:checked + span { background: var(--px-ink); color: #fff; border-color: var(--px-ink); }
.px-radios input:focus-visible + span { outline: 2px solid var(--px-violet); outline-offset: 2px; }
.px-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.px-alert { padding: 12px 16px; border-radius: var(--px-r-sm); font-size: .92rem; margin-bottom: 18px; }
.px-alert--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.px-success { display: flex; gap: 16px; align-items: center; padding: 12px 0; font-size: 1.08rem; }
.px-success span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #dcfce7; color: var(--px-ok); flex: none; }
.px-success p { margin: 0; }
.px-contact__side h2 { font-size: 1.3rem; }
.px-cline { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--px-line); text-decoration: none; font-weight: 500; }
a.px-cline:hover { color: var(--px-violet); }
.px-cline .px-ico { color: var(--px-violet); }

/* thank you */
.px-dl { display: flex; gap: 20px; align-items: center; padding: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.px-dl > div { flex: 1; min-width: 200px; }
.px-dl h2 { font-size: 1.2rem; margin: 0; }
.px-dl .px-srv__ico { margin: 0; }

/* NPB area */
.px-npb { background: var(--px-bg); }
.px-npb > :first-child { margin-top: 0; }

/* footer */
.px-footer { background: var(--px-ink); color: var(--px-on-dark-muted); padding: 72px 0 28px; font-size: .93rem; }
.px-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.px-footer img { height: 48px; width: auto; margin-bottom: 18px; }
.px-footer h3 { font: 600 .78rem/1 var(--px-font); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.px-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.px-footer a { text-decoration: none; transition: color .2s; }
.px-footer a:hover { color: #fff; }
.px-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82rem; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
	.px-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.px-hero__grid { grid-template-columns: 1fr; }
	.px-hero__art { max-width: 560px; }
	.px-float--a { left: 8px; }
	.px-float--b { right: 8px; }
	.px-product__info { max-width: none; }
	.px-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	:root { --px-header-h: 66px; }
	.px-logo img { height: 38px; }
	.px-burger { display: block; }
	.px-nav { position: fixed; inset: var(--px-header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 24px 28px; background: var(--px-ink); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
	.px-nav.is-open { visibility: visible; opacity: 1; }
	.px-nav ul { flex-direction: column; }
	.px-nav ul a { padding: 12px 14px; font-size: 1.05rem; }
	.px-lang { align-self: flex-start; }
	.px-grid--3, .px-steps { grid-template-columns: 1fr; }
	.px-product__grid, .px-contact, .px-faq { grid-template-columns: 1fr; }
	.px-buy { position: static; }
	.px-badges { grid-template-columns: 1fr 1fr; }
	.px-head--row { flex-direction: column; align-items: flex-start; }
	.px-sec { padding: 72px 0; }
	.px-hero { padding: 64px 0 80px; }
	.px-cta__in { padding: 36px 28px; }
}
@media (max-width: 600px) {
	.px-wrap { padding: 0 18px; }
	.px-grid--4, .px-fields, .px-checks--2, .px-badges, .px-footer__grid { grid-template-columns: 1fr; }
	.px-actions .px-btn { width: 100%; }
	.px-form { padding: 24px 20px; }
	.px-float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- cart & payment (v1.1) ---------- */
.px-nav { margin-left: auto; }
.px-cartlink { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; text-decoration: none; transition: background .2s; flex: none; }
.px-cartlink:hover { background: rgba(255, 255, 255, .08); }
.px-cartlink .px-ico { width: 22px; height: 22px; }
.px-cartlink b { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--px-grad); font: 700 .7rem/18px var(--px-font); text-align: center; }
.px-buy__btns { display: grid; gap: 10px; }
.px-buy__btns .px-btn--ghost-dark { margin-top: 0; }
.px-alert--ok { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.px-alert--ok a { color: inherit; font-weight: 600; }
.px-incl { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--px-line); font-size: .88rem; display: grid; gap: 6px; }
.px-incl > span { color: var(--px-muted); }
.px-incl div { display: flex; gap: 8px; align-items: center; font-weight: 500; word-break: break-all; }
.px-incl small, .px-files small { color: var(--px-muted); font-weight: 400; white-space: nowrap; }
.px-incl .px-ico, .px-files .px-ico { color: var(--px-violet); }

.px-cart { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.px-cart__list { display: grid; gap: 14px; align-content: start; }
.px-cart__list > .px-link { margin-top: 8px; }
.px-cart__row { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 18px; align-items: center; padding: 14px; }
.px-cart__thumb { display: block; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--px-ink-2); }
.px-cart__thumb img { width: 100%; height: 100%; object-fit: cover; }
.px-cart__thumb .px-ph__ico { width: 34px; height: 34px; }
.px-cart__info { min-width: 0; display: grid; gap: 4px; }
.px-cart__name { font: 600 1.08rem/1.3 var(--px-display); text-decoration: none; }
.px-cart__name:hover { color: var(--px-violet); }
.px-cart__info .px-fine { margin: 0; word-break: break-all; }
.px-iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--px-line); background: #fff; color: var(--px-muted); cursor: pointer; transition: color .2s, border-color .2s; }
.px-iconbtn:hover { color: var(--px-err); border-color: #fecaca; }
.px-cart__sum { position: sticky; top: calc(var(--px-header-h) + 20px); padding: 28px; }
.px-cart__sum h2 { font-size: 1.3rem; }
.px-sumlist { margin: 0 0 14px; display: grid; gap: 10px; font-size: .95rem; }
.px-sumlist div { display: flex; justify-content: space-between; gap: 16px; }
.px-sumlist dt { color: var(--px-muted); }
.px-sumlist dd { margin: 0; font-weight: 600; white-space: nowrap; }
.px-sumlist__total { padding-top: 14px; border-top: 1px solid var(--px-line); font-size: 1.15rem; }
.px-sumlist__total dt { color: var(--px-text); font-weight: 600; }
.px-sumlist__total dd { font: 700 1.5rem/1 var(--px-display); }
.px-payform { margin-top: 18px; }
.px-cart-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 56px 24px; max-width: 520px; margin: 0 auto; }
.px-cart-empty .px-srv__ico { margin: 0 0 8px; }
.px-cart-empty p { color: var(--px-muted); }
.px-pay { max-width: 760px; margin: 0 auto; }
.px-pay__back { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; margin-bottom: 18px; }
.px-ico--back { transform: rotate(180deg); }
.px-pay__box { padding: 12px; min-height: 420px; }
.px-pay__loading { justify-content: center; padding: 80px 0; }
.px-cart.is-paying { display: none; }

.px-dlbox { padding: 26px 28px; margin-bottom: 18px; }
.px-dlbox h2 { font-size: 1.25rem; }
.px-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.px-files li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--px-line); border-radius: var(--px-r-sm); background: #fbfbfe; flex-wrap: wrap; }
.px-files__name { display: flex; gap: 10px; align-items: center; font-weight: 500; word-break: break-all; }

@media (max-width: 900px) {
	.px-cartlink { margin-left: auto; }
	.px-cart { grid-template-columns: 1fr; }
	.px-cart__sum { position: static; }
}
@media (max-width: 600px) {
	.px-cart__row { grid-template-columns: 84px 1fr auto; gap: 12px; }
	.px-cart__row .px-price { grid-column: 2; grid-row: 2; font-size: 1.05rem; }
	.px-cart__row form { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- NativePageBuilder integration (v1.3) ---------- */
.px-grid--auto { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.px-steps.px-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.px-chips--light { margin: 0 0 32px; }
.px-chips--light a { border-color: var(--px-line); color: var(--px-muted); background: #fff; }
.px-chips--light a:hover { color: var(--px-text); border-color: #cfc8f7; }
.px-chips--light a[aria-current] { background: var(--px-ink); color: #fff; border-color: var(--px-ink); }
.px-blk .npb-bi-icon, .px-blk .px-ico { width: 1.15em; height: 1.15em; flex: none; }
.px-blk .px-ph__ico { width: 64px; height: 64px; }
.px-srv__ico svg { width: 24px; height: 24px; }
.px-blk i.npb-bi-svg-host { display: inline-flex; font-style: normal; }
.px-float svg { width: 20px; height: 20px; color: var(--px-blue); }
.px-checks svg { color: var(--px-ok); margin-top: 4px; }
.px-trust svg { color: var(--px-blue); }
.px-ico { stroke-width: 1.8; }
/* neutralise NPB wrappers around full-width Pyxios blocks */
.npb-section:has(.px-blk), .npb-section:has(.px-blk) > *, .npb-section:has(.px-blk) .npb-row, .npb-section:has(.px-blk) .npb-column, .npb-section:has(.px-blk) .npb-col { padding: 0 !important; margin: 0 !important; max-width: none !important; gap: 0 !important; background: none; }
.px-blk h1, .px-blk h2, .px-blk h3 { font-family: var(--px-display); font-weight: 700; letter-spacing: -.02em; }
.px-blk p { margin: 0 0 1em; }
.px-hero.px-blk h1, .px-pagehead.px-blk h1 { color: #fff; }
.px-cta.px-blk { padding: 0 0 96px; }
.px-cta.px-blk h2 { color: #fff; }
.px-blk a { text-decoration: none; }
.px-blk .px-btn { color: #fff; }
.px-blk .px-btn--light { color: var(--px-ink); }
.px-blk .px-btn--ghost { color: var(--px-on-dark); }
.px-blk .px-note { margin-top: 28px; }
.px-testbar { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px 16px; background: #fef3c7; color: #92400e; font: 600 .85rem/1.4 var(--px-font); text-align: center; border-bottom: 1px solid #fde68a; }
/* demo & video (v1.4) */
.px-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.px-tag--demo { background: #e0f2fe; color: #0369a1; }
.px-demo { margin-top: 18px; padding: 16px; border-radius: var(--px-r-sm); background: #f6f5ff; border: 1px solid #e4e0fb; }
.px-demo__title { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: .92rem; margin-bottom: 12px; }
.px-demo__title .px-ico { color: var(--px-violet); }
.px-demo__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.px-demo__btns .px-btn { margin: 0; background: #fff; }
.px-demo__login { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: .85rem; color: var(--px-muted); }
.px-demo__login code { font: 500 .85rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; border: 1px solid var(--px-line); padding: 2px 6px; border-radius: 6px; color: var(--px-text); user-select: all; }
.px-video { position: relative; aspect-ratio: 16/9; border-radius: var(--px-r); overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(126,108,240,.55), transparent 60%), radial-gradient(circle at 80% 90%, rgba(79,195,247,.4), transparent 55%), var(--px-ink-2); display: grid; place-items: center; }
.px-video iframe, .px-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.px-video__play { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px; border: 0; border-radius: 999px; background: #fff; color: var(--px-ink); font: 600 1rem var(--px-font); cursor: pointer; box-shadow: 0 20px 40px -12px rgba(0,0,0,.5); }
.px-video__play span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--px-grad); color: #fff; }
.px-video .px-fine { position: absolute; bottom: 12px; left: 0; right: 0; justify-content: center; color: rgba(255,255,255,.7); }
/* company block + legal prose */
.px-sec--company { padding-bottom: 0 !important; }
.px-company { padding: 26px 28px; }
.px-company h2 { font-size: 1.2rem; margin-bottom: 14px; }
.px-company dl { margin: 0; display: grid; gap: 0; }
.px-company dl div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--px-line); font-size: .95rem; }
.px-company dt { color: var(--px-muted); }
.px-company dd { margin: 0; font-weight: 500; }
.px-company a { color: var(--px-violet); }
.px-prose h2 { font-size: 1.35rem; margin-top: 2em; }
.px-prose h3 { font-size: 1.05rem; margin: 1.4em 0 .4em; }
.px-prose p { color: #34314f; }
@media (max-width: 600px) { .px-company dl div { grid-template-columns: 1fr; gap: 2px; } }
.npb-section:has(.px-sec--company) + .npb-section .px-sec { padding-top: 48px; }
/* discount codes (v1.5) */
.px-cpbox { margin: 0 0 14px; }
.px-cpbox summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--px-violet); list-style: none; }
.px-cpbox summary::-webkit-details-marker { display: none; }
.px-cpform { display: flex; gap: 8px; margin-top: 10px; }
.px-cpform input { flex: 1; min-width: 0; font: 500 .95rem var(--px-font); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border: 1px solid var(--px-line); border-radius: var(--px-r-sm); background: #fbfbfe; }
.px-cpform input:focus { outline: 0; border-color: var(--px-violet); box-shadow: 0 0 0 4px rgba(126,108,240,.15); }
.px-cpform--on { justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--px-r-sm); background: #f0fdf4; border: 1px solid #bbf7d0; margin: 0 0 14px; font-weight: 600; color: #166534; }
.px-cpform--on span { display: flex; gap: 6px; align-items: center; }
.px-cpform--on .px-link { background: none; border: 0; cursor: pointer; font: inherit; font-size: .88rem; }
.px-sumlist s { color: var(--px-muted); font-weight: 400; margin-right: 4px; }
.px-sumlist__disc dt { display: flex; gap: 6px; align-items: center; color: #166534 !important; }
.px-sumlist__disc dd { color: #166534; }
.px-sumlist__disc small { color: var(--px-muted); }

/* ---------- licence + My purchases (v1.6) ---------- */
.px-lic { margin: 4px 0 18px; padding: 12px 14px; border: 1px solid var(--px-line); border-radius: var(--px-r-sm); background: #faf9ff; }
.px-lic p { margin: 0; }
.px-lic__main { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.px-lic__main .px-ico { color: var(--px-violet); width: 18px; height: 18px; flex: none; }
.px-lic__more { font-size: .82rem; color: var(--px-muted); margin-top: 4px !important; padding-left: 26px; line-height: 1.5; }
.px-acctlink.is-in::after { content: ""; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--px-ok); }
.px-acct { display: grid; gap: 18px; }
.px-acct__login { padding: 26px 28px; display: grid; gap: 14px; }
.px-acct__login label { display: grid; gap: 6px; }
.px-acct__item { padding: 22px 24px; display: grid; gap: 14px; }
.px-acct__item header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.px-acct__item h2 { font-size: 1.2rem; margin: 0 0 2px; }
.px-acct__item .px-fine { margin: 0; }
.px-acct__renew { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--px-line); }
.px-acct__renew .px-consent { margin-bottom: 8px; }
.px-acct__renew .px-btn { justify-self: start; }
.px-acct__logout { text-align: center; }
.px-licbadge { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef0f6; color: var(--px-muted); white-space: nowrap; }
.px-licbadge--ok { background: #e9f9ef; color: #166534; }
.px-licbadge--off { background: #fff4e5; color: #9a3412; }
.px-files--locked { opacity: .6; background: transparent !important; border-style: dashed !important; }
.px-files--locked .px-ico { color: var(--px-muted) !important; }
button.px-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.px-acct__item .px-fine a, .px-dl .px-fine a { display: inline-flex; gap: 6px; align-items: center; }
.px-acct__item .px-fine .px-ico { width: 16px; height: 16px; }

/* ---------- v1.6.1: featured, demo credentials ---------- */
.px-pcard { position: relative; }
.px-pcard--featured { border-color: rgba(126, 108, 240, .45); box-shadow: 0 0 0 1px rgba(126, 108, 240, .25), 0 14px 40px -18px rgba(126, 108, 240, .55); }
.px-pcard__flag { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--px-grad); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 18px -6px rgba(126, 108, 240, .7); }
.px-pcard__flag .px-ico { width: 14px; height: 14px; }
.px-demo__creds { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.px-copy { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--px-line); border-radius: 10px; background: #fff; font: inherit; font-size: .82rem; color: var(--px-muted); cursor: pointer; transition: border-color .2s, background .2s; }
.px-copy:hover { border-color: var(--px-violet); }
.px-copy code { font: 600 .85rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--px-text); }
.px-copy .px-ico { width: 14px; height: 14px; color: var(--px-violet); }
.px-copy.is-copied { background: #e9f9ef; border-color: #86efac; }
.px-copy.is-copied .px-ico { color: var(--px-ok); }

/* ---------- v1.6.3: product layout (sticky buy box beside gallery + description) ---------- */
.px-product__grid { row-gap: 0; }
.px-product__grid > .px-gallery { grid-column: 1; grid-row: 1; min-width: 0; }
.px-product__grid > .px-buy { grid-column: 2; grid-row: 1 / span 2; align-self: start; top: var(--px-buy-top, calc(var(--px-header-h) + 20px)); }
.px-product__grid > .px-product__info { grid-column: 1; grid-row: 2; margin-top: 48px; max-width: none; min-width: 0; }
.px-product__info .px-prose img { max-width: 100%; height: auto; }
@media (max-width: 900px) {
	.px-product__grid > .px-gallery, .px-product__grid > .px-buy, .px-product__grid > .px-product__info { grid-column: auto; grid-row: auto; }
	.px-product__grid > .px-buy { margin-top: 28px; }
	.px-product__grid > .px-product__info { margin-top: 40px; }
}

/* ---------- lightbox ---------- */
.px-gallery__main { position: relative; }
.px-gallery[data-lightbox] .px-gallery__main img { cursor: zoom-in; }
.px-gallery__zoom { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(14, 12, 34, .65); color: #fff; cursor: zoom-in; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.px-gallery__zoom:hover { background: rgba(14, 12, 34, .85); transform: scale(1.05); }
.px-gallery__zoom .px-ico { width: 20px; height: 20px; }
.px-lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr auto; background: rgba(8, 7, 22, .94); color: #fff; opacity: 0; transition: opacity .2s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.px-lb.is-open { opacity: 1; }
.px-lb__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.px-lb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 72px; touch-action: pan-y; }
.px-lb__stage img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); user-select: none; -webkit-user-drag: none; transition: opacity .15s; }
.px-lb__stage img.is-loading { opacity: .25; }
.px-lb__cap { min-height: 1.4em; padding: 12px 18px 18px; text-align: center; font-size: .92rem; color: rgba(255, 255, 255, .8); }
.px-lb button { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background .2s; }
.px-lb button:hover { background: rgba(255, 255, 255, .22); }
.px-lb button .px-ico { width: 22px; height: 22px; }
.px-lb__prev, .px-lb__next { position: absolute; top: 50%; transform: translateY(-50%); }
.px-lb__prev { left: 14px; } .px-lb__next { right: 14px; }
.px-lb--single .px-lb__prev, .px-lb--single .px-lb__next { display: none; }
@media (max-width: 600px) { .px-lb__stage { padding: 0 8px; } .px-lb__prev, .px-lb__next { top: auto; bottom: -58px; transform: none; } .px-lb__prev { left: calc(50% - 56px); } .px-lb__next { right: calc(50% - 56px); } .px-lb__cap { padding-top: 70px; } }
html.px-lb-open { overflow: hidden; }

/* ---------- v1.8: portfolio / references ---------- */
.px-refcard .px-pcard__media { aspect-ratio: 10/7; }
.px-refcard .px-pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.px-refcard__meta { margin: -4px 0 8px; font-size: .84rem; color: var(--px-muted); }
.px-refhead { padding-bottom: 56px; }
.px-refhead__back { display: flex; width: max-content; align-items: center; gap: 6px; margin-bottom: 22px; color: var(--px-on-dark-muted); text-decoration: none; font-size: .9rem; }
.px-refhead__back:hover { color: #fff; }
.px-refhead__back .px-ico { width: 16px; height: 16px; }
.px-refhead__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.px-refhead__meta dl { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 0; }
.px-refhead__meta dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--px-on-dark-muted); }
.px-refhead__meta dd { margin: 4px 0 0; color: #fff; font-weight: 600; }
.px-reftags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.px-reftags li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--px-on-dark); font-size: .86rem; }
.px-reftags .px-ico { width: 14px; height: 14px; color: var(--px-blue); }
.px-refgal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.px-refgal--1 { grid-template-columns: 1fr; }
.px-refgal__item { margin: 0; }
.px-refgal__item.is-wide { grid-column: 1 / -1; }
.px-refgal__item button { display: block; width: 100%; padding: 0; border: 1px solid var(--px-line); border-radius: var(--px-r); overflow: hidden; background: radial-gradient(circle at 20% 15%, rgba(126,108,240,.12), transparent 55%), radial-gradient(circle at 85% 90%, rgba(79,195,247,.12), transparent 55%), #f6f5fc; cursor: zoom-in; box-shadow: 0 10px 30px -18px rgba(23, 21, 47, .35); transition: transform .25s, box-shadow .25s; }
.px-refgal__item button:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -22px rgba(23, 21, 47, .45); }
.px-refgal__item img { display: block; width: 100%; height: auto; }
.px-refgal--2 .px-refgal__item:not(.is-wide) img, .px-refgal--3 .px-refgal__item:not(.is-wide) img { aspect-ratio: 4/3; height: auto; object-fit: contain; padding: 18px; }
.px-refgal__item.is-wide img { max-height: 78vh; object-fit: contain; }
.px-refgal__item figcaption { margin-top: 8px; font-size: .86rem; color: var(--px-muted); text-align: center; }
.px-case { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.px-case__item { padding: 28px; }
.px-case__item h3 { margin: 10px 0 8px; font-size: 1.15rem; }
.px-case__item p { margin: 0; color: var(--px-muted); white-space: pre-line; }
.px-case__n { font: 700 .82rem/1 'Space Grotesk', sans-serif; letter-spacing: .08em; background: var(--px-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.px-quote { position: relative; margin: 36px auto 0; max-width: 780px; padding: 28px 32px 26px 74px; border-radius: var(--px-r); background: #fff; border: 1px solid var(--px-line); box-shadow: 0 14px 40px -26px rgba(23, 21, 47, .35); }
.px-quote::before { content: "“"; position: absolute; left: 24px; top: 6px; font: 700 4.4rem/1 Georgia, serif; background: var(--px-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.px-quote p { margin: 0 0 10px; font-size: 1.08rem; line-height: 1.6; white-space: pre-line; }
.px-quote cite { font-style: normal; font-weight: 600; color: var(--px-muted); font-size: .9rem; }
@media (max-width: 700px) { .px-refgal { grid-template-columns: 1fr; } .px-quote { padding: 24px 22px 22px 56px; } .px-quote::before { left: 16px; } }

/* contact element (NPB): icons and editor preview */
.px-contact__side .px-cline svg, .px-contact__side .px-cline .bi { width: 20px; height: 20px; flex: none; color: var(--px-violet); }
.px-form__preview p { margin: 0 0 10px; color: var(--px-muted); }

/* reference overview: image viewer + about text */
.px-refover { padding: 72px 0; }
.px-refover__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.px-refover--single .px-refover__grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
.px-refover__media { position: sticky; top: calc(var(--px-header-h) + 20px); min-width: 0; }
.px-refover--single .px-refover__media { position: static; }
.px-refover__text { min-width: 0; }
.px-refover__text > :first-child { margin-top: 0; }
.px-refover__text h2 { font-size: 1.6rem; }
.px-stage__fig { margin: 0; }
.px-stage__main { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 11; padding: 18px; border: 1px solid var(--px-line); border-radius: var(--px-r); overflow: hidden; cursor: zoom-in;
	background: radial-gradient(circle at 18% 12%, rgba(126,108,240,.10), transparent 55%), radial-gradient(circle at 86% 92%, rgba(79,195,247,.10), transparent 55%), #f6f5fc; box-shadow: 0 14px 40px -26px rgba(23, 21, 47, .4); }
.px-stage__main img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; object-fit: contain; border-radius: 8px; transition: opacity .2s; }
.px-stage__main.is-loading img { opacity: .35; }
.px-stage__zoom { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(14, 12, 34, .62); color: #fff; opacity: 0; transition: opacity .2s; }
.px-stage__zoom .px-ico { width: 18px; height: 18px; }
.px-stage__main:hover .px-stage__zoom, .px-stage__main:focus-visible .px-stage__zoom { opacity: 1; }
.px-stage__count { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(14, 12, 34, .62); color: #fff; font-size: .78rem; font-weight: 600; }
.px-stage__cap { margin-top: 10px; font-size: .88rem; color: var(--px-muted); text-align: center; }
.px-stage__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 14px; }
.px-stage__thumbs button { aspect-ratio: 4 / 3; padding: 4px; border: 2px solid var(--px-line); border-radius: 10px; background: #f6f5fc; overflow: hidden; cursor: pointer; opacity: .75; transition: opacity .2s, border-color .2s; }
.px-stage__thumbs button:hover, .px-stage__thumbs button[aria-current] { opacity: 1; border-color: var(--px-violet); }
.px-stage__thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.px-refover + .px-sec { padding-top: 24px; }
@media (max-width: 900px) {
	.px-refover { padding: 48px 0; }
	.px-refover__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.px-refover__media { position: static; }
	.px-stage__zoom { opacity: 1; }
}

/* product "what you get": no row gaps – items flow in two columns; long texts in one column */
.px-checks--cols { display: block; columns: 2; column-gap: 28px; }
.px-checks--cols li { break-inside: avoid; margin-bottom: 10px; }
.px-checks--long { grid-template-columns: 1fr; gap: 12px; }
.px-checks--long li { line-height: 1.6; }
@media (max-width: 700px) { .px-checks--cols { columns: 1; } }
/* subcategory chips + shop search */
.px-chips--sub { margin-top: -18px; }
.px-chips--sub a { padding: 6px 13px; font-size: .84rem; }
.px-shopsearch { margin: -12px 0 28px; }
.px-shopsearch input { width: 100%; max-width: 320px; padding: 11px 16px; border: 1px solid var(--px-line); border-radius: 999px; background: #fff; font: inherit; color: var(--px-text); }
.px-shopsearch input:focus { outline: 0; border-color: var(--px-violet); box-shadow: 0 0 0 4px rgba(126, 108, 240, .15); }
.px-video video { background: #000; }

/* ---------- product options (licence tiers, colour, size …) ---------- */
.px-buy__form { display: grid; gap: 14px; }
.px-buy__form .px-buy__btns { margin: 0; }
.px-vars { display: grid; gap: 14px; }
.px-vars__group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.px-vars__group legend { font-weight: 700; font-size: .85rem; letter-spacing: .02em; color: var(--px-text); margin-bottom: 8px; padding: 0; }
.px-var { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--px-line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.px-var:hover { border-color: color-mix(in srgb, var(--px-violet) 50%, var(--px-line)); }
.px-var input { position: absolute; opacity: 0; pointer-events: none; }
.px-var::before { content: ""; flex: 0 0 18px; height: 18px; border-radius: 50%; border: 2px solid var(--px-line); background: #fff; transition: border-color .2s, box-shadow .2s; }
.px-var:has(input:checked) { border-color: var(--px-violet); background: color-mix(in srgb, var(--px-violet) 5%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-violet) 12%, transparent); }
.px-var:has(input:checked)::before { border-color: var(--px-violet); box-shadow: inset 0 0 0 4px #fff; background: var(--px-violet); }
.px-var:has(input:focus-visible) { outline: 2px solid var(--px-violet); outline-offset: 2px; }
.px-var__box { display: grid; gap: 2px; flex: 1; min-width: 0; }
.px-var__name { font-weight: 700; color: var(--px-text); line-height: 1.3; }
.px-var__name small { font-weight: 500; color: var(--px-muted); font-size: .78rem; margin-left: 4px; }
.px-var__desc { font-size: .82rem; color: var(--px-muted); line-height: 1.4; }
.px-var__price { font-weight: 700; white-space: nowrap; color: var(--px-text); font-size: .95rem; }
.px-var__price s { font-weight: 400; color: var(--px-muted); font-size: .8rem; margin-right: 2px; }
.px-vars__group:not(.px-vars__group--main) .px-var { padding: 9px 14px; }
.px-buy__price[data-vprice] .px-price b { font-weight: inherit; }
.px-cart__var { display: block; font-size: .85rem; color: var(--px-muted); margin: 2px 0 4px; }
.px-cart__var a { color: var(--px-violet); margin-left: 6px; white-space: nowrap; }
.px-sumlist dt small { display: block; color: var(--px-muted); font-weight: 400; font-size: .8rem; }
/* licence key */
.px-key { border: 1px dashed var(--px-line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; display: grid; gap: 8px; background: color-mix(in srgb, var(--px-violet) 3%, #fff); }
.px-key--off { opacity: .7; background: #fafafa; }
.px-key__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.px-key__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; }
.px-key__sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.px-key__sites li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .88rem; padding: 4px 0; border-top: 1px solid var(--px-line); }
.px-key__sites li span { display: inline-flex; align-items: center; gap: 6px; }
.px-key__sites small { color: var(--px-muted); }
.px-key__sites form { margin: 0; }
.px-key__ty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .9rem; }
.px-acct__var { font-size: .7em; font-weight: 600; color: var(--px-violet); margin-left: 6px; }

/* ---------- product tags ---------- */
.px-shopsearch { margin: -12px 0 16px; }
.px-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1px solid var(--px-line); border-radius: 999px; background: #fff; color: var(--px-text); font-size: .82rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color .2s, background .2s, color .2s; cursor: pointer; font-family: inherit; }
a.px-chip:hover, .px-chip--toggle:hover { border-color: var(--px-violet); color: var(--px-violet); }
.px-chip small { font-weight: 500; color: var(--px-muted); font-size: .72rem; }
.px-chip.is-on { background: var(--px-violet); border-color: var(--px-violet); color: #fff; }
.px-chip.is-on small { color: rgba(255, 255, 255, .8); }
.px-chip--sm { padding: 2px 8px; font-size: .72rem; font-weight: 600; color: var(--px-muted); background: transparent; cursor: default; }
.px-chip--toggle { border-style: dashed; color: var(--px-muted); }
.px-tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; }
.px-tagbar__label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--px-muted); margin-right: 4px; }
.px-tagbar .px-chip--more { display: none; }
.px-tagbar.is-all .px-chip--more { display: inline-flex; }
.px-filterinfo { margin: -12px 0 24px; color: var(--px-muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.px-pcard__kw { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 12px; }
.px-ptags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--px-line); }
.px-ptags__label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--px-muted); margin-right: 4px; }
.px-var--rec { border-color: color-mix(in srgb, var(--px-violet) 45%, var(--px-line)); }
.px-var__rec { position: absolute; top: -9px; right: 12px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, #4cc3f5, var(--px-violet)); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .03em; line-height: 1.4; box-shadow: 0 2px 6px rgba(126, 108, 240, .3); }
.px-vars__group { padding-top: 2px; }

/* ---------- site search ---------- */
.px-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.px-sitesearch { position: relative; display: flex; gap: 8px; max-width: 640px; margin-top: 24px; }
.px-sitesearch__ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--px-muted); display: inline-flex; pointer-events: none; }
.px-sitesearch input { flex: 1; min-width: 0; padding: 14px 18px 14px 48px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: #fff; font: inherit; font-size: 1rem; color: var(--px-text); }
.px-sitesearch input:focus { outline: 0; border-color: var(--px-violet); box-shadow: 0 0 0 4px rgba(126, 108, 240, .25); }
.px-sitesearch .px-btn { flex: 0 0 auto; }
.px-search__h { margin-top: 56px; }
.px-search__n { font-size: .55em; font-weight: 600; color: var(--px-muted); vertical-align: middle; margin-left: 6px; }
.px-search__none { display: flex; align-items: center; gap: 16px; padding: 22px 26px; margin-bottom: 40px; }
.px-search__none p { margin: 0; }
.px-search__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.px-search__list a { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--px-line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--px-text); transition: border-color .2s, box-shadow .2s; }
.px-search__list a:hover { border-color: var(--px-violet); box-shadow: 0 6px 20px rgba(126, 108, 240, .12); }
.px-search__list span { color: var(--px-muted); font-size: .92rem; }
.px-search__list small { color: var(--px-violet); font-size: .78rem; }
.px-suggest { display: grid; gap: 36px; margin-top: 48px; }
.px-search .px-head + .px-suggest, .px-404 .px-suggest:first-child { margin-top: 0; }
.px-suggest__h { font-size: 1.05rem; margin: 0 0 14px; }
.px-suggest__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.px-suggest__links a { display: flex; align-items: center; gap: 10px; padding: 16px 18px; text-decoration: none; color: var(--px-text); font-weight: 600; transition: border-color .2s, transform .2s; }
.px-suggest__links a:hover { border-color: var(--px-violet); transform: translateY(-2px); }
.px-suggest__links .px-ico { color: var(--px-violet); }
.px-404 .px-tagbar { margin-bottom: 0; }
/* header icon + overlay */
.px-searchlink { cursor: pointer; }
.px-so { position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; opacity: 0; transition: opacity .16s ease; }
.px-so.is-open { opacity: 1; }
.px-so[hidden] { display: none !important; }
.px-so__bg { position: absolute; inset: 0; background: rgba(10, 8, 30, .62); backdrop-filter: blur(4px); }
.px-so__panel { position: relative; width: min(680px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden; transform: translateY(-8px); transition: transform .16s ease; }
.px-so.is-open .px-so__panel { transform: none; }
.px-so__form { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--px-line); color: var(--px-muted); }
.px-so__form input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.1rem; color: var(--px-text); background: transparent; padding: 6px 0; }
.px-so__close { border: 1px solid var(--px-line); background: #fff; border-radius: 8px; padding: 3px 8px; font: 600 .72rem/1.4 inherit; color: var(--px-muted); cursor: pointer; }
.px-so__list { max-height: 60vh; overflow: auto; }
.px-so__list a { display: grid; gap: 2px; padding: 12px 20px; text-decoration: none; color: var(--px-text); border-bottom: 1px solid #f3f2f9; }
.px-so__list a:hover, .px-so__list a:focus { background: color-mix(in srgb, var(--px-violet) 6%, #fff); outline: 0; }
.px-so__list small { color: var(--px-violet); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.px-so__list span { color: var(--px-muted); font-size: .86rem; }
.px-so__list .px-so__all { font-weight: 700; color: var(--px-violet); }
.px-so__none { margin: 0; padding: 18px 20px; color: var(--px-muted); }
html.px-so-open { overflow: hidden; }