/* ═══════════════════════════════════════════════════════════════
   Vježbaonica Sreće — main theme stylesheet
   Tokens · Atmosphere · Nav · Hero · Sections · Home modules
   Game · Lightbox · Footer · Reveal · Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ════════ 1. TOKENS ════════ */
:root {
	--vs-orange: #F4681A;
	--vs-pink:   #E8358A;
	--vs-purple: #8B35D6;
	--vs-lilac:  #C084FC;
	--vs-yellow: #FFD93D;
	--vs-peach:  #FFB38A;
	--vs-mint:   #34D9B5;
	--vs-rose:   #FFE4EE;

	--vs-grad:  linear-gradient(135deg, var(--vs-orange) 0%, var(--vs-pink) 55%, var(--vs-purple) 100%);
	--vs-grad2: linear-gradient(135deg, var(--vs-yellow), var(--vs-peach));
	--vs-grad3: linear-gradient(135deg, var(--vs-mint), #5CE0D5);

	--vs-rad-lg: 16px;
	--vs-rad-md: 12px;
	--vs-rad-sm: 8px;
	--vs-ease:   cubic-bezier(.16, 1, .3, 1);
	--vs-spring: cubic-bezier(.34, 1.56, .64, 1);

	--vs-font-display: 'Playfair Display', Georgia, serif;
	--vs-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
	--vs-font-accent:  'Baloo 2', 'DM Sans', cursive;

	--vs-base-size: 16px;
	--vs-logo-h: 60px;

	/* mockup aliases */
	--orange: var(--vs-orange);
	--pink:   var(--vs-pink);
	--purple: var(--vs-purple);
	--lilac:  var(--vs-lilac);
	--yellow: var(--vs-yellow);
	--peach:  var(--vs-peach);
	--mint:   var(--vs-mint);
	--rose:   var(--vs-rose);
	--grad:   var(--vs-grad);
	--grad2:  var(--vs-grad2);
	--grad3:  var(--vs-grad3);
	--ease:   var(--vs-ease);
	--spring: var(--vs-spring);
	--rad-lg: var(--vs-rad-lg);
	--rad-md: var(--vs-rad-md);
	--rad-sm: var(--vs-rad-sm);
}

[data-theme="light"], :root {
	--vs-bg:      #FDF8F5;
	--vs-bg2:     #FFF4F8;
	--vs-bg3:     #FFFFFF;
	--vs-border:  rgba(232, 53, 138, .12);
	--vs-border2: rgba(139, 53, 214, .12);
	--vs-text:    #151519;
	--vs-text2:   #5A3A6E;
	--vs-muted:   #9B7AAE;
	--vs-heading: #1E0A2E;
	--vs-shadow:    0 4px 32px rgba(139, 53, 214, .09);
	--vs-shadow-lg: 0 20px 64px rgba(139, 53, 214, .14);
	--vs-card-bg: #FFFFFF;
	--vs-nav-bg:  rgba(253, 248, 245, .9);

	--bg: var(--vs-bg); --bg2: var(--vs-bg2); --bg3: var(--vs-bg3);
	--border: var(--vs-border); --border2: var(--vs-border2);
	--text: var(--vs-text); --text2: var(--vs-text2); --muted: var(--vs-muted);
	--heading: var(--vs-heading);
	--shadow: var(--vs-shadow); --shadow-lg: var(--vs-shadow-lg);
	--card-bg: var(--vs-card-bg); --nav-bg: var(--vs-nav-bg);
}

[data-theme="dark"] {
	--vs-bg:      #0D0816;
	--vs-bg2:     #120A1E;
	--vs-bg3:     #1A0E2A;
	--vs-border:  rgba(255, 255, 255, .08);
	--vs-border2: rgba(195, 132, 252, .2);
	--vs-text:    #F5EDFF;
	--vs-text2:   #C8A8E8;
	--vs-muted:   rgba(200, 168, 232, .55);
	--vs-heading: #F5EDFF;
	--vs-shadow:    0 4px 32px rgba(0, 0, 0, .4);
	--vs-shadow-lg: 0 20px 64px rgba(0, 0, 0, .5);
	--vs-card-bg: rgba(25, 12, 40, .9);
	--vs-nav-bg:  rgba(13, 8, 22, .88);

	--bg: var(--vs-bg); --bg2: var(--vs-bg2); --bg3: var(--vs-bg3);
	--border: var(--vs-border); --border2: var(--vs-border2);
	--text: var(--vs-text); --text2: var(--vs-text2); --muted: var(--vs-muted);
	--heading: var(--vs-heading);
	--shadow: var(--vs-shadow); --shadow-lg: var(--vs-shadow-lg);
	--card-bg: var(--vs-card-bg); --nav-bg: var(--vs-nav-bg);
}

/* ════════ 2. RESET / BASE ════════ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	font-family: var(--vs-font-body);
	font-size: var(--vs-base-size);
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	overflow-x: hidden;
	transition: background .4s ease, color .4s ease;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--heading); }

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

a { color: var(--pink); text-decoration: none; transition: color .2s; }
a:hover { color: var(--purple); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid rgba(232, 53, 138, .55);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection { background: rgba(232, 53, 138, .25); color: var(--text); }

.skip-link {
	position: absolute; left: -10000px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
	left: 16px; top: 16px; width: auto; height: auto;
	padding: 12px 18px; border-radius: 14px;
	background: var(--grad); color: #fff; font-weight: 700; z-index: 999;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
}

/* ════════ 3. ATMOSPHERE — sky / clouds / dots / blobs ════════ */
#vsStarCanvas,
#starCanvas {
	position: fixed; inset: 0; z-index: 0;
	pointer-events: none; opacity: 0;
	transition: opacity .8s ease;
}
[data-theme="dark"] #vsStarCanvas,
[data-theme="dark"] #starCanvas { opacity: 1; }

#vsDaySky,
#daySky {
	position: fixed; inset: 0; z-index: 0;
	pointer-events: none; opacity: 0; overflow: hidden;
	background: linear-gradient(180deg, #87CEEB 0%, #B8E0F7 40%, #D4EEF9 70%, #E8F6FD 100%);
	transition: opacity .8s ease;
}
[data-theme="light"] #vsDaySky,
[data-theme="light"] #daySky { opacity: 1; }

.cloud { position: absolute; pointer-events: none; }
.cloud-shape {
	background: #fff; border-radius: 50px; position: relative;
	filter: drop-shadow(0 4px 16px rgba(100, 160, 230, .18));
}
.cloud-shape::before,
.cloud-shape::after {
	content: ''; background: #fff; border-radius: 50%; position: absolute;
}

.c1 { top: 8%;  left: -200px; animation: vs-cloud-drift  80s linear infinite; }
.c1 .cloud-shape { width: 200px; height: 60px; }
.c1 .cloud-shape::before { width: 100px; height: 80px; top: -40px; left: 30px; }
.c1 .cloud-shape::after  { width: 70px;  height: 60px; top: -30px; left: 90px; }

.c2 { top: 18%; left: -320px; animation: vs-cloud-drift 120s linear infinite 20s; }
.c2 .cloud-shape { width: 280px; height: 70px; }
.c2 .cloud-shape::before { width: 130px; height: 90px; top: -50px; left: 50px; }
.c2 .cloud-shape::after  { width: 90px;  height: 70px; top: -40px; left: 130px; }

.c3 { top: 32%; left: -150px; animation: vs-cloud-drift  95s linear infinite 45s; }
.c3 .cloud-shape { width: 160px; height: 45px; }
.c3 .cloud-shape::before { width: 80px;  height: 60px; top: -30px; left: 20px; }
.c3 .cloud-shape::after  { width: 60px;  height: 50px; top: -25px; left: 70px; }

.c4 { top: 12%; left: -400px; animation: vs-cloud-drift 110s linear infinite 10s; }
.c4 .cloud-shape { width: 240px; height: 65px; opacity: .85; }
.c4 .cloud-shape::before { width: 110px; height: 85px; top: -45px; left: 40px; }
.c4 .cloud-shape::after  { width: 80px;  height: 65px; top: -35px; left: 110px; }

.c5 { top: 5%;  left: -250px; animation: vs-cloud-drift 140s linear infinite 60s; }
.c5 .cloud-shape { width: 180px; height: 50px; opacity: .7; }
.c5 .cloud-shape::before { width: 90px;  height: 70px; top: -35px; left: 25px; }
.c5 .cloud-shape::after  { width: 65px;  height: 55px; top: -28px; left: 80px; }

@keyframes vs-cloud-drift {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(100vw + 500px)); }
}

/* ── SUN (light theme only) ── */
.vs-sun {
	position: absolute;
	top: 7%; right: 7%;
	width: 110px; height: 110px;
	z-index: 1;
	pointer-events: none;
	animation: vs-sun-bob 8s ease-in-out infinite;
}
@keyframes vs-sun-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
.vs-sun-glow {
	position: absolute; inset: -28px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,217,61,.55), rgba(255,179,138,.25) 45%, transparent 70%);
	filter: blur(8px);
	animation: vs-sun-glow 4.5s ease-in-out infinite;
}
@keyframes vs-sun-glow {
	0%, 100% { opacity: .9; transform: scale(1); }
	50%      { opacity: 1;  transform: scale(1.08); }
}
.vs-sun-rays {
	position: absolute; inset: -8px;
	border-radius: 50%;
	background:
		conic-gradient(from 0deg,
			transparent 0deg, rgba(255,217,61,.55) 6deg, transparent 12deg,
			transparent 30deg, rgba(255,217,61,.55) 36deg, transparent 42deg,
			transparent 60deg, rgba(255,217,61,.55) 66deg, transparent 72deg,
			transparent 90deg, rgba(255,217,61,.55) 96deg, transparent 102deg,
			transparent 120deg, rgba(255,217,61,.55) 126deg, transparent 132deg,
			transparent 150deg, rgba(255,217,61,.55) 156deg, transparent 162deg,
			transparent 180deg, rgba(255,217,61,.55) 186deg, transparent 192deg,
			transparent 210deg, rgba(255,217,61,.55) 216deg, transparent 222deg,
			transparent 240deg, rgba(255,217,61,.55) 246deg, transparent 252deg,
			transparent 270deg, rgba(255,217,61,.55) 276deg, transparent 282deg,
			transparent 300deg, rgba(255,217,61,.55) 306deg, transparent 312deg,
			transparent 330deg, rgba(255,217,61,.55) 336deg, transparent 342deg,
			transparent 360deg);
	mask: radial-gradient(circle, transparent 38%, #000 42%);
	-webkit-mask: radial-gradient(circle, transparent 38%, #000 42%);
	animation: vs-sun-spin 24s linear infinite;
	opacity: .85;
}
@keyframes vs-sun-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.vs-sun-body {
	position: absolute; inset: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 32%, #FFE883, #FFB95A 60%, #FF8E3D);
	box-shadow:
		inset -6px -10px 16px rgba(244,104,26,.4),
		inset 4px 6px 12px rgba(255,255,255,.5),
		0 8px 24px rgba(255,179,138,.5);
	display: flex; align-items: center; justify-content: center;
	font-size: 0;
}
.vs-sun-face {
	font-size: 0; /* keep emoji hidden, we render the body */
	display: none;
}

/* ── HOT AIR BALLOONS (light/day theme only) ──
 * Single combined keyframe (drift + bob + sway) so animations don't fight
 * over the transform property the way two separate ones did before.
 * Inner `.vs-balloon-inner` carries an independent gentle rotation.
 */
.vs-balloon {
	position: absolute;
	width: 72px;
	z-index: 1;
	pointer-events: none;
	will-change: transform;
	animation: vs-balloon-fly var(--bd, 100s) linear infinite;
}
.vs-balloon-1 { top: 22%; left: -160px; --bd: 110s; animation-delay: 0s; }
.vs-balloon-2 { top: 12%; left: -260px; --bd: 140s; animation-delay: 38s; }
.vs-balloon-2 .vs-balloon-canopy { width: 56px; height: 68px; }
.vs-balloon-2 .vs-balloon-basket { width: 20px; }
.vs-balloon-canopy {
	width: 72px; height: 86px;
	background: linear-gradient(180deg, var(--pink) 0%, var(--orange) 100%);
	border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
	position: relative;
	box-shadow: inset -10px -5px 14px rgba(0,0,0,.2), 0 14px 28px rgba(232,53,138,.35);
	animation: vs-balloon-sway 6s ease-in-out infinite;
	transform-origin: 50% 80%;
}
.vs-balloon-canopy::before,
.vs-balloon-canopy::after {
	content: ''; position: absolute;
	top: 0; bottom: 0;
	width: 7px;
	background: rgba(255, 255, 255, .3);
	border-radius: 50%;
}
.vs-balloon-canopy::before { left: 20px; }
.vs-balloon-canopy::after  { right: 20px; }
.vs-balloon-canopy.alt {
	background: linear-gradient(180deg, var(--purple) 0%, var(--mint) 100%);
	box-shadow: inset -10px -5px 14px rgba(0,0,0,.22), 0 14px 28px rgba(139,53,214,.35);
}
.vs-balloon-string {
	width: 1.5px; height: 16px;
	background: rgba(0, 0, 0, .28);
	margin: -2px auto 0;
}
.vs-balloon-basket {
	width: 26px; height: 18px;
	background: linear-gradient(135deg, #B07A4A, #8B5A2A);
	border-radius: 5px 5px 8px 8px;
	margin: 0 auto;
	box-shadow: inset 0 -4px 5px rgba(0,0,0,.3);
	position: relative;
}
/* Wicker stripes on the basket for the "real basket" feel. */
.vs-balloon-basket::before,
.vs-balloon-basket::after {
	content: ''; position: absolute;
	left: 0; right: 0;
	height: 1.5px;
	background: rgba(0, 0, 0, .25);
}
.vs-balloon-basket::before { top: 5px; }
.vs-balloon-basket::after  { top: 11px; }

/* Fly: drifts left→right across the viewport while bobbing up + down. */
@keyframes vs-balloon-fly {
	0%   { transform: translate(0,            0); }
	15%  { transform: translate(15vw,       -22px); }
	30%  { transform: translate(30vw,        12px); }
	45%  { transform: translate(45vw,       -18px); }
	60%  { transform: translate(60vw,         8px); }
	75%  { transform: translate(75vw,       -14px); }
	90%  { transform: translate(90vw,         4px); }
	100% { transform: translate(calc(100vw + 280px), -8px); }
}
/* Sway: gentle rotation on the canopy so the basket appears to swing. */
@keyframes vs-balloon-sway {
	0%, 100% { transform: rotate(-2deg); }
	50%      { transform: rotate(2deg); }
}

/* ── BIRDS (V-flock, light theme only) ── */
.vs-flock {
	position: absolute;
	display: flex; gap: 16px;
	z-index: 1;
	pointer-events: none;
	animation: vs-flock-drift var(--fd, 60s) linear infinite;
}
.vs-flock-1 { top: 32%; left: -180px; --fd: 75s; animation-delay: 18s; }
.vs-flock-2 { top: 48%; left: -160px; --fd: 95s; animation-delay: 50s; transform: scale(.75); }
.vs-bird {
	width: 18px; height: 8px;
	position: relative;
	animation: vs-bird-flap 0.6s ease-in-out infinite;
}
.vs-bird:nth-child(1) { animation-delay: 0s; }
.vs-bird:nth-child(2) { animation-delay: .1s; transform: translateY(6px); }
.vs-bird:nth-child(3) { animation-delay: .2s; transform: translateY(12px); }
.vs-bird:nth-child(4) { animation-delay: .3s; transform: translateY(18px); }
.vs-bird::before,
.vs-bird::after {
	content: ''; position: absolute;
	top: 0; width: 10px; height: 8px;
	border: 1.5px solid rgba(40, 30, 60, .55);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	border-bottom: none; border-right: none;
}
.vs-bird::before { left: 0; transform: rotate(20deg); }
.vs-bird::after  { right: 0; transform: rotate(-20deg) scaleX(-1); }
@keyframes vs-bird-flap {
	0%, 100% { transform: scaleY(1) translateY(var(--ty, 0)); }
	50%      { transform: scaleY(.55) translateY(var(--ty, 0)); }
}
@keyframes vs-flock-drift {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(100vw + 240px)); }
}

/* ── BUTTERFLY (light theme only) ── */
.vs-butterfly {
	position: absolute;
	font-size: 28px;
	z-index: 1;
	pointer-events: none;
	animation: vs-bf-fly 32s linear infinite;
	filter: drop-shadow(0 4px 8px rgba(232,53,138,.25));
}
.vs-bf-1 { bottom: 18%; left: -60px; }
@keyframes vs-bf-fly {
	0%   { transform: translate(0, 0)        rotate(0); }
	20%  { transform: translate(22vw, -10vh) rotate(8deg); }
	40%  { transform: translate(45vw, 4vh)   rotate(-6deg); }
	60%  { transform: translate(68vw, -8vh)  rotate(10deg); }
	80%  { transform: translate(90vw, 2vh)   rotate(-4deg); }
	100% { transform: translate(110vw, -6vh) rotate(0); }
}

/* hide wishlist hearts globally when customizer setting is off */
body.vs-no-wishlist .wishlist-btn,
body.vs-no-wishlist .fav-btn { display: none !important; }

/* footer logo invert filter when only dark logo is uploaded */
.footer-brand img.is-filtered { filter: brightness(0) invert(1); opacity: .85; }

/* sky layer — birds, butterflies, balloons render BEHIND hero text but above bg */
#vsSkyTop {
	position: fixed; inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}
[data-theme="dark"] #vsSkyTop { opacity: 0; transition: opacity .8s ease; }

/* show day decor only in light mode */
[data-theme="dark"] #vsDaySky { opacity: 0; }

/* ── MOON (dark theme only) ── */
#vsNightDecor {
	position: fixed; inset: 0; z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .8s ease;
}
[data-theme="dark"] #vsNightDecor { opacity: 1; }
.vs-moon {
	position: absolute;
	top: 7%; right: 8%;
	width: 88px; height: 88px;
}
.vs-moon-glow {
	position: absolute; inset: -32px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,236,.25), rgba(195,132,252,.15) 50%, transparent 75%);
	filter: blur(10px);
	animation: vs-moon-pulse 6s ease-in-out infinite;
}
@keyframes vs-moon-pulse {
	0%, 100% { opacity: .85; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.1); }
}
.vs-moon-body {
	position: absolute; inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 36%, #FFFCE7, #F5EBC8 50%, #D7C497 90%);
	box-shadow:
		inset -10px -8px 18px rgba(80,55,30,.18),
		inset 8px 6px 14px rgba(255,255,255,.4),
		0 0 28px rgba(255,255,236,.4);
}
.vs-crater {
	position: absolute;
	border-radius: 50%;
	background: rgba(120, 95, 55, .22);
	box-shadow: inset 1px 1px 2px rgba(80,55,30,.35);
}
.vs-crater-1 { width: 14px; height: 14px; top: 28%; left: 26%; }
.vs-crater-2 { width: 8px;  height: 8px;  top: 56%; left: 60%; }
.vs-crater-3 { width: 11px; height: 11px; top: 70%; left: 32%; }

/* ── HERO CITY: 5 lit windows — visible only at night, solid yellow, no glow ── */
.vs-city-lights { display: none; }
[data-theme="dark"] .vs-city-lights { display: block; }
[data-theme="dark"] .vs-light-core {
	fill: #FFFF00;
	opacity: 1;
}

/* ══════ NIGHT-ONLY UFO FLYBY ══════
 * Cute saucer drifts along a curved path across the night sky.
 * Lives inside #vsNightDecor so it's only visible in dark mode.
 */
.vs-ufo {
	position: absolute;
	top: 0; left: 0;
	width: 64px; height: 30px;
	pointer-events: none;
	will-change: transform, opacity;
	animation: vs-ufo-fly 24s ease-in-out infinite;
	animation-delay: 6s;
}
.vs-ufo-saucer {
	display: block;
	width: 100%; height: 100%;
	overflow: visible;
	filter: drop-shadow(0 6px 14px rgba(120, 240, 220, .55));
}
.vs-ufo-beam {
	transform-origin: center top;
	animation: vs-ufo-beam-pulse 1.6s ease-in-out infinite;
}
.vs-ufo-rim circle { animation: vs-ufo-rim-blink 1s linear infinite; }
.vs-ufo-rim circle:nth-child(1) { animation-delay: 0s;    }
.vs-ufo-rim circle:nth-child(2) { animation-delay: .2s;   }
.vs-ufo-rim circle:nth-child(3) { animation-delay: .4s;   }
.vs-ufo-rim circle:nth-child(4) { animation-delay: .6s;   }
.vs-ufo-rim circle:nth-child(5) { animation-delay: .8s;   }

@keyframes vs-ufo-fly {
	0%   { transform: translate(-180px, 28vh) rotate(-3deg); opacity: 0; }
	6%   { opacity: 1; }
	18%  { transform: translate(20vw,    16vh) rotate(4deg);  }
	34%  { transform: translate(40vw,    22vh) rotate(-2deg); }
	50%  { transform: translate(58vw,    10vh) rotate(5deg);  }
	66%  { transform: translate(74vw,    18vh) rotate(-3deg); }
	82%  { transform: translate(90vw,    12vh) rotate(2deg);  }
	94%  { opacity: 1; }
	100% { transform: translate(110vw,   24vh) rotate(-4deg); opacity: 0; }
}
@keyframes vs-ufo-beam-pulse {
	0%, 100% { opacity: .55; transform: scaleY(1); }
	50%      { opacity: .85; transform: scaleY(1.18); }
}
@keyframes vs-ufo-rim-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: .25; }
}

/* Reduced-motion: keep the UFO static + fully visible (no animation). */
@media (prefers-reduced-motion: reduce) {
	.vs-ufo, .vs-ufo-beam, .vs-ufo-rim circle {
		animation: none !important;
	}
	.vs-ufo { transform: translate(70vw, 18vh); opacity: 1; }
}

/* ── SHOOTING STAR (dark theme only) ── */
.vs-shooting-star {
	position: absolute;
	width: 180px; height: 2px;
	pointer-events: none;
	opacity: 0;
	transform-origin: 100% 50%;
	transform: rotate(-22deg);
	background: linear-gradient(
		to left,
		rgba(255,255,255,0) 0%,
		rgba(255,236,170,.85) 30%,
		rgba(255,255,255,1) 95%,
		rgba(255,255,255,1) 100%
	);
	border-radius: 999px;
	filter: drop-shadow(0 0 6px rgba(255,236,170,.7));
}
.vs-shooting-star .vs-shooting-head {
	position: absolute;
	top: 50%; right: 0;
	width: 6px; height: 6px;
	background: #fff;
	border-radius: 50%;
	transform: translateY(-50%);
	box-shadow:
		0 0 8px rgba(255,255,255,1),
		0 0 18px rgba(255,236,170,.85),
		0 0 32px rgba(255,205,120,.5);
}
.vs-shooting-star-1 {
	top: 18%; left: 12%;
	animation: vs-shoot-1 11s ease-in 4s infinite;
}
.vs-shooting-star-2 {
	top: 42%; left: 60%;
	transform: rotate(-18deg);
	animation: vs-shoot-2 17s ease-in 9s infinite;
}
@keyframes vs-shoot-1 {
	0%       { opacity: 0; transform: rotate(-22deg) translateX(0)    scaleX(.6); }
	5%       { opacity: 1; }
	22%      { opacity: 1; transform: rotate(-22deg) translateX(420px) scaleX(1.1); }
	28%, 100%{ opacity: 0; transform: rotate(-22deg) translateX(460px) scaleX(.4); }
}
@keyframes vs-shoot-2 {
	0%       { opacity: 0; transform: rotate(-18deg) translateX(0)    scaleX(.5); }
	8%       { opacity: 1; }
	24%      { opacity: 1; transform: rotate(-18deg) translateX(380px) scaleX(1.1); }
	30%, 100%{ opacity: 0; transform: rotate(-18deg) translateX(420px) scaleX(.4); }
}

/* ── AEROPLANE (light theme only) ── */
.vs-airplane {
	position: absolute;
	top: 14%; left: -160px;
	display: flex; align-items: center;
	pointer-events: none;
	animation: vs-plane-drift 55s linear infinite;
}
/* Trail comes BEFORE the plane so it streams behind. */
.vs-airplane-trail {
	width: 110px; height: 3px;
	background: linear-gradient(to left,
		rgba(255,255,255,.95) 0%,
		rgba(255,255,255,.55) 40%,
		rgba(255,255,255,0)   100%);
	border-radius: 999px;
	filter: blur(.5px);
	margin-right: -2px;
}
.vs-airplane-body {
	display: block;
	width: 56px; height: 26px;
	overflow: visible;
	filter: drop-shadow(0 6px 10px rgba(80,80,140,.22));
}
/* Spinning propeller (motion-blur ribbon). */
.vs-airplane-prop {
	transform-box: fill-box;
	transform-origin: center;
	animation: vs-airplane-prop 0.18s linear infinite;
}
@keyframes vs-airplane-prop {
	to { transform: rotate(360deg); }
}
@keyframes vs-plane-drift {
	0%   { transform: translateX(0)            translateY(0); }
	50%  { transform: translateX(50vw)         translateY(-22px); }
	100% { transform: translateX(calc(100vw + 260px)) translateY(0); }
}

/* reduced motion stops drifting */
@media (prefers-reduced-motion: reduce) {
	.vs-balloon, .vs-flock, .vs-butterfly, .vs-sun, .vs-sun-rays, .vs-sun-glow, .vs-moon-glow,
	.vs-shooting-star, .vs-airplane, .vs-airplane-prop {
		animation: none !important;
	}
	.vs-balloon-1, .vs-balloon-2 { display: none; }
	.vs-flock-1, .vs-flock-2 { display: none; }
	.vs-butterfly { display: none; }
	.vs-shooting-star, .vs-airplane { display: none; }
}

.vs-floating-shapes,
.floating-shapes {
	position: fixed; inset: 0; z-index: 1;
	pointer-events: none; overflow: hidden;
}
.fshape {
	position: absolute; border-radius: 50%; opacity: 0;
	animation: vs-shape-intro 1s var(--spring) forwards,
	           vs-shape-float var(--dur, 8s) ease-in-out var(--delay2, 0s) infinite;
}
.fs1 { width:18px; height:18px; background:var(--yellow); top:12%; left:8%;  --dur:7s;  --delay2:0s;  animation-delay:.3s,1.3s; }
.fs2 { width:12px; height:12px; background:var(--pink);   top:28%; right:10%;--dur:9s;  --delay2:.5s; animation-delay:.5s,1.5s; }
.fs3 { width:22px; height:22px; background:var(--mint);   top:65%; left:5%;  --dur:6s;  --delay2:1s;  animation-delay:.7s,1.7s; }
.fs4 { width:14px; height:14px; background:var(--purple); top:80%; right:8%; --dur:8s;  --delay2:2s;  animation-delay:.4s,1.4s; }
.fs5 { width:10px; height:10px; background:var(--orange); top:45%; left:3%;  --dur:10s; --delay2:3s;  animation-delay:.6s,1.6s; }
.fs6 { width:16px; height:16px; background:var(--lilac);  top:55%; right:4%; --dur:7.5s;--delay2:1.5s;animation-delay:.9s,1.9s; }
.fs7 { width:8px;  height:8px;  background:var(--peach);  top:20%; left:45%; --dur:11s; --delay2:.8s; animation-delay:.2s,1.2s; }
.fs8 {
	width:20px; height:20px; background:rgba(232,53,138,.3);
	bottom:20%; left:15%; border-radius:6px; transform:rotate(30deg);
	--dur:9s; --delay2:2.5s; animation-delay:.8s,1.8s;
}

@keyframes vs-shape-intro {
	from { opacity: 0; transform: scale(0) rotate(-180deg); }
	to   { opacity: .7; transform: scale(1) rotate(0); }
}
@keyframes vs-shape-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	33%      { transform: translateY(-22px) rotate(12deg); }
	66%      { transform: translateY(12px)  rotate(-8deg); }
}

.vs-bg-blobs,
.bg-blobs {
	position: fixed; inset: 0; z-index: 0;
	pointer-events: none; overflow: hidden;
}
[data-theme="light"] .bb1 {
	position: absolute; width: 600px; height: 600px;
	border-radius: 50%; top: -150px; right: -120px;
	background: radial-gradient(circle, rgba(232,53,138,.10), transparent 70%);
	animation: vs-bb-drift 14s ease-in-out infinite;
}
[data-theme="light"] .bb2 {
	position: absolute; width: 500px; height: 500px;
	border-radius: 50%; bottom: -100px; left: -100px;
	background: radial-gradient(circle, rgba(244,104,26,.08), transparent 70%);
	animation: vs-bb-drift 18s ease-in-out infinite reverse;
}
[data-theme="dark"] .bb1,
[data-theme="dark"] .bb2,
[data-theme="dark"] .bb3 { display: none; }
@keyframes vs-bb-drift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(40px, -50px) scale(1.09); }
	66%      { transform: translate(-25px, 35px) scale(.93); }
}

/* ════════ 4. NAV ════════ */
.site-header { position: relative; z-index: 200; }

.site-nav,
nav.site-nav {
	position: fixed; top: 18px; left: 50%;
	transform: translateX(-50%); z-index: 200;
	width: calc(100% - 56px); max-width: 1440px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 28px;
	background: var(--nav-bg);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	border: 1.5px solid var(--border);
	border-radius: 24px;
	box-shadow: var(--shadow);
	animation: vs-nav-drop .7s var(--spring) both .1s;
}
@keyframes vs-nav-drop {
	from { transform: translateX(-50%) translateY(-120%); opacity: 0; }
	to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.nav-logo,
.custom-logo-link,
.nav-logo-link {
	display: flex; align-items: center; gap: 10px;
	text-decoration: none;
	position: relative;
	z-index: 5;
}
.nav-logo img,
.nav-logo-link img,
.custom-logo {
	height: var(--vs-logo-h, 44px);
	width: auto;
	max-width: 280px;
	transition: filter .35s var(--ease), height .25s var(--ease);
	display: block;
}
/* Allow oversized logos to overflow the pill nav vertically. */
.site-nav { overflow: visible; }
.nav-logo { margin-block: calc((var(--vs-logo-h, 44px) - 36px) / -2); }

/* Show light-theme logo by default, dark-theme logo when [data-theme="dark"]. */
.nav-logo .vs-logo-dark,
.nav-logo-link .vs-logo-dark { display: none; }
[data-theme="dark"] .nav-logo .vs-logo-light,
[data-theme="dark"] .nav-logo-link .vs-logo-light { display: none; }
[data-theme="dark"] .nav-logo .vs-logo-dark,
[data-theme="dark"] .nav-logo-link .vs-logo-dark { display: block; }
.vs-logo-dark.is-inverted { filter: brightness(0) invert(1); }

.nav-links {
	display: flex; gap: 4px; list-style: none;
	margin: 0; padding: 0;
	align-items: center;
}
.nav-links li { list-style: none; position: relative; }
.nav-links > li > a {
	font-family: var(--vs-font-accent);
	font-weight: 800; font-size: 15px;
	letter-spacing: .005em;
	color: var(--text);
	padding: 9px 16px; border-radius: 50px;
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 6px;
	transition: background .25s, color .25s, transform .2s var(--spring);
}
.nav-links > li > a:hover {
	transform: translateY(-2px) rotate(-1.5deg);
}
.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links a.active {
	background: var(--rose); color: var(--pink);
}
.nav-links > li.menu-item-has-children > a::after {
	content: "▾";
	font-size: 11px;
	margin-left: 2px;
	transition: transform .25s;
	color: var(--pink);
}
.nav-links > li.menu-item-has-children:hover > a::after,
.nav-links > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

/* Default sub-menu (non-mega) */
.nav-links .sub-menu {
	position: absolute; top: 100%; left: 0;
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: 18px;
	padding: 10px;
	min-width: 320px;
	box-shadow: var(--shadow-lg);
	list-style: none; margin: 0;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(8px);
	transition:
		opacity .16s ease,
		visibility 0s linear .16s,
		transform .18s ease;
	z-index: 200;
}
/* Hover-bridge for default sub-menu */
.nav-links .sub-menu::before {
	content: ""; position: absolute;
	top: -20px; left: 0; right: 0; height: 22px;
	background: transparent;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links .sub-menu:hover {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity .2s 0s,
		visibility 0s linear 0s,
		transform .25s var(--spring) 0s;
}
.nav-links .sub-menu a {
	display: block; padding: 8px 14px;
	border-radius: 12px;
	font-family: var(--vs-font-display);
	font-weight: 700; font-size: 14px;
	color: var(--text);
}
.nav-links .sub-menu a:hover { background: var(--rose); color: var(--pink); }

/* ── Mega dropdown — Naše Radionice ── */
.nav-links .mega-parent { position: static; }
.nav-links .mega-parent .sub-menu { display: none !important; } /* hide WP default sub if any */
.mega-dropdown {
	position: absolute;
	top: 100%; left: 50%;
	transform: translate(-50%, 12px);
	margin-top: 0;
	width: min(1180px, calc(100vw - 24px));
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: 24px;
	box-shadow: 0 30px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.04);
	padding: 0;
	overflow: visible;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition:
		opacity .16s ease,
		visibility 0s linear .16s,
		transform .18s ease;
	z-index: 220;
}
/* Invisible hover-bridge — keeps dropdown open while mouse traverses gap between menu item and dropdown */
.mega-dropdown::after {
	content: "";
	position: absolute;
	top: -28px; left: -20px; right: -20px; height: 36px;
	background: transparent;
}
.mega-dropdown::before {
	content: "";
	position: absolute; top: -8px; left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 16px; height: 16px;
	background: var(--card-bg);
	border-left: 1.5px solid var(--border);
	border-top: 1.5px solid var(--border);
	border-radius: 4px 0 0 0;
}
.mega-parent:hover > .mega-dropdown,
.mega-parent:focus-within > .mega-dropdown,
.mega-dropdown:hover {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translate(-50%, 0);
	transition:
		opacity .2s 0s,
		visibility 0s linear 0s,
		transform .35s var(--spring) 0s;
}
.mega-dropdown-inner {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 0;
	padding: 28px 28px 22px;
	background:
		radial-gradient(circle at 100% 0%, rgba(232,53,138,.06), transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(255,217,61,.08), transparent 50%);
}
.mega-col {
	padding: 4px 18px;
	border-right: 1px dashed var(--border);
}
.mega-col:last-child { border-right: 0; }
.mega-col-head {
	display: flex; align-items: flex-start; gap: 12px;
	text-decoration: none;
	padding: 6px 0 14px;
	border-bottom: 1px dashed var(--border);
	margin-bottom: 12px;
	transition: transform .2s;
}
.mega-col-head:hover { transform: translateX(2px); }
.mega-col-emoji {
	width: 40px; height: 40px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(232,53,138,.14), rgba(255,217,61,.18));
	font-size: 20px; flex-shrink: 0;
}
.mega-col-text { display: flex; flex-direction: column; line-height: 1.3; }
.mega-col-text strong {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 15px; color: var(--text);
}
.mega-col-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.mega-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-list li { list-style: none; }
.mega-list a {
	display: block; padding: 7px 10px;
	font-family: var(--vs-font-body); font-weight: 600;
	font-size: 13.5px; color: var(--text2);
	border-radius: 10px;
	text-decoration: none;
	transition: background .2s, color .2s, padding .2s;
}
.mega-list a:hover {
	background: var(--rose); color: var(--pink);
	padding-left: 14px;
}
.mega-empty {
	font-size: 12px; color: var(--text2);
	font-style: italic; margin: 4px 10px;
}
.mega-col-cta {
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: 12px; padding: 6px 0;
	font-family: var(--vs-font-accent); font-weight: 800;
	font-size: 12px; color: var(--pink);
	text-decoration: none;
	transition: gap .2s;
}
.mega-col-cta:hover { gap: 8px; }
.mega-dropdown-foot {
	display: flex; justify-content: space-between; align-items: center;
	gap: 12px; flex-wrap: wrap;
	padding: 16px 28px;
	background: linear-gradient(90deg, rgba(232,53,138,.06), rgba(255,217,61,.08));
	border-top: 1px solid var(--border);
}
.mega-foot-cta {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 14px; color: var(--text);
	text-decoration: none;
	padding: 8px 16px; border-radius: 50px;
	background: var(--pink); color: #fff;
	transition: transform .2s, box-shadow .2s;
}
.mega-foot-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(232,53,138,.32); }
.mega-foot-cta--ghost {
	background: transparent; color: var(--text);
	border: 1.5px solid var(--border);
}
.mega-foot-cta--ghost:hover { background: var(--rose); color: var(--pink); border-color: var(--pink); }

@media (max-width: 820px) {
	.mega-dropdown { width: min(640px, calc(100vw - 24px)); }
	.mega-dropdown-inner { grid-template-columns: 1fr; gap: 0; padding: 22px 22px 16px; }
	.mega-col { border-right: 0; border-bottom: 1px dashed var(--border); padding: 10px 4px; }
	.mega-col:last-child { border-bottom: 0; }
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links .current-menu-item > a,
[data-theme="dark"] .nav-links a.active {
	background: rgba(232, 53, 138, .15); color: var(--lilac);
}

/* Premium navigation clarity pass — cleaner hierarchy, calmer hover, readable dropdowns. */
.nav-links {
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bg2) 52%, transparent);
	border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
}
.nav-links > li > a {
	position: relative;
	padding: 10px 15px;
	line-height: 1;
	color: color-mix(in srgb, var(--text) 92%, var(--purple));
}
.nav-links > li > a:hover {
	transform: translateY(-1px);
	background: color-mix(in srgb, var(--rose) 70%, var(--bg2));
}
.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links .current-menu-ancestor > a,
.nav-links a.active {
	background: color-mix(in srgb, var(--rose) 76%, var(--bg2));
	color: var(--purple);
}
.nav-links > li.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 5px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: .62;
}
.nav-links > li.menu-item-has-children:hover > a::after,
.nav-links > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg) translate(-1px, -1px);
}
.nav-links .sub-menu {
	top: calc(100% + 12px);
	min-width: 300px;
	padding: 12px;
	border-radius: 22px;
	background:
		linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 94%, #fff), var(--card-bg)),
		var(--card-bg);
	border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
	box-shadow: 0 24px 60px rgba(30, 10, 46, .16), 0 2px 0 rgba(255,255,255,.45) inset;
	transform: translateY(6px) scale(.98);
	transition:
		opacity .16s ease,
		visibility 0s linear .16s,
		transform .18s ease;
}
.nav-links .sub-menu::before {
	top: -18px;
	height: 20px;
}
.nav-links .sub-menu::after {
	content: "";
	position: absolute;
	top: -7px;
	left: 26px;
	width: 14px;
	height: 14px;
	background: var(--card-bg);
	border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
	border-radius: 4px 0 0 0;
	transform: rotate(45deg);
}
.nav-links .sub-menu a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 14px;
	font-family: var(--vs-font-body);
	font-size: 14px;
	font-weight: 750;
	color: var(--text);
	text-decoration: none;
}
.nav-links .sub-menu a::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pink), var(--purple));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 68%, transparent);
	flex: 0 0 auto;
	opacity: .78;
}
.nav-links .sub-menu a::after {
	content: "›";
	margin-left: auto;
	color: var(--text2);
	font-size: 18px;
	line-height: 1;
	opacity: .5;
	transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-links .sub-menu a:hover,
.nav-links .sub-menu .current-menu-item > a {
	background: color-mix(in srgb, var(--rose) 78%, var(--bg2));
	color: var(--purple);
}
.nav-links .sub-menu a:hover::after {
	opacity: 1;
	transform: translateX(2px);
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links .sub-menu:hover {
	transition:
		opacity .14s ease,
		visibility 0s linear 0s,
		transform .18s var(--spring);
}
.mega-dropdown {
	top: calc(100% + 14px);
	width: min(1080px, calc(100vw - 40px));
	border-radius: 28px;
	background:
		linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 96%, #fff), var(--card-bg)),
		var(--card-bg);
	border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
	box-shadow: 0 30px 90px rgba(30, 10, 46, .20), 0 2px 0 rgba(255,255,255,.45) inset;
	transform: translate(-50%, 8px) scale(.985);
	overflow: hidden;
	transition:
		opacity .16s ease,
		visibility 0s linear .16s,
		transform .18s ease;
}
.mega-dropdown::before {
	top: -7px;
	background: var(--card-bg);
	border-color: color-mix(in srgb, var(--border) 72%, transparent);
}
.mega-dropdown::after {
	top: -30px;
	height: 34px;
}
.mega-parent:hover > .mega-dropdown,
.mega-parent:focus-within > .mega-dropdown,
.mega-dropdown:hover {
	transform: translate(-50%, 0) scale(1);
	transition:
		opacity .14s ease,
		visibility 0s linear 0s,
		transform .2s var(--spring);
}
.mega-dropdown-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 28px 18px;
	background:
		radial-gradient(circle at 8% 0%, rgba(255,217,61,.16), transparent 34%),
		linear-gradient(90deg, rgba(139,53,214,.08), rgba(232,53,138,.06));
	border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.mega-dropdown-top strong {
	max-width: 560px;
	font-family: var(--vs-font-display);
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.12;
	color: var(--heading);
	text-align: right;
}
.mega-kicker {
	font-family: var(--vs-font-accent);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--purple);
	white-space: nowrap;
}
.mega-dropdown-inner {
	gap: 14px;
	padding: 22px;
	background: transparent;
}
.mega-col {
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: 16px;
	border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
	border-radius: 22px;
	background: color-mix(in srgb, var(--bg2) 62%, transparent);
}
.mega-col:last-child {
	border-right: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
}
.mega-col-head {
	gap: 13px;
	padding: 0 0 14px;
	margin-bottom: 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.mega-col-head:hover {
	transform: none;
}
.mega-col-emoji {
	width: 48px;
	height: 48px;
	border-radius: 16px;
	font-size: 22px;
	background:
		linear-gradient(135deg, rgba(232,53,138,.16), rgba(139,53,214,.12)),
		color-mix(in srgb, var(--bg) 70%, transparent);
	box-shadow: 0 12px 24px rgba(139,53,214,.10);
}
.mega-col-text strong {
	font-family: var(--vs-font-display);
	font-size: 17px;
	line-height: 1.08;
	color: var(--heading);
}
.mega-col-desc {
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--text2);
}
.mega-list {
	gap: 4px;
}
.mega-list a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 38px;
	padding: 9px 10px 9px 30px;
	border-radius: 13px;
	font-size: 13.5px;
	line-height: 1.25;
	color: color-mix(in srgb, var(--text) 82%, var(--text2));
}
.mega-list a::before {
	content: "";
	position: absolute;
	left: 12px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mint);
	box-shadow: 0 0 0 4px rgba(52,217,181,.12);
}
.mega-list a:hover {
	background: color-mix(in srgb, var(--rose) 76%, var(--bg2));
	color: var(--purple);
	padding-left: 32px;
}
.mega-col-cta {
	margin-top: auto;
	padding-top: 14px;
	color: var(--purple);
}
.mega-dropdown-foot {
	padding: 16px 22px 20px;
	background: color-mix(in srgb, var(--bg2) 72%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.mega-foot-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 18px;
	font-family: var(--vs-font-accent);
	font-size: 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--purple), var(--pink));
	color: #fff;
	box-shadow: 0 12px 28px rgba(139,53,214,.22);
}
.mega-foot-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 34px rgba(139,53,214,.26);
}
.mega-foot-cta--ghost {
	background: transparent;
	color: var(--purple);
	border: 1.5px solid color-mix(in srgb, var(--purple) 35%, var(--border));
	box-shadow: none;
}
.mega-foot-cta--ghost:hover {
	background: color-mix(in srgb, var(--rose) 80%, var(--bg2));
	color: var(--purple);
	border-color: color-mix(in srgb, var(--purple) 55%, var(--border));
}
[data-theme="dark"] .nav-links,
[data-theme="dark"] .nav-links .sub-menu,
[data-theme="dark"] .mega-dropdown {
	background: color-mix(in srgb, var(--bg2) 88%, transparent);
}
[data-theme="dark"] .mega-col {
	background: rgba(255,255,255,.035);
}

.nav-right { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
	width: 44px; height: 44px; border-radius: 14px;
	background: var(--bg2);
	border: 1.5px solid var(--border); cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	transition: all .25s var(--ease);
	display: flex; align-items: center; justify-content: center;
	position: relative;
}
.theme-toggle:hover {
	border-color: var(--pink);
	background: var(--rose);
	box-shadow: 0 4px 16px rgba(232, 53, 138, .2);
}
.toggle-knob {
	width: 26px; height: 26px; border-radius: 8px;
	background: transparent;
	position: static;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; box-shadow: none;
	transition: transform .2s var(--spring);
}
[data-theme="light"] .toggle-knob { transform: none; }
[data-theme="dark"]  .toggle-knob { transform: none; }

.nav-cta {
	background: var(--grad); color: #fff;
	font-family: var(--vs-font-accent);
	font-weight: 700; font-size: 14px;
	padding: 9px 22px; border-radius: 50px;
	text-decoration: none; border: none; cursor: pointer;
	box-shadow: 0 4px 20px rgba(232, 53, 138, .35);
	transition: transform .2s, box-shadow .2s;
	white-space: nowrap;
	display: inline-flex; align-items: center; gap: 7px;
	position: relative;
}
.nav-cta:hover {
	color: #fff;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 8px 28px rgba(232, 53, 138, .55);
}

/* Cart button — glass icon square */
.cart-btn,
.header-cart {
	width: 44px; height: 44px; padding: 0;
	border-radius: 14px;
	background: var(--bg2);
	border: 1.5px solid var(--border);
	color: var(--text); font-size: 20px;
	text-decoration: none; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	transition: all .25s var(--ease);
	white-space: nowrap;
	display: inline-flex; align-items: center; justify-content: center; gap: 0;
	position: relative;
}
.cart-btn:hover,
.header-cart:hover {
	color: var(--pink);
	border-color: var(--pink);
	background: var(--rose);
	box-shadow: 0 4px 16px rgba(232, 53, 138, .2);
	transform: none;
}
.cart-btn span:not(.cart-count) { display: none; }
.cart-count {
	position: absolute; top: -6px; right: -6px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--yellow); color: var(--text);
	font-size: 11px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--bg);
	font-family: var(--vs-font-accent);
	animation: vs-badge-pop .4s var(--spring) both;
}
@keyframes vs-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* mobile toggle */
.vs-mobile-toggle {
	display: none;
	width: 40px; height: 40px;
	background: transparent; border: 1.5px solid var(--border);
	border-radius: 12px; cursor: pointer;
	flex-direction: column; align-items: center; justify-content: center;
	gap: 4px;
}
.vs-mobile-toggle span {
	display: block; width: 18px; height: 2px;
	background: var(--text); border-radius: 2px;
	transition: transform .3s var(--ease), opacity .2s;
}
.vs-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vs-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vs-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Mobile drawer — full-screen bottom sheet ── */
.vs-mobile-drawer {
	position: fixed; inset: 0;
	z-index: 300;
	display: flex; flex-direction: column; justify-content: flex-end;
	pointer-events: none; visibility: hidden;
}
.vs-mobile-drawer.is-open {
	pointer-events: auto; visibility: visible;
}

.vm-scrim {
	position: absolute; inset: 0;
	background: rgba(6, 0, 18, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .35s ease;
}
.vs-mobile-drawer.is-open .vm-scrim { opacity: 1; }

.vm-panel {
	position: relative; z-index: 1;
	background: var(--bg);
	border-radius: 28px 28px 0 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	max-height: 92dvh;
	overflow-y: auto;
	transform: translateY(104%);
	transition: transform .44s cubic-bezier(.32, .72, 0, 1);
	box-shadow: 0 -16px 80px rgba(0, 0, 0, .32);
}
.vs-mobile-drawer.is-open .vm-panel { transform: translateY(0); }

.vm-pull {
	width: 44px; height: 5px; border-radius: 3px;
	background: var(--border);
	margin: 14px auto 0;
}

.vm-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 22px 8px;
}
.vm-logo img { height: 40px !important; }

.vm-close.vs-mobile-close {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--bg2); border: 1.5px solid var(--border);
	color: var(--text2); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: all .2s ease; flex: none;
}
.vm-close.vs-mobile-close:hover { background: var(--rose); border-color: var(--pink); color: var(--pink); }

.vm-search-wrap { padding: 4px 22px 12px; }
.vm-search-form {
	display: flex; align-items: center; gap: 10px;
	background: var(--bg2); border: 1.5px solid var(--border);
	border-radius: 14px; padding: 0 16px; height: 50px;
	transition: border-color .2s;
}
.vm-search-form:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232, 53, 138, .12); }
.vm-search-icon { font-size: 18px; flex: none; }
.vm-search-input {
	flex: 1; background: none; border: none; outline: none;
	font-size: 15px; color: var(--text); font-family: var(--vs-font);
}
.vm-search-input::placeholder { color: var(--text2); }

.vm-nav { padding: 0 22px; }
.vm-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vm-links li a {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px; border-radius: 16px;
	background: var(--bg2); border: 1.5px solid var(--border);
	color: var(--text); text-decoration: none;
	font-family: var(--vs-font-accent); font-weight: 700; font-size: 16px;
	transition: all .2s ease;
}
.vm-links li a:hover, .vm-links li a:active {
	background: var(--rose); border-color: var(--pink); color: var(--pink);
}
.vm-links .current-menu-item > a { background: var(--rose); border-color: var(--pink); color: var(--pink); }
[data-theme="dark"] .vm-links li a:hover { background: rgba(232, 53, 138, .15); border-color: rgba(232, 53, 138, .4); color: var(--lilac); }

.vm-icon { font-size: 22px; flex: none; }
.vm-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vm-text strong { font-weight: 700; line-height: 1.2; }
.vm-text small { font-size: 11px; color: var(--text2); font-weight: 400; font-family: var(--vs-font); }
.vm-arrow { font-size: 20px; color: var(--text2); margin-left: auto; flex: none; }

@keyframes vm-item-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.vs-mobile-drawer.is-open .vm-links li { animation: vm-item-in .38s var(--ease) both; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(1) { animation-delay: .1s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(2) { animation-delay: .15s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(3) { animation-delay: .2s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(4) { animation-delay: .25s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(5) { animation-delay: .3s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(6) { animation-delay: .35s; }

.vm-actions {
	display: flex; gap: 10px;
	padding: 14px 22px 0;
}
.vm-action-btn {
	flex: 1; display: flex; flex-direction: column;
	align-items: center; gap: 5px; padding: 16px 12px;
	background: var(--bg2); border: 1.5px solid var(--border);
	border-radius: 16px; color: var(--text);
	text-decoration: none; font-size: 13px; font-weight: 700;
	cursor: pointer; font-family: var(--vs-font-accent);
	transition: all .2s ease; position: relative;
}
.vm-action-btn > span:first-child { font-size: 26px; }
.vm-action-btn:hover { background: var(--rose); border-color: var(--pink); color: var(--pink); }
.vm-cart-btn {
	background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
	color: #fff; border-color: transparent;
}
.vm-cart-btn:hover { opacity: .88; background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%); color: #fff; border-color: transparent; }
.vm-cart-count {
	position: absolute; top: 8px; right: 8px;
	background: var(--orange); color: #fff;
	font-size: 10px; font-weight: 800;
	min-width: 18px; height: 18px; border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	padding: 0 4px; line-height: 1;
}

.vm-footer {
	display: flex; flex-direction: column; gap: 6px;
	padding: 14px 22px 22px;
	border-top: 1px solid var(--border);
	margin-top: 14px;
}
.vm-contact-link {
	font-size: 13px; color: var(--text2); text-decoration: none;
	display: flex; align-items: center; gap: 8px;
	min-height: 36px;
}
.vm-contact-link:hover { color: var(--pink); }

/* Mobile menu readability pass — preserve drawer UX, make hierarchy visible. */
.vm-panel {
	background:
		radial-gradient(circle at 12% 0%, rgba(255,217,61,.14), transparent 26%),
		linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #fff), var(--bg));
}
.vm-nav {
	padding: 4px 18px 0;
}
.vm-links {
	gap: 10px;
}
.vm-links li {
	list-style: none;
}
.vm-links li a {
	position: relative;
	min-height: 56px;
	padding: 13px 14px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--bg2) 84%, transparent);
	box-shadow: 0 10px 22px rgba(30,10,46,.045);
}
.vm-links > li > a {
	font-size: 16px;
	font-weight: 850;
}
.vm-links li a:hover,
.vm-links li a:active,
.vm-links .current-menu-item > a,
.vm-links .current-menu-ancestor > a {
	background: color-mix(in srgb, var(--rose) 80%, var(--bg2));
	border-color: color-mix(in srgb, var(--pink) 58%, var(--border));
	color: var(--purple);
}
.vm-links .sub-menu {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	margin: 7px 0 2px 20px;
	padding: 0 0 0 12px;
	border-left: 2px solid color-mix(in srgb, var(--purple) 18%, var(--border));
}
.vm-links .sub-menu li a {
	min-height: 42px;
	padding: 9px 12px;
	border-radius: 14px;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
	box-shadow: none;
	font-family: var(--vs-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--text2);
}
.vm-links .sub-menu li a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mint);
	flex: 0 0 auto;
}
.vm-links .sub-menu .vm-icon,
.vm-links .sub-menu .vm-text small,
.vm-links .sub-menu .vm-arrow {
	display: none;
}
.vm-links .sub-menu .vm-text {
	gap: 0;
}
.vm-links .sub-menu .vm-text strong {
	font-family: var(--vs-font-body);
	font-size: 14px;
	line-height: 1.25;
}
.vm-actions {
	padding-inline: 18px;
}
.vm-footer {
	padding-inline: 18px;
}

/* ════════ 5. BUTTONS / CHIPS ════════ */
.btn-primary,
.button.alt,
.wp-block-button__link,
button.btn-primary {
	background: var(--grad); color: #fff;
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 15px; padding: 13px 28px;
	border-radius: 14px; border: none; cursor: pointer;
	text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
	box-shadow: 0 6px 24px rgba(232, 53, 138, .38);
	transition: transform .2s var(--ease), box-shadow .2s, color .2s;
	line-height: 1.2;
}
.btn-primary:hover,
.wp-block-button__link:hover {
	color: #fff; transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(232, 53, 138, .55);
}

.btn-outline {
	background: transparent; color: var(--purple);
	border: 2px solid var(--purple);
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 15px; padding: 11px 26px;
	border-radius: 14px; cursor: pointer;
	text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
	transition: background .2s, color .2s, transform .2s;
}
.btn-outline:hover {
	background: var(--purple); color: #fff; transform: translateY(-2px);
}
[data-theme="dark"] .btn-outline { color: var(--lilac); border-color: var(--lilac); }
[data-theme="dark"] .btn-outline:hover { background: var(--lilac); color: var(--vs-bg); }

.btn-white {
	background: #fff; color: var(--pink);
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 15px; padding: 13px 28px;
	border-radius: 14px; border: none; cursor: pointer;
	text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
	transition: transform .2s, box-shadow .2s;
}
.btn-white:hover { color: var(--pink); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }

.btn-ghost {
	background: rgba(255, 255, 255, .15); color: #fff;
	border: 2px solid rgba(255, 255, 255, .4);
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 15px; padding: 11px 26px;
	border-radius: 14px; cursor: pointer;
	text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
	transition: background .2s, border-color .2s;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .7); }

.trust-pill,
.trust-chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 5px 12px; border-radius: 50px;
	background: var(--bg2); border: 1.5px solid var(--border);
	font-size: 11px; font-weight: 600; color: var(--text2);
}
.trust-chip {
	padding: 7px 16px; font-size: 13px;
	background: var(--card-bg); box-shadow: var(--shadow);
	transition: border-color .3s, transform .3s var(--ease);
}
.trust-chip:hover { border-color: var(--pink); transform: translateY(-3px); }
.trust-row {
	display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
	margin-top: 16px;
}

/* ════════ 6. HERO (front page) ════════ */
.hero {
	position: relative; z-index: 2;
	padding: 130px 0 64px;
	background: transparent;
}
.vs-slide-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
	display: grid; grid-template-columns: 1.05fr 1fr;
	align-items: center; gap: 56px;
	min-height: 72vh;
}
.hero-bg-img {
	position: absolute; inset: 0; z-index: 0;
	background-position: center; background-size: cover; background-repeat: no-repeat;
	opacity: 0; transition: opacity .8s ease;
}
[data-theme="light"] .hero-bg-img { opacity: .07; }
[data-theme="dark"]  .hero-bg-img { opacity: .04; }

.vs-slide-content { position: relative; z-index: 2; }
.hero-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--rose);
	border: 1.5px solid rgba(232, 53, 138, .25);
	color: var(--pink);
	font-weight: 700; font-size: 12px;
	letter-spacing: .06em; text-transform: uppercase;
	padding: 7px 18px; border-radius: 50px;
	margin-bottom: 20px;
}
[data-theme="dark"] .hero-eyebrow { background: rgba(232, 53, 138, .12); }
@keyframes vs-eyebrow-pop {
	from { transform: scale(0) rotate(-12deg); opacity: 0; }
	to   { transform: scale(1) rotate(0); opacity: 1; }
}

.hero h1 {
	font-family: var(--vs-font-display);
	font-size: clamp(40px, 4.6vw, 72px);
	font-weight: 900; line-height: 1.04;
	letter-spacing: -0.015em;
	margin-bottom: 22px;
	color: var(--heading);
}
.h1-line { display: block; }

.hi1 {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hi2 {
	background: var(--grad3);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero p {
	font-size: 17px; line-height: 1.7;
	color: var(--text2);
	max-width: 480px; margin-bottom: 32px;
}
.hero-btns {
	display: flex; gap: 12px; flex-wrap: wrap;
}
.hero-trust {
	display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;
}

@keyframes vs-fade-up {
	from { transform: translateY(28px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

/* hero landscape illustration (pure nature, full-width band) */
.hero {
	overflow: hidden;
	max-width: 100vw;
	min-height: 100vh;
	padding-top: 100px;
	padding-bottom: 180px;
	display: flex; align-items: center;
}
.vs-slide-inner {
	position: relative; z-index: 3;
	padding-top: 0;
	padding-bottom: 0;
	min-height: 0;
	width: 100%;
}
.hero-landscape {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	width: 100vw;
	max-width: 100vw;
	height: 200px;
	z-index: 1;
	pointer-events: none;
	display: block;
	opacity: .95;
}
[data-theme="dark"] .hero-landscape { opacity: .55; }

/* ── Static hero background on the front page ──
   Pin the landscape band + the soft hero photo so they stay anchored to
   the viewport while the page scrolls (parallax-style, no movement). */
.home .hero-bg-img,
body.home .hero-bg-img {
	position: fixed;
}
.home .hero-landscape,
body.home .hero-landscape {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
}

@media (max-width: 1100px) {
	.hero { padding-top: 90px; padding-bottom: 150px; }
	.hero-landscape { height: 170px; }
}
@media (max-width: 960px) {
	.hero { min-height: auto; padding-top: 88px; padding-bottom: 130px; align-items: flex-start; }
	.hero-landscape { height: 140px; }
}
@media (max-width: 560px) {
	.hero { padding-top: 84px; padding-bottom: 110px; }
	.hero-landscape { height: 110px; }
}

/* Scale the 3D book down on shorter viewports so it stays in view without
   dominating the fold (book is now the hero focal point). */
@media (max-height: 880px) and (min-width: 769px) {
	.book-scene { width: 380px; height: 480px; }
	.book { width: 290px; height: 400px; left: 44px; top: 38px; }
	.book-title { font-size: 17px; bottom: 52px; }
}
@media (max-height: 760px) and (min-width: 769px) {
	.book-scene { width: 320px; height: 410px; }
	.book { width: 250px; height: 350px; left: 34px; top: 30px; }
	.book-title { font-size: 16px; bottom: 48px; }
	.book-subtitle { bottom: 34px; }
	.book-author { bottom: 14px; }
	.book-badge { width: 54px; height: 54px; font-size: 10px; }
	.ha-ring  { width: 110px; height: 110px; }
	.ha-ring2 { width: 70px;  height: 70px; }
}

/* ════════════════════════════════════════════════════
   HERO SLIDER — state machine, layout, enter/exit
   ════════════════════════════════════════════════════ */

/* Wrapper fills the hero shell */
.vs-hero-slider {
	position: relative;
	width: 100%;
	flex: 1;
	min-height: 72vh;
	display: flex;
	align-items: stretch;
}

/* Each slide sits in the same slot */
.vs-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
}
.vs-slide--active {
	opacity: 1;
	pointer-events: auto;
}

/* ── Slide-level reveal on enter ── */
.vs-slide--entering {
	animation: vs-slide-reveal 220ms ease-out both;
}
@keyframes vs-slide-reveal {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Enter: direction-aware text + element stagger ── */
.vs-hero-slider[data-dir="next"] .vs-slide--entering [data-anim] {
	animation: vs-enter-r 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--anim-i, 0) * 70ms + 55ms);
}
.vs-hero-slider[data-dir="prev"] .vs-slide--entering [data-anim] {
	animation: vs-enter-l 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--anim-i, 0) * 70ms + 55ms);
}
@keyframes vs-enter-r {
	from { transform: translate(34px, 14px); opacity: 0; filter: blur(6px); }
	to   { transform: translate(0, 0);       opacity: 1; filter: blur(0);   }
}
@keyframes vs-enter-l {
	from { transform: translate(-34px, 14px); opacity: 0; filter: blur(6px); }
	to   { transform: translate(0, 0);        opacity: 1; filter: blur(0);   }
}

/* ── Tamara photo: scale + direction ── */
.vs-hero-slider[data-dir="next"] .vs-slide--entering .vs-s1-photo {
	animation: vs-enter-photo-r 820ms cubic-bezier(0.34, 1.15, 0.64, 1) both 55ms;
}
.vs-hero-slider[data-dir="prev"] .vs-slide--entering .vs-s1-photo {
	animation: vs-enter-photo-l 820ms cubic-bezier(0.34, 1.15, 0.64, 1) both 55ms;
}
@keyframes vs-enter-photo-r {
	from { transform: translate(68px, 0) scale(0.88); opacity: 0; filter: blur(8px); }
	to   { transform: translate(0, 0)    scale(1);    opacity: 1; filter: blur(0);   }
}
@keyframes vs-enter-photo-l {
	from { transform: translate(-68px, 0) scale(0.88); opacity: 0; filter: blur(8px); }
	to   { transform: translate(0, 0)     scale(1);    opacity: 1; filter: blur(0);   }
}

/* ── Visual column (book / illustration): scale in from below ── */
.vs-slide--entering .vs-slide-visual {
	animation: vs-enter-visual 860ms cubic-bezier(0.34, 1.2, 0.64, 1) both;
	animation-delay: calc(var(--anim-i, 0) * 70ms + 55ms);
}
@keyframes vs-enter-visual {
	from { transform: translateY(28px) scale(0.88); opacity: 0; filter: blur(6px); }
	to   { transform: translateY(0)    scale(1);    opacity: 1; filter: blur(0);   }
}

/* ── Exit: scale + blur out, tight stagger ── */
.vs-hero-slider[data-dir="next"] .vs-slide--exiting [data-anim] {
	animation: vs-exit-l 420ms cubic-bezier(0.4, 0, 0.8, 0) both;
	animation-delay: calc(var(--anim-i, 0) * 22ms);
}
.vs-hero-slider[data-dir="prev"] .vs-slide--exiting [data-anim] {
	animation: vs-exit-r 420ms cubic-bezier(0.4, 0, 0.8, 0) both;
	animation-delay: calc(var(--anim-i, 0) * 22ms);
}
@keyframes vs-exit-l {
	from { transform: translate(0, 0)        scale(1);    opacity: 1; filter: blur(0);   }
	to   { transform: translate(-46px, -6px) scale(0.93); opacity: 0; filter: blur(5px); }
}
@keyframes vs-exit-r {
	from { transform: translate(0, 0)       scale(1);    opacity: 1; filter: blur(0);   }
	to   { transform: translate(46px, -6px) scale(0.93); opacity: 0; filter: blur(5px); }
}

/* ── Slide headings ── */
.vs-slide-h1 {
	font-family: var(--vs-font-display);
	font-size: clamp(40px, 4.6vw, 72px);
	font-weight: 900; line-height: 1.04;
	letter-spacing: -0.015em;
	margin-bottom: 22px;
	color: var(--heading);
}
.vs-slide-h2 {
	font-family: var(--vs-font-display);
	font-size: clamp(34px, 3.8vw, 60px);
	font-weight: 900; line-height: 1.08;
	letter-spacing: -0.015em;
	margin-bottom: 20px;
	color: var(--heading);
}

/* Slide 1 — Tamara: photo left, text right */
.vs-slide-inner--tamara {
	grid-template-columns: 1fr 1.15fr;
	align-items: center;
}

/* Slide 2 book meta lines */
.vs-s2-meta {
	font-size: 13px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--text2); margin-bottom: 4px;
}
.vs-s2-author {
	font-size: 16px; font-weight: 600;
	color: var(--text2); margin-bottom: 28px;
	font-family: var(--vs-font-accent);
}

/* Slide 3 product price */
.vs-slide-price {
	font-size: 26px; font-weight: 800;
	color: var(--purple); margin: 4px 0 20px;
	line-height: 1.1;
}
.vs-slide-price del {
	font-size: 18px; font-weight: 600;
	color: var(--text2); opacity: .7; margin-right: 8px;
}
.vs-slide-price ins { text-decoration: none; }

/* ── Dot navigation ── */
.vs-slider-controls {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 16px;
}
.vs-slider-dots {
	display: flex;
	gap: 8px;
	align-items: center;
}
.vs-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: width .35s var(--ease), background .35s var(--ease);
}
.vs-dot--active {
	width: 28px;
	border-radius: 5px;
	background: var(--pink);
}
[data-theme="light"] .vs-dot { background: rgba(0, 0, 0, .2); }
[data-theme="light"] .vs-dot--active { background: var(--pink); }

/* ── Arrow buttons ── */
.vs-slider-arrow {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 26px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s, opacity .2s;
	backdrop-filter: blur(6px);
}
.vs-slider-arrow:hover {
	background: rgba(255, 255, 255, .25);
}
[data-theme="light"] .vs-slider-arrow {
	border-color: rgba(0, 0, 0, .15);
	background: rgba(255, 255, 255, .6);
	color: var(--heading);
}
[data-theme="light"] .vs-slider-arrow:hover {
	background: rgba(255, 255, 255, .85);
}

/* slide visual column */
.vs-slide-visual {
	position: relative; z-index: 2;
	display: flex; justify-content: center; align-items: center;
}
.book-scene { perspective: 1100px; width: 440px; height: 560px; position: relative; }
.book {
	width: 340px; height: 470px; position: absolute;
	top: 44px; left: 50px;
	transform: none;
	transition: transform .4s var(--ease), filter .4s var(--ease);
	cursor: pointer;
	filter: drop-shadow(0 28px 56px rgba(139, 53, 214, .45))
	        drop-shadow(0 8px 20px rgba(30, 10, 46, .28));
}
.book:hover { transform: translateY(-8px); }
.book-spine { display: none; }
.book-front {
	position: absolute; inset: 0;
	border-radius: 4px 16px 16px 4px;
	background: var(--card-bg);
	overflow: hidden;
}
/* Photo of the actual cover dominates the slab. */
.book-front-img {
	position: absolute; inset: 0;
	background-position: center; background-size: cover;
	mix-blend-mode: normal;
	opacity: 1;
	z-index: 0;
}
/* Soft bottom-only gradient — keeps title legible without drowning the cover. */
.book-front::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 38%;
	background: linear-gradient(to top, rgba(15, 6, 30, .72), rgba(15, 6, 30, 0));
	z-index: 1;
	pointer-events: none;
}
/* Subtle paper-edge highlight on the right (depth). */
.book-front::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0; right: 0;
	width: 8px;
	background: linear-gradient(to left, rgba(0,0,0,.18), transparent);
	z-index: 2;
	pointer-events: none;
}
.book-glow {
	position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px;
	border-radius: 20px; background: var(--grad);
	filter: blur(30px); opacity: .4; z-index: -1;
	animation: vs-book-glow 4s ease-in-out infinite;
}
@keyframes vs-book-glow {
	0%, 100% { opacity: .3; transform: scale(1); }
	50%      { opacity: .55; transform: scale(1.05); }
}
.book-spine {
	position: absolute; left: -20px; top: 6px; bottom: 6px;
	width: 20px;
	background: linear-gradient(135deg, #9B25A8, #5A1A8A);
	transform-origin: right;
	transform: rotateY(90deg) translateX(-10px);
	border-radius: 2px 0 0 2px;
}
.book-title {
	position: absolute;
	left: 22px; right: 22px; bottom: 56px;
	font-family: var(--vs-font-display); font-weight: 900;
	font-size: 18px; color: #fff; text-align: center;
	line-height: 1.2; letter-spacing: -0.01em;
	z-index: 3;
	text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.book-subtitle {
	position: absolute;
	left: 22px; right: 22px; bottom: 38px;
	font-size: 10px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	text-align: center;
	z-index: 3;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.book-author {
	position: absolute;
	left: 22px; right: 22px; bottom: 16px;
	font-size: 12px; color: rgba(255, 255, 255, .92);
	font-weight: 600; text-align: center;
	font-family: var(--vs-font-accent);
	z-index: 3;
	text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.book-badge {
	position: absolute; top: 20px; right: 20px;
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--yellow); color: #151519;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	font-family: var(--vs-font-accent); font-weight: 800;
	font-size: 11px; text-align: center; line-height: 1.1;
	z-index: 3;
	animation: vs-badge-spin 12s linear infinite;
	box-shadow: 0 6px 20px rgba(255, 217, 61, .55);
}
@keyframes vs-badge-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.book-stars {
	position: absolute;
	left: 22px; right: 22px; top: 18px;
	color: var(--yellow); font-size: 13px;
	letter-spacing: 2px; text-align: left;
	z-index: 3;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* Cover photo speaks for itself — emoji overlay is noise. */
.book-emoji { display: none; }
@keyframes vs-icon-dance {
	0%, 100% { transform: translateY(0) rotate(0); }
	50%      { transform: translateY(-6px) rotate(8deg); }
}

.book-card {
	position: absolute;
	background: rgba(255, 255, 255, .65);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 18px;
	padding: 12px 16px; box-shadow: var(--shadow-lg);
	z-index: 4;
	transition: transform .35s var(--spring);
}
[data-theme="dark"] .book-card {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .18);
}
.book-card:hover { transform: translateY(-3px) rotate(0)!important; }
/* Both cards floated ABOVE the book cover. */
.bc-right  { top: -8px;  right: 24px; left: auto;  bottom: auto; animation: vs-hf-float1 5s ease-in-out infinite; }
.bc-bottom { top: -8px;  left: 24px;  right: auto; bottom: auto; width: 168px; animation: vs-hf-float2 6s ease-in-out infinite .8s; }
@keyframes vs-hf-float1 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes vs-hf-float2 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2deg); } }
.bcard-icon  { font-size: 26px; margin-bottom: 4px; }
.bcard-label { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; }
.bcard-val   { font-family: var(--vs-font-display); font-weight: 800; font-size: 17px; color: var(--text); }

.ha-ring,
.ha-ring2 {
	position: absolute; border-radius: 50%;
	border: 2px dashed rgba(232, 53, 138, .3);
	animation: vs-ring-spin 18s linear infinite;
}
.ha-ring  { width: 150px; height: 150px; top: -28px; left: -10px; }
.ha-ring::before {
	content: '⭐'; position: absolute; top: -11px; left: 50%;
	transform: translateX(-50%); font-size: 18px;
}
.ha-ring2 {
	width: 88px; height: 88px; bottom: 56px; right: 8px;
	border-color: rgba(139, 53, 214, .28);
	animation: vs-ring-spin 12s linear infinite reverse;
}
.ha-ring2::before {
	content: '✨'; position: absolute; top: -9px; left: 50%;
	transform: translateX(-50%); font-size: 13px;
}
@keyframes vs-ring-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* page-hero (predstave / shop / 404 / generic) */
.page-hero {
	min-height: 44vh;
	display: flex; align-items: center; justify-content: center;
	text-align: center;
	padding: 130px 48px 64px;
	position: relative; z-index: 2; overflow: hidden;
}
.page-hero-bg {
	position: absolute; inset: 0; z-index: 0;
	background-position: center; background-size: cover; background-repeat: no-repeat;
}
.page-hero-bg::after {
	content: ''; position: absolute; inset: 0;
	background: var(--grad); opacity: .82;
}
.page-hero-content { position: relative; z-index: 2; max-width: 1200px; }
.page-hero .hero-eyebrow {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
}
.page-hero h1 {
	font-family: var(--vs-font-display);
	font-weight: 900; font-size: clamp(36px, 5vw, 68px);
	color: #fff; line-height: 1.08;
	margin-bottom: 16px;
	animation: vs-fade-up .8s var(--ease) both .7s;
}
.page-hero p {
	font-size: 17px; color: rgba(255, 255, 255, .88);
	line-height: 1.72; max-width: 580px; margin: 0 auto 32px;
	animation: vs-fade-up .8s var(--ease) both .85s;
}
.hero-chips {
	display: flex; justify-content: center; gap: 12px;
	flex-wrap: wrap;
	animation: vs-fade-up .8s var(--ease) both 1s;
}
.hero-chip {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(255, 255, 255, .16);
	border: 1.5px solid rgba(255, 255, 255, .3);
	color: #fff; font-size: 13px; font-weight: 600;
	padding: 7px 16px; border-radius: 50px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.wave-bottom {
	position: absolute; bottom: -1px; left: 0; right: 0;
	line-height: 0; z-index: 3;
}
.wave-bottom svg { display: block; width: 100%; }

.wave-divider {
	position: relative; z-index: 2;
	line-height: 0; margin-bottom: -1px;
}
.wave-divider svg { display: block; width: 100%; }

/* ════════ 7. SECTIONS ════════ */
.section { position: relative; z-index: 2; }
.section-inner { max-width: 1440px; margin: 0 auto; padding: 80px; }
.section-header { margin-bottom: 52px; }

.section-tag {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--vs-font-accent);
	font-weight: 700; font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--pink);
	background: var(--rose);
	border: 1.5px solid rgba(232, 53, 138, .22);
	padding: 6px 16px; border-radius: 50px;
	margin-bottom: 16px;
}
[data-theme="dark"] .section-tag { background: rgba(232, 53, 138, .12); }

.section-title {
	font-family: var(--vs-font-display);
	font-weight: 900; font-size: clamp(30px, 3.5vw, 48px);
	line-height: 1.14; margin-bottom: 16px;
}
.section-sub {
	font-size: 16px; color: var(--text2);
	line-height: 1.7; max-width: 600px;
}

/* ── ticker ── */
.ticker-wrap {
	position: relative; z-index: 2; overflow: hidden;
	border-top: 1.5px solid var(--border);
	border-bottom: 1.5px solid var(--border);
	padding: 12px 0; background: var(--bg2);
}
.ticker {
	display: flex; width: max-content;
	animation: vs-ticker-scroll 26s linear infinite;
}
.ticker:hover { animation-play-state: paused; }
.ticker-item {
	display: flex; align-items: center; gap: 14px;
	padding: 0 24px;
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 14px; color: var(--text2); white-space: nowrap;
}
.ticker-sep { color: var(--pink); opacity: .7; font-size: 18px; }
@keyframes vs-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── stats ── */
.stats-wrap { position: relative; z-index: 2; padding: 52px 80px; }
.stats-grid {
	max-width: 1100px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.stat-card {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-md);
	padding: 28px 24px; text-align: center;
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease), box-shadow .3s;
}
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.stat-num {
	font-family: var(--vs-font-display);
	font-size: 38px; font-weight: 900;
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 4px;
}
.stat-label { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ── programs ── */
.progs-bg { background: var(--bg2); }
.progs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rubrika-block + .rubrika-block { margin-top: 56px; }
.rubrika-title {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: clamp(22px, 3vw, 30px);
	margin: 0 0 24px; color: var(--text);
	display: inline-flex; align-items: center; gap: 12px;
}
.rubrika-title::before {
	content: ""; width: 36px; height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, var(--pink), var(--orange, #f4681a));
}
.rubrika-empty {
	text-align: center; color: var(--text2);
	padding: 48px 16px; border: 1.5px dashed var(--border); border-radius: var(--rad-lg);
}

/* hero-chip filter (clickable) */
.hero-chip.is-filter {
	cursor: pointer;
	font: inherit;
	border: 1px solid rgba(255,255,255,.28);
	transition: background .2s, border-color .2s, transform .15s;
}
.hero-chip.is-filter:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.hero-chip.is-filter.is-active {
	background: var(--pink); color: #fff; border-color: var(--pink);
	box-shadow: 0 6px 18px rgba(232,53,138,.35);
}
.prog-card {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-lg);
	padding: 32px 28px;
	box-shadow: var(--shadow);
	transition: transform .35s var(--ease), box-shadow .35s, border-color .25s;
	position: relative; overflow: hidden;
}
.prog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--pink); }
.pc-icon {
	width: 56px; height: 56px; border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; margin-bottom: 18px;
}
.pc1 .pc-icon { background: linear-gradient(135deg, rgba(232,53,138,.12), rgba(244,104,26,.12)); }
.pc2 .pc-icon { background: linear-gradient(135deg, rgba(139,53,214,.12), rgba(195,132,252,.12)); }
.pc3 .pc-icon { background: linear-gradient(135deg, rgba(255,217,61,.15), rgba(255,179,138,.12)); }
.prog-card h3 {
	font-family: var(--vs-font-display); font-weight: 700;
	font-size: 19px; line-height: 1.3;
	margin-bottom: 10px;
}
.prog-card p {
	font-size: 14px; color: var(--text2);
	line-height: 1.65; margin-bottom: 16px;
}
.pc-age {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 700;
	padding: 5px 12px; border-radius: 50px;
	background: var(--rose); color: var(--pink);
	border: 1px solid rgba(232, 53, 138, .2);
	margin-bottom: 14px;
}
[data-theme="dark"] .pc-age { background: rgba(232, 53, 138, .1); }
.pc-cta {
	font-family: var(--vs-font-accent);
	font-weight: 700; font-size: 13px;
	color: var(--pink); text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
	transition: gap .2s;
}
.pc-cta:hover { gap: 8px; color: var(--pink); }

.prog-wide {
	grid-column: span 3;
	background:
		radial-gradient(circle at 90% 20%, rgba(255,217,61,.18), transparent 40%),
		radial-gradient(circle at 10% 90%, rgba(52,217,181,.16), transparent 45%),
		var(--grad);
	border: 3px solid rgba(255,255,255,.5); color: #fff;
	padding: 44px 52px;
	border-radius: var(--rad-lg);
	position: relative; overflow: hidden;
	box-shadow:
		0 0 0 6px rgba(232,53,138,.08),
		0 16px 48px rgba(139,53,214,.28);
}
[data-theme="dark"] .prog-wide { border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 6px rgba(232,53,138,.06), 0 16px 48px rgba(0,0,0,.5); }
.prog-wide::before {
	content: ''; position: absolute;
	top: -40px; right: -40px;
	width: 240px; height: 240px;
	border: 2px dashed rgba(255,255,255,.18);
	border-radius: 50%;
	animation: vs-ring-spin 28s linear infinite;
	pointer-events: none;
}
.prog-wide::after {
	content: ''; position: absolute;
	bottom: -60px; right: 80px;
	width: 140px; height: 140px;
	border: 2px dashed rgba(255,255,255,.12);
	border-radius: 50%;
	animation: vs-ring-spin 18s linear infinite reverse;
	pointer-events: none;
}
.prog-wide-inner {
	display: grid; grid-template-columns: 1fr auto;
	align-items: center; gap: 40px; height: 100%;
	position: relative; z-index: 2;
}
.prog-wide h3 {
	color: #fff; font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 900; letter-spacing: -0.01em;
	margin-bottom: 14px;
	line-height: 1.18;
}
.prog-wide p {
	color: rgba(255, 255, 255, .9);
	font-size: 16px; line-height: 1.65;
	max-width: 540px;
	margin-bottom: 22px;
}
.prog-wide .pc-age {
	background: rgba(255, 255, 255, .22);
	color: #fff; border-color: rgba(255,255,255,.12);
	font-weight: 700;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.prog-wide .pc-cta {
	color: #fff;
	background: rgba(255,255,255,.16);
	padding: 10px 20px; border-radius: 50px;
	border: 1.5px solid rgba(255,255,255,.28);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background .25s, transform .2s;
}
.prog-wide .pc-cta:hover {
	background: #fff; color: var(--pink);
	gap: 8px; transform: translateY(-2px);
}
.prog-wide-vis {
	width: 180px; height: 180px;
	border-radius: 28px;
	background: rgba(255,255,255,.14);
	border: 2px solid rgba(255,255,255,.22);
	display: flex; align-items: center; justify-content: center;
	font-size: 88px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 4px 16px rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.18);
	animation: vs-pw-tilt 6s ease-in-out infinite;
}
@keyframes vs-pw-tilt {
	0%,100% { transform: rotate(-3deg) translateY(0); }
	50%     { transform: rotate(3deg) translateY(-6px); }
}

/* ── shows / predstave ── */
.shows-bg { background: var(--bg); }
.shows-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.show-card {
	background: var(--card-bg); border: 1.5px solid var(--border);
	border-radius: var(--rad-lg); overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform .35s var(--ease), box-shadow .35s;
}
.show-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.show-thumb {
	aspect-ratio: 4 / 3; position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	font-size: 56px;
	background-position: center; background-size: cover;
}
.show-thumb::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .08), rgba(139, 53, 214, .25));
}
.show-thumb-emoji {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 56px; z-index: 2;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}
/* Programi cards: no thumbnail emoji. */
.progs-cards-section .show-thumb-emoji { display: none; }
/* Predstave cards: theatre icon tucked into the top-right corner. */
.shows-bg .show-thumb-emoji {
	top: 12px; right: 12px; left: auto;
	transform: none;
	font-size: 30px;
}
.show-body { padding: 20px 22px; }
.show-body h3 {
	font-family: var(--vs-font-display); font-weight: 700;
	font-size: 18px; margin-bottom: 8px;
}
.show-body p {
	font-size: 13px; color: var(--text2);
	line-height: 1.6; margin-bottom: 12px;
}
.show-tag {
	display: inline-flex; font-size: 11px; font-weight: 700;
	padding: 4px 12px; border-radius: 50px;
	background: var(--rose); color: var(--pink);
	border: 1px solid rgba(232, 53, 138, .2);
}
[data-theme="dark"] .show-tag { background: rgba(232, 53, 138, .1); }
.section-cta { display: flex; justify-content: center; margin-top: 36px; }
.new-tag {
	background: linear-gradient(135deg, var(--mint), #5CE0D5);
	color: #0D4A40; border: none;
}

/* show feature (alternating big blocks on archive-predstava) */
.show-feature {
	display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
	align-items: center; padding: 72px 80px;
	max-width: 1440px; margin: 0 auto;
}
.show-feature.reverse { direction: rtl; }
.show-feature.reverse > * { direction: ltr; }
.show-img-wrap {
	position: relative; border-radius: var(--rad-lg);
	overflow: hidden; box-shadow: var(--shadow-lg);
}
.show-img-wrap img {
	width: 100%; height: 380px; object-fit: cover;
	transition: transform .6s var(--ease);
}
.show-img-wrap:hover img { transform: scale(1.04); }
.show-img-wrap::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(135deg, rgba(232,53,138,.1), rgba(139,53,214,.12));
}
.show-badge {
	position: absolute; top: 16px; left: 16px; z-index: 2;
	font-family: var(--vs-font-accent);
	font-weight: 800; font-size: 11px;
	padding: 5px 14px; border-radius: 50px;
	letter-spacing: .06em; text-transform: uppercase;
}
.badge-new { background: linear-gradient(135deg, var(--mint), #5CE0D5); color: #0D4A40; }
.badge-mid { background: var(--grad); color: #fff; }
.badge-low { background: linear-gradient(135deg, var(--yellow), var(--peach)); color: #151519; }

.img-stat {
	position: absolute; bottom: 16px; right: 16px; z-index: 2;
	background: var(--card-bg); border: 1.5px solid var(--border);
	border-radius: 14px; padding: 10px 16px;
	box-shadow: var(--shadow-lg);
	display: flex; align-items: center; gap: 10px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
[data-theme="dark"] .img-stat { background: rgba(20, 10, 40, .85); }
.img-stat-icon { font-size: 22px; }
.img-stat-text { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.img-stat-text strong {
	display: block; font-size: 14px; color: var(--text);
	font-family: var(--vs-font-accent);
}

.show-text .section-tag { margin-bottom: 12px; }
.show-text h2 {
	font-family: var(--vs-font-display); font-weight: 900;
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.14; margin-bottom: 16px;
}
.show-text p {
	font-size: 15px; color: var(--text2);
	line-height: 1.78; margin-bottom: 24px;
}
.show-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.show-meta-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--bg2); border: 1.5px solid var(--border);
	border-radius: 50px; padding: 6px 14px;
	font-size: 12px; font-weight: 600; color: var(--text2);
}
.show-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── about ── */
.about-bg { background: var(--bg); }
.about-inner {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 64px; align-items: center;
}
.about-left h2 {
	font-family: var(--vs-font-display);
	font-weight: 900; font-size: clamp(28px, 3vw, 42px);
	line-height: 1.2; margin: 12px 0 18px;
}
.about-left p {
	font-size: 15px; color: var(--text2);
	line-height: 1.75; margin-bottom: 28px;
}
.founder-chip {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--rose);
	border: 1.5px solid rgba(232, 53, 138, .2);
	border-radius: 50px; padding: 8px 16px;
	margin-bottom: 24px;
}
[data-theme="dark"] .founder-chip { background: rgba(232, 53, 138, .1); }
.founder-av {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--grad);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; flex-shrink: 0; color: #fff;
}
.founder-chip span {
	font-family: var(--vs-font-accent);
	font-weight: 700; font-size: 14px; color: var(--text);
}
.about-cards { display: flex; flex-direction: column; gap: 14px; }
.af-card {
	background: var(--card-bg); border: 1.5px solid var(--border);
	border-radius: var(--rad-md); padding: 20px 22px;
	display: flex; gap: 16px; align-items: flex-start;
	box-shadow: var(--shadow);
	transition: transform .3s, box-shadow .3s;
}
.af-card:hover { transform: translateX(6px); box-shadow: var(--shadow-lg); }
.af-icon {
	width: 44px; height: 44px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; flex-shrink: 0;
}
.af-icon.o { background: linear-gradient(135deg, rgba(244,104,26,.12), rgba(255,179,138,.12)); }
.af-icon.p { background: linear-gradient(135deg, rgba(139,53,214,.12), rgba(195,132,252,.12)); }
.af-icon.g { background: linear-gradient(135deg, rgba(52,217,181,.12), rgba(92,224,213,.12)); }
.af-card h4 {
	font-family: var(--vs-font-display); font-weight: 700;
	font-size: 16px; margin-bottom: 4px;
}
.af-card p { font-size: 13px; color: var(--text2); line-height: 1.6; }

.about-img-wrap {
	position: relative; border-radius: var(--rad-lg);
	overflow: hidden; box-shadow: var(--shadow-lg);
}
.about-img-wrap img {
	width: 100%; height: 360px; object-fit: cover;
}
.about-img-wrap::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(232,53,138,.08), rgba(139,53,214,.08));
}

/* ── happy / sretni kutak ── */
.happy-bg { background: var(--bg); }
.happy-wrap {
	max-width: 820px; margin: 0 auto;
	text-align: center;
}
.happy-wrap .section-tag {
	display: flex; width: fit-content; margin: 0 auto 16px;
}
.happy-wrap .section-sub { margin: 0 auto 40px; }
.feeling-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.feeling-btn {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: 22px; padding: 24px 12px;
	cursor: pointer;
	display: flex; flex-direction: column;
	align-items: center; gap: 10px;
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease), border-color .25s, box-shadow .3s;
	font-family: var(--vs-font-body);
}
.feeling-btn:hover {
	transform: translateY(-8px) scale(1.06);
	border-color: var(--pink); box-shadow: var(--shadow-lg);
}
.feeling-btn span:first-child {
	font-size: 36px;
	transition: transform .25s var(--spring);
}
.feeling-btn:hover span:first-child { transform: scale(1.25) rotate(-8deg); }
.feeling-btn span:last-child {
	font-family: var(--vs-font-accent);
	font-weight: 700; font-size: 12px; color: var(--text2);
}
.feeling-msg {
	margin-top: 28px; min-height: 32px;
	font-family: var(--vs-font-display);
	font-weight: 700; font-size: 18px;
	color: var(--pink);
}

/* ════════ 8. GAME — Hvataj Sreću ════════ */
.game-bg {
	background: none;
	position: relative;
	overflow: hidden;
}
.game-bg::before,
.game-bg::after { content: none; }
.game-wrap { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
.game-shell {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	position: relative;
}
.game-header-strip {
	display: flex; gap: 14px; align-items: center;
	padding: 20px 22px;
	border-bottom: 1.5px solid var(--border);
	background: linear-gradient(135deg, rgba(255,217,61,.12), rgba(255,179,138,.1));
}
[data-theme="dark"] .game-header-strip {
	background: linear-gradient(135deg, rgba(255,217,61,.06), rgba(232,53,138,.06));
}
.game-icon-bg {
	width: 48px; height: 48px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 24px; flex-shrink: 0;
	background: linear-gradient(135deg, rgba(255,217,61,.18), rgba(255,179,138,.15));
}
.game-header-strip h3 {
	font-family: var(--vs-font-display); font-weight: 700;
	font-size: 19px; margin-bottom: 2px;
}
.game-header-strip p { font-size: 12px; color: var(--muted); }

.game-arena-wrap {
	position: relative;
	padding: 16px 18px 18px;
}
.game-hud {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 10px; margin-bottom: 12px;
}
.hud-card {
	background: var(--bg2);
	border: 1.5px solid var(--border);
	border-radius: 14px; padding: 10px 14px;
	text-align: center;
}
.hud-label {
	font-family: var(--vs-font-accent);
	font-size: 10px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 2px;
}
.hud-value {
	font-family: var(--vs-font-display);
	font-weight: 900; font-size: 22px;
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.1;
}
.hud-lives { display: flex; gap: 4px; justify-content: center; font-size: 18px; }
.hud-lives .gone { filter: grayscale(1); opacity: .35; }

.game-arena {
	position: relative; height: 380px;
	background: linear-gradient(180deg, #C8E7FA 0%, #FFE9F2 100%);
	border-radius: var(--rad-md);
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}
.game-arena.is-running { cursor: none; }
[data-theme="dark"] .game-arena {
	background: linear-gradient(180deg, #1A1230 0%, #2A1340 100%);
}
.game-arena::before {
	content: ''; position: absolute; inset: 0;
	background-image:
		radial-gradient(circle at 20% 20%, rgba(255,217,61,.18), transparent 40%),
		radial-gradient(circle at 80% 30%, rgba(232,53,138,.15), transparent 45%);
	pointer-events: none;
}

.basket {
	position: absolute; bottom: 12px; left: 50%;
	width: 84px; height: 56px;
	transform: translateX(-50%);
	pointer-events: none;
	transition: transform .08s linear;
	z-index: 5;
}
.basket-icon {
	font-size: 56px; line-height: 1;
	filter: drop-shadow(0 4px 8px rgba(232,53,138,.4));
}

.falling {
	position: absolute; font-size: 36px;
	pointer-events: none;
	will-change: transform;
	transition: opacity .3s;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}
.falling.bad { filter: drop-shadow(0 2px 6px rgba(120,120,160,.4)); }

.affirm-pop {
	position: absolute; pointer-events: none;
	font-family: var(--vs-font-accent);
	font-weight: 800; font-size: 14px;
	color: var(--pink);
	background: rgba(255, 255, 255, .92);
	padding: 6px 14px; border-radius: 50px;
	box-shadow: 0 4px 16px rgba(232,53,138,.3);
	animation: vs-affirm-rise 1.2s ease-out forwards;
	white-space: nowrap;
	z-index: 6;
}
@keyframes vs-affirm-rise {
	0%   { transform: translate(-50%, 0) scale(.7); opacity: 0; }
	20%  { transform: translate(-50%, -10px) scale(1.05); opacity: 1; }
	100% { transform: translate(-50%, -64px) scale(1); opacity: 0; }
}

.game-overlay {
	position: absolute; inset: 0;
	background: rgba(255, 255, 255, .92);
	display: flex; align-items: center; justify-content: center;
	flex-direction: column; gap: 16px;
	padding: 24px; z-index: 10;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
[data-theme="dark"] .game-overlay { background: rgba(13, 8, 22, .92); }
.game-overlay.hidden { display: none; }
.game-overlay h4 {
	font-family: var(--vs-font-display);
	font-weight: 900; font-size: clamp(24px, 3vw, 38px);
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}
.game-overlay p {
	color: var(--text2); font-size: 15px;
	max-width: 380px; text-align: center; line-height: 1.6;
}
.game-overlay .score-final {
	font-family: var(--vs-font-display); font-weight: 900;
	font-size: 56px; color: var(--purple); line-height: 1;
}
.game-overlay .best-score {
	font-family: var(--vs-font-accent);
	font-size: 14px; color: var(--muted);
	font-weight: 700;
}

.game-btn {
	background: var(--grad); color: #fff; border: none;
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 14px; padding: 12px 28px;
	border-radius: 14px; cursor: pointer;
	box-shadow: 0 6px 20px rgba(232, 53, 138, .4);
	transition: transform .2s, box-shadow .2s;
}
.game-btn:hover { transform: translateY(-2px) scale(1.04); }

.game-controls-hint {
	display: flex; gap: 6px; justify-content: center;
	margin-top: 8px;
	font-size: 11px; color: var(--muted);
	font-family: var(--vs-font-accent); font-weight: 700;
	letter-spacing: .04em;
}
.kbd {
	display: inline-block; padding: 2px 6px;
	border: 1px solid var(--border2);
	border-radius: 6px; background: var(--bg2);
	font-family: var(--vs-font-body); font-size: 10px;
	color: var(--text2);
}

/* legacy mini-games fallback (mockup classes) — kept slim for graceful degrade */
.games-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

/* ════════ 9. PRODUCT TEASER on home (4-col preview, buttons aligned bottom) ════════ */
.prods-bg { background: var(--bg2); }
.prods-header {
	display: flex; align-items: flex-start;
	justify-content: space-between; gap: 20px;
	margin-bottom: 40px; flex-wrap: wrap;
}
.prods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.home-prod-grid .shop-card { display: flex; flex-direction: column; }
.home-prod-grid .shop-card .card-body {
	display: flex; flex-direction: column;
	flex: 1; min-height: 220px;
}
.home-prod-grid .shop-card .card-meta { margin-top: 0; }
.home-prod-grid .shop-card .card-footer { margin-top: auto; }

/* ════════ 10. REVEAL ════════ */
.reveal {
	opacity: 0; transform: translateY(28px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
	opacity: 0; transform: translateX(-40px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
	opacity: 0; transform: translateX(40px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ── vs-reveal: scroll-triggered, re-fires on each entry ── */
body.js-ready .vs-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}
body.js-ready .vs-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	body.js-ready .vs-reveal {
		transform: none;
		transition: opacity .25s linear;
	}
}

/* ════════ 11. LIGHTBOX ════════ */
.lightbox {
	position: fixed; inset: 0; z-index: 500;
	background: rgba(0, 0, 0, .92);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none;
	transition: opacity .3s;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lb-img {
	max-width: 90vw; max-height: 88vh;
	border-radius: 16px;
	box-shadow: 0 32px 80px rgba(0, 0, 0, .6);
	object-fit: contain;
	transition: transform .3s var(--spring);
}
.lb-close,
.lb-prev,
.lb-next {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	border: 1.5px solid rgba(255, 255, 255, .25);
	color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s;
	border-radius: 50%;
}
.lb-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 18px; }
.lb-prev,
.lb-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 20px; }
.lb-prev { left: 20px; } .lb-next { right: 20px; }
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover { background: rgba(232, 53, 138, .5); }
.lb-counter {
	position: absolute; bottom: 20px; left: 50%;
	transform: translateX(-50%);
	font-family: var(--vs-font-accent);
	font-weight: 700; font-size: 13px;
	color: rgba(255, 255, 255, .7);
}

/* ════════ 12. GALLERY (predstave) ════════ */
.gallery-section { background: var(--bg2); position: relative; z-index: 2; }
.gallery-inner { max-width: 1440px; margin: 0 auto; padding: 72px 80px; }
.gallery-header { text-align: center; margin-bottom: 48px; }
.photo-grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px; gap: 14px;
}
.photo-item {
	border-radius: var(--rad-md); overflow: hidden;
	position: relative; cursor: pointer;
}
.photo-item.feature { grid-column: span 2; grid-row: span 2; }
.photo-item img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s var(--ease);
}
.photo-item::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(232,53,138,0), rgba(139,53,214,0));
	transition: background .35s;
	pointer-events: none;
}
.photo-item:hover img { transform: scale(1.07); }
.photo-item:hover::after {
	background: linear-gradient(135deg, rgba(232,53,138,.18), rgba(139,53,214,.15));
}
.photo-overlay {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .3s;
	font-size: 28px; color: #fff;
}
.photo-item:hover .photo-overlay { opacity: 1; }

/* ════════ 13. CTA SECTION ════════ */
.cta-section {
	position: relative; z-index: 2;
	padding: 80px 48px; text-align: center;
	overflow: hidden;
}
.cta-bg {
	position: absolute; inset: 0;
	background-position: center; background-size: cover;
}
.cta-bg::after {
	content: ''; position: absolute; inset: 0;
	background: var(--grad); opacity: .87;
}
.cta-bg--solid::after { opacity: 1; }
.cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta-icon {
	font-size: 56px; display: block; margin-bottom: 20px;
	animation: vs-icon-dance 3s ease-in-out infinite;
}
.cta-section h2 {
	font-family: var(--vs-font-display); font-weight: 900;
	font-size: clamp(28px, 3.5vw, 46px);
	color: #fff; margin-bottom: 14px;
}
.cta-section p {
	font-size: 16px; color: rgba(255, 255, 255, .88);
	line-height: 1.7; margin-bottom: 32px;
}
.cta-btns {
	display: flex; gap: 14px; justify-content: center;
	flex-wrap: wrap;
}

/* ════════ 14. POSTS / ARCHIVES / 404 ════════ */
.entry-content { max-width: 720px; margin: 0 auto; padding: 48px 24px; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h1, .entry-content h2, .entry-content h3 {
	font-family: var(--vs-font-display); font-weight: 800;
	margin-top: 1.6em;
}
.entry-content h2 { font-size: 28px; }
.entry-content h3 { font-size: 22px; }
.entry-content p { font-size: 17px; line-height: 1.78; color: var(--text2); }
.entry-content blockquote {
	font-family: var(--vs-font-display); font-style: italic;
	font-size: 22px; line-height: 1.5;
	padding: 24px 28px;
	background: var(--rose);
	border-radius: var(--rad-md);
	color: var(--text);
}
[data-theme="dark"] .entry-content blockquote { background: rgba(232,53,138,.1); }
.entry-content code {
	background: var(--bg2); padding: 2px 6px;
	border-radius: 6px; font-size: 14px;
}

.archive-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 24px; max-width: 1440px;
	margin: 0 auto; padding: 48px 80px 80px;
}
.archive-card {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease), box-shadow .3s, border-color .25s;
	display: flex; flex-direction: column;
}
.archive-card:hover {
	transform: translateY(-6px);
	border-color: var(--pink); box-shadow: var(--shadow-lg);
}
.archive-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg2); }
.archive-card-img img { width: 100%; height: 100%; object-fit: cover; }
.archive-card-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.archive-card h3 {
	font-family: var(--vs-font-display); font-weight: 700;
	font-size: 19px; line-height: 1.3; margin-bottom: 8px;
}
.archive-card h3 a { color: var(--text); text-decoration: none; }
.archive-card h3 a:hover { color: var(--pink); }
.archive-card .archive-meta {
	font-size: 12px; color: var(--muted);
	font-family: var(--vs-font-accent); font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase;
	margin-bottom: 8px;
}
.archive-card .archive-excerpt { font-size: 14px; color: var(--text2); line-height: 1.65; flex: 1; }

.pagination {
	display: flex; gap: 6px; justify-content: center;
	margin: 24px auto 64px; flex-wrap: wrap;
}
.pagination a,
.pagination .current {
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 13px; min-width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 12px;
	border-radius: 50px;
	border: 1.5px solid var(--border);
	background: var(--card-bg);
	color: var(--text2); text-decoration: none;
	transition: all .2s;
}
.pagination a:hover { background: var(--rose); border-color: var(--pink); color: var(--pink); }
.pagination .current {
	background: var(--grad); color: #fff; border-color: transparent;
	box-shadow: 0 4px 16px rgba(232,53,138,.3);
}

/* 404 */
.error-404 {
	max-width: 720px; margin: 0 auto;
	text-align: center;
	padding: 160px 24px 80px;
	position: relative; z-index: 2;
}
.error-404 .e-num {
	font-family: var(--vs-font-display);
	font-size: clamp(120px, 18vw, 240px);
	font-weight: 900; line-height: 1;
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 12px;
}
.error-404 h1 {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px;
}
.error-404 p {
	font-size: 16px; color: var(--text2);
	line-height: 1.7; margin-bottom: 28px;
	max-width: 520px; margin-left: auto; margin-right: auto;
}

/* search form */
.search-form {
	display: flex; gap: 8px; max-width: 480px;
	margin: 0 auto;
}
.search-form input[type="search"] {
	flex: 1;
	background: var(--card-bg); border: 1.5px solid var(--border);
	border-radius: 50px; padding: 12px 20px;
	font-size: 14px; color: var(--text);
	font-family: var(--vs-font-body);
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.search-form input[type="search"]:focus {
	border-color: var(--pink);
	box-shadow: 0 0 0 3px rgba(232, 53, 138, .12);
}
.search-form button {
	background: var(--grad); color: #fff;
	border: none; border-radius: 50px;
	padding: 12px 24px;
	font-family: var(--vs-font-accent); font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(232, 53, 138, .3);
}

/* ════════ 15. FOOTER ════════
 * Day-mode footer uses a deep brand-indigo instead of near-black so it
 * harmonises with the pink/purple/orange gradient palette. Night-mode
 * footer keeps the original near-black for OLED contrast.
 */
:root { --vs-footer-bg: #16082E; }
.site-footer {
	background: var(--vs-footer-bg); color: #fff;
	position: relative; z-index: 2;
	margin-top: 0;
}
/* hide any soft fade right above footer (was leaking sky-blue daySky) */
.site-footer::before {
	content: ''; position: absolute;
	left: 0; right: 0; top: -48px; height: 48px;
	background: linear-gradient(to bottom, transparent, var(--vs-footer-bg));
	pointer-events: none;
}
[data-theme="dark"] {
	--vs-footer-bg: #06030D;
}
[data-theme="dark"] .site-footer { background: var(--vs-footer-bg); }
.footer-inner {
	max-width: 1440px; margin: 0 auto;
	padding: 64px 80px 32px;
}
.footer-top {
	display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px; margin-bottom: 48px;
}
.footer-brand img {
	height: 58px; filter: brightness(0) invert(1);
	opacity: 1; margin-bottom: 22px;
}
.footer-brand p {
	font-size: 15px; color: rgba(255, 255, 255, .78);
	line-height: 1.75; max-width: 330px;
}
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.social-btn {
	width: 40px; height: 40px; border-radius: 12px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	display: flex; align-items: center; justify-content: center;
	color: rgba(255, 255, 255, .6);
	font-size: 15px; text-decoration: none;
	transition: all .25s;
}
.social-btn:hover {
	background: var(--grad); border-color: transparent;
	color: #fff; transform: translateY(-3px);
}
.site-footer h5 {
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 13px; letter-spacing: .08em;
	text-transform: uppercase; color: rgba(255, 255, 255, .92);
	margin-bottom: 18px;
}
.footer-menu,
.site-footer ul {
	list-style: none; display: flex; flex-direction: column; gap: 10px;
}
.site-footer ul a {
	color: rgba(255, 255, 255, .72);
	font-size: 14px; text-decoration: none;
	transition: color .2s;
}
.site-footer ul a:hover { color: rgba(255, 255, 255, .98); }
.footer-contact p {
	font-size: 14px; color: rgba(255, 255, 255, .72);
	line-height: 1.9;
}
.footer-contact a { color: rgba(255, 255, 255, .92); }

.footer-payments {
	display: flex; align-items: center; gap: 12px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 24px 0;
}
.footer-payments-label {
	font-family: var(--vs-font-accent);
	font-size: 12px; font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase;
	color: rgba(255, 255, 255, .4);
}
.pay-icon {
	font-family: var(--vs-font-accent);
	font-weight: 800; font-size: 11px;
	letter-spacing: .04em;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .8);
	padding: 6px 12px; border-radius: 8px;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 24px;
	display: flex; justify-content: space-between;
	align-items: center; flex-wrap: wrap; gap: 12px;
	font-size: 12px; color: rgba(255, 255, 255, .58);
}
.footer-bottom .heart {
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
}

/* Light-mode footer text overrides (footer bg is now warm white #FDF8F5) */
[data-theme="light"] .site-footer { color: var(--text); }
[data-theme="light"] .site-footer::before {
	background: linear-gradient(to bottom, transparent, var(--vs-footer-bg));
}
[data-theme="light"] .footer-brand img { filter: none; opacity: 1; }
[data-theme="light"] .footer-brand p { color: var(--text2); }
[data-theme="light"] .site-footer h5 { color: var(--pink); }
[data-theme="light"] .site-footer ul a { color: var(--text2); }
[data-theme="light"] .site-footer ul a:hover { color: var(--text); }
[data-theme="light"] .footer-contact p { color: var(--text2); }
[data-theme="light"] .footer-contact a { color: var(--pink); }
[data-theme="light"] .social-btn {
	background: var(--bg2); border-color: var(--border); color: var(--text2);
}
[data-theme="light"] .social-btn:hover {
	background: var(--grad); border-color: transparent; color: #fff;
}
[data-theme="light"] .footer-bottom {
	border-color: var(--border); color: var(--text2);
}
[data-theme="light"] .footer-bottom .heart {
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ════════ 16. PROGRAM / PREDSTAVA ACF blocks ════════ */
.predstava-meta-row,
.program-meta-row {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 18px 0;
}

.termini-list {
	display: flex; flex-direction: column; gap: 10px;
	margin: 24px 0;
}
.termin-item {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-md);
	padding: 16px 20px;
	display: grid;
	grid-template-columns: 90px 1fr auto;
	align-items: center; gap: 16px;
	box-shadow: var(--shadow);
	transition: transform .25s var(--ease), border-color .2s;
}
.termin-item:hover { transform: translateY(-2px); border-color: var(--pink); }
.termin-date {
	font-family: var(--vs-font-display);
	font-weight: 900;
	text-align: center;
	background: var(--rose); color: var(--pink);
	border-radius: 12px; padding: 8px 4px;
}
[data-theme="dark"] .termin-date { background: rgba(232,53,138,.12); }
.termin-day { font-size: 24px; line-height: 1; }
.termin-month { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.termin-info { font-size: 14px; color: var(--text2); line-height: 1.55; }
.termin-info strong { color: var(--text); display: block; font-size: 15px; font-family: var(--vs-font-accent); }

.glumci-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 24px;
}
.glumac-card {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-md);
	padding: 18px; text-align: center;
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease);
}
.glumac-card:hover { transform: translateY(-4px); }
.glumac-photo {
	width: 96px; height: 96px; border-radius: 50%;
	margin: 0 auto 12px; overflow: hidden;
	background: var(--grad);
}
.glumac-photo img { width: 100%; height: 100%; object-fit: cover; }
.glumac-name {
	font-family: var(--vs-font-display); font-weight: 700;
	font-size: 16px; margin-bottom: 4px;
}
.glumac-role { font-size: 12px; color: var(--muted); }

/* ════════ 17. UTILITY / MOTION GUARD ════════ */
.no-scroll { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.cloud, .fshape, .bb1, .bb2, .ha-ring, .ha-ring2, .book-glow, .book-emoji, .book-badge,
	.cta-icon, .ticker { animation: none !important; }
	.basket { transition: none !important; }
}

.vs-no-animations .cloud,
.vs-no-animations .fshape,
.vs-no-animations .bb1,
.vs-no-animations .bb2,
.vs-no-animations .ha-ring,
.vs-no-animations .ha-ring2,
.vs-no-animations .book-glow,
.vs-no-animations .book-emoji,
.vs-no-animations .book-badge,
.vs-no-animations .cta-icon,
.vs-no-animations .ticker { animation: none !important; }

/* ════════ 18. RESPONSIVE ════════ */
@media (max-width: 1100px) {
	.section-inner { padding: 64px 48px; }
	.hero { padding: 120px 0 56px; }
	.vs-slide-inner { padding: 0 48px; gap: 40px; min-height: 0; }
	.book-scene { width: 320px; height: 420px; }
	.book { width: 240px; height: 350px; left: 40px; top: 32px; }
	.book-title { font-size: 19px; }
	.stats-wrap { padding: 48px 48px; }
	.footer-inner { padding: 56px 48px 28px; }
	.show-feature { padding: 56px 48px; }
	.gallery-inner { padding: 64px 48px; }
}

@media (max-width: 960px) {
	.site-nav { width: calc(100% - 32px); padding: 12px 18px; }
	.nav-links { display: none; }
	.vs-mobile-toggle { display: flex; }

	.hero { padding: 100px 0 48px; }
	.vs-slide-inner { grid-template-columns: 1fr; padding: 0 28px; gap: 32px; }
	.vs-slide-visual { display: none; }
	.hero p { max-width: 100%; }
	.prog-wide { padding: 32px 28px; }
	.prog-wide-vis { width: 120px; height: 120px; font-size: 60px; border-radius: 22px; }

	.stats-wrap { padding: 32px 28px; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.section-inner { padding: 56px 28px; }

	.progs-grid { grid-template-columns: 1fr; }
	.prog-wide { grid-column: span 1; }
	.prog-wide-inner { grid-template-columns: 1fr; }
	.shows-grid { grid-template-columns: 1fr; }
	.prods-grid { grid-template-columns: 1fr 1fr; }

	.about-inner { grid-template-columns: 1fr; gap: 32px; }
	.about-img-wrap img { height: 280px; }

	.feeling-grid { grid-template-columns: repeat(2, 1fr); }

	.show-feature, .show-feature.reverse { grid-template-columns: 1fr; direction: ltr; padding: 48px 24px; gap: 32px; }
	.gallery-inner { padding: 56px 24px; }
	.photo-grid { grid-template-columns: repeat(2, 1fr); }
	.photo-item.feature { grid-column: span 1; grid-row: span 1; }

	.archive-grid { grid-template-columns: 1fr; padding: 48px 24px; }

	.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
	.footer-inner { padding: 48px 28px 24px; }

	.glumci-grid { grid-template-columns: 1fr 1fr; }
	.termin-item { grid-template-columns: 80px 1fr; }
	.termin-item .btn-outline { grid-column: span 2; }
}

@media (max-width: 560px) {
	.hero h1 { font-size: clamp(32px, 8vw, 44px); }
	.hero-trust .trust-pill { font-size: 10px; padding: 4px 10px; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.prods-grid { grid-template-columns: 1fr 1fr; }
	.feeling-grid { grid-template-columns: 1fr 1fr; }
	.footer-top { grid-template-columns: 1fr; }
	.glumci-grid { grid-template-columns: 1fr; }
	.game-arena { height: 320px; }
	.cta-section { padding: 56px 24px; }
}

/* ════════ 19. LEGACY CLASS ALIASES (graceful) ════════ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1440px; margin: 0 auto; padding: 48px 0; }
.post-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s, border-color .25s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-6px); border-color: var(--pink); box-shadow: var(--shadow-lg); }
.post-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg2); display: block; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.post-card h3 { font-family: var(--vs-font-display); font-weight: 700; font-size: 19px; line-height: 1.3; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--pink); }
.post-card p { font-size: 14px; color: var(--text2); line-height: 1.65; flex: 1; }

.vs-blog-layout, .vs-page-content {
	max-width: 760px; margin: 0 auto;
}
.vs-post-meta {
	display: flex; gap: 14px; flex-wrap: wrap;
	margin-bottom: 24px;
	font-size: 13px; color: var(--muted);
	font-family: var(--vs-font-accent); font-weight: 700;
	letter-spacing: .04em;
}
.vs-post-tags {
	margin: 32px 0;
	font-size: 13px; color: var(--muted);
}
.vs-post-tags a {
	display: inline-block;
	background: var(--bg2); border: 1.5px solid var(--border);
	color: var(--text2);
	padding: 4px 12px; margin: 2px;
	border-radius: 50px;
	font-size: 12px;
}
.vs-comments-wrap {
	margin: 48px 0;
	padding-top: 32px;
	border-top: 1.5px solid var(--border);
}
.vs-empty-state {
	max-width: 520px; margin: 64px auto;
	text-align: center;
}
.vs-empty-emoji {
	font-size: 80px; margin-bottom: 16px;
	display: inline-block;
	animation: vs-icon-dance 3s ease-in-out infinite;
}
.vs-empty-state h3 {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 26px; margin-bottom: 8px;
}
.vs-empty-state p { color: var(--text2); margin-bottom: 20px; }

.posts-navigation, .post-navigation {
	max-width: 760px; margin: 32px auto;
	display: flex; gap: 12px; justify-content: space-between;
}
.posts-navigation a, .post-navigation a {
	background: var(--card-bg); border: 1.5px solid var(--border);
	border-radius: 14px; padding: 14px 18px;
	color: var(--text); text-decoration: none;
	flex: 1;
	transition: border-color .2s, transform .2s;
}
.posts-navigation a:hover, .post-navigation a:hover {
	border-color: var(--pink); transform: translateY(-2px); color: var(--text);
}
.posts-navigation .nav-sub, .post-navigation .nav-sub {
	display: block;
	font-family: var(--vs-font-accent); font-size: 11px;
	font-weight: 700; color: var(--muted);
	text-transform: uppercase; letter-spacing: .04em;
}
.posts-navigation .nav-title, .post-navigation .nav-title {
	display: block;
	font-family: var(--vs-font-display); font-weight: 700;
	font-size: 15px; margin-top: 4px;
}

.bc-sep {
	display: inline-block;
	margin: 0 4px;
	color: var(--border2);
}

.section-header { margin-bottom: 52px; }

@media (max-width: 960px) {
	.post-grid { grid-template-columns: 1fr; padding: 32px 0; }
	.posts-navigation, .post-navigation { flex-direction: column; }
}

/* ════════ 20. COMMENTS ════════ */
.comments-area { margin-top: 32px; }
.comments-title {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 22px; margin-bottom: 18px;
}
.comment-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.comment-list .comment, .comment-list .pingback {
	background: var(--card-bg); border: 1.5px solid var(--border);
	border-radius: var(--rad-md); padding: 18px 20px;
	box-shadow: var(--shadow);
}
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-author img { border-radius: 50%; }
.comment-meta a { font-size: 11px; color: var(--muted); }
.comment-content p { font-size: 14px; color: var(--text2); line-height: 1.7; }
.comment-form {
	background: var(--card-bg); border: 1.5px solid var(--border);
	border-radius: var(--rad-lg); padding: 24px 26px;
	margin-top: 20px;
}
.comment-form label {
	display: block;
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 12px; letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text2); margin: 0 0 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	background: var(--bg2);
	border: 1.5px solid var(--border);
	border-radius: 12px; padding: 12px 14px;
	font-size: 15px; color: var(--text);
	font-family: var(--vs-font-body);
	outline: none;
	transition: border-color .2s;
	margin-bottom: 12px;
}
.comment-form input:focus, .comment-form textarea:focus {
	border-color: var(--pink);
	box-shadow: 0 0 0 3px rgba(232, 53, 138, .12);
}
.comment-form .submit {
	background: var(--grad); color: #fff;
	border: none; cursor: pointer;
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 14px; padding: 12px 28px;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(232, 53, 138, .3);
}

/* ════════ 21. KBAR (?, /) overlay ════════ */
#vsKbar {
	position: fixed; inset: 0; z-index: 600;
	background: rgba(13, 8, 22, .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	display: none;
	padding: 14vh 24px 0;
	justify-content: center;
}
#vsKbar.is-open { display: flex; }
.kbar-shell {
	width: min(720px, 100%);
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-lg);
	box-shadow: var(--shadow-lg);
	padding: 8px;
	max-height: 80vh; overflow: hidden;
	display: flex; flex-direction: column;
}
.kbar-input {
	width: 100%;
	background: transparent; border: none; outline: none;
	padding: 14px 18px;
	font-size: 18px; color: var(--text);
	font-family: var(--vs-font-body);
}
.kbar-results {
	overflow-y: auto;
	border-top: 1.5px solid var(--border);
	margin-top: 4px; padding-top: 6px;
}

/* ════════ 22. FOCUS POLISH ════════ */
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-white:focus-visible,
.btn-ghost:focus-visible,
.nav-cta:focus-visible,
.cart-btn:focus-visible,
.theme-toggle:focus-visible,
.feeling-btn:focus-visible,
.fav-btn:focus-visible,
.game-btn:focus-visible {
	outline: 3px solid rgba(232, 53, 138, .55);
	outline-offset: 4px;
}

/* ════════ IGRE ZA DJECU page ════════ */

/* Hide every piece of the live sky atmosphere (sun, moon, clouds, plane,
   shooting stars, balloons, butterflies, bg blobs, floating shapes) so the
   hero LANDSCAPE (hills/trees/city) becomes the sole backdrop. */
body.vs-igre-body #vsDaySky,
body.vs-igre-body #vsNightDecor,
body.vs-igre-body #vsSkyTop,
body.vs-igre-body #vsStarCanvas,
body.vs-igre-body .vs-floating-shapes,
body.vs-igre-body .vs-bg-blobs {
	display: none !important;
}

/* Hero wrapper — page-hero (transparent) + landscape sit together.
   Landscape is anchored to the bottom of this wrapper, acting as the hero backdrop. */
.vs-igre-hero-wrap {
	position: relative;
	overflow: hidden;
}
.vs-igre-hero-wrap .hero-landscape {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	width: 100%; height: 240px;
	z-index: 1;
	pointer-events: none;
	opacity: 1;
}

/* Page hero: kill the gradient + photo so the landscape behind shows through.
   Text recolored for legibility against the bright sky/landscape. */
.vs-igre-page .page-hero {
	background: transparent;
	min-height: 70vh;
}
.vs-igre-page .page-hero-bg,
.vs-igre-page .page-hero-bg::after {
	background: none !important;
	opacity: 0 !important;
}
/* Cream wave at hero bottom would cut through the landscape — remove it. */
.vs-igre-page .page-hero .wave-bottom { display: none; }
.vs-igre-page .page-hero h1 {
	color: var(--text);
	text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.vs-igre-page .page-hero p {
	color: var(--text2);
}
.vs-igre-page .page-hero .hero-eyebrow {
	background: var(--rose);
	border: 1.5px solid rgba(232, 53, 138, .25);
	color: var(--pink);
}
.vs-igre-page .page-hero .hero-chip {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	color: var(--text2);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
[data-theme="dark"] .vs-igre-page .page-hero h1,
[data-theme="dark"] .vs-igre-page .page-hero p { color: var(--text); text-shadow: none; }
[data-theme="dark"] .vs-igre-page .page-hero .hero-eyebrow {
	background: rgba(232, 53, 138, .12);
}

.vs-igre-page .igre-index {
	background:
		radial-gradient(circle at 12% 10%, rgba(255,217,61,.22), transparent 32%),
		radial-gradient(circle at 88% 18%, rgba(52,217,181,.22), transparent 30%),
		radial-gradient(circle at 6% 92%, rgba(232,53,138,.18), transparent 32%),
		radial-gradient(circle at 95% 85%, rgba(139,53,214,.20), transparent 35%),
		var(--bg2);
	padding: 64px 0 56px;
	position: relative; z-index: 2;
	overflow: hidden;
}
.vs-igre-page .igre-index::before,
.vs-igre-page .igre-index::after {
	content: ''; position: absolute;
	width: 90px; height: 90px;
	border-radius: 50%;
	pointer-events: none;
}
.vs-igre-page .igre-index::before {
	top: 8%; left: 4%;
	background: var(--grad);
	opacity: .15;
	animation: vs-igre-blob 14s ease-in-out infinite;
}
.vs-igre-page .igre-index::after {
	bottom: 6%; right: 6%;
	background: linear-gradient(135deg, var(--mint), var(--yellow));
	opacity: .18;
	animation: vs-igre-blob 18s ease-in-out infinite reverse;
}
@keyframes vs-igre-blob {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(40px, -30px) scale(1.15); }
	66%      { transform: translate(-30px, 30px) scale(.9); }
}
.vs-igre-page .game-bg {
	background: none;
}
.vs-igre-page .happy-bg {
	background:
		radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232,53,138,.10), transparent 50%),
		var(--bg);
}
.vs-igre-page .igre-index-inner {
	max-width: 1200px; margin: 0 auto;
	padding: 0 80px;
}
.vs-igre-page .igre-toc {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 36px;
}
.igre-toc-card {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-md);
	padding: 22px 20px;
	text-decoration: none;
	color: var(--text);
	display: flex; flex-direction: column;
	gap: 6px; align-items: center;
	text-align: center;
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease), border-color .25s, box-shadow .3s;
}
.igre-toc-card:hover {
	transform: translateY(-6px);
	border-color: var(--pink);
	box-shadow: var(--shadow-lg);
	color: var(--text);
}
.igre-toc-emoji {
	font-size: 48px; line-height: 1;
	transition: transform .3s var(--spring);
}
.igre-toc-card:hover .igre-toc-emoji { transform: scale(1.15) rotate(-6deg); }
.igre-toc-name {
	font-family: var(--vs-font-display);
	font-weight: 800; font-size: 18px;
}
.igre-toc-sub {
	font-size: 12px; color: var(--muted);
	font-weight: 600;
}

.vs-igre-page .igra-head {
	max-width: 720px;
	text-align: center;
	margin: 0 auto 40px;
}
.vs-igre-page .igra-head .section-tag {
	display: inline-flex; margin: 0 auto 14px;
}
.vs-igre-page .igra-head .section-sub {
	margin: 12px auto 0;
}

/* MEMORY GAME (Pamti srca) */
.memory-hud {
	display: flex; gap: 10px; justify-content: center;
	margin-bottom: 18px; flex-wrap: wrap;
}
.hud-pill {
	background: var(--bg2);
	border: 1.5px solid var(--border);
	border-radius: 50px;
	padding: 6px 14px;
	font-size: 13px; color: var(--text2);
	font-family: var(--vs-font-accent); font-weight: 700;
}
.hud-pill strong {
	color: var(--text);
	font-family: var(--vs-font-display);
	font-size: 15px;
	margin: 0 2px;
}
.game-btn.small {
	padding: 6px 14px;
	font-size: 12px;
}
.memory-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	max-width: 460px;
	margin: 0 auto;
	perspective: 800px;
}
.memory-card {
	aspect-ratio: 1;
	background: transparent;
	border: none; padding: 0; cursor: pointer;
	position: relative;
	transform-style: preserve-3d;
	transition: transform .55s var(--spring);
	font-family: var(--vs-font-accent);
}
.memory-card.flipped,
.memory-card.matched { transform: rotateY(180deg); }
.memory-card-back,
.memory-card-front {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 14px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	font-size: 38px;
	box-shadow: var(--shadow);
	border: 1.5px solid var(--border);
}
.memory-card-back {
	background: linear-gradient(135deg, var(--rose), rgba(232,53,138,.25));
	color: var(--pink);
	font-weight: 900;
	font-size: 34px;
}
[data-theme="dark"] .memory-card-back {
	background: linear-gradient(135deg, rgba(232,53,138,.18), rgba(139,53,214,.2));
}
.memory-card-front {
	background: var(--card-bg);
	transform: rotateY(180deg);
}
.memory-card.matched .memory-card-front {
	background: linear-gradient(135deg, rgba(52,217,181,.18), rgba(92,224,213,.18));
	border-color: var(--mint);
	animation: vs-mem-match .5s var(--spring);
}
@keyframes vs-mem-match {
	0%   { transform: rotateY(180deg) scale(1); }
	50%  { transform: rotateY(180deg) scale(1.1); }
	100% { transform: rotateY(180deg) scale(1); }
}
.memory-msg {
	margin-top: 24px;
	min-height: 32px;
	text-align: center;
	font-family: var(--vs-font-display);
	font-weight: 800;
	font-size: 18px;
	color: var(--pink);
}

/* BREATHING (Diši zajedno) */
.breath-arena {
	padding: 40px 24px 32px;
	display: flex; flex-direction: column;
	align-items: center;
	gap: 22px;
}
.breath-orb {
	width: 200px; height: 200px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), transparent 50%),
		radial-gradient(circle at 65% 70%, rgba(232,53,138,.3), rgba(139,53,214,.4));
	box-shadow:
		inset 0 0 40px rgba(255,255,255,.3),
		0 24px 64px rgba(139,53,214,.35),
		0 0 80px rgba(232,53,138,.3);
	display: flex; align-items: center; justify-content: center;
	transition: transform 4s ease-in-out;
	will-change: transform;
}
[data-theme="dark"] .breath-orb {
	background:
		radial-gradient(circle at 35% 35%, rgba(195,132,252,.55), transparent 55%),
		radial-gradient(circle at 65% 70%, rgba(52,217,181,.25), rgba(139,53,214,.5));
	box-shadow:
		inset 0 0 40px rgba(255,255,255,.15),
		0 24px 64px rgba(139,53,214,.5),
		0 0 100px rgba(195,132,252,.35);
}
.breath-instruction {
	font-family: var(--vs-font-display);
	font-weight: 900;
	font-size: 26px;
	color: #fff;
	text-shadow: 0 4px 16px rgba(0,0,0,.3);
	letter-spacing: -0.01em;
}
.breath-controls {
	display: flex; align-items: center;
	gap: 16px; flex-wrap: wrap; justify-content: center;
}
.breath-cycle {
	font-family: var(--vs-font-accent); font-weight: 700;
	color: var(--muted); font-size: 13px;
	letter-spacing: .04em;
}
.breath-tip {
	color: var(--text2);
	font-size: 14px; line-height: 1.65;
	max-width: 460px; text-align: center;
	margin: 0 auto;
}

@media (max-width: 760px) {
	.vs-igre-page .igre-toc { grid-template-columns: 1fr 1fr; }
	.vs-igre-page .igre-index-inner { padding: 0 24px; }
	.memory-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
	.memory-card-back, .memory-card-front { font-size: 28px; }
	.breath-orb { width: 160px; height: 160px; }
	.breath-instruction { font-size: 22px; }
}

/* ════════ STICKY-NAV CLEARANCE VARIABLE — single source of truth ════════
   The floating pill nav is position:fixed. Its bottom edge sits at roughly:
   desktop ≈110px · tablet ≈105px · mobile ≈75px + safe-area-inset-top.
   Any top-level element (breadcrumb, cart/checkout/account) uses this var for
   its top padding so it clears the nav on load. Tune these 3 numbers only. */
:root { --vs-nav-clear: 132px; }
@media (max-width: 960px) { :root { --vs-nav-clear: 124px; } }
@media (max-width: 768px) { :root { --vs-nav-clear: calc(96px + var(--vs-sa-top, 0px)); } }

/* ════════ NAV CLEARANCE — defensive padding for pages without page-hero ════════ */
.site-main > .section:first-child:not(.shop-hero):not(.page-hero):not(.hero) { padding-top: 100px; }
.site-main > .entry-content:first-child { padding-top: 130px; }
.site-main > .archive-grid:first-child { padding-top: 130px; }
.site-main > .error-404:first-child { padding-top: 160px; }

/* ════════ 23. POLISH (final coat) ════════ */
.section-inner { padding: 96px 80px; }
.section-header { margin-bottom: 56px; max-width: 720px; }
.section-title { letter-spacing: -0.015em; }
.section-sub { font-size: 17px; }

/* card surface refinement — softer borders + lifted shadow on hover */
.prog-card,
.show-card,
.shop-card,
.stat-card,
.archive-card,
.af-card,
.feeling-btn {
	transition:
		transform .4s var(--ease),
		box-shadow .4s var(--ease),
		border-color .25s var(--ease);
}

/* prog cards subtle decorative blob */
.prog-card { isolation: isolate; }
.prog-card::after {
	content: ''; position: absolute;
	width: 160px; height: 160px;
	border-radius: 50%;
	bottom: -80px; right: -60px;
	background: radial-gradient(circle, rgba(232,53,138,.06), transparent 70%);
	z-index: -1;
	opacity: 0;
	transition: opacity .5s var(--ease);
}
.prog-card:hover::after { opacity: 1; }

/* nicer chip pills */
.section-tag { padding: 7px 18px; font-size: 11.5px; }

/* show thumbnails — taller 4:3 ratio for impact */
.show-thumb { aspect-ratio: 4 / 3; height: auto; }

/* about: gentle gradient framing on image */
.about-img-wrap {
	border: 1.5px solid var(--border);
	transform: rotate(0deg);
	transition: transform .5s var(--ease);
}
.about-img-wrap:hover { transform: rotate(-1deg); }

/* button gradient hover sheen */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform .55s var(--ease);
	z-index: 0;
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary > * { position: relative; z-index: 1; }

/* nav-cta same sheen */
.nav-cta { position: relative; overflow: hidden; }
.nav-cta::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform .6s var(--ease);
}
.nav-cta:hover::before { transform: translateX(120%); }

/* ticker fade edges */
.ticker-wrap {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* hero eyebrow + buttons gentle entrance refinement */
.hero-eyebrow { animation-delay: .5s; }

/* feeling buttons elegant lift */
.feeling-btn { will-change: transform; }
.feeling-btn:active { transform: scale(.98) translateY(-2px) !important; }

/* stat-card numeric tighter */
.stat-num { letter-spacing: -0.02em; }

/* section background blending — soft transitions between sections */
.progs-bg, .prods-bg, .game-bg { position: relative; }
.progs-bg::before,
.prods-bg::before,
.game-bg::before {
	content: ''; position: absolute;
	left: 0; right: 0; top: -1px; height: 60px;
	background: linear-gradient(to bottom, var(--bg), transparent);
	pointer-events: none; z-index: 1;
}
.shows-bg, .about-bg, .happy-bg { position: relative; }
.shows-bg::before,
.about-bg::before,
.happy-bg::before {
	content: ''; position: absolute;
	left: 0; right: 0; top: -1px; height: 60px;
	background: linear-gradient(to bottom, var(--bg2), transparent);
	pointer-events: none; z-index: 1;
}
[data-theme="dark"] .progs-bg::before,
[data-theme="dark"] .prods-bg::before,
[data-theme="dark"] .game-bg::before { background: linear-gradient(to bottom, var(--bg), transparent); }

/* nav slight elevation on scroll (pseudo via slightly stronger shadow at small viewport) */
@supports (backdrop-filter: blur(20px)) {
	.site-nav { box-shadow: 0 8px 32px rgba(139,53,214,.06), var(--shadow); }
}

/* hero ring refined position to balance larger book */
.ha-ring  { animation-duration: 22s; }
.ha-ring2 { animation-duration: 14s; }

/* product card price emphasis */
ul.products li.product .price,
.shop-card .price-row { font-size: 20px; }

/* programs card title tighter line height */
.prog-card h3 { font-size: 21px; line-height: 1.25; }
.prog-card p  { font-size: 14.5px; }

/* show body refined */
.show-body { padding: 22px 24px 24px; }
.show-body h3 { font-size: 19px; margin-bottom: 8px; letter-spacing: -0.005em; }

/* trust-row centering when in hero */
.hero-trust { gap: 8px; }
.hero-trust .trust-pill {
	background: rgba(255,255,255,.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 11.5px;
	padding: 6px 14px;
	border-color: rgba(232,53,138,.18);
}
[data-theme="dark"] .hero-trust .trust-pill {
	background: rgba(25,12,40,.55);
}

/* card-icon subtle rotate-in on hover */
.pc-icon, .af-icon, .game-icon-bg, .ic1, .ic2, .ic3, .ic4 {
	transition: transform .5s var(--spring);
}
.prog-card:hover .pc-icon,
.af-card:hover .af-icon { transform: rotate(-6deg) scale(1.06); }

/* divider in nav-cta when next to count */
.cart-count { box-shadow: 0 4px 12px rgba(255,217,61,.5); }

/* about-cards slight horizontal shift refinement */
.af-card { transition: transform .35s var(--ease), box-shadow .35s, border-color .25s; }
.af-card:hover { border-color: rgba(232,53,138,.25); }

/* CTA section shimmer */
.cta-section .btn-white { transition: transform .25s var(--ease), box-shadow .25s; }
.cta-section .btn-white:hover { transform: translateY(-4px) scale(1.02); }

/* page-hero refinement */
.page-hero h1 { letter-spacing: -0.015em; }
.page-hero p { font-size: 18px; }

/* page-hero XL modifier — used on single-predstava */
.page-hero--xl {
	min-height: 64vh;
	padding: 160px 48px 96px;
}
.page-hero--xl .page-hero-content { max-width: 980px; }
.page-hero--xl h1 {
	font-size: clamp(44px, 6.4vw, 88px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin-bottom: 24px;
	text-shadow: 0 2px 30px rgba(0,0,0,.18);
}
.page-hero--xl .hero-eyebrow { font-size: 13px; padding: 8px 18px; }
.page-hero--xl .hero-chips { margin-top: 28px; }
@media (max-width: 720px) {
	.page-hero--xl { min-height: 52vh; padding: 120px 22px 64px; }
	.page-hero--xl h1 { font-size: clamp(32px, 9vw, 48px); }
}

/* page-hero compact — archive-predstava / archive-program */
.page-hero--compact {
	min-height: 0;
	padding: 96px 48px 36px;
}
.page-hero--compact h1 {
	font-size: clamp(22px, 2.6vw, 36px);
	margin-bottom: 10px;
	letter-spacing: -0.01em;
}
.page-hero--compact p {
	font-size: 15px;
	margin-bottom: 18px;
	max-width: 520px;
}
.page-hero--compact .hero-chips { margin-top: 14px; }
@media (max-width: 720px) {
	.page-hero--compact { padding: 88px 20px 28px; }
	.page-hero--compact h1 { font-size: clamp(20px, 6vw, 28px); }
}

/* ── single-predstava layout ── */
.predstava-section { padding-top: 64px; padding-bottom: 64px; }
.predstava-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) 380px;
	gap: 56px; align-items: start;
}
@media (max-width: 980px) {
	.predstava-grid { grid-template-columns: 1fr; gap: 40px; }
}
.single-predstava-aside {
	position: sticky; top: 100px;
	display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 980px) { .single-predstava-aside { position: static; } }
.predstava-card {
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-lg);
	padding: 24px 26px;
	box-shadow: var(--shadow);
}
.predstava-card--cta { box-shadow: var(--shadow-lg); }
.predstava-card .section-tag { margin-bottom: 12px; }
.predstava-card-title {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 22px; margin-bottom: 12px;
}
.predstava-card-body {
	font-size: 14.5px; color: var(--text2);
	line-height: 1.65; margin-bottom: 18px;
}
.predstava-btn-block {
	width: 100%; justify-content: center;
}
.program-sidebar-details {
	display: grid;
	gap: 10px;
	margin: 18px 0;
}
.program-sidebar-detail {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 3px 11px;
	align-items: center;
	padding: 13px 14px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(255, 228, 238, .44), rgba(255, 255, 255, .74));
	border: 1px solid rgba(139, 53, 214, .1);
}
.program-sidebar-detail-icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 13px;
	background: rgba(139, 53, 214, .1);
	color: var(--purple);
	font-size: 15px;
	font-weight: 900;
}
.program-sidebar-detail-label {
	color: var(--text2);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}
.program-sidebar-detail strong {
	min-width: 0;
	color: var(--text);
	font-size: 15px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.program-sidebar-detail--empty {
	background: rgba(139, 53, 214, .06);
}
.program-sidebar-details + .predstava-btn-block {
	margin-top: 6px;
}
[data-theme="dark"] .program-sidebar-detail {
	background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .035));
	border-color: rgba(255, 255, 255, .1);
}
[data-theme="dark"] .program-sidebar-detail-icon {
	background: rgba(192, 132, 252, .14);
	color: var(--lilac);
}
[data-theme="dark"] .program-sidebar-detail-label {
	color: rgba(245, 237, 255, .58);
}
[data-theme="dark"] .program-sidebar-detail strong {
	color: var(--text-light);
}
.predstava-btn-block + .predstava-btn-block { margin-top: 10px; }
.termini-list { margin: 0; }
.termin-btn { padding: 8px 16px; font-size: 13px; }

.predstava-video {
	aspect-ratio: 16/9; border-radius: 18px;
	overflow: hidden; margin: 32px 0;
	box-shadow: var(--shadow-lg);
	border: 1.5px solid var(--border);
}
.predstava-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── entry-content (predstava variant) ── */
.entry-content--predstava {
	max-width: none; margin: 0; padding: 0;
}
.entry-content--predstava > * + * { margin-top: 1.2em; }
.entry-content--predstava p {
	font-size: 17px; line-height: 1.78; color: var(--text2);
}
.entry-content--predstava h2 {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 28px; margin-top: 1.6em;
	display: inline-flex; align-items: center; gap: 12px;
}
.entry-content--predstava h2::before {
	content: ""; width: 6px; height: 28px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--pink), var(--orange, #f4681a));
	display: inline-block;
}
.entry-content--predstava h3 {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 22px; margin-top: 1.4em;
}
.entry-content--predstava blockquote {
	font-family: var(--vs-font-display); font-style: italic;
	font-size: 22px; line-height: 1.5;
	color: var(--text);
	background: linear-gradient(135deg, rgba(232,53,138,.08), rgba(255,217,61,.10));
	border-left: 4px solid var(--pink);
	padding: 22px 26px; border-radius: 0 16px 16px 0;
	margin: 28px 0;
}
.entry-content--predstava ul,
.entry-content--predstava ol { padding-left: 1.4em; }
.entry-content--predstava ul li,
.entry-content--predstava ol li {
	font-size: 16.5px; line-height: 1.75; color: var(--text2);
	margin-top: .35em;
}
.entry-content--predstava ul li::marker { color: var(--pink); }
.entry-content--predstava a {
	color: var(--pink); font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid rgba(232,53,138,.35);
	transition: border-color .2s;
}
.entry-content--predstava a:hover { border-bottom-color: var(--pink); }
.entry-content--predstava img {
	border-radius: 14px; box-shadow: var(--shadow);
}

/* ── Sretni kutak — emotion picker v2 (cards + cloud popup) ── */
.feeling-grid--cards {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 880px; margin: 0 auto;
}
.feeling-btn--card {
	position: relative;
	padding: 28px 14px 22px;
	border-radius: 26px;
	background: var(--card-bg);
	border: 2px solid var(--border);
	overflow: visible;
	transition: transform .3s var(--spring), border-color .25s, box-shadow .3s, background .25s;
	animation: vs-feel-bob 4s ease-in-out infinite;
	animation-delay: calc( var(--feeling-i, 0) * .25s );
}
@keyframes vs-feel-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
.feeling-btn--card:hover {
	transform: translateY(-10px) scale(1.06);
	border-color: var(--pink);
	box-shadow: 0 18px 40px rgba(232,53,138,.22);
	animation-play-state: paused;
}
.feeling-btn--card .feeling-emoji {
	font-size: 64px;
	line-height: 1;
	display: inline-block;
	transition: transform .35s var(--spring);
	filter: drop-shadow( 0 6px 12px rgba(0,0,0,.12) );
}
.feeling-btn--card:hover .feeling-emoji {
	transform: scale(1.18) rotate(-6deg);
}
.feeling-btn--card .feeling-label {
	font-family: var(--vs-font-display);
	font-weight: 800; font-size: 14px;
	color: var(--text);
	letter-spacing: .01em;
	margin-top: 4px;
}
.feeling-btn--card.is-pulse .feeling-emoji {
	animation: vs-feel-pop .55s var(--spring);
}
@keyframes vs-feel-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.45) rotate(8deg); }
	70%  { transform: scale(.92) rotate(-4deg); }
	100% { transform: scale(1.18) rotate(-6deg); }
}

.feeling-cloud {
	position: absolute;
	left: 50%; bottom: calc(100% + 14px);
	transform: translate(-50%, 6px) scale(.7);
	background: #fff;
	color: var(--text);
	font-family: var(--vs-font-display);
	font-weight: 700;
	font-size: 14px; line-height: 1.35;
	padding: 14px 18px;
	border-radius: 22px;
	min-width: 180px; max-width: 260px;
	text-align: center;
	box-shadow:
		0 18px 40px rgba(0,0,0,.18),
		0 0 0 1px rgba(0,0,0,.04);
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	transition: transform .45s var(--spring), opacity .35s var(--ease);
}
.feeling-cloud::before,
.feeling-cloud::after {
	content: ""; position: absolute;
	background: #fff; border-radius: 50%;
}
.feeling-cloud::before {
	width: 18px; height: 18px;
	bottom: -6px; left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 4px 8px rgba(0,0,0,.05);
}
.feeling-cloud::after {
	width: 10px; height: 10px;
	bottom: -16px; left: calc(50% + 8px);
	box-shadow: 0 4px 6px rgba(0,0,0,.04);
}
[data-theme="dark"] .feeling-cloud,
[data-theme="dark"] .feeling-cloud::before,
[data-theme="dark"] .feeling-cloud::after {
	background: var(--card-bg);
	color: var(--text);
}
.feeling-cloud.is-in {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
	animation: vs-cloud-float 3.2s ease-in-out forwards;
}
.feeling-cloud.is-out {
	opacity: 0;
	transform: translate(-50%, -22px) scale(.85);
}
@keyframes vs-cloud-float {
	0%   { transform: translate(-50%, 0) scale(1); }
	60%  { transform: translate(-50%, -8px) scale(1.03); }
	100% { transform: translate(-50%, -4px) scale(1); }
}

.happy-cta-row { text-align: center; margin-top: 44px; }

@media (max-width: 720px) {
	.feeling-grid--cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.feeling-btn--card .feeling-emoji { font-size: 52px; }
	.feeling-cloud { min-width: 140px; font-size: 13px; padding: 12px 14px; }
}

/* ── Sretni kutak — printables (front page) ── */
.sretni-kutak-section { position: relative; }
.kutak-block { margin-top: 48px; }
.kutak-block:first-of-type { margin-top: 56px; }
.kutak-subhead {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 22px; margin: 0 0 22px;
	display: inline-flex; align-items: center; gap: 12px;
	color: var(--text);
}
.kutak-sub-emoji {
	width: 38px; height: 38px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(232,53,138,.14), rgba(255,217,61,.16));
	font-size: 18px;
}
.kutak-grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) { .kutak-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kutak-grid { grid-template-columns: 1fr; } }

.kutak-card {
	display: flex; flex-direction: column;
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-lg);
	overflow: hidden;
	text-decoration: none; color: inherit;
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease), box-shadow .3s, border-color .25s;
}
.kutak-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: var(--pink);
}
.kutak-thumb {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--bg2);
	overflow: hidden;
}
.kutak-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}
.kutak-card:hover .kutak-thumb img { transform: scale(1.05); }
.kutak-pdf-badge {
	position: absolute; top: 10px; right: 10px;
	font-family: var(--vs-font-accent); font-weight: 800;
	font-size: 11px; letter-spacing: .04em;
	color: #fff; background: var(--pink);
	padding: 4px 10px; border-radius: 50px;
	box-shadow: 0 4px 10px rgba(232,53,138,.35);
}
.kutak-body {
	padding: 16px 18px;
	display: flex; flex-direction: column; gap: 6px;
}
.kutak-title {
	font-family: var(--vs-font-display); font-weight: 700;
	font-size: 15px; line-height: 1.35; color: var(--text);
}
.kutak-cta {
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 12px; color: var(--pink);
	display: inline-flex; align-items: center; gap: 4px;
	transition: gap .2s;
}
.kutak-card:hover .kutak-cta { gap: 8px; }

.kutak-feature {
	display: grid; grid-template-columns: 320px 1fr;
	gap: 0; margin-top: 56px;
	background:
		radial-gradient(circle at 90% 20%, rgba(255,217,61,.18), transparent 45%),
		radial-gradient(circle at 10% 90%, rgba(52,217,181,.16), transparent 45%),
		var(--grad);
	color: #fff;
	border-radius: var(--rad-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	text-decoration: none;
	transition: transform .35s var(--ease), box-shadow .35s;
}
.kutak-feature:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,.18); }
.kutak-feature-img { background: rgba(255,255,255,.08); }
.kutak-feature-img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.kutak-feature-text { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.kutak-feature-eyebrow {
	font-family: var(--vs-font-accent); font-weight: 800;
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
	color: rgba(255,255,255,.92);
	display: inline-flex; align-items: center;
	background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 50px;
	width: fit-content;
}
.kutak-feature-title {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: clamp(24px, 3vw, 34px);
	margin: 0; color: #fff;
}
.kutak-feature-text p {
	font-size: 15px; line-height: 1.65;
	color: rgba(255,255,255,.92); margin: 0;
}
.kutak-feature-btn { width: fit-content; margin-top: 6px; }
@media (max-width: 760px) {
	.kutak-feature { grid-template-columns: 1fr; }
	.kutak-feature-img { aspect-ratio: 16 / 9; }
	.kutak-feature-text { padding: 28px 22px; }
}

/* ── testimonials carousel (front page) ── */
.testimonials-section {
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
	position: relative; overflow: hidden;
}
.testimonials-section::before {
	content: ""; position: absolute;
	top: -120px; right: -120px;
	width: 320px; height: 320px; border-radius: 50%;
	background: radial-gradient(circle, rgba(232,53,138,.10), transparent 70%);
	pointer-events: none;
}
.testimonials-section::after {
	content: ""; position: absolute;
	bottom: -160px; left: -160px;
	width: 380px; height: 380px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,217,61,.10), transparent 70%);
	pointer-events: none;
}
.testimonials-carousel {
	position: relative;
	max-width: 880px; margin: 48px auto 0;
	padding: 0 64px;
}
.testimonials-viewport {
	overflow: hidden;
	border-radius: var(--rad-lg);
}
.testimonials-track {
	list-style: none; padding: 0; margin: 0;
	position: relative;
	min-height: 280px;
}
.testimonial-slide {
	position: absolute; inset: 0;
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: var(--rad-lg);
	padding: 48px 56px 36px;
	box-shadow: var(--shadow-lg);
	display: flex; flex-direction: column; justify-content: center;
	gap: 24px;
	opacity: 0; transform: translateY(12px) scale(.985);
	pointer-events: none;
	transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.testimonial-slide.is-active {
	opacity: 1; transform: translateY(0) scale(1);
	pointer-events: auto;
	position: relative;
}
.t-quote-mark {
	font-family: var(--vs-font-display);
	font-weight: 900; font-size: 88px;
	line-height: .6; color: var(--pink);
	background: linear-gradient(135deg, var(--pink), var(--orange, #f4681a));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: -16px;
}
.t-quote {
	font-family: var(--vs-font-display);
	font-style: italic; font-weight: 500;
	font-size: clamp(18px, 2.1vw, 24px);
	line-height: 1.55;
	color: var(--text);
	margin: 0;
	border: 0; padding: 0; background: none;
}
.t-meta {
	display: flex; align-items: center; gap: 14px;
	border-top: 1px solid var(--border);
	padding-top: 20px;
}
.t-avatar {
	width: 48px; height: 48px; border-radius: 50%;
	background: linear-gradient(135deg, var(--pink), var(--orange, #f4681a));
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 20px;
	flex-shrink: 0;
	box-shadow: 0 4px 14px rgba(232,53,138,.28);
}
.t-meta-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.t-author { font-family: var(--vs-font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.t-role   { font-size: 13px; color: var(--text2); }
.t-product {
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 12px; color: var(--pink); margin-top: 2px;
}

.t-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	color: var(--pink); font-size: 22px; line-height: 1;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow);
	transition: background .2s, color .2s, transform .15s, border-color .2s;
	z-index: 2;
}
.t-arrow:hover {
	background: var(--pink); color: #fff;
	border-color: var(--pink);
	transform: translateY(-50%) scale(1.06);
}
.t-prev { left: 0; }
.t-next { right: 0; }

.t-dots {
	display: flex; justify-content: center; gap: 8px;
	margin-top: 24px;
}
.t-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--border);
	border: 0; padding: 0; cursor: pointer;
	transition: background .25s, transform .2s, width .3s;
}
.t-dot:hover { background: var(--text2); }
.t-dot.is-active {
	background: var(--pink);
	width: 28px; border-radius: 5px;
}

@media (max-width: 720px) {
	.testimonials-carousel { padding: 0 8px; margin-top: 28px; }
	.testimonial-slide { padding: 32px 22px 24px; gap: 18px; }
	.t-quote-mark { font-size: 64px; }
	.t-arrow { top: auto; bottom: -56px; transform: none; }
	.t-arrow:hover { transform: scale(1.06); }
	.t-prev { left: 30%; }
	.t-next { right: 30%; }
	.t-dots { margin-top: 72px; }
}

/* ── progs alternating list (archive-program) ── */
.progs-section { padding: 80px 0; }
.progs-section .show-feature[hidden] { display: none; }
.rubrika-empty--filter { margin: 32px auto; max-width: 720px; }

/* ── features grid (single-program) ── */
.features-block { margin-top: 48px; }
.vs-features-grid {
	list-style: none; padding: 0; margin: 20px 0 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.vs-features-grid li {
	display: flex; gap: 12px; align-items: flex-start;
	background: var(--card-bg);
	border: 1.5px solid var(--border);
	border-radius: 14px;
	padding: 14px 16px;
	transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.vs-features-grid li:hover {
	transform: translateY(-2px);
	border-color: var(--pink);
	box-shadow: 0 6px 20px rgba(232,53,138,.12);
}
.vs-feature-check {
	flex-shrink: 0;
	width: 26px; height: 26px; border-radius: 8px;
	background: linear-gradient(135deg, rgba(52,217,181,.18), rgba(255,217,61,.18));
	color: var(--mint, #34d9b5);
	font-weight: 800; font-size: 14px;
	display: inline-flex; align-items: center; justify-content: center;
}
.vs-feature-text {
	font-size: 15px; line-height: 1.55; color: var(--text);
}
@media (max-width: 720px) {
	.vs-features-grid { grid-template-columns: 1fr; }
}

/* ── creative gallery + cast block headers ── */
.gallery-block, .cast-block { margin-top: 48px; }
.gallery-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.gallery-title {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 26px; margin: 0;
	display: inline-flex; align-items: center; gap: 12px;
}
.gallery-emoji {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 12px;
	background: linear-gradient(135deg, rgba(232,53,138,.15), rgba(255,217,61,.18));
	font-size: 20px;
}
.gallery-count {
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 12px; color: var(--text2);
	padding: 6px 14px; border-radius: 50px;
	background: var(--bg2); border: 1px solid var(--border);
}
.photo-grid--creative {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 180px;
	grid-auto-flow: dense;
	gap: 12px;
}
.photo-grid--creative figure.photo-item,
.photo-grid--creative .photo-item {
	margin: 0; padding: 0;
	border-radius: 16px;
	min-width: 0; min-height: 0;
	display: block; position: relative;
	overflow: hidden;
}
.photo-grid--creative .photo-item img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.photo-grid--creative .photo-item.feature {
	grid-column: span 2; grid-row: span 2;
}
.photo-grid--creative .photo-item.tall { grid-row: span 2; }
.photo-grid--creative .photo-item.wide { grid-column: span 2; }
.photo-grid--creative .photo-item {
	box-shadow: 0 6px 22px rgba(0,0,0,.08);
	transition: transform .35s var(--ease), box-shadow .35s;
}
.photo-grid--creative .photo-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(232,53,138,.18);
}
.photo-grid--creative .photo-overlay {
	background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45));
}
.photo-grid--creative .photo-zoom {
	position: absolute; right: 14px; bottom: 14px;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,255,255,.92); color: var(--pink);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 16px; backdrop-filter: blur(6px);
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	transform: scale(.85); transition: transform .25s var(--spring);
}
.photo-grid--creative .photo-item:hover .photo-zoom { transform: scale(1); }
@media (max-width: 720px) {
	.photo-grid--creative { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
	.photo-grid--creative .photo-item.feature,
	.photo-grid--creative .photo-item.wide { grid-column: span 2; }
	.photo-grid--creative .photo-item.tall { grid-row: span 1; }
}

/* ── lightbox refinement ── */
.lightbox { background: rgba(8, 4, 20, .94); }
.lb-frame {
	margin: 0; position: relative;
	display: flex; flex-direction: column; align-items: center;
	max-width: 92vw; max-height: 92vh; gap: 14px;
}
.lb-img {
	opacity: 0; transform: scale(.98);
	transition: opacity .35s var(--ease), transform .45s var(--spring);
	box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
.lb-img.is-loaded { opacity: 1; transform: scale(1); }
.lb-caption:empty { display: none; }
.lb-caption[hidden] { display: none; }
.lb-caption {
	font-family: var(--vs-font-accent);
	font-weight: 600; font-size: 14px;
	color: rgba(255,255,255,.92);
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
	padding: 10px 18px; border-radius: 50px;
	max-width: 80vw; text-align: center;
	backdrop-filter: blur(8px);
}
.lb-counter {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
	padding: 6px 14px; border-radius: 50px;
	backdrop-filter: blur(8px);
	color: #fff;
}

/* show-feature padding */
.show-feature { padding: 96px 80px; }

/* gallery-section title balance */
.gallery-header { max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 56px; }

/* ════════ 24. PRINT ════════ */
@media print {
	.site-nav, .site-footer, .vs-mobile-drawer, .cart-overlay, .mini-cart-drawer,
	.vs-floating-shapes, .vs-bg-blobs, #vsDaySky, #vsStarCanvas, .ticker-wrap,
	.cta-section, .game-bg, .happy-bg { display: none !important; }
	body { background: #fff !important; color: #151519 !important; }
	.section-inner { padding: 12px 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 25. MOBILE PRODUCTION PASS (2026 best practices)
 * Targets: ≤768 px viewport. Touch-first UX, dynamic viewport units,
 * safe-area insets (notch/home-indicator), minimum 44 px tap targets,
 * 16 px form fonts (no iOS zoom), reduced visual cost on small screens.
 * ═══════════════════════════════════════════════════════════════════════ */

/* CSS custom properties for safe-area + dynamic vh — used everywhere below. */
:root {
	--vs-sa-top:    env(safe-area-inset-top, 0px);
	--vs-sa-right:  env(safe-area-inset-right, 0px);
	--vs-sa-bottom: env(safe-area-inset-bottom, 0px);
	--vs-sa-left:   env(safe-area-inset-left, 0px);
}

/* Touch-first defaults — no double-tap zoom delay, branded tap highlight. */
button, a, [role="button"], input, select, textarea, label, summary {
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(232, 53, 138, .15);
}

/* Native-style scroll containers (drawers, tab strips, filter rows). */
.vs-mobile-drawer,
.mini-cart-drawer,
.cart-overlay,
.tabs-nav,
.woocommerce-tabs ul.tabs,
.filter-inner,
.woocommerce-MyAccount-navigation ul {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Always use small/dynamic viewport units where supported — avoids the iOS
   100vh-under-toolbar bug for full-height heroes. */
@supports (height: 100dvh) {
	.hero { min-height: 100dvh; }
}

/* Honour the OS reduced-motion preference globally. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 768px) {

	/* Prevent iOS auto-zoom on input focus by guaranteeing 16 px minimum. */
	input, select, textarea {
		font-size: 16px !important;
	}

	/* All interactive elements get a 44 × 44 px floor (Apple HIG / Material). */
	button, a.btn-primary, a.btn-outline, .nav-cta, .cart-btn,
	.theme-toggle, .vs-mobile-toggle, .vs-mobile-close,
	.filter-btn, .view-btn, .qty-dec, .qty-inc, .quantity .qty,
	.action-btn, .wishlist-btn, .related-add, .cart-add-btn,
	.mini-cart-close, .cart-close, .cart-item-remove,
	.tab-btn, .woocommerce-tabs ul.tabs li a,
	.igre-toc-card, .game-btn, .feeling-btn, .memory-card {
		min-height: 44px;
		min-width: 44px;
	}

	/* Sticky site nav — slim, dark-bg-aware, with safe-area top padding. */
	.site-header { top: 0; }
	.site-header.is-sticky .site-nav,
	.site-nav {
		top: calc(8px + var(--vs-sa-top));
		width: calc(100% - 20px);
		padding: 10px 14px;
		border-radius: 18px;
	}
	.nav-logo img,
	.nav-logo-link img,
	.custom-logo {
		height: 44px !important;
	}

	/* Hide desktop nav links — mobile drawer takes over. */
	.nav-links { display: none !important; }
	.nav-right { gap: 6px; }

	/* Mobile drawer — bottom sheet; no side-slide overrides needed. */
	.vm-panel {
		max-height: 94svh;
	}

	/* Hero — calmer on mobile (kill heavy decor + reduce cost). */
	.hero {
		padding-top: 92px;
		padding-bottom: 110px;
		min-height: 88svh;
		min-height: 88dvh;
		padding-left: 0; padding-right: 0;
	}
	.vs-slide-inner {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 0 22px;
		min-height: 0;
	}
	.hero h1 { font-size: clamp(34px, 9vw, 46px); line-height: 1.06; }
	.hero p  { font-size: 16px; line-height: 1.65; max-width: none; }
	.hero-btns { gap: 10px; }
	.hero-btns .btn-primary,
	.hero-btns .btn-outline { flex: 1 1 calc(50% - 10px); justify-content: center; }
	.hero-trust { gap: 8px; }
	.hero-trust .trust-pill { font-size: 12px; padding: 6px 12px; }

	/* Hero visual block — book stays the focal point on mobile. */
	.vs-slide-visual {
		margin: 0 auto;
		width: 100%;
		max-width: none;
		display: flex; justify-content: center;
		order: -1;          /* show book ABOVE the copy on phones */
		margin-bottom: 8px;
	}
	.book-scene {
		width: 280px; height: 360px;
		transform: none;
	}
	.book {
		width: 220px; height: 310px;
		left: 30px; top: 26px;
	}
	.book-title { font-size: 16px; bottom: 50px; }
	.book-subtitle { font-size: 9.5px; bottom: 34px; }
	.book-author { font-size: 11px; bottom: 14px; }
	.book-stars { font-size: 12px; top: 14px; }
	.book-badge { width: 52px; height: 52px; font-size: 10px; top: 14px; right: 14px; }
	.book-card { padding: 10px 14px; }
	.bc-right  { right: 14px; top: -6px; left: auto; bottom: auto; }
	.bc-bottom { left: 14px; top: -6px; right: auto; bottom: auto; width: 148px; }
	.bcard-icon { font-size: 22px; }
	.bcard-val { font-size: 15px; }
	.ha-ring, .ha-ring2 { display: none; }

	/* Hero landscape — taller is fine, the city stays prominent. */
	.hero-landscape { height: 160px; }

	/* Sky decor: shrink + kill the heaviest animations on mobile to save battery. */
	.cloud { transform: scale(.7); }
	.vs-flock, .vs-butterfly, .vs-airplane,
	.vs-shooting-star { display: none; }
	/* Balloon stays — scaled down for mobile. */
	.vs-balloon { width: 52px; }
	.vs-balloon-canopy { width: 52px; height: 62px; }
	.vs-balloon-2 .vs-balloon-canopy { width: 42px; height: 50px; }
	.vs-balloon-basket { width: 20px; height: 14px; }
	.vs-balloon-2 .vs-balloon-basket { width: 16px; }
	.fshape:nth-child(n+5) { display: none; }
	.vs-bg-blobs .bb1, .vs-bg-blobs .bb2 { filter: blur(40px); transform: scale(.7); }
	.vs-sun  { width: 64px; height: 64px; top: 8%; right: 6%; }
	.vs-moon { width: 64px; height: 64px; top: 8%; right: 6%; }
	.vs-sun-rays { display: none; }

	/* Page hero — smaller padding + tighter type. */
	.page-hero {
		padding: 110px 22px 56px;
		min-height: 38svh;
		min-height: 38dvh;
	}
	.page-hero h1 { font-size: clamp(28px, 7.5vw, 40px); }
	.page-hero p  { font-size: 15px; line-height: 1.65; }
	.hero-chips { gap: 8px; }
	.hero-chip  { font-size: 12px; padding: 6px 12px; }

	/* Section padding — phone-comfortable. */
	.section,
	.section-inner,
	.show-feature  { padding-left: 22px !important; padding-right: 22px !important; }
	.section-inner { padding-top: 56px !important; padding-bottom: 56px !important; }
	.section-header { margin-bottom: 28px; }
	.section-title { font-size: clamp(26px, 7vw, 36px); line-height: 1.1; }
	.section-sub { font-size: 15px; }

	/* Buttons full-width on phones (clear CTA hierarchy). */
	.btn-primary, .btn-outline {
		min-height: 48px;
		padding: 14px 20px;
		font-size: 15px;
	}

	/* Footer — single column + safe-area bottom. */
	.site-footer .footer-inner {
		padding: 48px 22px calc(24px + var(--vs-sa-bottom));
	}
	.footer-top { grid-template-columns: 1fr !important; gap: 28px; }
	.footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
	.footer-social { gap: 8px; }
	.social-btn { width: 44px; height: 44px; }

	/* Cards / grids: 1-column on phones across the board. */
	.prog-card.is-wide { grid-column: span 1 !important; }
	.archive-grid,
	.gallery-grid,
	.testimonial-grid,
	.about-grid,
	.feeling-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

	/* Animated card-in entry would lag on phones — drop the stagger. */
	.shop-card,
	.prog-card,
	.show-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Very small phones: tighten further. */
@media (max-width: 420px) {
	.hero h1 { font-size: clamp(30px, 9vw, 40px); }
	.vs-slide-inner { padding: 0 16px; }
	.section-inner,
	.section,
	.show-feature { padding-left: 16px !important; padding-right: 16px !important; }
	.btn-primary, .btn-outline { width: 100%; }

	/* Trim the book a touch but keep it big enough to read the cover. */
	.book-scene { width: 256px; height: 332px; }
	.book { width: 200px; height: 286px; left: 28px; top: 24px; }
	.book-title { font-size: 15px; bottom: 46px; }
	.book-subtitle { font-size: 9px; bottom: 32px; }
	.book-author { font-size: 10.5px; bottom: 12px; }
}

/* ════════════════════════════════════════════════════
   SLIDE 0 — Rainbow kids illustration
   ════════════════════════════════════════════════════ */

.vs-s0-illus {
	justify-content: center;
}
.vs-illus-wrap {
	position: relative;
	width: 440px;
	height: 480px;
	flex-shrink: 0;
}

/* ── Gradient background blobs ── */
.vs-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(38px);
	opacity: 0.55;
	pointer-events: none;
}
.vs-blob--1 {
	width: 270px; height: 270px;
	top: -30px; left: -50px;
	background: radial-gradient(circle at 40% 40%, #FF6B9D, #C9184A 70%);
	animation: vs-blob-drift 9s ease-in-out infinite;
}
.vs-blob--2 {
	width: 210px; height: 210px;
	bottom: 20px; right: -30px;
	background: radial-gradient(circle at 60% 60%, #A855F7, #6D28D9 70%);
	animation: vs-blob-drift 11s ease-in-out infinite 2.5s;
}
.vs-blob--3 {
	width: 190px; height: 190px;
	top: 130px; right: 10px;
	background: radial-gradient(circle at 50% 30%, #FCD34D, #F97316 70%);
	animation: vs-blob-drift 8s ease-in-out infinite 1.2s;
}
@keyframes vs-blob-drift {
	0%, 100% { transform: scale(1)    translate(0, 0); }
	33%       { transform: scale(1.12) translate(12px, -18px); }
	66%       { transform: scale(0.94) translate(-10px, 12px); }
}

/* ── Rainbow arc ── */
.vs-rainbow-arc-wrap {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	width: 340px;
	height: 170px;
	overflow: hidden;
}
.vs-rainbow-arc-inner {
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle at center,
		transparent 52%,
		#FF595E 52% 59%,
		#FF924C 59% 66%,
		#FFCA3A 66% 73%,
		#6AC47F 73% 80%,
		#4DC9E6 80% 87%,
		#8B5CF6 87% 94%,
		transparent 94%
	);
	animation: vs-rainbow-pulse 4s ease-in-out infinite;
}
@keyframes vs-rainbow-pulse {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%       { transform: scale(1.04); opacity: .85; }
}

/* ── Kids group ── */
.vs-kids-group {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-end;
	gap: 8px;
}
.vs-kid {
	font-size: 70px;
	line-height: 1;
	filter: drop-shadow(0 10px 24px rgba(139, 53, 214, 0.35));
	display: block;
}
.vs-kid--1 { font-size: 66px; }
.vs-kid--2 { font-size: 80px; }
.vs-kid--3 { font-size: 66px; }

/* Idle jump animation (staggered per kid) */
.vs-slide--active:not(.vs-slide--exiting) .vs-kid--1 {
	animation: vs-kid-jump 2.4s ease-in-out infinite;
}
.vs-slide--active:not(.vs-slide--exiting) .vs-kid--2 {
	animation: vs-kid-jump 2.4s ease-in-out infinite 0.5s;
}
.vs-slide--active:not(.vs-slide--exiting) .vs-kid--3 {
	animation: vs-kid-jump 2.4s ease-in-out infinite 1s;
}
@keyframes vs-kid-jump {
	0%, 100% { transform: translateY(0)    rotate(0deg); }
	25%       { transform: translateY(-18px) rotate(-4deg); }
	50%       { transform: translateY(-6px)  rotate(2deg); }
	75%       { transform: translateY(-14px) rotate(-2deg); }
}

/* ── Floating icons ── */
.vs-fi {
	position: absolute;
	pointer-events: none;
	line-height: 1;
}
.vs-fi--1 { top: 55px;     left: 22px;   font-size: 28px; }
.vs-fi--2 { top: 170px;    left: 8px;    font-size: 24px; }
.vs-fi--3 { top: 44px;     right: 30px;  font-size: 32px; }
.vs-fi--4 { top: 195px;    right: 12px;  font-size: 20px; }
.vs-fi--5 { bottom: 110px; left: 30px;   font-size: 26px; }
.vs-fi--6 { bottom: 140px; right: 28px;  font-size: 30px; }

/* Idle float per icon */
.vs-slide--active:not(.vs-slide--exiting) .vs-fi {
	animation: vs-fi-float 3s ease-in-out infinite;
}
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--1 { animation-delay: 0s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--2 { animation-delay: 0.6s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--3 { animation-delay: 1.2s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--4 { animation-delay: 0.3s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--5 { animation-delay: 0.9s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--6 { animation-delay: 1.5s; }
@keyframes vs-fi-float {
	0%, 100% { transform: translateY(0)    rotate(0deg); }
	50%       { transform: translateY(-12px) rotate(8deg); }
}

/* Scene elements — hidden on desktop; mobile.css shows + positions them */
.vs-scene-sun,
.vs-scene-tree { display: none; position: absolute; pointer-events: none; user-select: none; }


/* ════════════════════════════════════════════════════
   SLIDE 1 — Tamara editorial photo
   ════════════════════════════════════════════════════ */

.vs-s1-photo {
	position: relative;
	z-index: 2;
	align-self: center;
}
.vs-s1-img {
	width: 100%;
	max-width: 400px;
	height: 500px;
	object-fit: cover;
	object-position: center top;
	border-radius: 20px;
	border: 4px solid var(--pink);
	box-shadow:
		8px 12px 0 var(--purple),
		0 28px 72px rgba(139, 53, 214, .22);
	transform: rotate(-2deg);
	display: block;
}
.vs-s1-photo::before {
	content: '';
	position: absolute;
	inset: -10px;
	border: 2px dashed rgba(232, 53, 138, .28);
	border-radius: 26px;
	pointer-events: none;
	transform: rotate(1deg);
}
.vs-s1-photo-placeholder {
	width: 400px; height: 500px;
	border-radius: 20px;
	border: 4px solid var(--pink);
	background: var(--card-bg);
	display: flex; align-items: center; justify-content: center;
	font-size: 90px;
	transform: rotate(-2deg);
	box-shadow: 8px 12px 0 var(--purple);
}

/* ════════════════════════════════════════════════════
   PER-SLIDE COLOR THEMES & LAYOUT VARIATIONS
   ════════════════════════════════════════════════════ */

/* Slides need z-index context for ::before overlays */
.vs-slide {
	isolation: isolate;
}

/* ── SLIDE 0 — Warm energy (pink → orange) ── */
.vs-slide[data-slide="0"]::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(255, 107, 157, 0.13) 0%,
		rgba(249, 115, 22, 0.07) 100%
	);
	pointer-events: none;
	z-index: 0;
}
.vs-slide[data-slide="0"] .vs-slide-inner {
	grid-template-columns: 1fr;
	position: relative;
	z-index: 1;
	text-align: center;
	justify-items: center;
	max-width: 920px;
}
.vs-slide[data-slide="0"] .vs-slide-content { max-width: 820px; width: 100%; }
.vs-slide[data-slide="0"] .vs-s0-illus { display: none; }
.vs-slide[data-slide="0"] .hero-btns { justify-content: center; }
.vs-slide[data-slide="0"] .hero-trust { justify-content: center; }
.vs-slide[data-slide="0"] .vs-slide-h1 {
	font-size: clamp(52px, 6vw, 92px);
	background: linear-gradient(135deg, var(--pink) 0%, var(--orange) 55%, #FF5722 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vs-slide[data-slide="0"] .hero-eyebrow {
	background: linear-gradient(135deg, rgba(249,115,22,.14), rgba(255,107,157,.10));
	border-color: rgba(249, 115, 22, 0.35);
	color: #D4440C;
}
[data-theme="dark"] .vs-slide[data-slide="0"] .hero-eyebrow {
	color: #FBA06A;
}

/* ── SLIDE 1 — Editorial purple ── */
.vs-slide[data-slide="1"]::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(139, 53, 214, 0.11) 0%,
		rgba(232, 53, 138, 0.06) 100%
	);
	pointer-events: none;
	z-index: 0;
}
.vs-slide[data-slide="1"] .vs-slide-inner {
	grid-template-columns: 0.9fr 1.1fr;
	position: relative;
	z-index: 1;
}
.vs-slide[data-slide="1"] .vs-slide-h2 {
	background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vs-slide[data-slide="1"] .hero-eyebrow {
	background: rgba(139, 53, 214, 0.12);
	border-color: rgba(139, 53, 214, 0.3);
	color: var(--purple);
}
[data-theme="dark"] .vs-slide[data-slide="1"] .hero-eyebrow {
	background: rgba(139, 53, 214, 0.2);
	color: #C084FC;
}

/* ── SLIDE 2 — Book spotlight (pink → orange) ── */
.vs-slide[data-slide="2"]::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(232, 53, 138, 0.08) 0%,
		rgba(249, 115, 22, 0.05) 100%
	);
	pointer-events: none;
	z-index: 0;
}
.vs-slide[data-slide="2"] .vs-slide-inner {
	grid-template-columns: 1fr 1fr;
	position: relative;
	z-index: 1;
}
.vs-slide[data-slide="2"] .vs-slide-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}
.vs-slide[data-slide="2"] .ha-ring,
.vs-slide[data-slide="2"] .ha-ring2,
.vs-slide[data-slide="2"] .book-scene { display: none; }
.vs-slide[data-slide="2"] .vs-slide-h2 {
	background: linear-gradient(135deg, var(--pink) 0%, var(--orange) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vs-slide[data-slide="2"] .hero-eyebrow {
	background: linear-gradient(135deg, rgba(232, 53, 138, 0.12), rgba(249, 115, 22, 0.08));
	border-color: rgba(232, 53, 138, 0.35);
	color: #C41878;
}
[data-theme="dark"] .vs-slide[data-slide="2"] .hero-eyebrow {
	background: rgba(232, 53, 138, 0.18);
	color: #F472B6;
}

/* ── Book cover portrait card ── */
.vs-s2-cover {
	position: relative;
	display: block;
	width: 220px;
	height: 300px;
	border-radius: 14px;
	border: 2px dashed rgba(232, 53, 138, 0.55);
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 28px 56px rgba(139, 53, 214, 0.35),
	            0 8px 20px rgba(30, 10, 46, 0.18);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.vs-s2-cover:hover { transform: translateY(-6px); }
.vs-s2-cover-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.vs-s2-cover-badge {
	position: absolute;
	top: 14px;
	right: -2px;
	background: linear-gradient(135deg, var(--pink), var(--orange));
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 4px 0 0 4px;
	text-align: center;
	white-space: pre-line;
	z-index: 2;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.vs-slide[data-slide="2"] .btn-primary {
	background: linear-gradient(135deg, #009688, #00796B) !important;
	border-color: transparent !important;
	box-shadow: 0 4px 18px rgba(0,150,136,.35) !important;
}
.vs-slide[data-slide="2"] .btn-primary:hover {
	background: linear-gradient(135deg, #00796B, #004D40) !important;
}

/* ════════════════════════════════════════════════════
   HERO SLIDER — 4-slide refinement
   ════════════════════════════════════════════════════ */

.hero.vs-hero .vs-hero-slider {
	min-height: clamp(680px, 78vh, 860px);
}

.hero.vs-hero .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner {
	max-width: 1320px;
	padding: 0 48px;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
	text-align: left;
	justify-items: stretch;
}

.hero.vs-hero .vs-slide-content {
	max-width: 620px;
	width: 100%;
}

.hero.vs-hero .hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid rgba(139, 53, 214, 0.16);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 10px 26px rgba(30, 10, 46, 0.06);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

[data-theme="dark"] .hero.vs-hero .hero-eyebrow {
	background: rgba(23, 12, 37, 0.72);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-content {
	order: 2;
}

.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-photo {
	order: 1;
}

.hero.vs-hero .vs-slide-content > p {
	max-width: 54ch;
	font-size: clamp(17px, 1.35vw, 19px);
	line-height: 1.72;
	color: var(--text2);
}

.hero.vs-hero .vs-slide-h1 {
	font-size: clamp(58px, 6.4vw, 98px);
	line-height: 0.98;
	margin-bottom: 26px;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.hero.vs-hero .vs-slide-h2 {
	font-size: clamp(38px, 4.4vw, 68px);
	line-height: 1.04;
	margin-bottom: 18px;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-h1 {
	font-size: clamp(44px, 4.8vw, 72px);
	line-height: 1.02;
	max-width: 11ch;
	background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 55%, var(--purple) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero.vs-hero .hero-btns {
	gap: 14px;
	margin-top: 8px;
}

.hero.vs-hero .hero-trust {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hero.vs-hero .vs-slide-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
}

.hero.vs-hero .vs-s1-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
}

.hero.vs-hero .vs-slide[data-slide="0"] .vs-s0-illus {
	display: flex;
}

.hero.vs-hero .vs-media-card {
	position: relative;
	width: min(100%, 460px);
	min-height: 520px;
	border-radius: 28px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,247,251,.76));
	border: 1px solid rgba(255, 255, 255, 0.58);
	box-shadow: 0 36px 90px rgba(30, 10, 46, 0.14), 0 12px 30px rgba(232, 53, 138, 0.10);
	transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

[data-theme="dark"] .hero.vs-hero .vs-media-card {
	background: linear-gradient(180deg, rgba(38, 23, 58, .88), rgba(23, 12, 37, .82));
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34), 0 12px 30px rgba(232, 53, 138, 0.10);
}

.hero.vs-hero .vs-media-card--photo {
	padding: 0;
	min-height: 560px;
}

.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book {
	padding: 0;
}

.hero.vs-hero .vs-media-card--founder {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	overflow: visible;
}

[data-theme="dark"] .hero.vs-hero .vs-media-card--founder {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-media-card-img,
.hero.vs-hero .vs-s1-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.hero.vs-hero .vs-s1-photo::before {
	display: none;
}

.hero.vs-hero .vs-s1-img {
	transform: none;
	border: 0;
	border-radius: 0;
	box-shadow: 0 28px 54px rgba(30, 10, 46, 0.16);
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 18px 28px rgba(30, 10, 46, 0.14));
}

.hero.vs-hero .vs-s1-photo-placeholder {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 28px;
	background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,244,248,.92));
	box-shadow: none;
	transform: none;
}

.hero.vs-hero .vs-media-card-overlay {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	z-index: 3;
}

.hero.vs-hero .vs-media-pill {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(253, 248, 245, 0.88);
	border: 1px solid rgba(232, 53, 138, 0.12);
	color: var(--heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

[data-theme="dark"] .hero.vs-hero .vs-media-pill {
	background: rgba(22, 13, 34, 0.82);
	border-color: rgba(255, 255, 255, 0.08);
	color: var(--text-light);
}

.hero.vs-hero .vs-media-card-kicker {
	display: inline-flex;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86);
}

.hero.vs-hero .vs-slide[data-slide="0"]::before {
	background: radial-gradient(circle at 20% 20%, rgba(244, 104, 26, 0.14), transparent 42%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(232, 53, 138, 0.04));
}

.hero.vs-hero .vs-slide[data-slide="1"]::before {
	background: radial-gradient(circle at 82% 18%, rgba(139, 53, 214, 0.14), transparent 42%),
		linear-gradient(135deg, rgba(139, 53, 214, 0.08), rgba(232, 53, 138, 0.05));
}

.hero.vs-hero .vs-slide[data-slide="2"]::before {
	background: radial-gradient(circle at 72% 36%, rgba(52, 217, 181, 0.16), transparent 38%),
		linear-gradient(135deg, rgba(232, 53, 138, 0.08), rgba(52, 217, 181, 0.05));
}

.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-h2,
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-h2 {
	background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 60%, var(--orange) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero.vs-hero .vs-media-card--book {
	position: relative;
	justify-self: end;
	width: min(100%, 320px);
	border-radius: 18px 22px 22px 18px;
	box-shadow: 0 36px 72px rgba(30, 10, 46, 0.22), 14px 10px 0 rgba(255, 255, 255, 0.66),
		18px 12px 0 rgba(232, 53, 138, 0.08);
	transform: perspective(1400px) rotateY(-18deg) rotateX(2deg);
	transform-style: preserve-3d;
	overflow: visible;
}

.hero.vs-hero .vs-media-card-book-image {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	filter: saturate(1.04);
	border-radius: inherit;
}

.hero.vs-hero .vs-media-card--book::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 8, 22, 0.02) 18%, rgba(14, 8, 22, 0.64) 100%);
	z-index: 1;
	border-radius: inherit;
}

.hero.vs-hero .vs-media-card--book::after {
	content: '';
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: -14px;
	width: 18px;
	border-radius: 10px 0 0 10px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 236, 242, 0.92)),
		repeating-linear-gradient(180deg, rgba(139, 53, 214, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
	box-shadow: inset -2px 0 0 rgba(30, 10, 46, 0.1), inset 2px 0 0 rgba(255, 255, 255, 0.72);
	transform: translateZ(-1px);
}

[data-theme="dark"] .hero.vs-hero .vs-media-card--book {
	box-shadow: 0 40px 78px rgba(4, 3, 8, 0.5), 14px 10px 0 rgba(58, 36, 78, 0.36), 18px 12px 0 rgba(14, 8, 22, 0.28);
}

[data-theme="dark"] .hero.vs-hero .vs-media-card--book::after {
	background: linear-gradient(180deg, rgba(236, 222, 248, 0.9), rgba(175, 152, 196, 0.82)),
		repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
	box-shadow: inset -2px 0 0 rgba(4, 3, 8, 0.26), inset 2px 0 0 rgba(255, 255, 255, 0.08);
}

.hero.vs-hero .vs-media-card--founder::before {
	content: '';
	position: absolute;
	inset: auto 6% 0 6%;
	height: 20%;
	border-radius: 999px;
	background: radial-gradient(ellipse at center, rgba(30, 10, 46, 0.22) 0%, rgba(30, 10, 46, 0.08) 45%,
		rgba(30, 10, 46, 0) 72%);
	filter: blur(12px);
	z-index: 1;
}

.hero.vs-hero .vs-media-card-book-copy {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 96px;
	z-index: 2;
	color: rgba(255,255,255,.98);
}

.hero.vs-hero .vs-media-card-book-copy strong {
	display: block;
	font-family: var(--vs-font-display);
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.02;
}

.hero.vs-hero .vs-media-card-book-copy small {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	color: rgba(255,255,255,.84);
}

.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-visual {
	align-items: stretch;
}

.hero.vs-hero .vs-hero-slider {
	touch-action: pan-y;
	cursor: grab;
}

.hero.vs-hero .vs-hero-slider:active {
	cursor: grabbing;
}

.hero.vs-hero .vs-s2-cover-badge {
	top: 18px;
	right: 18px;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 10px;
}

.hero.vs-hero .btn-primary,
.hero.vs-hero .btn-outline {
	min-height: 54px;
	padding-left: 22px;
	padding-right: 22px;
	border-radius: 16px;
	font-size: 15px;
}

.hero.vs-hero .btn-primary {
	box-shadow: 0 18px 36px rgba(232, 53, 138, 0.16);
}

.hero.vs-hero .btn-primary:hover {
	box-shadow: 0 22px 44px rgba(232, 53, 138, 0.22);
}

.hero.vs-hero .btn-outline {
	background: rgba(255, 255, 255, 0.52);
	backdrop-filter: blur(8px);
	border-color: rgba(139, 53, 214, 0.12);
}

[data-theme="dark"] .hero.vs-hero .btn-outline {
	background: rgba(23, 12, 37, 0.54);
	border-color: rgba(255, 255, 255, 0.10);
}

.hero.vs-hero .founder-chip {
	margin-top: 2px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid rgba(139, 53, 214, 0.10);
	backdrop-filter: blur(8px);
}

[data-theme="dark"] .hero.vs-hero .founder-chip {
	background: rgba(23, 12, 37, 0.54);
	border-color: rgba(255, 255, 255, 0.08);
}

.hero.vs-hero .vs-media-card--fallback {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 26px;
	background:
		radial-gradient(circle at 22% 28%, rgba(244, 104, 26, 0.16), transparent 28%),
		radial-gradient(circle at 78% 72%, rgba(139, 53, 214, 0.18), transparent 30%),
		linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,247,251,.82));
}

[data-theme="dark"] .hero.vs-hero .vs-media-card--fallback {
	background:
		radial-gradient(circle at 22% 28%, rgba(244, 104, 26, 0.16), transparent 28%),
		radial-gradient(circle at 78% 72%, rgba(139, 53, 214, 0.18), transparent 30%),
		linear-gradient(180deg, rgba(34, 21, 51, .96), rgba(20, 12, 32, .84));
}

.hero.vs-hero .vs-fallback-orb {
	position: absolute;
	border-radius: 999px;
	filter: blur(2px);
	animation: vs-fallback-drift 9s ease-in-out infinite;
}

.hero.vs-hero .vs-fallback-orb--1 {
	top: 48px;
	right: 42px;
	width: 120px;
	height: 120px;
	background: rgba(244, 104, 26, 0.18);
}

.hero.vs-hero .vs-fallback-orb--2 {
	left: 34px;
	bottom: 42px;
	width: 150px;
	height: 150px;
	background: rgba(139, 53, 214, 0.14);
	animation-delay: -3s;
}

.hero.vs-hero .vs-fallback-panel {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	width: 100%;
	padding: 28px;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.56);
	border: 1px solid rgba(255,255,255,.65);
	backdrop-filter: blur(10px);
}

[data-theme="dark"] .hero.vs-hero .vs-fallback-panel {
	background: rgba(23, 12, 37, 0.50);
	border-color: rgba(255,255,255,.10);
}

.hero.vs-hero .vs-fallback-kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--text2);
}

.hero.vs-hero .vs-fallback-panel strong {
	font-family: var(--vs-font-display);
	font-size: clamp(28px, 2.8vw, 40px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--heading);
}

[data-theme="dark"] .hero.vs-hero .vs-fallback-panel strong {
	color: var(--text-light);
}

.hero.vs-hero .vs-fallback-panel small {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text2);
}

@keyframes vs-fallback-drift {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

.hero.vs-hero .vs-slider-controls {
	bottom: 26px;
	width: min(100%, 320px);
	justify-content: center;
}

.hero.vs-hero .vs-dot {
	background: rgba(255, 255, 255, 0.36);
}

[data-theme="light"] .hero.vs-hero .vs-dot {
	background: rgba(30, 10, 46, 0.16);
}

.hero.vs-hero .vs-dot--active {
	background: linear-gradient(135deg, var(--pink), var(--orange));
}

@media (max-width: 1080px) {
	.hero.vs-hero .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner {
		padding: 0 32px;
		gap: 28px;
		grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr);
	}

	.hero.vs-hero .vs-media-card {
		min-height: 460px;
	}

	.hero.vs-hero .vs-slide-h1 {
		font-size: clamp(50px, 6vw, 78px);
	}

	.hero.vs-hero .vs-slide-h2 {
		font-size: clamp(34px, 4vw, 54px);
	}

	.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-photo {
		order: 0;
	}

	.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-content {
		order: 0;
	}
}

/* ════════ Generic Page Redesign ════════ */
body.vs-generic-page #vsDaySky,
body.vs-generic-page #vsNightDecor,
body.vs-generic-page #vsSkyTop,
body.vs-generic-page #vsStarCanvas,
body.vs-generic-page .vs-floating-shapes,
body.vs-generic-page .vs-bg-blobs {
	display: none !important;
}

body.vs-generic-page {
	background: linear-gradient(180deg, #f8f6fb 0%, #f4f7fb 100%);
}

body.vs-generic-page .site-nav,
body.vs-generic-page .site-header.is-sticky .site-nav {
	background: rgba(255, 255, 255, 0.98);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: rgba(139, 53, 214, 0.1);
	box-shadow: 0 14px 34px rgba(30, 10, 46, 0.08);
}

[data-theme="dark"] body.vs-generic-page .site-nav,
[data-theme="dark"] body.vs-generic-page .site-header.is-sticky .site-nav {
	background: rgba(20, 12, 31, 0.98);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 16px 36px rgba(4, 3, 8, 0.26);
}

.page-hero--editorial {
	min-height: auto;
	padding: 108px 80px 22px;
	text-align: left;
	align-items: flex-end;
	justify-content: flex-start;
	background: linear-gradient(180deg, rgba(251, 249, 255, 0.96) 0%, rgba(245, 247, 251, 0.94) 100%);
}

.page-hero--editorial,
.page-hero--editorial .page-hero-content,
.page-hero--editorial .hero-eyebrow,
.page-hero--editorial h1,
.page-hero--editorial p {
	text-align: left;
}

.page-hero--editorial .page-hero-bg,
.page-hero--editorial .page-hero-bg::after {
	display: none;
}

.page-hero--editorial .page-hero-content {
	max-width: 1180px;
	width: 100%;
	margin: 0;
}

.page-hero--editorial .hero-eyebrow {
	background: rgba(255, 255, 255, 0.78);
	border-color: rgba(139, 53, 214, 0.14);
	color: var(--purple);
	box-shadow: 0 12px 28px rgba(30, 10, 46, 0.06);
	margin: 0 0 18px;
}

.page-hero--editorial h1 {
	max-width: 11ch;
	margin: 0;
	color: var(--heading);
	font-size: clamp(36px, 5vw, 68px);
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.page-hero--editorial p {
	color: var(--text2);
	margin: 20px 0 0;
	max-width: 62ch;
}

.page-hero--editorial .wave-bottom {
	display: none;
}

.page-hero--about,
.page-hero--about .page-hero-content,
.page-hero--about .hero-eyebrow,
.page-hero--about h1,
.page-hero--about p {
	text-align: center;
}

.page-hero--about .page-hero-content {
	max-width: 980px;
	margin: 0 auto;
}

.page-hero--about .hero-eyebrow {
	margin-inline: auto;
}

.page-hero--about h1 {
	max-width: none;
	margin-inline: auto;
}

.page-hero--about p {
	margin-inline: auto;
	max-width: 46ch;
}

[data-theme="dark"] .page-hero--editorial {
	background: linear-gradient(180deg, rgba(20, 12, 31, 0.98) 0%, rgba(16, 10, 25, 0.98) 100%);
}

[data-theme="dark"] .page-hero--editorial .hero-eyebrow {
	background: rgba(32, 18, 48, 0.7);
	border-color: rgba(255, 255, 255, 0.08);
	color: var(--text-light);
	box-shadow: none;
}

[data-theme="dark"] .page-hero--editorial h1 {
	color: var(--text-light);
}

[data-theme="dark"] .page-hero--editorial p {
	color: var(--text2);
}

.vs-page-shell {
	max-width: 1320px;
	margin: 0 auto;
	padding: 42px 80px 96px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 250, 253, 1) 100%);
	border: 1px solid rgba(139, 53, 214, 0.08);
	border-radius: 34px;
	box-shadow: 0 24px 70px rgba(30, 10, 46, 0.06);
}

.vs-page-article {
	max-width: none;
	padding: 0;
}

.vs-page-intro-text {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.58;
	letter-spacing: -0.015em;
	color: var(--heading);
	max-width: 40ch;
	padding-top: 12px;
	padding-bottom: 10px;
}

.vs-page-featured {
	position: relative;
	float: right;
	width: min(28vw, 320px);
	margin: 8px -10px 44px 88px;
	border-radius: 30px;
	overflow: hidden;
	border: 1px solid rgba(139, 53, 214, 0.1);
	box-shadow: 0 34px 80px rgba(30, 10, 46, 0.14);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 243, 252, 0.94));
}

body.vs-page-about .vs-page-shell {
	max-width: 1280px;
}

body.vs-page-about .vs-page-body {
	max-width: 980px;
	margin: 0 auto;
}

body.vs-page-about .vs-page-featured {
	width: min(26vw, 296px);
	margin: 10px 0 36px 72px;
	border-radius: 28px;
}

body.vs-page-about .vs-page-body > p:first-child {
	font-size: 20px;
	line-height: 1.86;
	color: var(--heading);
}

.vs-page-featured::before {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 26%;
	background: linear-gradient(180deg, rgba(30, 10, 46, 0) 0%, rgba(30, 10, 46, 0.22) 100%);
	z-index: 1;
	pointer-events: none;
}

.vs-page-featured img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.vs-page-body {
	position: relative;
	overflow: hidden;
}

.vs-page-body > * {
	max-width: 760px;
}

.vs-page-body > * + * {
	margin-top: 1em;
}

.vs-page-body h2,
.vs-page-body h3,
.vs-page-body h4,
.vs-page-body ul,
.vs-page-body ol,
.vs-page-body blockquote,
.vs-page-body .wp-block-image,
.vs-page-body .wp-block-gallery,
.vs-page-body .wp-block-columns,
.vs-page-body .wp-block-table,
.vs-page-body .page-links {
	max-width: 860px;
}

.vs-page-body blockquote,
.vs-page-body h2,
.vs-page-body .wp-block-heading {
	clear: both;
}

.vs-page-body > p:first-child {
	font-size: 19px;
	line-height: 1.82;
	color: var(--text);
}

.vs-page-article h2 {
	font-size: clamp(32px, 3vw, 42px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.vs-page-article h3 {
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.18;
}

.vs-page-article p,
.vs-page-article li {
	font-size: 18px;
	line-height: 1.82;
}

.vs-page-article ul,
.vs-page-article ol {
	padding-left: 1.4em;
}

.vs-page-article ul li::marker {
	color: var(--pink);
}

.vs-page-article blockquote {
	max-width: 820px;
	padding: 30px 34px;
	border-radius: 26px;
	background: linear-gradient(135deg, rgba(242, 236, 252, 0.86), rgba(255, 255, 255, 0.98));
	border: 1px solid rgba(139, 53, 214, 0.1);
	box-shadow: 0 20px 46px rgba(30, 10, 46, 0.08);
}

.vs-page-article a:not(.btn-primary):not(.btn-outline):not(.btn-white):not(.btn-ghost) {
	color: var(--purple);
	text-decoration-color: rgba(139, 53, 214, 0.28);
	text-underline-offset: 0.18em;
}

[data-theme="dark"] .vs-page-shell {
	background: linear-gradient(180deg, rgba(24, 15, 38, 1) 0%, rgba(15, 10, 24, 1) 100%);
	border-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 28px 76px rgba(4, 3, 8, 0.22);
}

[data-theme="dark"] .vs-page-featured {
	background: linear-gradient(135deg, rgba(30, 18, 46, 0.98), rgba(18, 10, 30, 0.94));
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 36px 84px rgba(4, 3, 8, 0.38);
}

[data-theme="dark"] .vs-page-featured::before {
	background: linear-gradient(180deg, rgba(4, 3, 8, 0) 0%, rgba(4, 3, 8, 0.42) 100%);
}

[data-theme="dark"] .vs-page-intro-text,
[data-theme="dark"] .vs-page-body > p:first-child {
	color: var(--text-light);
}

[data-theme="dark"] .vs-page-article blockquote {
	background: linear-gradient(135deg, rgba(47, 24, 68, 0.7), rgba(22, 13, 34, 0.92));
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 46px rgba(4, 3, 8, 0.22);
}

/* ════════ Page Design Direction B/C ════════ */
body.vs-generic-page {
	background: #f7f7fb;
}

body.vs-generic-page .site-main > .section {
	background: transparent;
}

body.vs-generic-page .vs-page-shell {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.vs-page-about .page-hero--about {
	min-height: auto;
	padding: 132px 32px 58px;
	background: #f7f5fb;
}

body.vs-page-about .page-hero--about .page-hero-content {
	max-width: 920px;
	margin: 0 auto;
}

body.vs-page-about .page-hero--about .hero-eyebrow {
	margin: 0 auto 18px;
	background: #f0ebfa;
	border: 1px solid #ded4f2;
	box-shadow: none;
	color: #6b38b6;
}

body.vs-page-about .page-hero--about h1 {
	max-width: none;
	margin: 0 auto;
	font-size: 72px;
	line-height: 0.98;
	letter-spacing: 0;
	text-align: center;
	color: #1e0a2e;
}

body.vs-page-about .page-hero--about p {
	max-width: 680px;
	margin: 22px auto 0;
	font-size: 20px;
	line-height: 1.72;
	text-align: center;
	color: #5a3a6e;
}

body.vs-page-about .vs-page-shell {
	max-width: 1180px;
	padding: 64px 80px 110px;
}

body.vs-page-about .vs-page-body {
	max-width: 980px;
	margin: 0 auto;
	overflow: visible;
}

body.vs-page-about .vs-page-featured {
	float: right;
	width: 300px;
	margin: 6px 0 42px 82px;
	border-radius: 18px;
	border: 1px solid #e2ddec;
	background: #f2eef7;
	box-shadow: 0 24px 54px rgba(30, 10, 46, 0.12);
}

body.vs-page-about .vs-page-featured::before {
	display: none;
}

body.vs-page-about .vs-page-featured img {
	aspect-ratio: 3 / 4;
	object-position: center top;
}

body.vs-page-about .vs-page-body > p:first-child {
	max-width: 680px;
	margin-top: 0;
	font-size: 20px;
	line-height: 1.82;
	color: #39204f;
}

body.vs-page-about .vs-page-article p,
body.vs-page-about .vs-page-article li {
	font-size: 18px;
	line-height: 1.84;
	color: #5a3a6e;
}

body.vs-page-about .vs-page-article blockquote {
	clear: both;
	max-width: 860px;
	margin-top: 42px;
	padding: 32px 38px;
	border: 1px solid #e1d7ef;
	border-radius: 18px;
	background: #f3eef8;
	box-shadow: none;
	color: #39204f;
}

body.vs-page-about .vs-page-article h2,
body.vs-page-about .vs-page-article h3 {
	clear: both;
	color: #1e0a2e;
}

body.vs-page-legal {
	background: #f7f8fb;
}

body.vs-page-legal .page-hero--legal {
	padding: 124px 32px 34px;
	background: #f7f8fb;
	border-bottom: 1px solid #e5e8ee;
}

body.vs-page-legal .page-hero--legal .page-hero-content {
	max-width: 920px;
	margin: 0 auto;
}

body.vs-page-legal .page-hero--legal h1 {
	max-width: 760px;
	margin: 0;
	font-family: var(--vs-font-display);
	font-size: 52px;
	line-height: 1.05;
	letter-spacing: 0;
	text-align: left;
	color: #1c1723;
}

body.vs-page-legal .vs-page-shell {
	max-width: 920px;
	padding: 48px 32px 108px;
}

body.vs-page-legal .vs-page-article,
body.vs-page-legal .vs-page-body {
	max-width: none;
	overflow: visible;
}

body.vs-page-legal .vs-page-body > * {
	max-width: 760px;
}

body.vs-page-legal .vs-page-article h1 {
	display: none;
}

body.vs-page-legal .vs-page-article h2,
body.vs-page-legal .vs-page-article h3 {
	margin-top: 2em;
	font-family: var(--vs-font-body);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 0;
	color: #1c1723;
}

body.vs-page-legal .vs-page-article p,
body.vs-page-legal .vs-page-article li {
	font-size: 17px;
	line-height: 1.78;
	color: #4d4658;
}

body.vs-page-legal .vs-page-article ul,
body.vs-page-legal .vs-page-article ol {
	padding-left: 1.25em;
}

body.vs-page-legal .vs-page-article blockquote {
	max-width: 760px;
	padding: 22px 26px;
	border: 1px solid #e4e0ea;
	border-radius: 8px;
	background: #fbfbfd;
	box-shadow: none;
	font-family: var(--vs-font-body);
	font-style: normal;
	font-size: 17px;
	color: #39204f;
}

[data-theme="dark"] body.vs-page-about,
[data-theme="dark"] body.vs-page-legal {
	background: #0d0816;
}

[data-theme="dark"] body.vs-page-about .page-hero--about,
[data-theme="dark"] body.vs-page-legal .page-hero--legal {
	background: #120a1e;
}

[data-theme="dark"] body.vs-page-about .page-hero--about h1,
[data-theme="dark"] body.vs-page-legal .page-hero--legal h1,
[data-theme="dark"] body.vs-page-about .vs-page-article h2,
[data-theme="dark"] body.vs-page-about .vs-page-article h3,
[data-theme="dark"] body.vs-page-legal .vs-page-article h2,
[data-theme="dark"] body.vs-page-legal .vs-page-article h3 {
	color: #f5edff;
}

[data-theme="dark"] body.vs-page-about .page-hero--about p,
[data-theme="dark"] body.vs-page-about .vs-page-article p,
[data-theme="dark"] body.vs-page-about .vs-page-article li,
[data-theme="dark"] body.vs-page-legal .vs-page-article p,
[data-theme="dark"] body.vs-page-legal .vs-page-article li {
	color: #c8a8e8;
}

[data-theme="dark"] body.vs-page-about .vs-page-featured,
[data-theme="dark"] body.vs-page-about .vs-page-article blockquote,
[data-theme="dark"] body.vs-page-legal .vs-page-article blockquote {
	background: #1a0e2a;
	border-color: rgba(255, 255, 255, 0.1);
	color: #f5edff;
}

/* Plain/legal subpages — centered hero, centered reading column, left-aligned text. */
body.vs-page-plain,
body.vs-page-legal {
	background:
		radial-gradient(circle at 18% 10%, rgba(255, 217, 61, .1), transparent 28%),
		radial-gradient(circle at 84% 8%, rgba(139, 53, 214, .1), transparent 30%),
		#f7f8fb;
}

body.vs-page-plain .page-hero--plain,
body.vs-page-legal .page-hero--legal {
	padding: 126px 24px 46px;
	background: transparent;
	border-bottom: 0;
}

body.vs-page-plain .page-hero--plain,
body.vs-page-plain .page-hero--plain .page-hero-content,
body.vs-page-plain .page-hero--plain .hero-eyebrow,
body.vs-page-plain .page-hero--plain h1,
body.vs-page-plain .page-hero--plain p,
body.vs-page-legal .page-hero--legal,
body.vs-page-legal .page-hero--legal .page-hero-content,
body.vs-page-legal .page-hero--legal .hero-eyebrow,
body.vs-page-legal .page-hero--legal h1,
body.vs-page-legal .page-hero--legal p {
	text-align: center;
}

body.vs-page-plain .page-hero--plain .page-hero-content,
body.vs-page-legal .page-hero--legal .page-hero-content {
	max-width: 940px;
	margin: 0 auto;
}

body.vs-page-plain .page-hero--plain .hero-eyebrow,
body.vs-page-legal .page-hero--legal .hero-eyebrow {
	margin: 0 auto 18px;
	background: #f0ebfa;
	border: 1px solid #ded4f2;
	box-shadow: none;
	color: #6b38b6;
}

body.vs-page-plain .page-hero--plain h1,
body.vs-page-legal .page-hero--legal h1 {
	max-width: 860px;
	margin: 0 auto;
	font-family: var(--vs-font-display);
	font-size: clamp(42px, 6vw, 70px);
	line-height: .98;
	letter-spacing: -.025em;
	color: #1c1723;
	text-wrap: balance;
}

body.vs-page-plain .page-hero--plain p,
body.vs-page-legal .page-hero--legal p {
	max-width: 660px;
	margin: 20px auto 0;
	color: #5a3a6e;
	font-size: 19px;
	line-height: 1.7;
}

body.vs-page-plain .vs-page-shell,
body.vs-page-legal .vs-page-shell {
	max-width: 1040px;
	padding: 42px clamp(18px, 4vw, 52px) 112px;
}

body.vs-page-plain .vs-page-article,
body.vs-page-plain .vs-page-body,
body.vs-page-legal .vs-page-article,
body.vs-page-legal .vs-page-body {
	max-width: none;
	overflow: visible;
}

body.vs-page-plain .vs-page-copy,
body.vs-page-legal .vs-page-copy {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 46px);
	border-radius: 30px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .66)),
		radial-gradient(circle at 100% 0%, rgba(255, 228, 238, .54), transparent 34%);
	border: 1px solid rgba(139, 53, 214, .1);
	box-shadow: 0 22px 58px rgba(30, 10, 46, .07);
	text-align: left;
}

body.vs-page-plain .vs-page-copy > *,
body.vs-page-legal .vs-page-copy > *,
body.vs-page-plain .vs-page-body > *,
body.vs-page-legal .vs-page-body > * {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

body.vs-page-plain .vs-page-featured {
	float: none;
	width: min(100%, 760px);
	margin: 0 auto 34px;
	border-radius: 24px;
}

body.vs-page-plain .vs-page-featured::before {
	display: none;
}

body.vs-page-plain .vs-page-featured img {
	aspect-ratio: 16 / 9;
}

body.vs-page-plain .vs-page-intro-text {
	max-width: 100%;
	margin: 0 0 26px;
	padding: 0;
	text-align: left;
}

body.vs-page-plain .vs-page-article h1,
body.vs-page-legal .vs-page-article h1 {
	display: none;
}

body.vs-page-plain .vs-page-article h2,
body.vs-page-plain .vs-page-article h3,
body.vs-page-legal .vs-page-article h2,
body.vs-page-legal .vs-page-article h3 {
	margin-top: 2.1em;
	font-family: var(--vs-font-body);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #1c1723;
}

body.vs-page-plain .vs-page-article h2,
body.vs-page-legal .vs-page-article h2 {
	font-size: clamp(24px, 2.4vw, 30px);
}

body.vs-page-plain .vs-page-article h3,
body.vs-page-legal .vs-page-article h3 {
	font-size: 21px;
}

body.vs-page-plain .vs-page-article p,
body.vs-page-plain .vs-page-article li,
body.vs-page-legal .vs-page-article p,
body.vs-page-legal .vs-page-article li {
	font-size: 17px;
	line-height: 1.82;
	color: #4d4658;
	text-align: left;
}

body.vs-page-plain .vs-page-article ul,
body.vs-page-plain .vs-page-article ol,
body.vs-page-legal .vs-page-article ul,
body.vs-page-legal .vs-page-article ol {
	padding-left: 1.25em;
}

body.vs-page-plain .vs-page-article blockquote,
body.vs-page-legal .vs-page-article blockquote {
	max-width: 100%;
	padding: 22px 26px;
	border: 1px solid #e4e0ea;
	border-radius: 18px;
	background: #fbfbfd;
	box-shadow: none;
	font-family: var(--vs-font-body);
	font-style: normal;
	font-size: 17px;
	color: #39204f;
}

[data-theme="dark"] body.vs-page-plain,
[data-theme="dark"] body.vs-page-legal {
	background:
		radial-gradient(circle at 18% 10%, rgba(255, 217, 61, .07), transparent 28%),
		radial-gradient(circle at 84% 8%, rgba(192, 132, 252, .12), transparent 30%),
		#0d0816;
}

[data-theme="dark"] body.vs-page-plain .page-hero--plain,
[data-theme="dark"] body.vs-page-legal .page-hero--legal {
	background: transparent;
}

[data-theme="dark"] body.vs-page-plain .page-hero--plain .hero-eyebrow,
[data-theme="dark"] body.vs-page-legal .page-hero--legal .hero-eyebrow {
	background: rgba(192, 132, 252, .12);
	border-color: rgba(255, 255, 255, .1);
	color: #f5edff;
}

[data-theme="dark"] body.vs-page-plain .page-hero--plain h1,
[data-theme="dark"] body.vs-page-legal .page-hero--legal h1,
[data-theme="dark"] body.vs-page-plain .vs-page-article h2,
[data-theme="dark"] body.vs-page-plain .vs-page-article h3,
[data-theme="dark"] body.vs-page-legal .vs-page-article h2,
[data-theme="dark"] body.vs-page-legal .vs-page-article h3 {
	color: #f5edff;
}

[data-theme="dark"] body.vs-page-plain .page-hero--plain p,
[data-theme="dark"] body.vs-page-plain .vs-page-article p,
[data-theme="dark"] body.vs-page-plain .vs-page-article li,
[data-theme="dark"] body.vs-page-legal .page-hero--legal p,
[data-theme="dark"] body.vs-page-legal .vs-page-article p,
[data-theme="dark"] body.vs-page-legal .vs-page-article li {
	color: #c8a8e8;
}

[data-theme="dark"] body.vs-page-plain .vs-page-copy,
[data-theme="dark"] body.vs-page-legal .vs-page-copy {
	background:
		linear-gradient(180deg, rgba(26, 14, 42, .9), rgba(18, 10, 30, .84)),
		radial-gradient(circle at 100% 0%, rgba(192, 132, 252, .12), transparent 34%);
	border-color: rgba(255, 255, 255, .09);
	box-shadow: 0 24px 62px rgba(4, 3, 8, .32);
}

[data-theme="dark"] body.vs-page-plain .vs-page-article blockquote,
[data-theme="dark"] body.vs-page-legal .vs-page-article blockquote {
	background: #1a0e2a;
	border-color: rgba(255, 255, 255, .1);
	color: #f5edff;
}

@media (max-width: 720px) {
	body.vs-page-plain .page-hero--plain,
	body.vs-page-legal .page-hero--legal {
		padding: 112px 18px 34px;
	}

	body.vs-page-plain .page-hero--plain h1,
	body.vs-page-legal .page-hero--legal h1 {
		font-size: clamp(36px, 11vw, 52px);
	}

	body.vs-page-plain .vs-page-shell,
	body.vs-page-legal .vs-page-shell {
		padding: 28px 14px 78px;
	}

	body.vs-page-plain .vs-page-copy,
	body.vs-page-legal .vs-page-copy {
		padding: 24px 18px;
		border-radius: 24px;
	}
}

/* Final founder editorial composition for /o-nama/. */
body.vs-page-about .page-hero--about {
	padding-bottom: 72px;
	background: linear-gradient(180deg, #f8f6fb 0%, #f1edf7 100%);
}

body.vs-page-about .page-hero--about h1 {
	font-size: 76px;
	line-height: 1;
	letter-spacing: 0;
}

body.vs-page-about .vs-page-shell {
	max-width: 1240px;
	padding-top: 76px;
}

body.vs-page-about .vs-about-layout {
	display: grid;
	grid-template-columns: minmax(0, 680px) minmax(280px, 360px);
	gap: 88px;
	align-items: start;
	max-width: 1130px;
	margin: 0 auto;
	overflow: visible;
}

body.vs-page-about .vs-about-layout > * {
	max-width: none;
}

body.vs-page-about .vs-page-copy {
	grid-column: 1;
	grid-row: 1;
	max-width: 680px;
	align-self: start;
	padding-top: 0;
}

body.vs-page-about .vs-about-media {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 128px;
	align-self: start;
}

body.vs-page-about .vs-about-portrait {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #eee8f5;
	border: 1px solid #ded7e8;
	box-shadow: 0 24px 54px rgba(30, 10, 46, 0.12);
}

body.vs-page-about .vs-about-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}

body.vs-page-about .vs-about-caption {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #ded7e8;
	color: #5a3a6e;
}

body.vs-page-about .vs-about-caption strong,
body.vs-page-about .vs-about-caption span {
	display: block;
}

body.vs-page-about .vs-about-caption strong {
	font-family: var(--vs-font-display);
	font-size: 24px;
	line-height: 1.15;
	color: #1e0a2e;
}

body.vs-page-about .vs-about-caption span {
	margin-top: 4px;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.vs-page-about .vs-page-copy > * {
	max-width: none;
}

body.vs-page-about .vs-page-copy > :first-child {
	margin-top: 0;
}

body.vs-page-about .vs-page-copy > h1:first-child,
body.vs-page-about .vs-page-copy > h2:first-child,
body.vs-page-about .vs-page-copy > h3:first-child,
body.vs-page-about .vs-page-copy > p:first-child,
body.vs-page-about .vs-page-copy > blockquote:first-child {
	margin-top: 0;
}

body.vs-page-about .vs-page-copy > * + * {
	margin-top: 1.12em;
}

body.vs-page-about .vs-page-copy > p:first-child {
	margin-top: 0;
	font-size: 21px;
	line-height: 1.78;
	color: #39204f;
}

body.vs-page-about .vs-page-copy blockquote {
	max-width: none;
	margin: 42px 0;
	border-radius: 14px;
}

body.vs-page-about .vs-page-copy h2,
body.vs-page-about .vs-page-copy h3 {
	clear: none;
	margin-top: 2.2em;
	letter-spacing: 0;
}

[data-theme="dark"] body.vs-page-about .page-hero--about {
	background: linear-gradient(180deg, #120a1e 0%, #0d0816 100%);
}

[data-theme="dark"] body.vs-page-about .vs-about-portrait {
	background: #1a0e2a;
	border-color: rgba(255, 255, 255, .1);
	box-shadow: 0 24px 54px rgba(4, 3, 8, .34);
}

[data-theme="dark"] body.vs-page-about .vs-about-caption {
	border-color: rgba(255, 255, 255, .1);
	color: #c8a8e8;
}

[data-theme="dark"] body.vs-page-about .vs-about-caption strong {
	color: #f5edff;
}

/* Final footer contrast and hero book ratio fixes. */
.site-footer .footer-brand img {
	height: 72px;
	width: auto;
	max-width: 360px;
	filter: brightness(0) invert(1);
	opacity: 1;
}

.site-footer .footer-brand p {
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
	line-height: 1.75;
	max-width: 360px;
}

.site-footer h5 {
	color: rgba(255, 255, 255, .94);
}

.site-footer ul a,
.site-footer .footer-contact p {
	color: rgba(255, 255, 255, .76);
}

.site-footer .footer-contact a {
	color: rgba(255, 255, 255, .96);
}

.site-footer .footer-bottom {
	color: rgba(255, 255, 255, .62);
}

.hero.vs-hero .vs-media-card--book {
	width: min(100%, 300px);
	min-height: 0;
	height: auto;
	aspect-ratio: 3 / 4.35;
}

.hero.vs-hero .vs-media-card-book-image {
	position: relative;
	inset: auto;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4.35;
	object-fit: contain;
	object-position: center;
	background: transparent;
	border-radius: inherit;
}

.hero.vs-hero .vs-media-card--book::before {
	pointer-events: none;
}

.hero.vs-hero .vs-media-card-book-copy,
.hero.vs-hero .vs-media-card--book .vs-media-card-overlay {
	display: none;
}

[data-theme="light"] .site-footer ul a,
[data-theme="dark"] .site-footer ul a,
.site-footer .footer-menu a,
.site-footer .footer-credit-link {
	color: rgba(255, 255, 255, .78);
}

[data-theme="light"] .site-footer ul a:hover,
[data-theme="dark"] .site-footer ul a:hover,
.site-footer .footer-menu a:hover,
.site-footer .footer-credit-link:hover {
	color: rgba(255, 255, 255, .98);
}

[data-theme="light"] .footer-contact a,
[data-theme="dark"] .footer-contact a,
.site-footer .footer-contact a {
	color: rgba(255, 255, 255, .96);
}

body.vs-generic-page .vs-page-article,
body.vs-generic-page .vs-page-article.reveal,
body.vs-generic-page .vs-page-article.vs-reveal {
	opacity: 1;
	transform: none;
}

/* Final hero cleanup: no per-slide tint, richer founder media, stable real-ratio book. */
.hero.vs-hero .vs-slide::before,
.hero.vs-hero .vs-slide[data-slide="0"]::before,
.hero.vs-hero .vs-slide[data-slide="1"]::before,
.hero.vs-hero .vs-slide[data-slide="2"]::before {
	content: none !important;
	display: none !important;
	background: none !important;
	opacity: 0 !important;
}

.hero.vs-hero .vs-media-card--founder {
	width: min(100%, 390px);
	min-height: 520px;
	padding: 18px 18px 0;
	border-radius: 30px;
	overflow: hidden;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, .82) 0%, rgba(244, 238, 251, .98) 48%, rgba(231, 220, 244, .96) 100%),
		radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 34%);
	border: 1px solid rgba(139, 53, 214, .14);
	box-shadow:
		0 34px 78px rgba(30, 10, 46, .18),
		inset 0 1px 0 rgba(255, 255, 255, .76);
}

.hero.vs-hero .vs-media-card--founder::before {
	inset: auto 10% 0 10%;
	height: 24%;
	background: radial-gradient(ellipse at center, rgba(30, 10, 46, .22), rgba(30, 10, 46, 0) 68%);
	filter: blur(18px);
}

.hero.vs-hero .vs-media-card--founder::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	background:
		linear-gradient(180deg, rgba(248, 245, 251, 0), rgba(248, 245, 251, .92)),
		linear-gradient(90deg, rgba(139, 53, 214, .1), rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .26));
	pointer-events: none;
	z-index: 1;
}

.hero.vs-hero .vs-media-card--founder .vs-s1-img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: 24px 24px 0 0;
	box-shadow: none;
	filter: drop-shadow(0 22px 28px rgba(30, 10, 46, .16));
	object-fit: contain;
	object-position: center bottom;
	transform: translateZ(0);
}

.hero.vs-hero .vs-media-card--founder .vs-media-card-overlay {
	z-index: 4;
}

[data-theme="dark"] .hero.vs-hero .vs-media-card--founder {
	background: linear-gradient(180deg, #20152f 0%, #140c20 100%);
	border-color: rgba(255, 255, 255, .1);
	box-shadow: 0 34px 78px rgba(4, 3, 8, .46);
}

[data-theme="dark"] .hero.vs-hero .vs-media-card--founder::after {
	background: linear-gradient(180deg, rgba(20, 12, 32, 0), rgba(20, 12, 32, .92));
}

.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-visual {
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 1600px;
}

.hero.vs-hero .vs-media-card--book {
	position: relative;
	width: min(100%, 315px);
	height: auto;
	min-height: 0;
	aspect-ratio: auto;
	border-radius: 10px 22px 22px 10px;
	background: #f7f4fb;
	border: 0;
	box-shadow:
		0 40px 80px rgba(30, 10, 46, .22),
		18px 12px 0 rgba(220, 210, 232, .9),
		23px 16px 0 rgba(30, 10, 46, .08);
	transform: perspective(1600px) rotateY(-16deg) rotateX(1deg);
	transform-origin: left center;
	transform-style: preserve-3d;
	animation: none;
	transition: none;
	will-change: auto;
}

.hero.vs-hero .vs-media-card--book::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		linear-gradient(90deg, rgba(30, 10, 46, .32) 0%, rgba(30, 10, 46, .12) 7%, rgba(255, 255, 255, 0) 20%),
		linear-gradient(105deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 32%),
		linear-gradient(270deg, rgba(30, 10, 46, .12), rgba(30, 10, 46, 0) 13%);
	z-index: 2;
	pointer-events: none;
}

.hero.vs-hero .vs-media-card--book::after {
	content: '';
	position: absolute;
	top: 7px;
	bottom: 7px;
	left: -16px;
	width: 18px;
	border-radius: 8px 0 0 8px;
	background:
		linear-gradient(90deg, #5f278d 0%, #8c46bf 38%, #caa6e8 72%, #f8f1ff 100%),
		repeating-linear-gradient(180deg, rgba(255,255,255,.28) 0 1px, rgba(255,255,255,0) 1px 6px);
	box-shadow:
		inset -2px 0 3px rgba(30, 10, 46, .28),
		-6px 8px 18px rgba(30, 10, 46, .16);
	transform: translateZ(-8px);
}

.hero.vs-hero .vs-media-card-book-image {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
	border-radius: inherit;
	background: transparent;
	filter: none;
	z-index: 1;
	backface-visibility: hidden;
	transform: translateZ(.1px);
}

.hero.vs-hero .vs-media-card--book .vs-s2-cover-badge,
.hero.vs-hero .vs-media-card--book .vs-media-card-book-copy,
.hero.vs-hero .vs-media-card--book .vs-media-card-overlay {
	display: none;
}

.hero.vs-hero .vs-slide[data-slide="2"] .vs-media-card[data-anim],
.hero.vs-hero .vs-slide[data-slide="2"] .vs-media-card-book-image {
	animation: none;
	transition: none;
	transform-origin: left center;
}

[data-theme="dark"] .hero.vs-hero .vs-media-card--book {
	background: #1a0e2a;
	box-shadow:
		0 44px 84px rgba(4, 3, 8, .52),
		18px 12px 0 rgba(54, 40, 68, .85),
		23px 16px 0 rgba(4, 3, 8, .38);
}

/* Hero media reset: keep images honest, stable and effect-free. */
.hero.vs-hero .vs-slide::before,
.hero.vs-hero .vs-slide[data-slide="0"]::before,
.hero.vs-hero .vs-slide[data-slide="1"]::before,
.hero.vs-hero .vs-slide[data-slide="2"]::before {
	content: none !important;
	display: none !important;
	background: none !important;
	opacity: 0 !important;
}

.hero.vs-hero .vs-slide-visual [data-anim],
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book,
.hero.vs-hero .vs-media-card--fallback {
	animation: none !important;
	transition: none !important;
	transform: none !important;
	filter: none !important;
	will-change: auto !important;
}

.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	padding: 0 !important;
}

.hero.vs-hero .vs-media-card::before,
.hero.vs-hero .vs-media-card::after,
.hero.vs-hero .vs-media-card--photo::before,
.hero.vs-hero .vs-media-card--photo::after,
.hero.vs-hero .vs-media-card--founder::before,
.hero.vs-hero .vs-media-card--founder::after,
.hero.vs-hero .vs-media-card--book::before,
.hero.vs-hero .vs-media-card--book::after {
	content: none !important;
	display: none !important;
	background: none !important;
	box-shadow: none !important;
	filter: none !important;
}

.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-book-image {
	position: relative !important;
	inset: auto !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
	backface-visibility: visible !important;
}

.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img {
	border-radius: 24px !important;
}

.hero.vs-hero .vs-media-card-book-image {
	border-radius: 0 !important;
}

.hero.vs-hero .vs-media-card-overlay,
.hero.vs-hero .vs-s2-cover-badge,
.hero.vs-hero .vs-media-card-book-copy {
	display: none !important;
}

/* Homepage game intro alignment. */
.game-bg .section-header {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.game-bg .section-tag,
.game-bg .section-title,
.game-bg .section-sub {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.game-bg .section-sub {
	max-width: 680px;
}

/* Kontakt page. */
body.vs-page-contact {
	background:
		radial-gradient(circle at 14% 18%, rgba(255, 217, 61, .12), transparent 28%),
		radial-gradient(circle at 86% 16%, rgba(139, 53, 214, .12), transparent 30%),
		#f7f7fb;
}

body.vs-page-contact .page-hero--contact {
	min-height: auto;
	padding: 126px 32px 54px;
	background:
		linear-gradient(180deg, rgba(247, 245, 251, .98) 0%, rgba(247, 247, 251, .96) 100%);
}

body.vs-page-contact .page-hero--contact,
body.vs-page-contact .page-hero--contact .page-hero-content,
body.vs-page-contact .page-hero--contact .hero-eyebrow,
body.vs-page-contact .page-hero--contact h1,
body.vs-page-contact .page-hero--contact p {
	text-align: center;
}

body.vs-page-contact .page-hero--contact .page-hero-content {
	max-width: 960px;
	margin: 0 auto;
}

body.vs-page-contact .page-hero--contact .hero-eyebrow {
	margin: 0 auto 18px;
	background: #f0ebfa;
	border: 1px solid #ded4f2;
	box-shadow: none;
	color: #6b38b6;
}

body.vs-page-contact .page-hero--contact h1 {
	max-width: none;
	margin: 0 auto;
	color: #1e0a2e;
	font-size: clamp(44px, 6.4vw, 78px);
	line-height: .96;
	letter-spacing: -.035em;
}

body.vs-page-contact .page-hero--contact p {
	max-width: 700px;
	margin: 22px auto 0;
	color: #5a3a6e;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.7;
}

body.vs-page-contact .vs-page-shell {
	max-width: 1260px;
	padding: 56px 72px 110px;
}

body.vs-page-contact .vs-page-body {
	max-width: none;
	overflow: visible;
}

body.vs-page-contact .vs-page-body > .vs-page-copy,
body.vs-page-contact .vs-page-copy > * {
	max-width: none;
}

body.vs-page-contact .vs-page-intro-text,
body.vs-page-contact .vs-page-copy > p:not(.vs-contact-hp) {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.vs-contact-hub {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr);
	gap: clamp(24px, 4vw, 56px);
	margin: clamp(34px, 5vw, 62px) auto 0;
	padding: clamp(24px, 4vw, 46px);
	border-radius: 42px;
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 217, 61, .2), transparent 30%),
		radial-gradient(circle at 100% 4%, rgba(232, 53, 138, .13), transparent 36%),
		linear-gradient(145deg, rgba(255, 252, 249, .98), rgba(248, 245, 253, .96));
	border: 1px solid rgba(139, 53, 214, .12);
	box-shadow: 0 30px 86px rgba(30, 10, 46, .1);
}

.vs-contact-hub::before {
	content: '';
	position: absolute;
	inset: 18px;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, .74);
	pointer-events: none;
}

.vs-contact-intro,
.vs-contact-form-card {
	position: relative;
	z-index: 1;
}

.vs-contact-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(139, 53, 214, .1);
	color: var(--purple);
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vs-contact-intro h2 {
	max-width: 11ch;
	margin: 0;
	color: var(--heading);
	font-size: clamp(38px, 4.6vw, 64px);
	line-height: .98;
	letter-spacing: -.035em;
}

.vs-contact-intro p {
	max-width: 36rem;
	margin: 22px 0 0;
	color: var(--text2);
	font-size: 18px;
	line-height: 1.78;
}

.vs-contact-methods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 30px;
}

.vs-contact-method {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 10px 12px;
	min-height: 118px;
	padding: 18px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(139, 53, 214, .11);
	color: var(--heading);
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(30, 10, 46, .06);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.vs-contact-method:hover {
	transform: translateY(-2px);
	border-color: rgba(139, 53, 214, .26);
	box-shadow: 0 20px 44px rgba(30, 10, 46, .1);
}

.vs-contact-method span[aria-hidden="true"] {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 15px;
	background: rgba(255, 228, 238, .86);
	color: var(--pink);
	font-size: 18px;
	font-style: normal;
}

.vs-contact-method--primary span[aria-hidden="true"] {
	background: rgba(139, 53, 214, .1);
	color: var(--purple);
}

.vs-contact-method strong,
.vs-contact-method em {
	grid-column: 2;
	display: block;
	min-width: 0;
}

.vs-contact-method strong {
	font-family: var(--font-accent);
	font-size: 15px;
	font-weight: 800;
}

.vs-contact-method em {
	margin-top: 5px;
	color: var(--text2);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.vs-contact-signature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 28px;
	color: rgba(90, 58, 110, .78);
	font-size: 14px;
	font-weight: 700;
}

.vs-contact-signature strong {
	color: var(--heading);
}

.vs-contact-form-card {
	padding: clamp(20px, 3vw, 32px);
	border-radius: 32px;
	background: rgba(255, 255, 255, .9);
	border: 1px solid rgba(139, 53, 214, .12);
	box-shadow: 0 24px 60px rgba(30, 10, 46, .11);
}

.vs-contact-form {
	display: grid;
	gap: 18px;
	margin: 0;
}

.vs-contact-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.vs-form-field {
	display: grid;
	gap: 8px;
	margin: 0;
}

.vs-form-field span,
.vs-contact-privacy {
	color: var(--heading);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
}

.vs-form-field input,
.vs-form-field select,
.vs-form-field textarea {
	width: 100%;
	min-height: 54px;
	padding: 14px 16px;
	border-radius: 18px;
	border: 1px solid rgba(139, 53, 214, .16);
	background: rgba(253, 248, 245, .72);
	color: var(--heading);
	font: 600 16px/1.45 var(--font-body);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.vs-form-field textarea {
	min-height: 178px;
	resize: vertical;
}

.vs-form-field input:focus,
.vs-form-field select:focus,
.vs-form-field textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, .95);
	border-color: rgba(139, 53, 214, .52);
	box-shadow: 0 0 0 4px rgba(139, 53, 214, .1);
}

.vs-contact-privacy {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 11px;
	margin: 2px 0 0;
	color: rgba(90, 58, 110, .86);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
}

.vs-contact-privacy input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--purple);
}

.vs-contact-privacy a {
	color: var(--purple);
	font-weight: 800;
	text-decoration-color: rgba(139, 53, 214, .25);
	text-underline-offset: .18em;
}

.vs-contact-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	min-height: 56px;
	margin-top: 2px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--orange), var(--pink) 55%, var(--purple));
	color: var(--text-light);
	font-family: var(--font-accent);
	font-size: 16px;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0 16px 34px rgba(232, 53, 138, .26);
	transition: transform .18s ease, box-shadow .18s ease;
}

.vs-contact-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 46px rgba(232, 53, 138, .34);
}

.vs-contact-submit i {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	font-style: normal;
}

.vs-contact-notice {
	margin: 0 0 18px;
	padding: 16px 18px;
	border-radius: 20px;
	border: 1px solid rgba(139, 53, 214, .13);
	background: rgba(247, 245, 251, .86);
	color: var(--heading);
}

.vs-contact-notice strong,
.vs-contact-notice span {
	display: block;
}

.vs-contact-notice strong {
	font-family: var(--font-accent);
	font-size: 17px;
	font-weight: 900;
}

.vs-contact-notice span,
.vs-contact-notice li {
	margin-top: 4px;
	color: var(--text2);
	font-size: 14px;
	line-height: 1.5;
}

.vs-contact-notice ul {
	margin: 8px 0 0;
	padding-left: 1.2em;
}

.vs-contact-notice--success {
	background: rgba(52, 217, 181, .13);
	border-color: rgba(52, 217, 181, .26);
}

.vs-contact-notice--error {
	background: rgba(255, 228, 238, .74);
	border-color: rgba(232, 53, 138, .24);
}

.vs-contact-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

[data-theme="dark"] body.vs-page-contact {
	background:
		radial-gradient(circle at 14% 18%, rgba(255, 217, 61, .08), transparent 30%),
		radial-gradient(circle at 86% 16%, rgba(192, 132, 252, .14), transparent 32%),
		#120a1e;
}

[data-theme="dark"] body.vs-page-contact .page-hero--contact {
	background: linear-gradient(180deg, rgba(20, 12, 31, .98) 0%, rgba(18, 10, 30, .98) 100%);
}

[data-theme="dark"] body.vs-page-contact .page-hero--contact h1,
[data-theme="dark"] .vs-contact-intro h2,
[data-theme="dark"] .vs-contact-method,
[data-theme="dark"] .vs-contact-method strong,
[data-theme="dark"] .vs-form-field span,
[data-theme="dark"] .vs-contact-notice,
[data-theme="dark"] .vs-contact-signature strong {
	color: var(--text-light);
}

[data-theme="dark"] body.vs-page-contact .page-hero--contact p,
[data-theme="dark"] .vs-contact-intro p,
[data-theme="dark"] .vs-contact-method em,
[data-theme="dark"] .vs-contact-privacy,
[data-theme="dark"] .vs-contact-notice span,
[data-theme="dark"] .vs-contact-notice li,
[data-theme="dark"] .vs-contact-signature {
	color: rgba(245, 237, 255, .72);
}

[data-theme="dark"] .vs-contact-hub {
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 217, 61, .09), transparent 30%),
		radial-gradient(circle at 100% 4%, rgba(192, 132, 252, .13), transparent 36%),
		linear-gradient(145deg, rgba(26, 14, 42, .96), rgba(18, 10, 30, .92));
	border-color: rgba(255, 255, 255, .1);
	box-shadow: 0 30px 84px rgba(4, 3, 8, .42);
}

[data-theme="dark"] .vs-contact-hub::before {
	border-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .vs-contact-method,
[data-theme="dark"] .vs-contact-form-card,
[data-theme="dark"] .vs-contact-notice {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .1);
	box-shadow: 0 20px 52px rgba(4, 3, 8, .28);
}

[data-theme="dark"] .vs-form-field input,
[data-theme="dark"] .vs-form-field select,
[data-theme="dark"] .vs-form-field textarea {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
	color: var(--text-light);
	box-shadow: none;
}

[data-theme="dark"] .vs-form-field input:focus,
[data-theme="dark"] .vs-form-field select:focus,
[data-theme="dark"] .vs-form-field textarea:focus {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(192, 132, 252, .5);
	box-shadow: 0 0 0 4px rgba(192, 132, 252, .12);
}

@media (max-width: 980px) {
	body.vs-page-contact .vs-page-shell {
		padding: 44px 22px 82px;
	}

	.vs-contact-hub {
		grid-template-columns: 1fr;
		border-radius: 32px;
	}

	.vs-contact-intro h2 {
		max-width: 14ch;
	}
}

@media (max-width: 680px) {
	body.vs-page-contact .page-hero--contact {
		padding: 112px 20px 42px;
	}

	body.vs-page-contact .page-hero--contact h1 {
		font-size: clamp(38px, 12vw, 54px);
	}

	body.vs-page-contact .vs-page-shell {
		padding: 34px 14px 70px;
	}

	.vs-contact-hub {
		margin-top: 28px;
		padding: 18px;
		border-radius: 28px;
	}

	.vs-contact-hub::before {
		inset: 10px;
		border-radius: 22px;
	}

	.vs-contact-intro h2 {
		max-width: none;
		font-size: clamp(34px, 11vw, 46px);
	}

	.vs-contact-intro p {
		font-size: 16px;
		line-height: 1.7;
	}

	.vs-contact-methods,
	.vs-contact-form-grid {
		grid-template-columns: 1fr;
	}

	.vs-contact-method {
		min-height: 0;
		padding: 16px;
	}

	.vs-contact-form-card {
		padding: 16px;
		border-radius: 24px;
	}

	.vs-contact-submit {
		width: 100%;
	}

	body.vs-page-contact .vs-page-intro-text,
	body.vs-page-contact .vs-page-copy > p:not(.vs-contact-hp) {
		text-align: left;
	}
}

/* O nama — legal/contact details. */
.vs-about-legal {
	position: relative;
	margin-top: clamp(48px, 7vw, 86px);
	padding: clamp(28px, 4vw, 44px);
	border-radius: 34px;
	background:
		radial-gradient(circle at 8% 0%, rgba(255, 217, 61, .18), transparent 34%),
		radial-gradient(circle at 96% 10%, rgba(139, 53, 214, .14), transparent 32%),
		linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 244, 248, .9));
	border: 1px solid rgba(139, 53, 214, .14);
	box-shadow: 0 28px 70px rgba(30, 10, 46, .11);
	overflow: hidden;
}

.vs-about-legal::before {
	content: '';
	position: absolute;
	inset: 16px;
	border-radius: 26px;
	border: 1px solid rgba(255, 255, 255, .76);
	pointer-events: none;
}

.vs-about-legal-head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.vs-about-legal-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(139, 53, 214, .1);
	color: var(--purple);
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vs-about-legal h2 {
	margin: 0;
	max-width: 12ch;
	color: var(--heading);
	font-size: clamp(34px, 4vw, 56px);
	line-height: .96;
	letter-spacing: -.03em;
}

.vs-about-legal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.vs-about-legal-actions a,
.vs-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 10px 15px;
	border-radius: 999px;
	border: 1px solid rgba(139, 53, 214, .18);
	background: rgba(255, 255, 255, .78);
	color: var(--purple);
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.vs-copy-btn {
	width: 28px;
	height: 28px;
	min-height: 28px;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: rgba(90, 58, 110, .42);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	opacity: .72;
}

.vs-about-legal-actions a:hover,
.vs-copy-btn:hover {
	transform: translateY(-1px);
	background: var(--purple);
	border-color: var(--purple);
	color: #fff;
	opacity: 1;
}

.vs-copy-btn.is-copied {
	transform: none;
	background: rgba(52, 217, 181, .14);
	border-color: rgba(52, 217, 181, .2);
	color: #0c7f6a;
	opacity: 1;
}

.vs-about-legal-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.vs-about-legal-card {
	border-radius: 24px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(139, 53, 214, .12);
	box-shadow: 0 14px 34px rgba(30, 10, 46, .07);
	overflow: hidden;
}

.vs-about-legal-card summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	color: var(--heading);
	font-family: var(--font-accent);
	font-size: 18px;
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

.vs-about-legal-card summary::-webkit-details-marker {
	display: none;
}

.vs-about-legal-card summary::after {
	content: '+';
	margin-left: auto;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(232, 53, 138, .1);
	color: var(--pink);
	font-size: 20px;
	line-height: 1;
}

.vs-about-legal-card[open] summary::after {
	content: '−';
}

.vs-about-legal-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 14px;
	background: rgba(255, 228, 238, .8);
}

.vs-about-legal-list {
	display: grid;
	gap: 10px;
	padding: 0 16px 18px;
}

.vs-about-legal-row {
	display: grid;
	grid-template-columns: minmax(118px, .72fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border-radius: 18px;
	background: rgba(253, 248, 245, .72);
	border: 1px solid rgba(30, 10, 46, .06);
}

.vs-about-legal-label {
	color: rgba(90, 58, 110, .78);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vs-about-legal-value {
	min-width: 0;
	color: var(--heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.vs-about-legal-value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(139, 53, 214, .24);
}

[data-theme="dark"] .vs-about-legal {
	background:
		radial-gradient(circle at 8% 0%, rgba(255, 217, 61, .1), transparent 34%),
		radial-gradient(circle at 96% 10%, rgba(192, 132, 252, .16), transparent 32%),
		linear-gradient(145deg, rgba(26, 14, 42, .96), rgba(18, 10, 30, .92));
	border-color: rgba(255, 255, 255, .1);
	box-shadow: 0 30px 76px rgba(4, 3, 8, .44);
}

[data-theme="dark"] .vs-about-legal-card,
[data-theme="dark"] .vs-about-legal-actions a,
[data-theme="dark"] .vs-copy-btn {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .vs-about-legal-row {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .vs-about-legal-label {
	color: rgba(245, 237, 255, .62);
}

.vs-about-legal-image {
	position: relative;
	z-index: 1;
	margin: clamp(22px, 3vw, 34px) 0 0;
	border-radius: 28px;
	overflow: hidden;
	background: rgba(255, 255, 255, .54);
	border: 1px solid rgba(139, 53, 214, .12);
	box-shadow: 0 20px 52px rgba(30, 10, 46, .1);
}

.vs-about-legal-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	object-position: center;
}

[data-theme="dark"] .vs-about-legal-image {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .1);
	box-shadow: 0 22px 58px rgba(4, 3, 8, .36);
}

/* ════════════════════════════════════════════════════════════════════════
   HERO SLIDE MEDIA — unified, book-ratio images (desktop / tablet ≥768px)
   Spec: every slide image shares the "Znaj i ti imaš SJAJ" book-cover ratio
   (903:1024), rendered bigger, with a small book-like radius and a modern
   layered 3D drop-shadow. One consistent frame across all three slides.
   Mobile (≤767px) keeps its own tuned hero layout in mobile.css.
   This block is intentionally last so it overrides the earlier hero resets.
   ════════════════════════════════════════════════════════════════════════ */
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book {
	width: min(100%, 480px) !important;
	min-height: 0 !important;
	height: auto !important;
	aspect-ratio: auto !important;
	margin-inline: auto !important;
	justify-self: center !important;
	align-self: center !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	padding: 0 !important;
	transform: none !important;
}

.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-book-image {
	position: relative !important;
	inset: auto !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 903 / 1024 !important;   /* book cover — source of truth */
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 6px !important;          /* small, like a real book cover */
	background: #fff !important;
	box-shadow:
		0 1px 2px rgba(30, 10, 46, .14),
		0 8px 16px rgba(30, 10, 46, .12),
		0 22px 40px rgba(30, 10, 46, .14),
		0 40px 72px -6px rgba(139, 53, 214, .22) !important;
	transform: none !important;
	filter: none !important;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease) !important;
}

[data-theme="dark"] .hero.vs-hero .vs-s0-img,
[data-theme="dark"] .hero.vs-hero .vs-s1-img,
[data-theme="dark"] .hero.vs-hero .vs-media-card-book-image {
	background: #1a0e2a !important;
	box-shadow:
		0 1px 2px rgba(4, 3, 8, .4),
		0 10px 22px rgba(4, 3, 8, .34),
		0 26px 48px rgba(4, 3, 8, .36),
		0 46px 80px -6px rgba(139, 53, 214, .30) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   CPT ARCHIVES — unified filterable card grid (Predstave + Programi)
   Clean compact header (clears the fixed nav, no image, no wave), a filter
   toggle bar, and category-tinted cards. Same layout for both pages.
   ════════════════════════════════════════════════════════════════════════ */
.vs-cpt-archive { position: relative; z-index: 2; }

/* Compact header — clears the fixed nav, same top rhythm as the product page. */
.vs-cpt-archive .vs-arch-head {
	padding: var(--vs-nav-clear) 28px 8px;
}
.vs-cpt-archive .vs-arch-head-inner {
	max-width: 760px; margin: 0 auto; text-align: center;
}
.vs-cpt-archive .vs-arch-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 13px; letter-spacing: .04em;
	color: var(--pink);
	background: var(--rose);
	border-radius: 50px; padding: 7px 16px; margin-bottom: 16px;
}
[data-theme="dark"] .vs-cpt-archive .vs-arch-eyebrow { background: rgba(232, 53, 138, .12); }
.vs-cpt-archive .vs-arch-title {
	font-family: var(--vs-font-display); font-weight: 900;
	font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08;
	letter-spacing: -.02em; color: var(--heading); margin: 0;
}
.vs-cpt-archive .vs-arch-sub {
	margin: 16px auto 0; max-width: 620px;
	font-size: 17px; line-height: 1.65; color: var(--text2);
}

/* Body wrapper — width matches the header nav pill. */
.vs-cpt-archive .vs-arch-body {
	max-width: 1440px; margin: 0 auto; padding: 0 28px 56px;
}

/* Filter toggle bar. */
.vs-arch-filter {
	display: flex; flex-wrap: wrap; gap: 10px;
	justify-content: center; margin: 28px 0 36px;
}
.vs-arch-chip {
	--tint: 232, 53, 138;
	cursor: pointer;
	font-family: var(--vs-font-accent); font-weight: 700;
	font-size: 14px; line-height: 1;
	padding: 11px 20px; border-radius: 50px;
	background: var(--card-bg);
	color: var(--text2);
	border: 1.5px solid var(--border);
	transition: background .2s var(--ease), color .2s, border-color .2s, transform .2s var(--spring);
}
.vs-arch-chip:hover { transform: translateY(-2px); border-color: rgba(var(--tint), .5); color: rgb(var(--tint)); }
.vs-arch-chip.is-active {
	background: rgb(var(--tint)); color: #fff; border-color: transparent;
	box-shadow: 0 6px 18px rgba(var(--tint), .32);
}

/* Card grid. */
.vs-arch-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.vs-arch-card {
	--tint: 154, 122, 174;
	display: flex; flex-direction: column;
	border-radius: var(--rad-lg); overflow: hidden;
	background:
		linear-gradient(180deg, rgba(var(--tint), .10), rgba(var(--tint), .04)),
		var(--card-bg);
	border: 1.5px solid rgba(var(--tint), .26);
	box-shadow: 0 10px 28px rgba(30, 10, 46, .06);
	transition: transform .3s var(--ease), box-shadow .3s, border-color .25s;
	animation: vs-arch-in .4s var(--ease) both;
}
.vs-arch-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(var(--tint), .20);
	border-color: rgba(var(--tint), .45);
}
@keyframes vs-arch-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* The JS filter toggles [hidden]; author display:flex would otherwise beat the UA rule. */
.vs-arch-card[hidden] { display: none !important; }

.vs-arch-card-media {
	position: relative; display: block;
	aspect-ratio: 16 / 10; overflow: hidden;
	background: var(--bg2);
}
.vs-arch-card-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s var(--ease);
}
.vs-arch-card:hover .vs-arch-card-media img { transform: scale(1.05); }
.vs-arch-cat-chip {
	--tint: 154, 122, 174;
	position: absolute; top: 12px; left: 12px;
	font-family: var(--vs-font-accent); font-weight: 800;
	font-size: 11.5px; letter-spacing: .03em;
	padding: 6px 13px; border-radius: 50px;
	color: #fff; background: rgb(var(--tint));
	box-shadow: 0 4px 12px rgba(var(--tint), .4);
}
.vs-arch-card-body {
	display: flex; flex-direction: column; gap: 10px;
	padding: 18px 20px 20px; flex: 1;
}
.vs-arch-card-title {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: 21px; line-height: 1.2; margin: 0; color: var(--heading);
}
.vs-arch-card-title a { color: inherit; text-decoration: none; }
.vs-arch-card-title a:hover { color: rgb(var(--tint)); }
.vs-arch-card-excerpt {
	font-size: 14.5px; line-height: 1.6; color: var(--text2);
	margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vs-arch-card-btn {
	align-self: flex-start; margin-top: auto;
	font-size: 14px !important; padding: 11px 20px !important;
}
.vs-arch-empty {
	grid-column: 1 / -1; text-align: center;
	padding: 48px 16px; color: var(--muted);
	font-size: 16px;
}

/* Friendly empty state when a category has no content (not a 404). */
.vs-arch-noposts {
	grid-column: 1 / -1;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 12px;
	padding: 64px 28px;
	background:
		radial-gradient(circle at 30% 20%, rgba(255, 179, 138, .10), transparent 55%),
		radial-gradient(circle at 75% 30%, rgba(139, 53, 214, .08), transparent 55%),
		var(--card-bg);
	border: 1.5px dashed var(--border);
	border-radius: var(--rad-lg);
}
.vs-arch-noposts-icon {
	font-size: 56px; line-height: 1;
	animation: vs-icon-dance 4s ease-in-out infinite;
}
.vs-arch-noposts h2 {
	font-family: var(--vs-font-display); font-weight: 800;
	font-size: clamp(24px, 3vw, 30px); color: var(--heading); margin: 4px 0 0;
}
.vs-arch-noposts p {
	max-width: 480px; margin: 0 0 8px;
	color: var(--text2); font-size: 16px; line-height: 1.65;
}

/* Category tints — shade 1..4 (+ 0 neutral fallback). */
.vs-arch-card.cat-1, .vs-arch-chip.cat-1, .vs-arch-cat-chip.cat-1 { --tint: 236, 110, 30; }   /* Za djecu / Vrtić — orange */
.vs-arch-card.cat-2, .vs-arch-chip.cat-2, .vs-arch-cat-chip.cat-2 { --tint: 214, 150, 20; }   /* gold */
.vs-arch-card.cat-3, .vs-arch-chip.cat-3, .vs-arch-cat-chip.cat-3 { --tint: 139, 53, 214; }   /* Za roditelje — purple */
.vs-arch-card.cat-4, .vs-arch-chip.cat-4, .vs-arch-cat-chip.cat-4 { --tint: 20, 155, 130; }   /* Za odgojitelje / Za odrasle — teal */

@media (max-width: 1100px) {
	.vs-arch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.vs-cpt-archive .vs-arch-head { padding-left: 18px; padding-right: 18px; padding-bottom: 4px; }
	.vs-cpt-archive .vs-arch-body { padding: 0 16px 40px; }
	.vs-arch-filter {
		flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
		margin: 22px 0 26px; padding-bottom: 6px;
		scrollbar-width: none;
	}
	.vs-arch-filter::-webkit-scrollbar { display: none; }
	.vs-arch-chip { flex: 0 0 auto; }
	.vs-arch-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO SLIDE 4 (book "Znaj, i ti imaš SJAJ") — render exactly like slide 2.
   Same white card image, small radius and 3D shadow as the founder/photo
   slides. No upscale, no card-clip: the shadow lives on the image (like the
   others), and the book sits a touch smaller so it reads as a book cover.
   ════════════════════════════════════════════════════════════════════════ */
.hero.vs-hero .vs-media-card--book {
	overflow: visible !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	width: min(100%, 330px) !important;   /* noticeably smaller than the 480px photo slides */
}
/* No white card, no box border: transparent bg + drop-shadow follows the cover
   art's alpha (not its bounding box), so the baked-in transparent margin never
   shows as a frame. object-fit:contain keeps the whole cover visible. */
.hero.vs-hero .vs-media-card-book-image {
	transform: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	object-fit: contain !important;
	box-shadow: none !important;
	filter: drop-shadow(0 18px 30px rgba(30, 10, 46, .26)) !important;
}
[data-theme="dark"] .hero.vs-hero .vs-media-card-book-image {
	background: transparent !important;
	box-shadow: none !important;
	filter: drop-shadow(0 20px 34px rgba(4, 3, 8, .5)) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO IMAGE FOOTPRINT BALANCING (desktop / tablet ≥768px only).
   Base photo card = 480px, book card = 330px. Bring all four slides to a
   similar visual footprint:
     · Slide 1 (main) + Slide 2 (Tamara)  → 85%  (480 → 408px)
     · Slide 4 (book "Znaj, i ti imaš SJAJ") → 110% (330 → 363px)
   Slide 3 (product) stays the 480px reference. Mobile keeps mobile.css.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-media-card,
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-media-card--photo,
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-media-card--fallback,
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-media-card--founder {
		width: min(100%, 408px) !important;   /* 85% of 480 */
	}
	.hero.vs-hero .vs-slide[data-slide="3"] .vs-media-card--book {
		width: min(100%, 363px) !important;   /* 110% of 330 */
	}
}

/* ════════════════════════════════════════════════════════════════════════
   FIX: gradient-clipped headings were cropping descenders (g j y p q).
   `background-clip:text` paints each glyph only where the element's background
   box reaches; a tight line-height leaves the descenders unpainted so they
   read as "cut off". Give the gradient text a little vertical room. Applies to
   the shared highlight spans (.hi1/.hi2 — used in every section title) and the
   hero slide titles, so it fixes the whole site in one place.
   ════════════════════════════════════════════════════════════════════════ */
.hi1, .hi2 {
	padding-bottom: 0.1em;
}
.section-title {
	line-height: 1.2;
	padding-bottom: 0.08em;
}
.vs-slide-h1, .vs-slide-h2,
.hero.vs-hero .vs-slide-h1,
.hero.vs-hero .vs-slide-h2 {
	line-height: 1.2;
	padding-bottom: 0.1em;
}

/* ════════════════════════════════════════════════════════════════════════
   PREDSTAVE — "Gdje smo sve bili": image + accordion list of venues.
   Native <details> accordion (no JS). First category open by default.
   ════════════════════════════════════════════════════════════════════════ */
.venues-section { position: relative; z-index: 2; padding: 20px 28px 76px; }
.venues-inner {
	max-width: 1180px; margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: 56px; align-items: start;
}
.venues-inner--noimg { grid-template-columns: minmax(0, 1fr); max-width: 840px; }

.venues-media {
	border-radius: var(--rad-lg, 22px); overflow: hidden;
	box-shadow: var(--shadow-lg, 0 22px 48px rgba(30,10,46,.14));
	position: sticky; top: 100px;
}
.venues-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.venues-title { text-align: left; margin: 2px 0 24px; }

.venues-acc { display: flex; flex-direction: column; gap: 14px; }

.venue-item {
	border-radius: var(--rad-md, 16px);
	background: var(--bg2);
	border: 1.5px solid var(--border);
	overflow: hidden;
}
.venue-summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 22px;
	font-family: var(--vs-font-accent); font-weight: 700; font-size: 17px;
	color: var(--text); user-select: none;
	transition: background .2s;
}
.venue-summary::-webkit-details-marker { display: none; }
.venue-summary:hover { background: color-mix(in srgb, var(--bg2) 55%, var(--bg3)); }
.venue-summary::after {
	content: ''; flex: 0 0 auto;
	width: 10px; height: 10px; margin-top: -4px;
	border-right: 2.5px solid var(--text2);
	border-bottom: 2.5px solid var(--text2);
	transform: rotate(45deg);
	transition: transform .3s var(--ease, ease);
}
.venue-item[open] .venue-summary::after { transform: rotate(-135deg); margin-top: 2px; }
.venue-item[open] > .venue-summary { border-bottom: 1.5px solid var(--border); }

.venue-list {
	margin: 0; padding: 14px 26px 20px 42px;
	list-style: disc; color: var(--text2);
}
.venue-list li { margin: 7px 0; font-size: 15.5px; line-height: 1.5; }

@media (min-width: 900px) {
	/* The long primary-school list reads better in two columns. */
	.venue-item[open] .venue-list { columns: 2; column-gap: 36px; }
	.venue-list li { break-inside: avoid; }
}

/* ════════════════════════════════════════════════════════════════════════
   [stupci] shortcode — flow content text into multiple columns.
   ════════════════════════════════════════════════════════════════════════ */
.vs-columns {
	column-count: var(--vs-cols, 2);
	column-gap: var(--vs-col-gap, 40px);
	margin: 22px 0;
}
.vs-columns > :first-child { margin-top: 0; }
.vs-columns > :last-child { margin-bottom: 0; }
/* Keep block elements whole; let paragraphs flow across the columns. */
.vs-columns h1, .vs-columns h2, .vs-columns h3, .vs-columns h4,
.vs-columns h5, .vs-columns h6,
.vs-columns img, .vs-columns figure, .vs-columns table,
.vs-columns blockquote, .vs-columns ul, .vs-columns ol {
	break-inside: avoid;
}