@font-face {
	font-family: 'Inter';
	src: url('Inter.ttf') format('truetype');
	font-weight: 100 900;
	font-display: swap;
}

:root{
	--violet-950: #1a0f2e;
	--violet-900: #2d1e50;
	--violet-800: #3b2667;
	--violet-700: #5b21b6;
	--violet-600: #7c3aed;
	--violet-500: #8b5cf6;
	--violet-400: #a78bfa;
	--violet-300: #c4b5fd;
	--violet-200: #ddd6fe;
	--violet-100: #ede9fe;
	--violet-50: #f5f3ff;
	--pink-400: #f0abfc;
	--pink-300: #f5d0fe;
	--rose-400: #fb7185;
	--indigo-400: #818cf8;
	--cyan-400: #22d3ee;
	--surface-glass: rgba(255,255,255,.06);
	--surface-glass-strong: rgba(255,255,255,.12);
	--surface-glass-card: rgba(255,255,255,.85);
	--border-glass: rgba(255,255,255,.1);
	--border-glass-strong: rgba(255,255,255,.18);
	--text-primary: #fff;
	--text-secondary: rgba(255,255,255,.7);
	--text-muted: rgba(255,255,255,.45);
	--text-dark: #1a1036;
	--text-dark2: #5a4a7a;
	--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-2xl: 40px;
	--shadow-glow-sm: 0 0 20px rgba(139,92,246,.15);
	--shadow-glow-md: 0 0 40px rgba(139,92,246,.2);
	--shadow-glow-lg: 0 0 80px rgba(139,92,246,.25);
	--shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06), 0 16px 48px rgba(0,0,0,.06);
	--shadow-card-hover: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.1);
	--shadow-book: 0 20px 60px rgba(45,30,80,.3), 0 8px 24px rgba(45,30,80,.2);
	--tr: 250ms cubic-bezier(.4,0,.2,1);
	--tr-spring: 500ms cubic-bezier(.34,1.56,.64,1);
}

body{
	font-family: var(--font);
	color: var(--text-secondary);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	background: var(--violet-950);
}

a,
a:hover,
a:visited,
a:active,
a:focus{
	text-decoration: none;
	outline: none;
	color: inherit;
}

*:focus{
	outline: none;
}

img{
	max-width: 100%;
	display: block;
}

.container{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ===== HEADER ===== */

.header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 16px 20px;
}

.header__inner{
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 24px;
	padding: 10px 12px 10px 20px;
	border: 1px solid rgba(255,255,255,.06);
}

.header__logo{
	display: flex;
	align-items: center;
}

.header__logo img{
	height: 36px;
	width: auto;
}

.header__actions{
	display: flex;
	align-items: center;
	gap: 8px;
}

.header__btn{
	display: inline-flex;
	align-items: center;
	padding: 10px 24px;
	font-family: var(--font);
	font-weight: 500;
	font-size: 14px;
	border-radius: 14px;
	text-decoration: none;
	transition: background .2s, transform .2s;
}

.header__btn--primary{
	background: var(--violet-600);
	border: none;
	color: var(--text-primary) !important;
	position: relative;
	overflow: hidden;
}

.header__btn--primary::after{
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	opacity: 0;
	transition: opacity .3s;
}

.header__btn--primary.is-glowing::after{
	opacity: 1;
	animation: btnShine 2s ease-in-out infinite;
}

@keyframes btnShine{
	0%{ left: -100%; }
	60%{ left: 150%; }
	100%{ left: 150%; }
}

.header__btn--primary:hover{
	background: var(--violet-500);
	color: var(--text-primary) !important;
	transform: translateY(-1px);
}

.header__btn--secondary{
	background: transparent;
	border: none;
	color: var(--text-secondary) !important;
}

.header__btn--secondary:hover{
	color: var(--text-primary) !important;
	background: transparent;
}

.header__burger{
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	flex-direction: column;
	gap: 4px;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.header__burger:focus,
.header__burger:focus-visible{
	outline: none;
}

.header__burger span{
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .3s, opacity .3s;
}

.header__burger.is-open span:nth-child(1){
	transform: translateY(6px) rotate(45deg);
}

.header__burger.is-open span:nth-child(2){
	opacity: 0;
}

.header__burger.is-open span:nth-child(3){
	transform: translateY(-6px) rotate(-45deg);
}

.header__burger-wrap{
	display: none;
	position: relative;
	order: -1;
}

.header__dropdown{
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	background: #1a1040;
	border-radius: 12px;
	padding: 8px 0;
	min-width: 160px;
	box-shadow: 0 8px 24px rgba(0,0,0,.4);
	border: 1px solid rgba(255,255,255,.08);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.header__dropdown-arrow{
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	background: #1a1040;
	border-left: 1px solid rgba(255,255,255,.08);
	border-top: 1px solid rgba(255,255,255,.08);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px 0 0 0;
}

.header__dropdown.is-open{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.header__dropdown-link{
	display: block;
	padding: 10px 20px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 500;
	color: rgba(255,255,255,.85);
	text-decoration: none;
}

.header__dropdown-link:hover{
	background: rgba(255,255,255,.06);
	color: #fff;
}

@media (max-width: 500px){
	.header__btn--secondary{
		display: none;
	}

	.header__burger-wrap{
		display: block;
	}

	.header__burger{
		display: flex;
	}

}

/* ===== HERO ===== */

.hero-wrap{
	overflow-x: clip;
	overflow-y: visible;
	position: relative;
	background:
		radial-gradient(ellipse 70% 20% at 50% 0%, rgba(139,92,246,.09) 0%, transparent 50%),
		radial-gradient(ellipse 50% 15% at 85% 30%, rgba(129,140,248,.05) 0%, transparent 50%),
		radial-gradient(ellipse 40% 12% at 15% 25%, rgba(192,132,252,.04) 0%, transparent 50%),
		linear-gradient(180deg, #180e35 0%, var(--violet-950) 30%);
}

.hero{
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 120px 0 80px;
	position: relative;
}

/* --- Ambient glow orbs --- */
.orb{
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
}

.orb--1{
	width: 750px;
	height: 750px;
	background: radial-gradient(circle, rgba(124,58,237,.25) 0%, rgba(124,58,237,.10) 40%, transparent 70%);
	top: -22%;
	left: -8%;
}

.orb--2{
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, rgba(168,85,247,.08) 0%, transparent 70%);
	top: 15%;
	right: -10%;
}

.orb--3{
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(192,132,252,.07) 0%, transparent 70%);
	bottom: -10%;
	left: 30%;
}

.orb--4{
	width: 650px;
	height: 650px;
	background: radial-gradient(circle, rgba(139,92,246,.24) 0%, rgba(91,33,182,.10) 40%, transparent 70%);
	top: -15%;
	right: 5%;
}

.orb--5{
	width: 550px;
	height: 550px;
	background: radial-gradient(circle, rgba(167,139,250,.22) 0%, rgba(124,58,237,.08) 45%, transparent 70%);
	top: -8%;
	left: 25%;
}

/* --- Decorative SVG elements --- */
.hero__decor{
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow-x: clip;
	overflow-y: visible;
}

.hero__star-field{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.decor{
	position: absolute;
}

.decor--star1{
	width: 48px;
	top: 8%;
	left: 6%;
	opacity: .35;
}

.decor--star2{
	width: 32px;
	top: 18%;
	right: 10%;
	opacity: .35;
}

.decor--moon{
	width: 56px;
	top: 6%;
	right: 5%;
	opacity: .35;
}

.decor--heart{
	width: 36px;
	bottom: 18%;
	left: 8%;
}

.decor--cloud{
	width: 100px;
	top: 30%;
	left: 2%;
}

.decor--book{
	width: 48px;
	bottom: 12%;
	right: 7%;
}

.decor--wand{
	width: 44px;
	top: 40%;
	right: 4%;
}

.decor--dots1{
	width: 16px;
	top: 15%;
	left: 18%;
}

.decor--dots2{
	width: 12px;
	bottom: 25%;
	right: 15%;
}

.decor--dots3{
	width: 20px;
	bottom: 8%;
	left: 20%;
}

/* Demo block */
.hero__demo{
	margin: 0 auto 96px;
	text-align: center;
}

.hero__demo--spaced{
	margin: 24px auto 0;
}

.examples__title.examples__title--flow{
	margin-top: 120px;
}

.steps-cta{
	display: flex;
	justify-content: center;
	padding: 24px 20px 0;
}

/* --- Caption card (bottom-right) --- */
.hero__caption{
	position: absolute;
	z-index: 2;
	bottom: -130px;
	right: -50px;
	background: #211545;
	padding: 16px 20px 18px;
	border-radius: 20px;
	max-width: 260px;
	animation: floatUpDown 3s ease-in-out infinite;
	border: none;
	box-shadow:
		0 4px 12px rgba(0,0,0,.35),
		0 12px 40px rgba(0,0,0,.4),
		0 0 30px rgba(139,92,246,.15),
		0 0 60px rgba(91,33,182,.1);
}

.hero__caption::before{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 20px;
	padding: 1.5px;
	background: linear-gradient(160deg, #B08FFA 0%, #E8A8FB 40%, #8D8FF8 70%, #818cf8 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.hero__caption-text{
	font-family: var(--font);
	font-weight: 500;
	font-size: 13px;
	color: rgba(255,255,255,.9);
	margin: 0;
	line-height: 1.45;
	text-align: center;
}

.hero__caption-text strong{
	font-weight: 700;
	color: #fff;
}

.hero__caption-author{
	font-family: var(--font);
	font-weight: 700;
	font-size: 13px;
	color: var(--violet-200);
	margin: 4px 0 0;
}

.hero__rating{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
}

.hero__stars{
	display: flex;
	gap: 2px;
}

.hero__rating-num{
	font-family: var(--font);
	font-weight: 800;
	font-size: 16px;
	color: #fff;
	margin-left: 2px;
}

.hero__arrow-bottom{
	position: absolute;
	z-index: 3;
	top: -44px;
	right: 12px;
	width: 50px;
	height: auto;
	transform: rotate(180deg);
}

/* --- Showcase: photo slider + arrow + book column --- */
.hero__showcase{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}

.hero__compare-wrap{
	position: relative;
	flex: 0 0 auto;
	width: 280px;
}

.hero__compare-wrap .hero__card{
	top: -80px;
	left: -80px;
}

.photo-transform-compare{
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	width: 280px;
	height: 280px;
	cursor: default;
	user-select: none;
	-webkit-user-select: none;
	box-shadow: 0 24px 64px rgba(0,0,0,.5);
}

.photo-transform-after,
.photo-transform-before{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
}

.photo-transform-before{ z-index: 2; }
.photo-transform-after{ z-index: 1; }

.photo-transform-divider{
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgba(255,255,255,.9);
	z-index: 3;
	transform: translateX(-50%);
	pointer-events: none;
}

.photo-transform-handle{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	background: #fff;
	border-radius: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	box-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.hero__showcase-arrow{
	position: relative;
	z-index: 5;
	flex: 0 0 auto;
	width: 80px;
	height: auto;
	transform: rotate(-60deg);
}

.hero__book-column{
	position: relative;
	flex: 0 0 auto;
	width: 400px;
	height: 480px;
}

/* --- Child card --- */
.hero__card{
	position: absolute;
	z-index: 5;
	top: -36px;
	left: -50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: #211545;
	padding: 16px 20px 18px;
	border-radius: 20px;
	max-width: 200px;
	border: none;
	box-shadow:
		0 4px 12px rgba(0,0,0,.35),
		0 12px 40px rgba(0,0,0,.4),
		0 0 30px rgba(139,92,246,.15),
		0 0 60px rgba(91,33,182,.1);
}

.hero__card::before{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 20px;
	padding: 1.5px;
	background: linear-gradient(160deg, #B08FFA 0%, #E8A8FB 40%, #8D8FF8 70%, #818cf8 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.hero__card-photo{
	width: 120px;
	height: 120px;
	border-radius: 14px;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.hero__card-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__card-text{
	font-family: var(--font);
	font-weight: 500;
	font-size: 13px;
	color: rgba(255,255,255,.9);
	margin: 0;
	line-height: 1.45;
	text-align: center;
}

.hero__card-author{
	font-family: var(--font);
	font-weight: 700;
	font-size: 13px;
	color: var(--violet-200);
	margin: 0;
}

.hero__arrow{
	position: absolute;
	z-index: 3;
	bottom: -65px;
	left: 50%;
	transform: translateX(-50%);
	width: 50px;
	height: auto;
}

.hero__card,
.hero__arrow{
	animation: floatUpDown 3s ease-in-out infinite;
}

@media (min-width: 861px){
	.hero__video-wrap .hero__card{
		top: 5px;
		left: -90px;
		animation-name: floatUpDownTilted;
	}
}

.hero__rays{
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	opacity: .45;
	animation: raysRotate 90s linear infinite;
}

@keyframes raysRotate{
	0%{ transform: translate(-50%, -50%) rotate(0deg); }
	100%{ transform: translate(-50%, -50%) rotate(360deg); }
}

.hero__book-cover{
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__book-img{
	position: absolute;
	height: 100%;
	width: auto;
	max-width: none;
	border-radius: 16px;
}

.hero__book-img--1{
	opacity: 1;
	transform: scale(1);
	transition: opacity .5s ease, transform .5s ease;
}

.hero__book-img--2{
	height: 75%;
	opacity: 0;
	transform: scale(.3);
	transition: opacity .5s ease, transform .5s ease;
}

.hero__book-cover.is-open .hero__book-img--1{
	opacity: 0;
	transform: scale(.3);
}

.hero__book-cover.is-open .hero__book-img--2{
	opacity: 1;
	transform: scale(.78);
}

/* --- Book toggle button (bottom-left) --- */
.hero__book-btn{
	position: absolute;
	z-index: 3;
	bottom: -8px;
	left: -4px;
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	font-family: var(--font);
	font-weight: 500;
	font-size: 13px;
	border-radius: 100px;
	border: 1px solid rgba(139,92,246,.3);
	outline: none;
	background: rgba(21,12,40,.55);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	color: var(--text-secondary);
	cursor: pointer;
	gap: 6px;
	transition: background .2s, transform .2s, border-color .2s;
}

.hero__book-btn:focus,
.hero__book-btn:active{
	outline: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

.hero__book-btn:hover{
	background: rgba(21,12,40,.7);
	border-color: rgba(139,92,246,.5);
	transform: translateY(-1px);
}

@keyframes floatUpDown{
	0%, 100%{ transform: translateY(0); }
	50%{ transform: translateY(-8px); }
}

@keyframes floatUpDownTilted{
	0%, 100%{ transform: translateY(0) rotate(3deg); }
	50%{ transform: translateY(-8px) rotate(3deg); }
}

/* --- Age picker --- */
.age-picker-wrap{
	position: relative;
	max-width: 820px;
	margin: 0 auto 64px;
}

.age-picker-orb{
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}

.age-picker-orb--1{
	width: 420px;
	height: 420px;
	background: rgba(192,132,252,.5);
	top: -35%;
	left: -10%;
}

.age-picker-orb--2{
	width: 340px;
	height: 340px;
	background: rgba(236,72,153,.32);
	bottom: -30%;
	right: -8%;
}

.age-picker-orb--3{
	width: 260px;
	height: 260px;
	background: rgba(129,140,248,.32);
	top: 8%;
	right: 12%;
	animation: orbFloat 9s ease-in-out infinite;
}

.age-picker-orb--4{
	width: 320px;
	height: 320px;
	background: rgba(167,139,250,.25);
	top: 45%;
	left: 38%;
	animation: orbFloat 11s ease-in-out infinite reverse;
}

.age-picker-orb--5{
	width: 220px;
	height: 220px;
	background: rgba(244,114,182,.22);
	bottom: 12%;
	left: 22%;
	animation: orbFloat 13s ease-in-out infinite;
}

@keyframes orbFloat{
	0%, 100%{ transform: translate(0, 0) scale(1); }
	50%{ transform: translate(20px, -18px) scale(1.06); }
}

.age-picker-spark{
	position: absolute;
	pointer-events: none;
	z-index: 0;
	animation: sparkTwinkle 4s ease-in-out infinite;
}

.age-picker-spark--1{
	width: 28px; height: 28px;
	top: 14%; right: 18%;
	opacity: .5;
	animation-delay: .2s;
}

.age-picker-spark--2{
	width: 20px; height: 20px;
	top: 62%; left: 8%;
	opacity: .45;
	animation-delay: 1.4s;
}

.age-picker-spark--3{
	width: 24px; height: 24px;
	bottom: 18%; right: 10%;
	opacity: .4;
	animation-delay: .8s;
}

.age-picker-spark--4{
	width: 10px; height: 10px;
	top: 32%; left: 42%;
	opacity: .55;
	animation-delay: 2.1s;
}

.age-picker-spark--5{
	width: 14px; height: 14px;
	bottom: 28%; left: 48%;
	opacity: .5;
	animation-delay: 3s;
}

@keyframes sparkTwinkle{
	0%, 100%{ opacity: var(--spark-o, .5); transform: scale(1); }
	50%{ opacity: .2; transform: scale(.85); }
}

.age-picker{
	background:
		radial-gradient(ellipse 65% 55% at 18% 22%, rgba(192,132,252,.35) 0%, transparent 60%),
		radial-gradient(ellipse 70% 55% at 85% 82%, rgba(236,72,153,.28) 0%, transparent 60%),
		radial-gradient(ellipse 55% 45% at 75% 12%, rgba(129,140,248,.28) 0%, transparent 55%),
		radial-gradient(ellipse 45% 55% at 12% 85%, rgba(167,139,250,.22) 0%, transparent 55%),
		linear-gradient(135deg, #3b0764 0%, #4c1d95 28%, #5b21b6 55%, #6d28d9 80%, #7e22ce 100%);
	border-radius: var(--r-xl);
	padding: 52px 44px;
	position: relative;
	overflow: hidden;
	z-index: 2;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.14),
		inset 0 -1px 0 rgba(0,0,0,.2),
		0 8px 32px rgba(76,29,149,.35),
		0 24px 64px rgba(0,0,0,.25),
		0 0 80px rgba(192,132,252,.12);
	border: 1px solid rgba(255,255,255,.12);
}

.age-picker::after{
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

.age-picker > *:not(.age-picker-orb):not(.age-picker-spark){
	position: relative;
	z-index: 1;
}

.age-picker__title{
	font-family: var(--font);
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 26px);
	color: #fff;
	margin: 0 auto 28px;
	line-height: 1.3;
	text-align: center;
	max-width: 640px;
	letter-spacing: -0.01em;
}

.age-picker__desc{
	font-size: 17px;
	color: rgba(255,255,255,.7);
	margin: 0 0 24px;
	line-height: 1.5;
	text-align: left;
}

.age-picker__triggers{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 36px;
}

.age-picker__trigger{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 12px;
	padding: 8px 14px;
}

.age-picker__trigger svg{
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}

.age-picker__trigger span{
	font-family: var(--font);
	font-weight: 400;
	font-size: 14px;
	color: rgba(255,255,255,.75);
	line-height: 1.3;
	text-align: left;
}

.age-picker__label{
	font-family: var(--font);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	margin: 0 0 20px;
	text-align: left;
}

.age-picker__grid{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.age-picker__item{
	grid-column: span 2;
}

.age-picker__item:nth-child(4){
	grid-column: 2 / span 2;
}

.age-picker__item:nth-child(5){
	grid-column: 4 / span 2;
}

.age-picker__item{
	--card-accent: #c084fc;
	--card-glow: rgba(192,132,252,.5);
	--card-text: #6d28d9;
	--card-rot: 0deg;
	--card-bg: linear-gradient(155deg, #c4b5fd 0%, #a78bfa 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: var(--card-bg);
	border: 4px solid #ffffff;
	border-radius: 22px;
	padding: 22px 12px 18px;
	text-decoration: none;
	transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
	cursor: pointer;
	position: relative;
	transform: rotate(var(--card-rot));
	box-shadow:
		0 4px 0 rgba(40,15,70,.14),
		0 10px 22px rgba(40,15,70,.25),
		0 16px 36px var(--card-glow);
}

/* Per-card candy-color fills */
.age-picker__item:nth-child(1){
	--card-accent: #ec4899;
	--card-glow: rgba(236,72,153,.55);
	--card-text: #be185d;
	--card-rot: -2deg;
	--card-bg: linear-gradient(155deg, #f472b6 0%, #ec4899 100%);
}
.age-picker__item:nth-child(2){
	--card-accent: #f97316;
	--card-glow: rgba(249,115,22,.55);
	--card-text: #9a3412;
	--card-rot: 1.5deg;
	--card-bg: linear-gradient(155deg, #fb923c 0%, #f97316 100%);
}
.age-picker__item:nth-child(3){
	--card-accent: #0ea5e9;
	--card-glow: rgba(14,165,233,.55);
	--card-text: #075985;
	--card-rot: -1.5deg;
	--card-bg: linear-gradient(155deg, #38bdf8 0%, #0ea5e9 100%);
}
.age-picker__item:nth-child(4){
	--card-accent: #10b981;
	--card-glow: rgba(16,185,129,.55);
	--card-text: #065f46;
	--card-rot: 2.5deg;
	--card-bg: linear-gradient(155deg, #34d399 0%, #10b981 100%);
}
.age-picker__item:nth-child(5){
	--card-accent: #8b5cf6;
	--card-glow: rgba(139,92,246,.55);
	--card-text: #5b21b6;
	--card-rot: -1deg;
	--card-bg: linear-gradient(155deg, #a78bfa 0%, #8b5cf6 100%);
}

.age-picker__item.is-pulse{
	animation: agePulse 1s ease-in-out;
}

@keyframes agePulse{
	0%, 100% { transform: rotate(var(--card-rot)) scale(1); }
	45%      { transform: rotate(0deg) scale(1.08); }
}

.age-picker__item:hover{
	transform: rotate(0deg) translateY(-10px) scale(1.05);
	box-shadow:
		0 6px 0 rgba(40,15,70,.14),
		0 16px 32px rgba(40,15,70,.22),
		0 24px 48px var(--card-glow);
}

.age-picker__item:hover .age-picker__icon{
	transform: scale(1.08);
}

.age-picker__item:hover .age-picker__cta{
	background: #ffffff;
	transform: scale(1.06);
	box-shadow: 0 8px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,1);
}

.age-picker__item:active{
	transform: rotate(0deg) translateY(-2px) scale(.97);
	transition-duration: .12s;
}

.age-picker__item:active .age-picker__cta{
	filter: brightness(.9);
	transform: scale(.96);
}

.age-picker__cta{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #ffffff;
	color: var(--card-text);
	font-family: var(--font);
	font-weight: 700;
	font-size: 13px;
	padding: 7px 18px;
	border-radius: 100px;
	letter-spacing: .01em;
	box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,1);
	transition: background .25s, color .25s, transform .2s, filter .2s, box-shadow .25s;
}

.age-picker__cta svg{
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* --- Tap hand hint --- */
.tap-hand{
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%) translateY(24px);
	width: 40px;
	height: 40px;
	opacity: 0;
	pointer-events: none;
	z-index: 5;
}

.tap-hand.is-animating{
	animation: tapBounce 2s ease-in-out forwards;
}

@keyframes tapBounce{
	0%{ opacity: 0; transform: translateX(-50%) translateY(24px); }
	50%{ opacity: 1; transform: translateX(-50%) translateY(-8px); }
	100%{ opacity: 0; transform: translateX(-50%) translateY(24px); }
}

.age-picker__icon{
	width: 88px;
	height: 88px;
	transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.age-picker__icon img,
.age-picker__icon svg{
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

.age-picker__age{
	font-family: var(--font);
	font-weight: 800;
	font-size: 17px;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0,0,0,.2);
}


/* ===== EXAMPLES SECTION ===== */

.examples{
	padding: 0 0 80px;
	text-align: center;
	position: relative;
	transition: opacity .4s, transform .4s;
}

.examples .container{
	max-width: 1440px;
}

.examples__title{
	font-family: var(--font);
	font-weight: 800;
	font-size: 36px;
	color: var(--text-primary);
	text-align: center;
	margin: 0 0 12px;
	line-height: 1.25;
}

.examples__subtitle{
	font-family: var(--font);
	font-size: 18px;
	color: var(--text-secondary);
	text-align: center;
	line-height: 1.65;
	margin: 0 auto 48px;
	max-width: 600px;
}

.examples__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.examples__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: pointer;
}

.examples__book-wrap{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	aspect-ratio: 1/1;
	perspective: 900px;
	transition: transform var(--tr);
}

.examples__book-wrap:hover{
	transform: translateY(-6px);
}

.examples__book-inner{
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 3px 6px 6px 3px;
	overflow: hidden;
	transform: rotateY(-4deg);
	transform-origin: left center;
	transition: transform var(--tr), box-shadow var(--tr);
	box-shadow:
		-8px 4px 12px rgba(0,0,0,.1),
		4px 6px 18px rgba(0,0,0,.12),
		2px 14px 32px rgba(0,0,0,.08);
}

.examples__book-wrap:hover .examples__book-inner{
	transform: rotateY(-2deg);
	box-shadow:
		-8px 6px 14px rgba(0,0,0,.14),
		6px 10px 24px rgba(0,0,0,.16),
		2px 20px 40px rgba(0,0,0,.1);
}

/* Корешок книги */
.examples__book-inner::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 28px;
	z-index: 2;
	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.3) 0%,
			rgba(0,0,0,.15) 20%,
			rgba(255,255,255,.12) 44%,
			rgba(255,255,255,.04) 58%,
			rgba(0,0,0,.1) 80%,
			transparent 100%
		);
	border-right: 1px solid rgba(255,255,255,.06);
}

/* Блик на обложке */
.examples__book-inner::after{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		linear-gradient(
			115deg,
			rgba(255,255,255,.12) 0%,
			transparent 40%,
			transparent 70%,
			rgba(0,0,0,.08) 100%
		);
	pointer-events: none;
}

.examples__book-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.examples__meta{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
	flex: 1;
}

.examples__meta-name{
	font-family: var(--font);
	font-weight: 400;
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.4;
}

.examples__meta-theme{
	font-family: var(--font);
	font-size: 14px;
	color: var(--text-muted);
}

.examples__btn{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font);
	font-weight: 500;
	font-size: 13px;
	margin-top: auto;
	color: var(--violet-300);
	background: transparent;
	border: 1px solid var(--border-glass-strong);
	padding: 8px 20px;
	border-radius: 12px;
	cursor: pointer;
	transition: color .2s, border-color .2s, background .2s;
	text-decoration: none;
}

.examples__btn:hover{
	color: var(--text-primary);
	border-color: var(--violet-400);
	background: rgba(139,92,246,.1);
}

/* PhotoSwipe: кнопка «Создать сказку» */
.pswp-cta-wrap{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
}

.pswp-cta-btn{
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--violet-600);
	padding: 8px 20px;
	border-radius: 12px;
	cursor: pointer;
	transition: background .2s;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}

.pswp-cta-btn::after{
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	animation: btnShine 2s ease-in-out infinite;
}

.pswp-cta-btn:hover{
	background: var(--violet-500);
}

/* ===== STEPS (How it works) ===== */

.steps{
	padding: 24px 0 80px;
	text-align: center;
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
}

.steps__orb{
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
}

.steps__orb--1{
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(124,58,237,.38) 0%, rgba(168,85,247,.12) 50%, transparent 70%);
	top: -15%;
	left: -8%;
}

.steps__orb--2{
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(236,72,153,.3) 0%, rgba(192,132,252,.14) 40%, transparent 70%);
	bottom: -10%;
	right: -5%;
}

.steps__orb--3{
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, rgba(129,140,248,.32) 0%, rgba(99,102,241,.1) 50%, transparent 70%);
	top: 30%;
	left: 45%;
}

.steps__title{
	font-family: var(--font);
	font-weight: 800;
	font-size: 36px;
	color: var(--text-primary);
	margin: 0 0 16px;
	line-height: 1.25;
}

.steps__subtitle{
	font-family: var(--font);
	font-size: 18px;
	color: rgba(255,255,255,.68);
	line-height: 1.65;
	margin: 0 auto 56px;
	max-width: 600px;
	font-weight: 400;
}

.steps__grid{
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
	gap: 0;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;
	align-items: start;
}

.steps__arrow{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	align-self: start;
	margin-top: 120px;
}

.steps__arrow img{
	width: 44px;
	opacity: .7;
}

.steps__arrow--down{
	transform: rotate(-15deg);
}

.steps__arrow--up{
	transform: rotate(15deg) scaleY(-1);
}

.steps__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.steps__item--down{
	margin-top: 100px;
}

/* Visual block */
.steps__visual{
	position: relative;
	width: 240px;
	height: 240px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.steps__spark{
	position: absolute;
	inset: -10px;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	opacity: .3;
}

/* Step 1: иконка анкеты */
.steps__img-placeholder{
	position: relative;
	z-index: 1;
	width: 130px;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.steps__img-placeholder svg{
	width: 100%;
	height: 100%;
}

/* Step 2: upload — два кружка рядом */
.steps__img-upload{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 130px;
}

.steps__upload-circle{
	width: 110px;
	height: 110px;
	border-radius: 50%;
	border: 2.5px solid var(--violet-400);
	overflow: hidden;
	position: relative;
	z-index: 2;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.steps__upload-photo{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.steps__upload-action{
	width: 88px;
	height: 88px;
	margin-left: -22px;
	position: relative;
	z-index: 1;
}

.steps__upload-action svg{
	width: 100%;
	height: 100%;
}

.steps__upload-hand{
	position: absolute;
	bottom: -8px;
	right: 0;
	width: 36px;
	height: 36px;
	z-index: 3;
}

/* Step 3 & 4: book images */
.steps__img-book{
	position: relative;
	z-index: 1;
	width: 200px;
}

.steps__item:last-child .steps__img-book{
	width: 280px;
}

.steps__img-book img{
	width: 100%;
	display: block;
}

/* Label row: number + text */
.steps__label{
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}

.steps__num{
	width: 34px;
	height: 34px;
	min-width: 34px;
	border-radius: 50%;
	background: var(--violet-600);
	color: #fff;
	font-family: var(--font);
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.steps__text{
	font-family: var(--font);
	font-weight: 500;
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.4;
	margin: 0;
}

@media (min-width: 861px) and (max-width: 1300px){
	.steps__visual{
		width: 190px;
		height: 190px;
		margin-bottom: 20px;
	}

	.steps__img-placeholder{
		width: 104px;
		height: 104px;
	}

	.steps__img-upload{
		width: 160px;
		height: 104px;
	}

	.steps__upload-circle{
		width: 88px;
		height: 88px;
	}

	.steps__upload-action{
		width: 70px;
		height: 70px;
		margin-left: -18px;
	}

	.steps__upload-hand{
		width: 30px;
		height: 30px;
	}

	.steps__img-book{
		width: 160px;
	}

	.steps__item:last-child .steps__img-book{
		width: 224px;
	}

	.steps__arrow img{
		width: 36px;
	}

	.steps__arrow{
		margin-top: 95px;
	}

	.steps__item--down{
		margin-top: 80px;
	}

	.hero__showcase{
		gap: 32px;
		max-width: 860px;
	}

	.hero__compare-wrap{
		width: 220px;
	}

	.photo-transform-compare{
		width: 220px;
		height: 220px;
	}

	.hero__compare-wrap .hero__card{
		top: -110px;
		left: -60px;
	}

	.hero__showcase-arrow{
		width: 64px;
	}

	.hero__book-column{
		width: 320px;
		height: 380px;
	}

	.hero__caption{
		bottom: -110px;
		right: -32px;
		max-width: 220px;
	}
}

/* --- Stories (about us) --- */
.stories{
	padding: 72px 0 80px;
	position: relative;
}

.stories__title{
	font-family: var(--font);
	font-weight: 800;
	font-size: 36px;
	color: var(--text-primary);
	text-align: center;
	margin: 0 0 16px;
	line-height: 1.25;
}

.stories__subtitle{
	font-family: var(--font);
	font-size: 18px;
	color: rgba(255,255,255,.68);
	line-height: 1.65;
	margin: 0 auto 56px;
	max-width: 600px;
	text-align: center;
	font-weight: 400;
}

.stories__grid{
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	gap: 16px;
}

.stories__col{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.stories__card{
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .3s, box-shadow .3s;
	background: #1a1025;
}

.stories__card:hover{
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(124,58,237,.25);
}

.stories__sizer{
	width: 100%;
	padding-top: 100%;
}

.stories__card--9x16 .stories__sizer{
	padding-top: 177.78%;
}

.stories__card--square .stories__sizer{
	padding-top: 85%;
}

.stories__video,
.stories__photo{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stories__media{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.stories__media img,
.stories__media video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.stories__overlay{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 48px 16px 16px;
	background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 100%);
	z-index: 1;
}

.stories__author{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.stories__avatar{
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,.5);
}

.stories__name{
	font-family: var(--font);
	font-weight: 600;
	font-size: 13px;
	color: #fff;
}

.stories__desc{
	font-family: var(--font);
	font-size: 13px;
	color: rgba(255,255,255,.85);
	line-height: 1.4;
	margin: 0;
}

/* --- Story fullscreen modal --- */
.story-modal{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.85);
	z-index: 10000;
	align-items: center;
	justify-content: center;
}

.story-modal.is-open{
	display: flex;
}

.story-modal__cta{
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--violet-600);
	padding: 8px 20px;
	border-radius: 12px;
	cursor: pointer;
	transition: background .2s;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	margin-top: 12px;
	align-self: center;
}

.story-modal__cta::after{
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	animation: btnShine 2s ease-in-out infinite;
}

.story-modal__cta:hover{
	background: var(--violet-500);
}

.story-modal__close{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, border-color .2s;
	z-index: 10;
	padding: 0;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.story-modal__close:hover{
	background: rgba(0,0,0,.55);
	border-color: rgba(255,255,255,.3);
}

.story-modal__close:focus{
	outline: none;
}

.story-modal__card{
	position: relative;
	height: calc(100% - 80px);
	aspect-ratio: 9 / 16;
	max-width: calc(100% - 40px);
	border-radius: 16px;
	overflow: hidden;
	background: #000;
}

.story-modal__card--square{
	aspect-ratio: 1 / 1;
	height: auto;
	width: calc(100% - 40px);
	max-width: 600px;
	max-height: calc(100% - 80px);
}

.story-modal__video,
.story-modal__image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.story-modal__video.is-hidden,
.story-modal__image.is-hidden{
	display: none;
}

.story-modal__overlay{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 48px 16px 16px;
	background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 100%);
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.story-modal__author{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.story-modal__avatar{
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,.5);
}

.story-modal__name{
	font-family: var(--font);
	font-weight: 600;
	font-size: 14px;
	color: #fff;
}

.story-modal__desc{
	font-family: var(--font);
	font-size: 14px;
	color: rgba(255,255,255,.85);
	line-height: 1.4;
	margin: 0;
}

/* --- Offer --- */
.hero > .container{
	max-width: 1280px;
}

.hero__main{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	width: 100%;
	margin: 0 0 72px;
	position: relative;
	z-index: 1;
}

.hero__offer{
	text-align: left;
	max-width: 560px;
	align-self: center;
}

@media (min-width: 861px) and (max-width: 1200px){
	.hero__offer{
		padding-right: 80px;
	}
}

.hero__trust{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 32px;
	flex-wrap: wrap;
}

.hero__trust-stars{
	display: inline-flex;
	gap: 2px;
}

.hero__trust-text{
	font-family: var(--font);
	font-size: 14px;
	color: rgba(255,255,255,.72);
	font-weight: 500;
}

.hero__trust-text b{
	color: #fff;
	font-weight: 800;
}

.hero__cta{
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 32px;
	padding: 22px 44px;
	font-family: var(--font);
	font-weight: 600;
	font-size: 18px;
	color: #fff !important;
	text-decoration: none;
	background: linear-gradient(135deg, #7c3aed 0%, #a855f7 55%, #8b5cf6 100%);
	border: none;
	border-radius: 24px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	box-shadow:
		0 12px 36px rgba(124,58,237,.38),
		0 0 0 1px rgba(255,255,255,.05) inset;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.hero__cta::after{
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	animation: btnShine 2s ease-in-out infinite;
	pointer-events: none;
}

.hero__cta > *{
	position: relative;
	z-index: 1;
}

.hero__cta:hover{
	transform: translateY(-2px);
	background: linear-gradient(135deg, #8b5cf6 0%, #b97cfd 55%, #9b6dff 100%);
	box-shadow:
		0 14px 40px rgba(124,58,237,.5),
		0 0 0 1px rgba(255,255,255,.08) inset;
}

.hero__cta-arr{
	display: inline-block;
	font-size: 22px;
	line-height: 1;
	animation: heroArrSwing 1.4s ease-in-out infinite;
}

@keyframes heroArrSwing{
	0%, 100%{ transform: translateX(0); }
	50%{ transform: translateX(6px); }
}

.hero__video-wrap{
	position: relative;
	width: 100%;
	max-width: 520px;
	justify-self: end;
}

.hero__video{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #000;
	border-radius: 28px;
}

@media (min-width: 861px){
	.hero__video{
		border-radius: 50px;
		transform: rotate(-3deg);
	}
}

.hero__video-media{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__title{
	font-family: var(--font);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 44px);
	color: rgb(255, 255, 255);
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0 0 24px;
}

.hero__title span{
	background: linear-gradient(135deg, #B08FFA 0%, #E8A8FB 35%, #E8A8FB 55%, #8D8FF8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero__subtitle{
	font-family: var(--font);
	font-size: 18px;
	color: rgba(255,255,255,.68);
	line-height: 1.65;
	margin: 0 auto;
	max-width: 600px;
	font-weight: 400;
}

/* Pill */
.hero__pill{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.07);
	color: var(--violet-300);
	font-family: var(--font);
	font-weight: 500;
	font-size: 14px;
	padding: 8px 20px;
	border-radius: 100px;
	margin: 72px 0 28px;
}

.hero__pill-dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--violet-500);
	animation: pillDotPulse 2s ease-in-out infinite;
}

@keyframes pillDotPulse{
	0%, 100%{ opacity: 1; transform: scale(1); }
	50%{ opacity: .5; transform: scale(.7); }
}


/* ===== OVERLAY ===== */

.overlay{
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--violet-950);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

.overlay.is-visible{
	opacity: 1;
	pointer-events: all;
}

.overlay.is-visible.is-dim{
	opacity: .65;
}

/* ===== TRANSITION STATES ===== */

.header.is-hidden{
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

.header{
	transition: transform .5s ease, opacity .5s ease;
}

.hero-wrap.is-fading,
.hero.is-fading,
.examples.is-fading,
.lp-footer.is-fading{
	opacity: 0;
	transform: translateY(-15px);
	pointer-events: none;
}

.hero{
	transition: opacity .45s ease, transform .45s ease;
}

.hero-wrap.is-gone,
.hero.is-gone,
.examples.is-gone,
.lp-footer.is-gone{
	display: none;
}

/* iOS keyboard proxy — keeps keyboard open during step transitions */
.quiz__focus-proxy{
	position: fixed;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	border: 0;
	padding: 0;
	font-size: 16px;
}

/* ===== QUIZ ===== */

.quiz{
	display: none;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(ellipse 60% 40% at 50% 15%, rgba(139,92,246,.1) 0%, transparent 50%),
		radial-gradient(ellipse 70% 40% at 50% 90%, rgba(99,102,241,.12) 0%, transparent 50%),
		linear-gradient(180deg, var(--violet-950) 0%, #12102e 100%);
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

.quiz.is-active{
	display: flex;
	animation: quizFadeIn .5s ease forwards;
}
.quiz__logo{
	position: absolute;
	top: 20px;
	left: 24px;
	z-index: 10;
}
.quiz__logo img{
	height: 32px;
	width: auto;
	display: block;
}

@keyframes quizFadeIn{
	0%{ opacity: 0; transform: translateY(20px); }
	100%{ opacity: 1; transform: translateY(0); }
}

.quiz__step{
	text-align: center;
	width: 100%;
	transition: opacity .4s ease, transform .4s ease;
}

.quiz__step.is-fading-out{
	opacity: 0;
	transform: translateY(-15px);
}

.quiz__step.is-entering{
	animation: stepEnter .5s ease forwards;
}

@keyframes stepEnter{
	0%{ opacity: 0; transform: translateY(20px); }
	100%{ opacity: 1; transform: translateY(0); }
}

.quiz__title{
	font-family: var(--font);
	font-weight: 800;
	font-size: 38px;
	color: var(--text-primary);
	margin: 0 0 12px;
	line-height: 1.15;
}

.quiz__subtitle{
	font-size: 17px;
	color: var(--text-secondary);
	margin: 0 auto 24px;
	line-height: 1.5;
	max-width: 640px;
}

.quiz__picker{
	background: rgba(255,255,255,.03);
	backdrop-filter: blur(20px) saturate(1.2);
	-webkit-backdrop-filter: blur(20px) saturate(1.2);
	border-radius: var(--r-xl);
	padding: 52px 44px;
	max-width: 820px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.1),
		0 8px 32px rgba(0,0,0,.25),
		0 24px 64px rgba(0,0,0,.15);
	border: 1px solid rgba(255,255,255,.1);
	overflow: hidden;
}

/* Orb glow effects inside quiz picker */
.quiz__picker::before,
.quiz__picker::after{
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}

.quiz__picker::before{
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(168,85,247,.30) 0%, rgba(124,58,237,.12) 40%, transparent 70%);
	top: -30%;
	left: -25%;
}

.quiz__picker::after{
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, rgba(236,72,153,.20) 0%, rgba(192,132,252,.10) 40%, transparent 70%);
	bottom: -25%;
	right: -20%;
}

/* Ensure picker content sits above pseudo-orbs */
.quiz__picker > *{
	position: relative;
	z-index: 1;
}

/* --- Quiz triggers (inside quiz__picker) --- */
.quiz__triggers{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
}

.quiz__trigger{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,.08);
	border: 1px solid var(--border-glass);
	border-radius: 14px;
	padding: 10px 18px;
}

.quiz__trigger svg{
	flex-shrink: 0;
}

.quiz__trigger span{
	font-family: var(--font);
	font-weight: 400;
	font-size: 14px;
	color: rgba(255,255,255,.75);
	line-height: 1.3;
}

/* --- Quiz progress checkpoints (inside quiz__picker) --- */
.quiz__progress{
	margin: 48px -40px -48px;
	padding: 20px 40px 22px;
	background: rgba(0,0,0,.12);
	border-radius: 0 0 24px 24px;
	border-top: 1px solid rgba(255,255,255,.06);
}

.quiz__progress-dots{
	display: flex;
	align-items: center;
	justify-content: center;
}

.quiz__dot{
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--border-glass);
	background: var(--surface-glass);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all .35s ease;
}

.quiz__dot-num{
	font-family: var(--font);
	font-weight: 800;
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quiz__dot-num svg{
	width: 16px;
	height: 16px;
}

.quiz__dot--done{
	background: var(--violet-400);
	border-color: var(--violet-400);
}

.quiz__dot--done .quiz__dot-num{
	color: var(--text-dark);
}

.quiz__dot--active{
	border-color: var(--violet-400);
	background: rgba(192,132,252,.2);
	box-shadow: 0 0 0 5px rgba(192,132,252,.12);
}

.quiz__dot--active .quiz__dot-num{
	color: var(--text-primary);
}

.quiz__dot-line{
	flex: 1;
	height: 2px;
	background: rgba(255,255,255,.15);
	max-width: 52px;
	transition: background .35s ease;
}

.quiz__dot-line--done{
	background: var(--violet-400);
}

.quiz__dot--final{
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,.06);
	border: 2px dashed var(--border-glass);
	color: var(--text-muted);
}

.quiz__dot--final .quiz__dot-num svg{
	width: 20px;
	height: 20px;
}

.quiz__dot--final.quiz__dot--active{
	border-style: solid;
	border-color: var(--violet-400);
	background: rgba(192,132,252,.2);
	color: var(--text-primary);
}

.quiz__dot--final.quiz__dot--done{
	border-style: solid;
	background: var(--violet-400);
	border-color: var(--violet-400);
	color: var(--text-dark);
}

.quiz__progress-info{
	text-align: center;
	margin-top: 18px;
}

.quiz__progress-title{
	font-family: var(--font);
	font-weight: 800;
	font-size: 17px;
	color: var(--text-primary);
	margin: 0 0 4px;
	line-height: 1.3;
}

.quiz__progress-sub{
	font-family: var(--font);
	font-weight: 400;
	font-size: 14px;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.4;
}

.quiz__progress-bar-wrap{
	display: none;
}

.quiz__picker-label{
	font-family: var(--font);
	font-weight: 700;
	font-size: 18px;
	color: var(--text-primary);
	margin: 0 0 20px;
	text-align: left;
}

.quiz__picker-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.quiz__picker-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	background: var(--surface-glass);
	border: 2px solid var(--border-glass);
	border-radius: 16px;
	padding: 28px 16px 24px;
	cursor: pointer;
	transition: background .3s, border-color .3s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}

.quiz__picker-item:hover{
	background: rgba(255,255,255,.1);
	border-color: rgba(167,139,250,.45);
	transform: translateY(-5px) scale(1.05);
	box-shadow: 0 0 24px rgba(139,92,246,.2);
}

.quiz__picker-item.is-selected{
	background: rgba(192,132,252,.18);
	border-color: rgba(192,132,252,.45);
	box-shadow: 0 0 20px rgba(192,132,252,.15);
	transition: none;
}

/* --- Step nav (back + restart) --- */
.quiz__step-nav{
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}
.quiz__nav-btn{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--surface-glass);
	border: 1px solid var(--border-glass);
	outline: none;
	border-radius: 10px;
	font-family: var(--font);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 10px 18px;
	box-shadow: var(--shadow-card);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: box-shadow .2s, color .2s, background .2s;
	-webkit-tap-highlight-color: transparent;
}
.quiz__nav-btn:hover{
	box-shadow: 0 4px 14px rgba(60,20,120,.4);
	color: var(--text-secondary);
	background: var(--surface-glass-strong);
}
.quiz__nav-btn:focus,
.quiz__nav-btn:active{
	outline: none;
	box-shadow: none;
}

/* --- Restart modal --- */
.quiz__modal{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15,8,40,.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
}
.quiz__modal.is-visible{
	opacity: 1;
	pointer-events: auto;
}
.quiz__modal-box{
	background: rgba(40,25,90,.9);
	backdrop-filter: blur(28px) saturate(1.3);
	-webkit-backdrop-filter: blur(28px) saturate(1.3);
	border-radius: 20px;
	padding: 32px 32px 28px;
	max-width: 340px;
	width: 90%;
	text-align: center;
	box-shadow: var(--shadow-card);
	transform: scale(.92);
	transition: transform .25s;
	border: 1px solid var(--border-glass);
}
.quiz__modal.is-visible .quiz__modal-box{
	transform: scale(1);
}
.quiz__modal-icon{
	width: 48px;
	height: 48px;
	margin: 0 auto 14px;
}
.quiz__modal-icon svg{
	width: 100%;
	height: 100%;
}
.quiz__modal-title{
	font-family: var(--font);
	font-weight: 700;
	font-size: 18px;
	color: var(--text-primary);
	margin: 0 0 8px;
	line-height: 1.3;
}
.quiz__modal-text{
	font-family: var(--font);
	font-weight: 400;
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0 0 24px;
	line-height: 1.5;
}
.quiz__modal-btns{
	display: flex;
	gap: 10px;
}
.quiz__modal-btn{
	flex: 1;
	padding: 12px 20px;
	border-radius: 12px;
	border: none;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--font);
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s, transform .15s;
}
.quiz__modal-btn:focus,
.quiz__modal-btn:focus-visible,
.quiz__modal-btn:active{
	outline: none;
	box-shadow: none;
}
.quiz__modal-btn--cancel{
	background: rgba(255,255,255,.1);
	color: var(--text-secondary);
}
.quiz__modal-btn--cancel:hover{
	background: rgba(255,255,255,.18);
}
.quiz__modal-btn--confirm{
	background: var(--violet-600);
	color: var(--text-primary);
}
.quiz__modal-btn--confirm:hover{
	background: var(--violet-700);
	transform: translateY(-1px);
}

.quiz__picker-icon{
	width: 88px;
	height: 88px;
}

.quiz__picker-icon svg,
.quiz__picker-icon img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

.quiz__picker-text{
	font-family: var(--font);
	font-weight: 700;
	font-size: 17px;
	color: var(--text-primary);
	text-align: center;
}

/* --- Quiz checklist --- */
.quiz__checklist{
	list-style: none;
	margin: 0 auto 48px;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.quiz__check-item{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font);
	font-weight: 400;
	font-size: 14px;
	color: rgba(255,255,255,.75);
	line-height: 1.3;
}

.quiz__check-icon{
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* --- Quiz input block (step 4) --- */
.quiz__textarea{
	width: 100%;
	min-height: 120px;
	padding: 18px 22px;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	background: var(--surface-glass);
	border: 2px solid var(--border-glass);
	border-radius: 16px;
	resize: vertical;
	transition: border-color .3s, background .3s, box-shadow .3s;
	box-sizing: border-box;
}

.quiz__textarea::placeholder{
	color: var(--text-muted);
}

.quiz__textarea:focus,
.quiz__textarea.has-text{
	outline: none;
	background: rgba(255,255,255,.12);
	border-color: rgba(192,132,252,.5);
	box-shadow: 0 0 0 4px rgba(192,132,252,.1);
	color: var(--text-primary);
}

.quiz__hints-label{
	font-family: var(--font);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-secondary);
	margin: 20px 0 12px;
	text-align: left;
}

.quiz__hints{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 40px;
}

.quiz__hint{
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-family: var(--font);
	font-weight: 600;
	font-size: 14px;
	color: var(--text-primary);
	background: var(--surface-glass);
	border: 1.5px solid var(--border-glass);
	border-radius: 20px;
	cursor: pointer;
	transition: background .3s, border-color .3s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
	user-select: none;
}

.quiz__hint:hover{
	background: rgba(255,255,255,.1);
	border-color: rgba(167,139,250,.45);
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 0 20px rgba(139,92,246,.18);
}

.quiz__hint.is-selected{
	background: var(--violet-400);
	color: var(--text-dark);
	border-color: var(--violet-400);
}

.quiz__next-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 56px;
	margin-top: 16px;
	font-family: var(--font);
	font-weight: 700;
	font-size: 17px;
	color: var(--text-primary);
	background: linear-gradient(135deg, var(--violet-700) 0%, var(--violet-600) 50%, var(--violet-500) 100%);
	border: none;
	outline: none;
	border-radius: 14px;
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 4px 12px rgba(124,58,237,.2);
}

.quiz__next-btn:focus{
	outline: none;
}

.quiz__next-btn:hover{
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(124,58,237,.3);
}

.quiz__next-btn .btn-arrow{
	display: inline-block;
	animation: arrowBounce 1.2s ease-in-out infinite;
}

@keyframes arrowBounce{
	0%, 100%{ transform: translateX(0); }
	50%{ transform: translateX(6px); }
}

.quiz__skip-btn{
	display: block;
	margin: 14px auto 0;
	background: none;
	border: none;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	padding: 6px 12px;
	transition: color .2s;
}

.quiz__skip-btn:hover{
	color: var(--text-secondary);
}

/* --- Name step (step 4) --- */
.quiz__hero-name{
	margin-bottom: 8px;
}

.quiz__hero-name svg{
	width: 110px;
	height: auto;
}

.quiz__name-input-wrap{
	position: relative;
	margin-bottom: 24px;
}

.quiz__name-input-icon{
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	opacity: .5;
	pointer-events: none;
}

.quiz__name-input{
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px 16px 52px;
	font-family: var(--font);
	font-weight: 600;
	font-size: 17px;
	color: var(--text-primary);
	background: var(--surface-glass);
	border: 2px solid var(--border-glass);
	border-radius: 16px;
	outline: none;
	transition: border-color .2s, background .2s;
}

.quiz__name-input::placeholder{
	color: var(--text-muted);
	font-weight: 400;
}

.quiz__name-input:focus{
	border-color: rgba(192,132,252,.5);
	background: rgba(255,255,255,.12);
}

.quiz__name-tips{
	list-style: none;
	padding: 0;
	margin: 16px 0 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.quiz__name-tip{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.4;
	text-align: left;
}

.quiz__name-tip svg{
	flex-shrink: 0;
}

.quiz__next-btn:disabled{
	opacity: .35;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.quiz__next-btn:disabled:hover{
	transform: none;
	box-shadow: none;
}

/* --- Photo trust block (step 9) --- */
.photo-trust{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding: 16px 20px;
	border-radius: 14px;
	background: rgba(168,85,247,0.06);
	border: 1px solid rgba(168,85,247,0.15);
}
.photo-trust__icon{
	flex-shrink: 0;
}
.photo-trust__content{
	text-align: left;
}
.photo-trust__title{
	font-size: 14px;
	font-weight: 700;
	color: rgba(255,255,255,.95);
	margin-bottom: 4px;
}
.photo-trust__text{
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255,255,255,.55);
}

/* --- Hero balloons (step 2) --- */
.quiz__hero-age-detail{
	display: flex;
	justify-content: center;
	margin: 0 auto 20px;
}
.quiz__hero-age-detail svg{
	width: 100px;
	height: auto;
	animation: ageDetailFloat 3s ease-in-out infinite;
}
@keyframes ageDetailFloat{
	0%, 100%{ transform: translateY(0); }
	50%{ transform: translateY(-10px); }
}
.quiz__picker-grid--age-detail{
	grid-template-columns: repeat(2, 1fr);
}

.quiz__hero-balloons{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 12px;
	margin: 0 auto 20px;
	height: 110px;
}

.quiz__balloon{
	width: 52px;
	height: auto;
}

.quiz__balloon--blue{
	animation: balloonFloat1 3.2s ease-in-out infinite;
}

.quiz__balloon--pink{
	animation: balloonFloat2 3.2s ease-in-out infinite;
}

@keyframes balloonFloat1{
	0%, 100%{ transform: translateY(0); }
	50%{ transform: translateY(-14px); }
}

@keyframes balloonFloat2{
	0%, 100%{ transform: translateY(-14px); }
	50%{ transform: translateY(0); }
}

/* --- Hearts illustration (step 4) --- */
.quiz__hero-hearts{
	position: relative;
	width: 180px;
	height: 100px;
	margin: 0 auto 16px;
}

.quiz__heart{
	position: absolute;
}

.quiz__heart--1{
	width: 40px;
	left: 50%; top: 20%;
	transform: translateX(-50%);
	animation: heartFloat 3s ease-in-out infinite;
}

.quiz__heart--2{
	width: 24px;
	left: 10%; top: 10%;
	animation: heartFloat 3.4s ease-in-out infinite .5s;
}

.quiz__heart--3{
	width: 20px;
	right: 8%; top: 5%;
	animation: heartFloat 2.8s ease-in-out infinite 1s;
}

.quiz__heart--4{
	width: 16px;
	left: 25%; top: 55%;
	animation: heartFloat 3.6s ease-in-out infinite .3s;
}

.quiz__heart--5{
	width: 28px;
	right: 15%; top: 45%;
	animation: heartFloat 3.2s ease-in-out infinite .8s;
}

.quiz__heart--6{
	width: 14px;
	left: 5%; top: 60%;
	animation: heartFloat 3s ease-in-out infinite 1.4s;
}

.quiz__heart--7{
	width: 18px;
	right: 2%; top: 65%;
	animation: heartFloat 3.5s ease-in-out infinite 0.2s;
}

@keyframes heartFloat{
	0%, 100%{ transform: translateY(0) scale(1); opacity: .85; }
	50%{ transform: translateY(-12px) scale(1.1); opacity: 1; }
}

/* --- Shield + sword (step 5) --- */
.quiz__hero-shield{
	width: 120px;
	margin: 0 auto 16px;
}

.quiz__hero-shield svg{
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.quiz__shield-body{
	transform-origin: 60px 50px;
	animation: shieldWobble 2.8s ease-in-out infinite;
}

.quiz__sword-swing{
	transform-origin: 90px 68px;
	animation: swordHit 2.8s ease-in-out infinite;
}

.quiz__shield-sparks{
	opacity: 0;
	animation: sparksFlash 2.8s ease-in-out infinite;
}

@keyframes shieldWobble{
	0%, 100%{ transform: rotate(0deg); }
	35%{ transform: rotate(0deg); }
	42%{ transform: rotate(-6deg); }
	50%{ transform: rotate(2deg); }
	58%{ transform: rotate(-1deg); }
	65%{ transform: rotate(0deg); }
}

@keyframes swordHit{
	0%, 30%{ transform: rotate(-45deg) translate(10px, -10px); }
	40%{ transform: rotate(0deg) translate(0, 0); }
	45%{ transform: rotate(5deg) translate(-2px, 2px); }
	55%{ transform: rotate(-8deg) translate(4px, -3px); }
	65%{ transform: rotate(-45deg) translate(10px, -10px); }
	100%{ transform: rotate(-45deg) translate(10px, -10px); }
}

@keyframes sparksFlash{
	0%, 38%{ opacity: 0; transform: scale(.5); }
	42%{ opacity: 1; transform: scale(1.2); }
	50%{ opacity: .8; transform: scale(1); }
	60%{ opacity: 0; transform: scale(.5); }
	100%{ opacity: 0; }
}

/* --- Lesson book (step 6) --- */
.quiz__hero-lesson{
	width: 130px;
	margin: 0 auto 16px;
}

.quiz__hero-lesson svg{
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.quiz__book-left{
	transform-origin: 70px 60px;
	animation: bookPageLeft 3.5s ease-in-out infinite;
}

.quiz__book-right{
	transform-origin: 70px 60px;
	animation: bookPageRight 3.5s ease-in-out infinite;
}

.quiz__lesson-star{
	transform-origin: 70px 16px;
	animation: lessonStarFloat 3.5s ease-in-out infinite;
}

.quiz__lesson-spark1{ animation: lessonSparkle 3.5s ease-in-out infinite .2s; }
.quiz__lesson-spark2{ animation: lessonSparkle 3.5s ease-in-out infinite .6s; }
.quiz__lesson-spark3{ animation: lessonSparkle 3.5s ease-in-out infinite 1s; }
.quiz__lesson-spark4{ animation: lessonSparkle 3.5s ease-in-out infinite 1.4s; }

@keyframes bookPageLeft{
	0%, 100%{ transform: rotateY(0deg); }
	50%{ transform: rotateY(-8deg); }
}

@keyframes bookPageRight{
	0%, 100%{ transform: rotateY(0deg); }
	50%{ transform: rotateY(8deg); }
}

@keyframes lessonStarFloat{
	0%, 100%{ transform: translateY(0) scale(1); opacity: .9; }
	50%{ transform: translateY(-10px) scale(1.15); opacity: 1; }
}

@keyframes lessonSparkle{
	0%, 100%{ opacity: .8; transform: scale(1); }
	50%{ opacity: .2; transform: scale(.5); }
}

/* --- Hero eye (animated) --- */
.quiz__hero-eye{
	width: 140px;
	margin: 0 auto 24px;
	animation: eyeBlink 3s ease-in-out infinite;
	transform-origin: center 38px;
}

.quiz__hero-eye svg{
	width: 100%;
	height: auto;
	display: block;
}

#heroEyeIris,
#heroEyeInner{
	transition: none;
}

@keyframes eyeBlink{
	0%, 30%, 38%, 60%, 68%, 100%{ transform: scaleY(1); }
	33%{ transform: scaleY(.08); }
	63%{ transform: scaleY(.08); }
}

/* --- Eye color icons --- */
.quiz__picker-grid--eyes{
	grid-template-columns: repeat(3, 1fr);
}

.quiz__eye-icon{
	width: 72px;
	height: 72px;
}

.quiz__eye-icon svg{
	width: 100%;
	height: 100%;
}

/* --- Adventure step --- */
.quiz__picker-grid--adventure{
	grid-template-columns: 1fr;
	gap: 12px;
}

.quiz__picker-grid--adventure .quiz__picker-item{
	flex-direction: row;
	gap: 16px;
	padding: 18px 24px;
}

.quiz__adventure-icon{
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}

.quiz__adventure-icon svg{
	width: 100%;
	height: 100%;
}

.quiz__picker-grid--adventure .quiz__picker-text{
	text-align: left;
	font-size: 14px;
}

/* --- Castle (step 7) --- */
.quiz__hero-brush{
	width: 100px;
	margin: 0 auto 12px;
}

.quiz__hero-brush svg{
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* Brush sway */
.quiz__brush-body{
	transform-origin: 85px 108px;
	animation: brushPaint 1.8s ease-in-out infinite;
}

@keyframes brushPaint{
	0%, 100%{ transform: rotate(0deg) translateX(0); }
	20%{ transform: rotate(2deg) translateX(2px); }
	40%{ transform: rotate(-2deg) translateX(-1px); }
	60%{ transform: rotate(1.5deg) translateX(1px); }
	80%{ transform: rotate(-1.5deg) translateX(-2px); }
}

/* Stroke draw */
.quiz__brush-line1, .quiz__brush-line2, .quiz__brush-line3{
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
}
.quiz__brush-line1{ animation: strokeDraw .8s ease-out .2s forwards; }
.quiz__brush-line2{ animation: strokeDraw .8s ease-out .6s forwards; }
.quiz__brush-line3{ animation: strokeDraw .8s ease-out 1s forwards; }

@keyframes strokeDraw{
	to{ stroke-dashoffset: 0; }
}

/* --- Style cards (step 7) --- */
.quiz__picker-grid--styles{
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.quiz__style-card{
	padding: 10px 10px 14px !important;
	gap: 10px !important;
}

.quiz__style-img{
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	object-fit: cover;
	display: block;
}

.quiz__style-card .quiz__picker-text{
	font-size: 15px;
}

/* --- Step 9: Photo upload --- */
.quiz__hero-morph{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin: 0 auto 20px;
	position: relative;
}

/* Morph faces */
.quiz__morph-face{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	backface-visibility: hidden;
}
.quiz__morph-face img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.quiz__morph-face--back{
	transform: rotateY(180deg);
}

/* Label */
.quiz__morph-label{
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(124,58,237,.85);
	color: var(--text-primary);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 14px;
	border-radius: 10px;
	white-space: nowrap;
}

/* Morph rotation */
.quiz__hero-morph{
	transform-style: preserve-3d;
	animation: morphFlip 5s ease-in-out infinite;
	box-shadow: 0 4px 20px rgba(124,58,237,.35);
}
@keyframes morphFlip{
	0%, 30%{ transform: rotateY(0deg); }
	45%, 80%{ transform: rotateY(180deg); }
	95%, 100%{ transform: rotateY(360deg); }
}

.quiz__upload-zone{
	border: 2px dashed var(--border-glass-strong);
	border-radius: 14px;
	padding: 32px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, background .2s;
	background: rgba(255,255,255,.04);
}
.quiz__upload-zone:hover,
.quiz__upload-zone.is-dragover{
	border-color: rgba(192,132,252,.5);
	background: rgba(255,255,255,.08);
}
.quiz__upload-icon{
	width: 44px;
	height: 44px;
	margin: 0 auto 8px;
	opacity: .6;
}
.quiz__upload-icon svg{
	width: 100%;
	height: 100%;
	display: block;
}
.quiz__upload-text{
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.quiz__upload-text--mobile{
	display: none;
}
.quiz__upload-or{
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 8px;
}
.quiz__upload-btn{
	display: inline-block;
	padding: 8px 22px;
	background: rgba(255,255,255,.14);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	transition: background .2s;
	border: 1px solid var(--border-glass);
}
.quiz__upload-btn:hover{
	background: rgba(255,255,255,.22);
}
.quiz__upload-hint{
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 10px;
}

/* Loader (uploading state) */
.quiz__upload-loader{
	position: relative;
	width: 160px;
	height: 160px;
	margin: 0 auto;
}
.quiz__upload-spinner{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 4px solid rgba(255,255,255,.12);
	border-top-color: rgba(192,132,252,.8);
	animation: quizSpin 0.8s linear infinite;
}
@keyframes quizSpin{
	to{ transform: rotate(360deg); }
}
.quiz__upload-cancel{
	position: absolute;
	top: -8px;
	right: -8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0,0,0,.7);
	color: var(--text-primary);
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	border: none;
	cursor: pointer;
	transition: background .2s;
}
.quiz__upload-cancel:hover{
	background: #ef4444;
}

/* Preview (uploaded state) */
.quiz__upload-preview{
	position: relative;
	width: 160px;
	height: 160px;
	margin: 0 auto;
}
.quiz__upload-photo{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 3px solid rgba(192,132,252,.5);
}
.quiz__upload-remove{
	position: absolute;
	top: -8px;
	right: -8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0,0,0,.7);
	color: var(--text-primary);
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	border: none;
	cursor: pointer;
	transition: background .2s;
}
.quiz__upload-remove:hover{
	background: #ef4444;
}

/* --- Step 10: Email & consent --- */
.quiz__hero-final{
	width: 72px;
	margin: 0 auto 14px;
}
.quiz__hero-final svg{
	width: 100%;
	height: auto;
	display: block;
}
.quiz__final-pulse{
	animation: finalPulse 2s ease-in-out infinite;
}
@keyframes finalPulse{
	0%, 100%{ r: 36; opacity: .6; }
	50%{ r: 39; opacity: 0; }
}
.quiz__dl-arrow{
	animation: dlBounce 1.4s ease-in-out infinite;
}
@keyframes dlBounce{
	0%, 100%{ transform: translateY(0); }
	50%{ transform: translateY(5px); }
}

.quiz__consent{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 16px 0 4px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	text-align: left;
}
.quiz__consent input{
	display: none;
}
.quiz__consent-check{
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 8px;
	border: 2.5px solid var(--border-glass-strong);
	background: var(--surface-glass);
	position: relative;
	transition: border-color .2s, background .2s;
	margin-top: 1px;
}
.quiz__consent:hover .quiz__consent-check{
	border-color: var(--text-muted);
}
.quiz__consent input:checked + .quiz__consent-check{
	background: #7c3aed;
	border-color: #7c3aed;
}
.quiz__consent input:checked + .quiz__consent-check::after{
	content: '';
	position: absolute;
	top: 5px;
	left: 10px;
	width: 8px;
	height: 14px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}
.quiz__consent-text{
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.45;
	text-align: left;
}
.quiz__consent-text a{
	color: var(--text-muted);
	text-decoration: underline;
}

/* ===== TOAST ===== */
.quiz__toast{
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	background: #ef4444;
	color: var(--text-primary);
	font-family: var(--font);
	font-weight: 700;
	font-size: 15px;
	padding: 12px 28px;
	border-radius: 14px;
	box-shadow: 0 8px 32px rgba(0,0,0,.35);
	z-index: 9999;
	opacity: 0;
	transition: opacity .3s, transform .3s;
	white-space: nowrap;
}

.quiz__toast.is-visible{
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ===== SHAKE ===== */
@keyframes shake{
	0%, 100%{ transform: translateX(0); }
	15%{ transform: translateX(-8px); }
	30%{ transform: translateX(8px); }
	45%{ transform: translateX(-6px); }
	60%{ transform: translateX(6px); }
	75%{ transform: translateX(-3px); }
	90%{ transform: translateX(3px); }
}

.is-shake{
	animation: shake .5s ease;
}

/* Email error state */
#quizEmail.is-error{
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239,68,68,.3);
}

/* ===== LOADER ===== */
.loader{
	position: fixed;
	inset: 0;
	background: var(--violet-950);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	transition: opacity .5s;
}

.loader.is-visible{
	opacity: 1;
}

.loader__inner{
	text-align: center;
	max-width: 600px;
	width: 100%;
	padding: 0 24px;
}

.loader__icon{
	width: 80px;
	height: 80px;
	margin: 0 auto 32px;
	animation: loaderPulse 2s ease-in-out infinite;
}

.loader__icon svg{
	width: 100%;
	height: 100%;
}

@keyframes loaderPulse{
	0%, 100%{ transform: scale(1); opacity: .85; }
	50%{ transform: scale(1.08); opacity: 1; }
}

.loader__status{
	font-family: var(--font);
	font-weight: 700;
	font-size: 20px;
	color: var(--violet-200);
	margin: 0 0 28px;
	min-height: 28px;
	white-space: nowrap;
	transition: opacity .2s, transform .2s;
}

.loader__status.is-changing{
	opacity: 0;
	transform: translateY(6px);
}

.loader__bar{
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
	height: 14px;
	background: rgba(255,255,255,.1);
	border-radius: 10px;
	overflow: hidden;
}

.loader__bar-fill{
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--violet-600), var(--violet-600), var(--violet-400));
	border-radius: 10px;
	transition: width .15s linear;
}

.loader__percent{
	font-family: var(--font);
	font-weight: 800;
	font-size: 16px;
	color: var(--violet-400);
	margin: 12px 0 0;
}

/* ===== PAYWALL ===== */
.paywall{
	background: var(--violet-950);
	min-height: 100vh;
	opacity: 0;
	transition: opacity .5s;
	position: relative;
	overflow: hidden;
}
.paywall.is-visible{ opacity: 1; }

/* --- Paywall ambient orbs --- */
.pw-orb{
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
	z-index: 0;
}
.pw-orb--1{
	width: 700px;
	height: 700px;
	top: -18%;
	left: -15%;
	background: radial-gradient(circle, rgba(124,58,237,.35) 0%, rgba(124,58,237,.14) 40%, transparent 70%);
}
.pw-orb--2{
	width: 500px;
	height: 500px;
	top: 30%;
	right: -20%;
	background: radial-gradient(circle, rgba(139,92,246,.18) 0%, rgba(91,33,182,.06) 45%, transparent 70%);
}
.pw-orb--3{
	width: 450px;
	height: 450px;
	bottom: 5%;
	left: -10%;
	background: radial-gradient(circle, rgba(167,139,250,.15) 0%, rgba(124,58,237,.05) 45%, transparent 70%);
}
.pw-orb--4{
	width: 900px;
	height: 900px;
	top: -20%;
	left: 50%;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(124,58,237,.42) 0%, rgba(139,92,246,.22) 30%, rgba(91,33,182,.08) 55%, transparent 70%);
	animation: pwOrbNod 3s ease-in-out infinite;
}
@keyframes pwOrbNod{
	0%, 100%{ margin-top: 0; }
	20%{ margin-top: 30px; }
	35%{ margin-top: -5px; }
	50%{ margin-top: 25px; }
	65%{ margin-top: 0; }
}

/* --- Paywall decorative SVGs --- */
.pw-decors{
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
.pw-svg{ position: absolute; }

.pw-svg--star1{ width: 44px; top: 6%; left: 5%; opacity: .25; }
.pw-svg--star2{ width: 28px; top: 22%; right: 8%; opacity: .18; }
.pw-svg--star3{ width: 22px; bottom: 30%; left: 7%; opacity: .15; }
.pw-svg--moon{ width: 52px; top: 4%; right: 6%; opacity: .2; }
.pw-svg--heart{ width: 32px; bottom: 18%; right: 5%; opacity: .15; }
.pw-svg--cloud{ width: 90px; top: 38%; left: 1%; opacity: .1; }
.pw-svg--dots1{ width: 14px; top: 14%; left: 16%; opacity: .2; }
.pw-svg--dots2{ width: 10px; bottom: 40%; right: 12%; opacity: .18; }
.pw-svg--dots3{ width: 18px; bottom: 12%; left: 22%; opacity: .13; }

.pw-logo{
	position: absolute;
	top: 20px;
	left: 24px;
	z-index: 10;
}
.pw-logo img{
	height: 32px;
	width: auto;
	display: block;
}

.pw{ max-width: 680px; margin: 0 auto; padding: 24px 32px; position: relative; z-index: 1; }

/* Hero */
.pw-hero{ text-align: center; padding: 48px 0 28px; }
.pw-hero-photo-wrap{
	display: inline-block;
	margin-bottom: 16px;
	position: relative;
	animation: pwPhotoNod 3s ease-in-out infinite;
}
.pw-hero-photo-wrap::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid rgba(124,58,237,.4);
	animation: pwPhotoPulse 3s ease-out infinite;
	pointer-events: none;
}
@keyframes pwPhotoNod{
	0%, 78%, 100%{ transform: translateY(0); }
	12%{ transform: translateY(7px); }
	22%{ transform: translateY(-1px); }
	34%{ transform: translateY(7px); }
	44%{ transform: translateY(-1px); }
	56%{ transform: translateY(7px); }
	66%{ transform: translateY(0); }
}
@keyframes pwPhotoPulse{
	0%{ width: 100%; height: 100%; opacity: .6; }
	70%{ width: 200%; height: 200%; opacity: 0; }
	100%{ width: 200%; height: 200%; opacity: 0; }
}
.pw-hero-photo{ width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid var(--violet-600); box-shadow: 0 8px 24px rgba(124,58,237,.25); }
.pw-hero h2{ font-family: var(--font); font-size: 32px; font-weight: 800; margin-bottom: 10px; color: var(--text-primary); }
.pw-hero-sub{ font-family: var(--font); font-size: 16px; color: var(--text-secondary); }
.pw-hero-story{
	position: relative;
	z-index: 2;
	font-family: var(--font);
	font-size: 16px;
	font-style: italic;
	color: #fff;
	margin-top: 32px;
	line-height: 1.8;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	padding: 28px 32px;
	background: linear-gradient(135deg, rgba(124,58,237,.05), rgba(167,119,255,.08));
	border-radius: 16px;
	border-left: 4px solid #7c3aed;
}
.pw-hero-story::before{
	content: '\201C';
	position: absolute;
	top: -8px;
	left: 16px;
	font-family: Georgia, serif;
	font-size: 120px;
	font-style: normal;
	line-height: 1;
	color: rgba(124,58,237,.10);
	pointer-events: none;
}

/* Live activity */
.pw-activity{
	position: relative;
	background: var(--surface-glass);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 16px;
	padding: 16px 20px;
	margin-bottom: 20px;
	box-shadow: var(--shadow-card);
	min-height: 52px;
	overflow: hidden;
	border: 1px solid var(--border-glass);
}
.pw-activity-item{
	font-family: var(--font);
	font-size: 14px;
	color: var(--text-secondary);
	position: absolute;
	top: 16px; left: 20px; right: 20px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .4s, transform .4s;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pw-activity-item.is-visible{
	opacity: 1;
	transform: translateY(0);
}
.pw-activity-dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	flex-shrink: 0;
	animation: pwDotPulse 2s ease-in-out infinite;
}
@keyframes pwDotPulse{
	0%, 100%{ opacity: 1; }
	50%{ opacity: .3; }
}
.pw-activity-name{
	color: #fff;
	font-weight: 700;
}
.pw-activity-action{
	color: var(--text-secondary);
}
.pw-activity-time{
	color: var(--violet-400);
	font-size: 13px;
	font-weight: 600;
}

/* Triggers */
/* Paywall stories */
.pw-stories{
	position: relative;
	margin-top: 16px;
	margin-bottom: 36px;
}
.pw-stories__grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	max-height: 520px;
	overflow: hidden;
	transition: max-height .5s ease;
}
.pw-stories__grid.is-expanded{
	max-height: 2000px;
}
.pw-stories__col{
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.pw-stories__fade{
	position: absolute;
	bottom: 44px;
	left: 0;
	right: 0;
	height: 140px;
	background: linear-gradient(to bottom, transparent, var(--violet-950));
	pointer-events: none;
	transition: opacity .4s;
	z-index: 2;
}
.pw-stories.is-expanded .pw-stories__fade{
	opacity: 0;
}
.pw-stories__more{
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	margin-top: 0;
	padding: 12px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	color: var(--violet-300);
	background: var(--surface-glass);
	border: 1px solid var(--border-glass);
	border-radius: 12px;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.pw-stories__more:hover{
	background: var(--surface-glass-strong);
	color: #fff;
}
.pw-stories__more.is-hidden{ display: none; }

.pw-tales{
	position: relative;
	margin-top: 36px;
}
.pw-tales__grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-height: 340px;
	overflow: hidden;
	transition: max-height .5s ease;
}
.pw-tales__grid.is-expanded{
	max-height: 2000px;
}
.pw-tales__item{
	position: relative;
	display: flex;
	flex-direction: column;
	cursor: pointer;
}
.pw-tales__item .examples__book-wrap{
	margin-bottom: 0;
}
.pw-tales__overlay{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px 6px 6px 3px;
	background: rgba(0,0,0,.2);
	transition: background .25s;
}
.pw-tales__item:hover .pw-tales__overlay{
	background: rgba(0,0,0,.35);
}
.pw-tales__view{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	color: #1a1a2e;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 12px rgba(0,0,0,.2);
	pointer-events: none;
	transition: transform .2s;
}
.pw-tales__item:hover .pw-tales__view{
	transform: scale(1.05);
}
.pw-tales__desc{
	margin-top: 10px;
	font-family: var(--font);
	font-size: 12px;
	line-height: 1.5;
	color: var(--violet-300);
	text-align: center;
}
.pw-tales__fade{
	position: absolute;
	bottom: 44px;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(to bottom, transparent, var(--violet-950));
	pointer-events: none;
	transition: opacity .4s;
	z-index: 2;
}
.pw-tales.is-expanded .pw-tales__fade{
	opacity: 0;
}
.pw-tales__more{
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	margin-top: 0;
	padding: 12px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	color: var(--violet-300);
	background: var(--surface-glass);
	border: 1px solid var(--border-glass);
	border-radius: 12px;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.pw-tales__more:hover{
	background: var(--surface-glass-strong);
	color: #fff;
}
.pw-tales__more.is-hidden{ display: none; }

@media (max-width: 480px){
	.pw-tales__grid{
		gap: 12px;
		max-height: 260px;
	}
	.pw-tales__view{
		padding: 8px 16px;
		font-size: 12px;
	}
}

.pw-triggers{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}
.pw-trigger-item{
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	color: var(--violet-300);
	background: rgba(124,58,237,.2);
	padding: 8px 18px;
	border-radius: 20px;
	white-space: nowrap;
}

/* Reviews */
.pw-reviews{
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	margin-bottom: 8px;
}
.pw-reviews::-webkit-scrollbar{ display: none; }
.pw-review{
	flex: 0 0 280px;
	scroll-snap-align: start;
	background: var(--surface-glass);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 18px;
	padding: 20px;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border-glass);
}
.pw-review-stars{
	color: #f5c518;
	font-size: 16px;
	letter-spacing: 2px;
	margin-bottom: 10px;
}
.pw-review-text{
	font-family: var(--font);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0 0 10px;
}
.pw-review-author{
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	color: var(--violet-300);
}

/* Social proof */
.pw-social{ display: flex; gap: 12px; margin: 24px 0; }
.pw-social-stat{ flex: 1; text-align: center; background: var(--surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 18px; padding: 18px 10px; box-shadow: var(--shadow-card); border: 1px solid var(--border-glass); }
.pw-social-stat b{ display: block; font-family: var(--font); font-size: 20px; color: var(--violet-400); }
.pw-social-stat span{ font-family: var(--font); font-size: 13px; color: var(--text-muted); }

/* Section headers */
.pw-h{ font-family: var(--font); font-size: 20px; font-weight: 800; margin: 28px 0 6px; color: var(--text-primary); }
.pw-h-sub{ font-family: var(--font); font-size: 15px; color: var(--text-secondary); margin: 0 0 14px; }

/* Paywall "see with your own eyes" image */
.pw-see-image{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	margin: 0 0 8px;
}

/* Tariffs */
.tariffs{ display: flex; flex-direction: column; gap: 12px; }
.tariff{
	background: var(--surface-glass); border-radius: 24px; padding: 20px 24px;
	cursor: pointer; border: 2px solid var(--border-glass);
	transition: border-color .2s, box-shadow .2s;
	position: relative; display: flex; align-items: center; gap: 16px;
	box-shadow: var(--shadow-card);
}
.tariff.active{ border-color: var(--violet-600); box-shadow: 0 4px 16px rgba(124,58,237,.25); }
.tariff-badge{
	position: absolute; top: -10px; right: 16px;
	background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
	color: var(--text-primary); font-family: var(--font); font-size: 11px; font-weight: 600;
	padding: 3px 12px; border-radius: 20px;
}
.tariff-tick{
	width: 28px; height: 28px; border-radius: 50%;
	border: 2px solid var(--border-glass); background: var(--surface-glass);
	flex-shrink: 0; transition: all .2s;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 6px rgba(60,20,120,.2);
}
.tariff.active .tariff-tick{
	border-color: var(--violet-600); background: var(--violet-600);
	box-shadow: 0 4px 12px rgba(124,58,237,.4);
}
.tariff.active .tariff-tick::after{
	content: ''; display: block;
	width: 10px; height: 6px;
	border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
	transform: rotate(-45deg); margin-top: -2px;
}
.tariff-body{ flex: 1; min-width: 0; }
.tariff-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tariff-name{ font-family: var(--font); font-size: 17px; font-weight: 700; color: var(--violet-200); }
.tariff-stars{ color: #f5c518; font-size: 18px; letter-spacing: 2px; }
.tariff-price{
	background: rgba(124,58,237,.2); color: var(--violet-300); font-family: var(--font); font-weight: 700; font-size: 14px;
	padding: 4px 14px; border-radius: 100px; white-space: nowrap;
}
.tariff-price-old{
	opacity: .5; text-decoration: line-through; font-weight: 400; margin-right: 4px;
}
.tariff.active .tariff-price{ background: var(--violet-600); color: var(--text-primary); }
.tariff-desc{ font-family: var(--font); font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.tariff-features{ display: flex; flex-wrap: wrap; gap: 6px 8px; }
.tariff-badge-feature{
	display: inline-block;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 600;
	color: var(--violet-300);
	background: rgba(124,58,237,.12);
	border: 1px solid rgba(124,58,237,.2);
	border-radius: 8px;
	padding: 4px 10px;
}
.tariff-badge-feature--gift{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--violet-600);
	border-color: var(--violet-500);
	color: #fff;
	font-weight: 700;
}
.tariff-gift-icon{ flex-shrink: 0; }

/* Addons */
.addons{ display: flex; flex-direction: column; gap: 12px; }
.addon{
	background: var(--surface-glass); border-radius: 20px; padding: 18px 22px;
	cursor: pointer; border: 2px solid var(--border-glass);
	display: flex; align-items: center; gap: 14px;
	transition: border-color .2s, background .2s;
	box-shadow: var(--shadow-card);
}
.addon.active{ border-color: var(--violet-600); background: rgba(124,58,237,.1); }
.addon-preview{
	width: 90px;
	height: 90px;
	border-radius: 12px;
	overflow: hidden;
	flex-shrink: 0;
}
.addon-preview img,
.addon-preview video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.addon-body{ flex: 1; }
.addon-top{ display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.addon-h{ font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--violet-200); }
.addon-price{
	color: var(--violet-300); font-family: var(--font); font-size: 12px; font-weight: 700;
	background: rgba(124,58,237,.2); padding: 3px 10px; border-radius: 100px; white-space: nowrap;
}
.addon-desc{ font-family: var(--font); font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.addon-meta{ font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.addon-meta span{ display: block; }
.addon-toggle{
	width: 44px; height: 24px; background: rgba(255,255,255,.18);
	border-radius: 12px; flex-shrink: 0; position: relative;
	transition: background .2s;
}
.addon.active .addon-toggle{ background: var(--violet-600); }
.addon-toggle::after{
	content: ''; position: absolute; top: 2px; left: 2px;
	width: 20px; height: 20px; background: #fff;
	border-radius: 50%; transition: left .2s;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.addon.active .addon-toggle::after{ left: 22px; }

/* Print upsell dialog */
.print-upsell-dialog{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	align-items: center;
	justify-content: center;
}
.print-upsell-dialog.print-upsell-dialog-a{ display: flex; }
.print-upsell-dialog-bg{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(4px);
}
.print-upsell-dialog-box{
	position: relative;
	background: var(--violet-950);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 20px;
	padding: 28px 22px 22px;
	margin: 0 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,.35);
	max-width: 340px;
	width: 100%;
}
.print-upsell-dialog-h{
	font-family: var(--font);
	font-size: 17px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 10px;
}
.print-upsell-dialog-d{
	font-family: var(--font);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-bottom: 10px;
}
.print-upsell-dialog-diff{
	font-family: var(--font);
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 18px;
}
.print-upsell-dialog-diff b{ color: var(--violet-400); }
.print-upsell-dialog-btns{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.print-upsell-yes{
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
.print-upsell-no{
	text-align: center;
	font-family: var(--font);
	font-size: 13px;
	color: var(--text-muted);
	cursor: pointer;
	padding: 6px 0;
	transition: color .2s;
}
.print-upsell-no:hover{ color: var(--text-secondary); }

/* Certificate */
/* --- Gift certificate block --- */
.pw-gift{
	margin: 12px 0;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.06);
	background: rgba(255,255,255,.02);
	padding: 18px 20px;
}
.pw-gift__header{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	color: var(--text-muted);
	font-family: var(--font);
	font-size: 13px;
	transition: color .2s;
}
.pw-gift__header:hover{ color: var(--text-secondary); }
.pw-gift__icon{ flex-shrink: 0; }
.pw-gift__body{
	display: none;
	margin-top: 14px;
	text-align: center;
}
.pw-gift__body.open{ display: block; }
.pw-gift__hint{
	font-family: var(--font);
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
	margin-bottom: 12px;
}
.pw-gift__form{
	display: flex;
	gap: 0;
	justify-content: center;
}
.cert-input{
	flex: 1;
	max-width: 220px;
	padding: 12px 16px;
	border-radius: 12px 0 0 12px;
	border: 1px solid rgba(255,255,255,.1);
	margin-right: -1px;
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,.04);
	color: var(--text-primary);
	font-family: var(--font);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	outline: none;
	transition: border-color .2s, background .2s;
}
.cert-input::placeholder{
	color: rgba(255,255,255,.2);
	letter-spacing: 1.5px;
}
.cert-input:focus{
	border-color: rgba(167,139,250,.4);
	background: rgba(255,255,255,.06);
	z-index: 2;
}
.cert-btn{
	padding: 12px 20px;
	border-radius: 0 12px 12px 0;
	border: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.06);
	color: var(--text-secondary);
	font-family: var(--font);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background .2s, color .2s;
	outline: none;
	white-space: nowrap;
}
.cert-btn:focus{ outline: none; }
.cert-btn:hover{
	background: rgba(167,139,250,.15);
	color: #fff;
}
.cert-btn:disabled{ background: rgba(255,255,255,.03); color: rgba(255,255,255,.2); cursor: not-allowed; }
.cert-btn.ok{ background: rgba(34,197,94,.15); color: #4ade80; border-color: rgba(34,197,94,.2); }
.cert-status{
	font-family: var(--font);
	font-size: 12px;
	margin-top: 8px;
	color: var(--text-muted);
}

/* Guarantee */
.pw-installment{
	background: linear-gradient(135deg, rgba(200,200,210,.08), rgba(180,180,195,.04));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 20px;
	padding: 28px 24px;
	margin: 12px 0;
	text-align: center;
	box-shadow: 0 0 40px rgba(200,200,220,.06);
	border: 1px solid rgba(200,200,220,.15);
}
.pw-installment__icon{
	margin-bottom: 12px;
	line-height: 1;
}
.pw-installment__title{
	font-family: var(--font);
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 10px;
}
.pw-installment__text{
	font-family: var(--font);
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.7;
	max-width: 440px;
	margin: 0 auto;
}

/* Urgency timer block */
.pw-urgency{
	background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(220,38,38,.05));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 20px;
	padding: 28px 24px;
	margin: 12px 0;
	text-align: center;
	box-shadow: 0 0 40px rgba(239,68,68,.06);
	border: 1px solid rgba(239,68,68,.18);
}
.pw-urgency__timer{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #f87171;
	margin-bottom: 14px;
}
.pw-urgency__clock{
	flex-shrink: 0;
}
.pw-urgency__digits{
	font-family: var(--font);
	font-size: 32px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 2px;
}
.pw-urgency__title{
	font-family: var(--font);
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 10px;
}
.pw-urgency__title span{
	color: #fff;
}
.pw-urgency__title .pw-urgency__accent{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #f87171;
	background: rgba(239,68,68,.12);
	border: none;
	border-radius: 20px;
	padding: 3px 10px;
}
.pw-urgency__sad{
	flex-shrink: 0;
}
.pw-urgency__text{
	font-family: var(--font);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.7;
	max-width: 440px;
	margin: 0 auto;
}

/* --- After payment block --- */
.pw-after{
	background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(167,139,250,.06));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 20px;
	padding: 28px 24px;
	margin: 72px 0 12px;
	border: 1px solid rgba(124,58,237,.2);
	box-shadow: 0 0 40px rgba(124,58,237,.08);
}
.pw-after__header{
	text-align: center;
	margin-bottom: 24px;
}
.pw-after__icon{
	margin-bottom: 12px;
	line-height: 1;
}
.pw-after__title{
	font-family: var(--font);
	font-size: 20px;
	font-weight: 800;
	color: #fff;
}
.pw-after__steps{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pw-after__step{
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.pw-after__num{
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, #7c3aed, #a78bfa);
	color: #fff;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.pw-after__step-text{
	font-family: var(--font);
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.6;
}
.pw-after__step-text strong{
	color: #fff;
	font-weight: 700;
}
.pw-after__footer{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(167,139,250,.12);
	font-family: var(--font);
	font-size: 14px;
	color: #a78bfa;
	line-height: 1.5;
}
.pw-after__footer svg{
	flex-shrink: 0;
}

.pw-guarantee{
	background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(22,163,74,.04));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 20px;
	padding: 28px 24px;
	margin: 12px 0;
	text-align: center;
	box-shadow: 0 0 40px rgba(34,197,94,.06);
	border: 1px solid rgba(34,197,94,.15);
}
.pw-guarantee__icon{
	margin-bottom: 12px;
	line-height: 1;
}
.pw-guarantee__title{
	font-family: var(--font);
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 10px;
}
.pw-guarantee__text{
	font-family: var(--font);
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.7;
	max-width: 440px;
	margin: 0 auto;
}

/* Links */
.pw-links{ text-align: center; margin-top: 16px; font-size: 11px; }
.pw-links a{ color: var(--text-muted); text-decoration: underline; }

.pw-restart{
	display: block;
	margin: 24px auto 80px;
	padding: 10px 24px;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	background: none;
	border: 1px solid var(--border-glass);
	border-radius: 10px;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}
.pw-restart:focus{
	outline: none;
}
.pw-restart:hover{
	color: var(--text-secondary);
	border-color: var(--border-glass-strong);
}

/* CTA */
.pw-cta-inline{ margin: 28px 0 0; }
.pw-btn-wrap{
	position: relative;
	border-radius: 18px;
	box-shadow: 0 0 20px rgba(124,58,237,.4), 0 0 50px rgba(124,58,237,.15);
	animation: pwBtnScale 2s ease-in-out infinite;
}
@keyframes pwBtnScale{
	0%, 100%{ transform: scale(1); }
	50%{ transform: scale(1.03); }
}
.pw-btn{
	position: relative;
	display: block; width: 100%; padding: 18px; border-radius: 18px; border: none;
	background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
	color: var(--text-primary); font-family: var(--font); font-size: 18px; font-weight: 700;
	cursor: pointer; text-align: center; transition: opacity .2s;
	overflow: hidden;
}
.pw-btn::after{
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	display: none;
}
.pw-btn:focus{ outline: none; }
.pw-btn:active{ opacity: .85; }
.pw-btn:disabled{ opacity: .4; cursor: not-allowed; }
.pw-btn:disabled::after{ animation: none; }
@keyframes pwBtnShine{
	0%{ left: -100%; }
	40%{ left: 150%; }
	100%{ left: 150%; }
}
.pw-cta-sub{ text-align: center; font-family: var(--font); font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Scroll-down arrow */
/* Scroll-up / scroll-down CTA */
.pw-scroll-cta{
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 16px;
	border: none;
	background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
	color: var(--text-primary);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity .3s, visibility .3s;
	box-shadow: 0 4px 20px rgba(124,58,237,.4);
	animation: pwCtaBounce 2s ease-in-out infinite;
	outline: none;
}
.pw-scroll-cta:focus{ outline: none; box-shadow: 0 4px 20px rgba(124,58,237,.4); }
.pw-scroll-cta:active{ opacity: .85; }
.pw-scroll-cta.hidden{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	animation: none;
}
@keyframes pwCtaBounce{
	0%,100%{ transform: translateX(-50%) translateY(0); }
	50%{ transform: translateX(-50%) translateY(-8px); }
}
.pw-scroll-cta--down{
	top: auto;
	bottom: 32px;
	animation: pwCtaBounceDown 2s ease-in-out infinite;
}
@keyframes pwCtaBounceDown{
	0%,100%{ transform: translateX(-50%) translateY(0); }
	50%{ transform: translateX(-50%) translateY(8px); }
}
.pw-scroll-cta__arrow{
	flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 860px){

	.decor{
		z-index: 0;
		opacity: 0.15;
	}

	.hero__offer{
		position: relative;
		z-index: 1;
		text-align: center;
		max-width: 720px;
		margin: 0 auto;
	}

	.hero__pill{
		margin-top: 16px;
	}

	.hero__trust{
		justify-content: center;
	}

	.hero__main{
		grid-template-columns: 1fr;
		gap: 32px;
		margin-bottom: 48px;
	}

	.hero__video-wrap{
		max-width: 520px;
		margin: 0 auto 132px;
		justify-self: center;
	}

	.hero__video-wrap .hero__card{
		position: absolute;
		top: auto;
		left: auto;
		bottom: -120px;
		right: 12px;
		max-width: 200px;
		order: 0;
		align-self: auto;
		margin-bottom: 0;
		animation: none;
		z-index: 3;
	}

	.hero__video-wrap .hero__arrow{
		bottom: auto;
		left: auto;
		top: -36px;
		right: 18px;
		width: 40px;
		transform: rotate(180deg);
		animation: none;
	}

	.hero{
		padding-bottom: 0;
	}

	.hero__demo{
		width: 100%;
	}

	.hero__showcase{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0;
	}

	.hero__compare-wrap{
		order: 0;
		display: flex;
		flex-direction: column;
		width: 90%;
		max-width: 360px;
		margin-top: 16px;
		margin-bottom: -88px;
		align-self: flex-start;
		margin-left: 4%;
		position: relative;
		z-index: 1;
	}

	.hero__compare-wrap .hero__card{
		top: -48px;
		left: 0;
		order: 0;
		max-width: 200px;
		align-self: flex-start;
		margin-bottom: -32px;
		z-index: 5;
	}

	.hero__compare-wrap .hero__arrow{
		left: auto;
		right: 16px;
		transform: none;
		z-index: 6;
	}

	.photo-transform-compare{
		width: 100%;
		max-width: 240px;
		height: auto;
		aspect-ratio: 1 / 1;
		align-self: center;
		z-index: 1;
	}

	.hero__book-cover{
		max-width: 420px;
		margin: 0 auto;
	}

	.hero__showcase-arrow{
		display: none;
	}

	.hero__card{
		position: relative;
		top: auto;
		left: auto;
		order: 1;
		max-width: 240px;
		animation: none;
		align-self: flex-start;
		z-index: 2;
		margin-bottom: -20px;
	}

	.hero__rays{
		display: none;
	}

	.hero__book-column{
		order: 2;
		width: 90%;
		max-width: 580px;
		height: auto;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 5;
	}

	.hero__book-cover{
		width: 100%;
		height: clamp(280px, 50vw, 420px);
	}

	.hero__caption{
		position: relative;
		bottom: auto;
		right: auto;
		max-width: 280px;
		animation: none;
		align-self: flex-end;
		z-index: 2;
		margin-top: -20px;
	}

	.hero__demo{
		margin-bottom: 12px;
	}

	.hero__demo--spaced{
		margin: 72px auto 0;
	}

	.age-picker-wrap{
		margin-top: 0;
		margin-bottom: 16px;
	}

	.examples{
		padding: 0 0 24px;
	}

	.steps__grid{
		grid-template-columns: 1fr 1fr;
		gap: 32px 16px;
	}

	.steps__arrow{
		display: none;
	}

	.steps__item--down{
		margin-top: 0;
	}

	.steps__visual{
		width: 140px;
		height: 140px;
	}

	.steps__img-placeholder{
		width: 80px;
		height: 80px;
	}

	.steps__img-upload{
		width: 130px;
		height: 80px;
	}

	.steps__upload-circle{
		width: 72px;
		height: 72px;
	}

	.steps__upload-action{
		width: 56px;
		height: 56px;
		margin-left: -14px;
	}

	.steps__img-book{
		width: 100px;
	}
}

@media (max-width: 768px){

	.examples{
		padding: 48px 0;
	}

	.examples__title{
		font-size: 26px;
	}

	.examples__subtitle{
		font-size: 16px;
		margin-bottom: 32px;
	}

	.examples__grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.examples__btn{
		padding: 10px 20px;
		font-size: 13px;
	}

	.steps{
		padding: 16px 0 60px;
	}

	.steps__title{
		font-size: 26px;
		margin-bottom: 12px;
	}

	.steps__subtitle{
		font-size: 16px;
		margin-bottom: 32px;
	}

	.stories{
		padding: 48px 0;
	}

	.stories__title{
		font-size: 26px;
		margin-bottom: 12px;
	}

	.stories__subtitle{
		font-size: 16px;
		margin-bottom: 32px;
	}

	.stories__grid{
		flex-wrap: wrap;
		gap: 12px;
	}

	.stories__col{
		flex: 0 0 calc(50% - 6px);
		gap: 12px;
	}

	.stories__card{
		border-radius: 12px;
	}

	.stories__overlay{
		padding: 32px 12px 12px;
	}

	.stories__avatar{
		width: 26px;
		height: 26px;
	}

	.stories__name{
		font-size: 12px;
	}

	.stories__desc{
		font-size: 11px;
	}

	.hero{
		padding: 100px 0 0;
	}

	.hero__caption{
		padding: 10px 16px;
		max-width: 200px;
		border-radius: 12px;
	}

	.hero__caption-text{
		font-size: 14px;
	}

	.hero__showcase{
		height: auto;
	}

	.hero__card{
		gap: 8px;
		padding: 10px 14px 12px;
		border-radius: 16px;
		max-width: 160px;
	}

	.hero__card-photo{
		width: 90px;
		height: 90px;
		border-radius: 12px;
	}

	.hero__card-text{
		font-size: 12px;
	}

	.hero__card-author{
		font-size: 12px;
	}

	.hero__arrow{
		width: 36px;
		bottom: -40px;
	}

	.hero__video-wrap{
		margin-bottom: 112px;
	}

	.hero__video-wrap .hero__card{
		max-width: 170px;
		right: 8px;
		bottom: -100px;
	}

	.hero__video-wrap .hero__arrow{
		width: 32px;
		top: -28px;
		right: 12px;
	}

	.hero__book-btn{
		bottom: 10px;
		left: 10px;
		padding: 6px 14px;
		font-size: 12px;
	}

	.hero__title{
		letter-spacing: -0.02em;
	}

	.hero__subtitle{
		font-size: 16px;
	}

	.age-picker{
		padding: 32px 20px;
		border-radius: 20px;
	}

	.age-picker__triggers{
		flex-direction: column;
		gap: 8px;
	}

	.age-picker__title{
		font-size: 20px;
		margin-bottom: 20px;
	}

	.age-picker__desc{
		font-size: 15px;
	}

	.age-picker__grid{
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}

	.age-picker__item:nth-child(4){
		grid-column: auto / span 2;
	}

	.age-picker__item:nth-child(5){
		grid-column: 2 / span 2;
	}

	.age-picker__icon{
		width: 56px;
		height: 56px;
	}

	.quiz__title{
		font-size: 26px;
	}

	.quiz__subtitle{
		font-size: 15px;
		margin-bottom: 20px;
	}

	.quiz__check-item{
		font-size: 13px;
		text-align: left;
	}

	.quiz__checklist{
		margin-bottom: 24px;
		align-items: flex-start;
	}

	.quiz__picker{
		padding: 32px 20px;
	}

	.quiz__picker-grid--adventure .quiz__picker-item{
		padding: 18px 16px;
	}

	.quiz__adventure-icon{
		width: 48px;
		height: 48px;
	}

	.quiz__progress{
		margin: 24px -20px -32px;
		padding: 16px 20px 18px;
	}

	.quiz__upload-text--desktop,
	.quiz__upload-or,
	.quiz__upload-btn{
		display: none;
	}

	.quiz__upload-text--mobile{
		display: block;
	}

	.quiz__picker-grid{
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.quiz__eye-icon{
		width: 56px;
		height: 56px;
	}

	.quiz__textarea{
		font-size: 15px;
		padding: 16px 18px;
		min-height: 100px;
	}

	.quiz__hint{
		font-size: 13px;
		padding: 6px 12px;
	}

	.quiz__next-btn{
		width: 100%;
		font-size: 16px;
		padding: 14px 28px;
	}

	.quiz__picker-grid--styles{
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.photo-trust{
		padding: 14px 16px;
		gap: 10px;
	}
	.photo-trust__title{ font-size: 13px; }
	.photo-trust__text{ font-size: 12px; }

	/* Paywall mobile */
	.pw-activity{ min-height: auto; overflow: visible; }
	.pw-activity-item{
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		position: relative;
		top: auto; left: auto; right: auto;
	}
	.pw-activity-item:not(.is-visible){
		position: absolute;
		top: 16px; left: 20px; right: 20px;
	}
	.pw-activity-dot{
		position: absolute;
		top: 5px;
		left: 0;
	}
	.pw-activity-name,
	.pw-activity-action,
	.pw-activity-time{
		padding-left: 16px;
	}
	.pw{ padding: 16px; }
	.pw-hero{ padding: 28px 0 16px; }
	.pw-hero-photo{ width: 80px; height: 80px; }
	.pw-hero h2{ font-size: 22px; }
	.pw-hero-sub{ font-size: 14px; }
	.pw-hero-story{ font-size: 14px; padding: 20px 22px; margin-top: 24px; }
	.pw-hero-story::before{ font-size: 80px; top: -4px; left: 10px; }
	.pw-orb--1{ width: 400px; height: 400px; }
	.pw-orb--2{ width: 300px; height: 300px; }
	.pw-orb--3{ width: 250px; height: 250px; }
	.pw-orb--4{ width: 500px; height: 500px; }
	.pw-svg--cloud, .pw-svg--heart, .pw-svg--star1, .pw-svg--star2, .pw-svg--star3, .pw-svg--moon{ display: none; }
	.pw-orb--1{
		background: radial-gradient(circle, rgba(124,58,237,.5) 0%, rgba(124,58,237,.2) 40%, transparent 70%);
	}
	.pw-orb--4{
		background: radial-gradient(circle, rgba(124,58,237,.55) 0%, rgba(139,92,246,.3) 30%, rgba(91,33,182,.12) 55%, transparent 70%);
	}
	.pw-social-stat{ padding: 12px 6px; }
	.pw-social-stat b{ font-size: 16px; }
	.pw-social-stat span{ font-size: 11px; }
	.pw-h{ font-size: 17px; }
	.tariff{ padding: 16px; }
	.tariff-name{ font-size: 15px; }
	.tariff-desc{ font-size: 12px; }
	.tariff-features span{ font-size: 12px; }
	.addon{ padding: 14px 16px; }
	.addon-h{ font-size: 13px; }
	.addon-preview{ width: 70px; height: 70px; }
	.pw-trigger-item{ font-size: 12px; padding: 6px 14px; }
	.pw-review{ flex: 0 0 240px; padding: 14px; }
	.pw-btn{ font-size: 16px; padding: 16px; }
}

/* CTA */
.cta-section{
	padding: 60px 20px 0;
}
.cta-block{
	position: relative;
	overflow: hidden;
	max-width: 900px;
	margin: 0 auto;
	border-radius: 36px;
	background: var(--violet-700);
	padding: 48px 48px 52px;
	text-align: center;
}

/* Orbs */
.cta-orb{
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}
.cta-orb--1{
	width: 350px;
	height: 350px;
	background: rgba(192,132,252,.45);
	top: -30%;
	left: -8%;
}
.cta-orb--2{
	width: 280px;
	height: 280px;
	background: rgba(236,72,153,.25);
	bottom: -25%;
	right: -5%;
}
.cta-orb--3{
	width: 200px;
	height: 200px;
	background: rgba(129,140,248,.3);
	top: 10%;
	right: 15%;
}

/* Tabs */
.cta-tabs{
	position: relative;
	z-index: 1;
	display: inline-flex;
	background: rgba(255,255,255,.12);
	border-radius: 50px;
	padding: 4px;
	margin-bottom: 32px;
}
.cta-tab{
	padding: 10px 24px;
	border-radius: 50px;
	border: none;
	background: transparent;
	color: rgba(255,255,255,.7);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .25s, color .25s;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.cta-tab:focus,
.cta-tab:focus-visible{
	outline: none;
	box-shadow: none;
}
.cta-tab.is-active{
	background: #fff;
	color: var(--violet-900);
}

/* Panes */
.cta-pane{
	display: none;
}
.cta-pane.is-active{
	display: block;
	position: relative;
	z-index: 1;
	animation: ctaFade .35s ease;
}
@keyframes ctaFade{
	from{ opacity: 0; transform: translateY(8px); }
	to{ opacity: 1; transform: translateY(0); }
}
.cta-pane h2{
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
	color: #fff;
	margin: 0 0 10px;
}
.cta-pane__desc{
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255,255,255,.75);
	margin: 0 auto 28px;
	max-width: 500px;
}

/* Trust bar */
.cta-trust{
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 32px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.15);
}
.cta-trust__item{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: rgba(255,255,255,.85);
}
.cta-trust__item svg{
	stroke: rgba(255,255,255,.6);
	flex-shrink: 0;
}

/* Gift icon */
.cta-gift-icon{
	margin-bottom: 16px;
	color: rgba(255,255,255,.7);
}

/* Buttons */
.cta-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 44px;
	border-radius: 50px;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
	text-decoration: none;
	white-space: nowrap;
}
.cta-btn:hover{
	transform: translateY(-2px);
}
.cta-btn--create{
	background: #fff;
	color: var(--violet-900);
	box-shadow: 0 4px 24px rgba(0,0,0,.15);
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.cta-btn--create:focus,
.cta-btn--create:focus-visible,
.cta-btn--create:active{
	outline: none;
	box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
.cta-btn--create:hover{
	box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.cta-btn--gift{
	background: #fff;
	color: var(--violet-900) !important;
	box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
.cta-btn--gift:hover{
	box-shadow: 0 8px 32px rgba(0,0,0,.2);
	color: var(--violet-900) !important;
}

@media(max-width:600px){
	.cta-block{ padding: 32px 20px 36px; border-radius: 24px; }
	.cta-pane h2{ font-size: 22px; }
	.cta-tab{ padding: 8px 18px; font-size: 13px; }
	.cta-trust{ gap: 14px; }
	.cta-trust__item{ font-size: 12px; }
	.cta-btn{ font-size: 15px; padding: 14px 32px; }
}

/* CTA arrow animation */
.cta-arrow{
	display: inline-block;
	animation: arrowBounce 1.2s ease-in-out infinite;
}

/* Footer */
.lp-footer{
	padding: 120px 20px 60px;
}
.lp-footer__inner{
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--surface-glass);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: 20px;
	padding: 18px 24px;
	border: 1px solid var(--border-glass);
}
.lp-footer__logo{
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.lp-footer__logo img{
	height: 32px;
	width: auto;
	display: block;
}
.lp-footer__links{
	text-align: right;
	line-height: 1.3;
}
.lp-footer__legal{
	font-size: 11px;
	color: var(--text-muted);
	margin-bottom: 2px;
}
.lp-footer__nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2px 12px;
}
.lp-footer__nav a{
	font-size: 12px;
	color: var(--text-muted);
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,.1);
	transition: color .2s;
}
.lp-footer__nav a:hover{
	color: var(--text-secondary);
}

@media(max-width:600px){
	.lp-footer__inner{
		flex-direction: column;
		text-align: center;
		gap: 12px;
		padding: 16px 18px;
	}
	.lp-footer__links{ text-align: center; }
	.lp-footer__nav{ justify-content: center; }
}

/* FAQ */
.faq-section{
	position: relative;
	overflow-x: clip;
	padding: 60px 20px 40px;
}
.faq-orb{
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	pointer-events: none;
	z-index: 0;
}
.faq-orb--1{
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(124,58,237,.45) 0%, rgba(124,58,237,.15) 45%, transparent 70%);
	top: -5%;
	left: 0%;
}
.faq-orb--2{
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(192,132,252,.40) 0%, rgba(167,139,250,.12) 45%, transparent 70%);
	bottom: 0%;
	right: 5%;
}
.faq-orb--3{
	width: 340px;
	height: 340px;
	background: radial-gradient(circle, rgba(236,72,153,.30) 0%, rgba(244,114,182,.10) 45%, transparent 70%);
	top: 35%;
	right: 15%;
}
.faq-section__inner{
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}
.faq-section__title{
	font-size: 32px;
	font-weight: 800;
	color: var(--text-primary);
	margin: 0 0 8px;
}
.faq-section__subtitle{
	font-size: 16px;
	color: var(--text-secondary);
	margin: 0 0 40px;
}
.faqs{
	text-align: left;
	user-select: none;
}
.faq{
	padding: 20px 0;
	border-bottom: 1px solid var(--border-glass-strong);
	cursor: pointer;
}
.faq:last-child{
	border-bottom: none;
}
.faq-q{
	font-weight: 700;
	font-size: 17px;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.faq-q div{
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	transition: transform .25s ease;
}
.faq-q div svg{
	width: 24px;
	height: 24px;
}
.faq-q div svg path{
	fill: var(--text-secondary);
}
.faq-a{
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity .25s ease;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-secondary);
}
.faq-a a{
	color: var(--violet-400) !important;
	text-decoration: none;
}
.faq-on .faq-q div{
	transform: rotate(180deg);
}
.faq-on .faq-a{
	height: auto;
	opacity: 1;
	padding-top: 14px;
}
@media(max-width:600px){
	.faq-section{ padding: 40px 16px 30px; }
	.faq-section__title{ font-size: 24px; }
	.faq-q{ font-size: 15px; }
	.faq-a{ font-size: 14px; }
}

@media (max-width: 500px){
	.quiz__progress-dots{
		display: none;
	}

	.quiz__progress-bar-wrap{
		display: block;
	}

	.quiz__progress-label{
		font-family: var(--font);
		font-weight: 600;
		font-size: 13px;
		color: var(--text-secondary);
		margin-bottom: 8px;
		display: block;
	}

	.quiz__progress-bar{
		width: 100%;
		height: 6px;
		background: rgba(255,255,255,.1);
		border-radius: 3px;
		overflow: hidden;
	}

	.quiz__progress-bar-fill{
		height: 100%;
		background: linear-gradient(90deg, var(--violet-600), var(--violet-400));
		border-radius: 3px;
		transition: width .4s ease;
	}
}

/* === Discount banner === */
.discount-banner{
	position: fixed;
	left: 12px; right: 12px; bottom: 12px;
	max-width: 420px;
	margin: auto;
	z-index: 1000;
	background: linear-gradient(135deg, var(--violet-800), var(--violet-700));
	border: 1px solid var(--violet-500);
	border-radius: 14px;
	padding: 12px 14px;
	box-shadow: 0 8px 32px rgba(0,0,0,.4);
	display: none;
	cursor: pointer;
	animation: discBannerIn .4s ease;
	transition: opacity .35s ease, transform .35s ease;
}
.discount-banner--hide{
	opacity: 0;
	transform: translateY(30px);
	pointer-events: none;
}
@keyframes discBannerIn{
	from{ opacity: 0; transform: translateY(30px); }
	to{ opacity: 1; transform: translateY(0); }
}
.discount-banner__close{
	position: absolute; right: -6px; top: -6px;
	width: 24px; height: 24px;
	background: var(--violet-900); border: 1px solid var(--violet-500);
	border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.discount-banner__close::before,
.discount-banner__close::after{
	content: ''; position: absolute;
	width: 10px; height: 1.5px;
	background: var(--violet-300);
}
.discount-banner__close::before{ transform: rotate(45deg); }
.discount-banner__close::after{ transform: rotate(-45deg); }
.discount-banner__close:hover{ background: var(--violet-700); }
.discount-banner__body{
	display: flex; align-items: center; gap: 10px;
}
.discount-banner__icon{
	flex-shrink: 0; display: flex; align-items: center;
}
.discount-banner__text{
	flex: 1; min-width: 0;
}
.discount-banner__title{
	font-family: var(--font); font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap;
}
.discount-banner__desc{
	font-family: var(--font); font-size: 11px; color: var(--violet-300); margin-top: 1px;
}
.discount-banner__btn{
	flex-shrink: 0;
	background: #fff; color: var(--violet-900);
	font-family: var(--font); font-weight: 700; font-size: 12px;
	padding: 8px 14px; border-radius: 10px; cursor: pointer;
	transition: background .2s;
	white-space: nowrap;
}
.discount-banner__btn:hover{ background: var(--violet-100); }

/* ===== MOBILE PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Disable heavy GPU effects on mobile */
@media (max-width: 768px){

	/* Hide all decorative orbs and floating SVGs */
	.orb,
	.hero__decor,
	.age-picker-orb,
	.age-picker-spark,
	.steps__orb,
	.pw-orb,
	.cta-orb,
	.faq-orb,
	.decor{
		display: none !important;
	}

	/* Kill all backdrop-filter / filter blur on mobile */
	.header__inner{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(26,15,46,.92) !important;
	}

	.age-picker{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background:
			radial-gradient(ellipse 90% 60% at 18% 18%, rgba(192,132,252,.3) 0%, transparent 60%),
			radial-gradient(ellipse 80% 60% at 85% 85%, rgba(236,72,153,.22) 0%, transparent 60%),
			linear-gradient(135deg, #3b0764 0%, #5b21b6 55%, #7e22ce 100%) !important;
	}

	.quiz__picker{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(26,15,46,.85) !important;
	}

	.quiz__step-header{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(21,12,40,.9) !important;
	}

	.quiz__nav-btn{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(21,12,40,.85) !important;
	}

	.quiz__modal-box{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(40,25,90,.95) !important;
	}

	.tariff{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(255,255,255,.06) !important;
	}

	.pw-social-stat{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(255,255,255,.08) !important;
	}

	.pw-installment{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(200,200,210,.08) !important;
	}

	.pw-urgency{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(239,68,68,.08) !important;
	}

	.pw-after{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(124,58,237,.08) !important;
	}

	.pw-guarantee{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(34,197,94,.06) !important;
	}

	.print-upsell-dialog-bg{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(0,0,0,.7) !important;
	}

	.overlay{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.discount-banner{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(26,15,46,.95) !important;
	}

	.stories__play-btn{
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(0,0,0,.5) !important;
	}

	/* Disable expensive infinite animations on mobile */
	.hero__arrow,
	.hero__arrow-bottom,
	.hero__logo,
	.pill__dot,
	.hero__pill-dot,
	.btn::before{
		animation: none !important;
	}

	/* Defer rendering of below-fold sections */
	.examples,
	.steps,
	.stories,
	.faq-section,
	.cta-section{
		content-visibility: auto;
		contain-intrinsic-size: auto 600px;
	}

	/* Disable hover effects on quiz/age-picker answers on mobile */
	.quiz__picker-item:hover{
		background: var(--surface-glass);
		border-color: var(--border-glass);
		transform: none;
		box-shadow: none;
	}

	.quiz__picker-item.is-selected,
	.quiz__picker-item.is-selected:hover{
		background: rgba(192,132,252,.18);
		border-color: rgba(192,132,252,.45);
		box-shadow: 0 0 20px rgba(192,132,252,.15);
	}

	.age-picker__item{
		--card-rot: 0deg;
	}

	.age-picker__item:hover{
		transform: none;
		box-shadow:
			0 4px 0 rgba(40,15,70,.12),
			0 10px 22px rgba(40,15,70,.18),
			0 14px 32px var(--card-glow);
	}

	.age-picker__item:hover .age-picker__icon{
		transform: none;
	}

	.age-picker__item:hover .age-picker__cta{
		background: #ffffff;
		transform: none;
		box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,1);
	}
}


/* ═══════════════════════════════════════════════
   Success/fail modal (портировано из index.php)
   ═══════════════════════════════════════════════ */

.blur-bg {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	z-index: 500;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	background: rgba(10, 8, 20, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
}
.blur-bg-a {
	opacity: 1;
	visibility: visible;
}

.modal-bg {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	z-index: 505;
	display: flex;
	padding: 50px 20px;
	align-items: center;
	justify-content: center;
	overflow: auto;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
}
.modal-bg-a {
	visibility: visible;
	opacity: 1;
}

.modal {
	padding: 30px;
	background: #fff;
	border-radius: 30px;
	width: 100%;
	max-width: 500px;
	text-align: left;
	box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.35);
	position: relative;
	margin: auto;
	transition: 0.5s;
	color: #1a1a2e;
	transform: scale(0.9);
	display: none;
}
.modal-bg-a .modal {
	transform: scale(1);
}

.modal-h {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2em;
	margin-top: 16px;
	color: #1a1a2e;
}
.modal-d {
	font-size: 14px;
	font-weight: 400;
	margin-top: 10px;
	color: #666;
	margin-bottom: 10px;
	line-height: 1.5em;
}
.modal-img {
	width: 100%;
	border-radius: 16px;
}
.modal-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
}
.modal-close {
	width: 30px;
	height: 30px;
	position: absolute;
	z-index: 5;
	right: 10px;
	top: 10px;
	background: url(../../static/cross-w.svg) center center no-repeat;
	background-size: 14px auto;
	background-color: rgba(0,0,0,0.08);
	border-radius: 50%;
	opacity: 0.7;
	cursor: pointer;
	transition: 0.2s;
}
.modal-close:hover { opacity: 1; }

/* Кнопки внутри модалки */
.modal .btn {
	display: inline-block;
	padding: 16px 32px;
	background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
	color: #fff;
	border-radius: 16px;
	margin-top: 16px;
	cursor: pointer;
	box-shadow: 0 10px 30px 0 rgba(124, 58, 237, 0.35);
	font-weight: 600;
	font-size: 15px;
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
	user-select: none;
	text-decoration: none;
	text-align: center;
}
.modal .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px 0 rgba(124, 58, 237, 0.45);
}
.modal .btn-glow {
	position: relative;
	overflow: hidden;
}
.modal .btn-glow::before {
	content: '';
	position: absolute;
	top: -50px;
	bottom: -50px;
	left: -75%;
	width: 80px;
	background: linear-gradient(to right, transparent, rgba(255,255,255,0.75) 50%, transparent);
	filter: blur(6px);
	transform: skewX(-20deg);
	animation: modalBtnGlow 3.5s infinite;
}
@keyframes modalBtnGlow {
	0%   { left: -75%; }
	20%  { left: 125%; }
	100% { left: 125%; }
}
.modal .btn.btn-disabled {
	background: #999;
	box-shadow: none;
	cursor: default;
	pointer-events: none;
	transform: none;
}

/* Upsell songs */
.modal .upsell-songs {
	background: linear-gradient(135deg, #f0e6ff 0%, #e8d5ff 100%);
	border-radius: 16px;
	padding: 20px;
	margin: 20px 0 10px;
	text-align: center;
}
.modal .upsell-songs-icon {
	font-size: 28px;
	margin-bottom: 8px;
}
.modal .upsell-songs-title {
	font-size: 16px;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 6px;
	line-height: 1.25em;
}
.modal .upsell-songs-desc {
	font-size: 13px;
	color: #555;
	margin-bottom: 14px;
	line-height: 1.4em;
}
.modal .upsell-songs-price {
	margin-bottom: 12px;
}
.modal .upsell-songs-price-old {
	font-size: 14px;
	color: #999;
	text-decoration: line-through;
}
.modal .upsell-songs-price-new {
	font-size: 22px;
	font-weight: 800;
	color: #7c3aed;
	margin-left: 6px;
}
.modal .upsell-songs-note {
	font-size: 12px;
	color: #999;
	margin-top: 8px;
}
.modal .btn-upsell-songs {
	display: inline-block;
}

@media (max-width: 520px) {
	.modal { padding: 24px; border-radius: 24px; }
	.modal-bg { padding: 20px 12px; }
	.modal-h { font-size: 19px; }
}

/* =====================================================
   CREATORS — instagram-style stories tray
===================================================== */
.creators{
	padding: 32px 0 40px;
	text-align: center;
	position: relative;
}

.hero .creators{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.creators .container{
	max-width: 1440px;
	position: relative;
}

.creators__viewport{
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
}

.creators__rail{
	display: flex;
	gap: 16px;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 12px 4px 20px;
	-webkit-overflow-scrolling: touch;
}

.creators__rail::-webkit-scrollbar{ display: none; }

.creators__card{
	position: relative;
	flex: 0 0 280px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 20px 16px 22px;
	background:
		linear-gradient(160deg, rgba(45,30,80,.55) 0%, rgba(26,15,46,.35) 60%, rgba(45,30,80,.45) 100%);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: none;
	border-radius: 24px;
	cursor: pointer;
	transition: transform var(--tr), box-shadow var(--tr);
	text-align: center;
	font-family: var(--font);
	color: var(--text-primary);
	-webkit-tap-highlight-color: transparent;
	box-shadow:
		0 14px 40px rgba(0,0,0,.3),
		0 0 60px rgba(139,92,246,.1),
		inset 0 1px 0 rgba(255,255,255,.06);
	isolation: isolate;
}

.creators__card::before{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(184,153,96,.55) 0%, rgba(240,171,252,.35) 35%, rgba(139,92,246,.25) 70%, rgba(184,153,96,.35) 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

.creators__card:hover{
	transform: translateY(-4px);
	box-shadow:
		0 18px 50px rgba(0,0,0,.4),
		0 0 80px rgba(139,92,246,.18),
		inset 0 1px 0 rgba(255,255,255,.08);
}

.creators__card:focus{ outline: none; }
.creators__card:focus-visible{
	outline: 2px solid #b8995f;
	outline-offset: 4px;
}

.creators__ring{
	position: relative;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	padding: 4px;
	background: conic-gradient(from 210deg, #b8995f, #f0abfc, #c084fc, #818cf8, #b8995f);
	box-shadow: 0 6px 24px rgba(184,153,96,.45), 0 0 0 1px rgba(184,153,96,.2);
}

.creators__ring-inner{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	padding: 4px;
	background: var(--violet-950);
	overflow: hidden;
}

.creators__avatar{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--violet-800);
}

video.creators__avatar{
	pointer-events: none;
}

.creators__info{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
}

.creators__nick{
	font-size: 13px;
	color: var(--violet-300);
	font-weight: 600;
	letter-spacing: .2px;
}

.creators__name{
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.3;
}

.creators__subs{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 500;
	margin-top: 2px;
}

.creators__subs svg{ color: var(--violet-300); flex-shrink: 0; }

.creators__btn{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font);
	font-weight: 500;
	font-size: 13px;
	margin-top: 6px;
	color: var(--violet-300);
	background: transparent;
	border: 1px solid var(--border-glass-strong);
	padding: 8px 20px;
	border-radius: 12px;
	transition: color .2s, border-color .2s, background .2s;
}

.creators__card:hover .creators__btn{
	color: var(--text-primary);
	border-color: var(--violet-400);
	background: rgba(139,92,246,.1);
}

.creators__nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(26,15,46,.85);
	border: 1px solid var(--border-glass-strong);
	color: var(--text-primary);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	transition: background var(--tr), transform var(--tr), opacity var(--tr);
	z-index: 3;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.creators__nav:hover{ background: rgba(184,153,96,.85); transform: translateY(-50%) scale(1.06); }
.creators__nav:disabled{ opacity: .3; cursor: default; }
.creators__nav:focus{ outline: none; }
.creators__nav--prev{ left: -8px; }
.creators__nav--next{ right: -8px; }

@media (min-width: 861px){
	.creators__nav{ display: inline-flex; }
}

/* --- Paywall variant: smaller, compact --- */
.creators--paywall{
	padding: 12px 0 20px;
	margin-top: 8px;
}
.creators--paywall .creators__card{
	flex-basis: 200px;
	padding: 14px 12px 16px;
	gap: 10px;
	border-radius: 20px;
}
.creators--paywall .creators__ring{
	width: 110px;
	height: 110px;
	padding: 3px;
}
.creators--paywall .creators__ring-inner{ padding: 3px; }
.creators--paywall .creators__nick{ font-size: 12px; }
.creators--paywall .creators__name{ font-size: 14px; }
.creators--paywall .creators__subs{ font-size: 12px; }
.creators--paywall .creators__btn{
	font-size: 12px;
	padding: 6px 14px;
	margin-top: 4px;
	border-radius: 10px;
}
.creators--paywall .creators__nav{
	width: 36px;
	height: 36px;
}

/* =====================================================
   CREATORS VIEWER (.cv) — fullscreen stories player
===================================================== */
.cv{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease;
}

.cv[hidden]{ display: none; }
.cv.is-open{ opacity: 1; pointer-events: auto; }

.cv__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(8,4,20,.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.cv__stage{
	position: relative;
	width: 100%;
	height: 100%;
	max-width: min(420px, 100vw);
	max-height: 100vh;
	aspect-ratio: 9 / 16;
	background: #000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

@media (min-width: 700px){
	.cv__stage{
		max-height: 90vh;
		border-radius: 16px;
	}
}

.cv__progress{
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	gap: 4px;
	z-index: 4;
	pointer-events: none;
}

.cv__progress-bar{
	flex: 1;
	height: 3px;
	background: rgba(255,255,255,.3);
	border-radius: 2px;
	overflow: hidden;
}

.cv__progress-bar-fill{
	display: block;
	height: 100%;
	width: 0;
	background: #fff;
	transform-origin: left center;
}

.cv__progress-bar.is-done .cv__progress-bar-fill{ width: 100%; }
.cv__progress-bar.is-active .cv__progress-bar-fill{
	width: 100%;
	transition: width linear var(--cv-dur, 7s);
}
.cv__progress-bar.is-active.is-paused .cv__progress-bar-fill{
	transition: none;
}

.cv__header{
	position: absolute;
	top: 22px;
	left: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 4;
	color: #fff;
	pointer-events: none;
}

.cv__header > *{ pointer-events: auto; }

.cv__avatar{
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--violet-800);
	border: 2px solid rgba(255,255,255,.4);
	flex-shrink: 0;
}

.cv__meta{
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
	flex: 1;
}

.cv__nick{
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cv__subs{
	font-size: 12px;
	color: rgba(255,255,255,.7);
}

.cv__close,
.cv__sound{
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--tr);
	flex-shrink: 0;
	padding: 0;
}

.cv__close:focus,
.cv__sound:focus{ outline: none; }

.cv__sound{ margin-left: auto; }
.cv__close:hover,
.cv__sound:hover{ background: rgba(255,255,255,.22); }

.cv__sound .cv__sound-off{ display: none; }
.cv.is-muted .cv__sound-on{ display: none; }
.cv.is-muted .cv__sound-off{ display: block; }

.cv__media{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0a0420;
}

.cv__media video,
.cv__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cv__media-fallback{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.6);
	font-size: 14px;
	padding: 24px;
	text-align: center;
}

.cv__caption{
	position: absolute;
	bottom: 24px;
	left: 16px;
	right: 16px;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-shadow: 0 2px 8px rgba(0,0,0,.6);
	z-index: 3;
	pointer-events: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cv__tap{
	position: absolute;
	top: 60px;
	bottom: 60px;
	width: 35%;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
}

.cv__tap--prev{ left: 0; }
.cv__tap--next{ right: 0; width: 65%; }
.cv__tap:focus{ outline: none; }

.cv__nav{
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.18);
	color: #fff;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0 24px;
	transition: background var(--tr), transform var(--tr), opacity var(--tr);
	flex-shrink: 0;
	z-index: 3;
}

.cv__nav:hover{ background: rgba(255,255,255,.2); transform: scale(1.06); }
.cv__nav:disabled{ opacity: .25; cursor: default; }
.cv__nav:focus{ outline: none; }

@media (min-width: 860px){
	.cv__nav{ display: inline-flex; }
	.creators{ padding-top: 0; }
}

@media (max-width: 768px){
	.creators{ padding: 24px 0 28px; }
	.creators__card{ flex-basis: 240px; padding: 18px 14px 20px; }
	.creators__ring{ width: 128px; height: 128px; }
}

@media (max-width: 480px){
	.creators__card{ flex-basis: 220px; }
}