﻿/**
 * Interior page presentation. Homepage structure stays in main.css.
 */

.page-wrap {
	padding-top: 28px;
}

.page-wrap h1 {
	font-size: clamp(2.05rem, 4.2vw, 3.7rem);
	overflow-wrap: normal;
}

.page-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 128px;
	gap: 12px 22px;
	align-items: center;
	max-width: none;
	margin-bottom: 32px;
	padding: 32px 32px 28px;
	overflow: hidden;
	border-radius: 28px;
	border: 1px solid rgba(240, 212, 138, 0.2);
	background:
		radial-gradient(480px 200px at 100% 0%, rgba(240, 212, 138, 0.14), transparent 62%),
		linear-gradient(165deg, rgba(24, 16, 36, 0.94), rgba(8, 6, 14, 0.9));
}

.page-hero__copy { min-width: 0; }

.page-hero__copy p:last-child {
	max-width: 46rem;
	margin-bottom: 0;
	color: var(--muted);
}

.page-hero__mark {
	width: 112px;
	height: 112px;
	justify-self: end;
	border-radius: 50%;
	border: 1px solid rgba(240, 212, 138, 0.4);
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 246, 220, 0.55), rgba(240, 212, 138, 0.08) 42%, transparent 68%);
	box-shadow: inset 0 0 0 12px rgba(240, 212, 138, 0.06), 0 12px 30px rgba(0, 0, 0, 0.28);
}

.kind-legal .page-hero,
.kind-legal-index .page-hero {
	display: block;
	max-width: 74ch;
	padding: 8px 0 18px;
	border: 0;
	border-bottom: 1px solid rgba(126, 176, 255, 0.22);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.kind-legal .page-hero__mark,
.kind-legal-index .page-hero__mark { display: none; }

.page-wrap .shot-card {
	background: rgba(8, 6, 14, 0.72);
}

.page-wrap .shot-card img,
.page-wrap .split-block img {
	width: auto;
	max-width: 100%;
	max-height: 460px;
	margin-inline: auto;
	object-fit: contain;
	object-position: center;
	background: #09060f;
}

.crest-block { margin: 0 0 34px; }

.crest-block__lead {
	max-width: 42rem;
	color: var(--muted);
}

.tier-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.tier-card {
	margin: 0;
	padding: 14px 12px 16px;
	border-radius: 22px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%),
		rgba(12, 8, 18, 0.88);
	border: 1px solid rgba(240, 212, 138, 0.2);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.tier-card:hover {
	border-color: rgba(240, 212, 138, 0.45);
	transform: translateY(-2px);
}

.tier-card img {
	width: 100%;
	height: auto;
	object-fit: contain;
	background: transparent;
}

.tier-card figcaption {
	margin-top: 8px;
	text-align: center;
	font-family: var(--display);
	font-size: 1.15rem;
	color: var(--gold);
}

.tier-card--vip {
	background:
		linear-gradient(180deg, rgba(126, 176, 255, 0.08), transparent 36%),
		rgba(8, 12, 24, 0.92);
	border-color: rgba(126, 176, 255, 0.28);
}

.tier-card--vip figcaption { color: #d7e6ff; }

.tier-card--frame img {
	aspect-ratio: 1;
	object-fit: contain;
}

.premium-band,
.vip-band,
.premium-bridge {
	margin-bottom: 28px;
}

.premium-band__kicker,
.premium-bridge h2 {
	font-family: var(--display);
}

.premium-band__kicker {
	margin: 0 0 8px;
	color: var(--gold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.78rem;
	font-weight: 700;
}

.premium-bridge {
	padding: 22px 18px 8px;
	border-radius: 28px;
	background:
		radial-gradient(520px 180px at 10% 0%, rgba(240, 212, 138, 0.12), transparent 60%),
		rgba(16, 10, 8, 0.55);
	border: 1px solid rgba(240, 212, 138, 0.2);
}

.premium-bridge__action { margin-top: 4px; }

.page-premium-membership,
.page-vip-membership,
.page-profile-frames-badges {
	width: min(1240px, calc(100% - 40px));
}

.page-premium-membership .page-hero {
	border-bottom-color: rgba(240, 212, 138, 0.34);
}

.gift-stage {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 16px;
	margin: 0 0 28px;
}

.gift-panel {
	position: relative;
	min-height: 300px;
	padding: 26px 24px 22px;
	overflow: hidden;
	border-radius: 28px;
	border: 1px solid rgba(240, 212, 138, 0.22);
	background:
		radial-gradient(380px 200px at 90% 10%, rgba(240, 212, 138, 0.16), transparent 62%),
		linear-gradient(165deg, #17111c, #0b0712 70%);
}

.gift-panel--live {
	border-color: rgba(192, 38, 211, 0.32);
	background:
		radial-gradient(340px 220px at 80% 0%, rgba(192, 38, 211, 0.28), transparent 60%),
		linear-gradient(165deg, #1a0d22, #0b0712 72%);
}

.gift-ornament {
	position: relative;
	width: 128px;
	height: 150px;
	margin-bottom: 18px;
}

.gift-gem {
	position: absolute;
	inset: 18px 22px 10px;
	background: linear-gradient(160deg, #fff6d2, #e7c56a 46%, #8d5b22);
	clip-path: polygon(50% 0, 100% 32%, 80% 100%, 20% 100%, 0 32%);
	box-shadow: 0 16px 30px rgba(199, 150, 69, 0.28);
}

.gift-ring {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 0;
	height: 22px;
	border-radius: 999px;
	border: 2px solid rgba(240, 212, 138, 0.7);
}

.gift-crystal {
	position: absolute;
	left: 28px;
	top: 8px;
	width: 72px;
	height: 110px;
	background: linear-gradient(180deg, #fff, #e9d1ff 40%, #9b4dff);
	clip-path: polygon(50% 0, 100% 22%, 78% 100%, 22% 100%, 0 22%);
}

.gift-spark {
	position: absolute;
	right: 8px;
	top: 24px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #f0d48a;
	box-shadow: 0 0 18px rgba(240, 212, 138, 0.8);
}

.gift-spark--late { top: 70px; right: 24px; width: 8px; height: 8px; }

.live-stage {
	position: relative;
	min-height: 340px;
	margin: 0 0 28px;
	overflow: hidden;
	border-radius: 30px;
	border: 1px solid rgba(192, 38, 211, 0.28);
	background:
		radial-gradient(520px 260px at 72% 42%, rgba(192, 38, 211, 0.32), transparent 62%),
		radial-gradient(420px 280px at 18% 80%, rgba(139, 92, 246, 0.28), transparent 58%),
		linear-gradient(180deg, #140816, #07040f);
}

.live-stage__bar { padding: 18px 20px; }

.live-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #e11d48;
	color: #fff;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.live-pill::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

.live-stage__frame {
	display: grid;
	place-items: center;
	min-height: 230px;
}

.live-stage__lens {
	width: min(72%, 460px);
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
		rgba(0, 0, 0, 0.28);
	box-shadow: inset 0 0 0 1px rgba(240, 212, 138, 0.08), 0 20px 50px rgba(0, 0, 0, 0.35);
}

.voice-stage {
	position: relative;
	margin: 0 0 28px;
	padding: 36px 20px 28px;
	overflow: hidden;
	border-radius: 30px;
	border: 1px solid rgba(126, 176, 255, 0.28);
	background:
		radial-gradient(circle at 50% 0%, rgba(126, 176, 255, 0.2), transparent 46%),
		linear-gradient(180deg, #0d1424, #07040f);
}

.voice-mic {
	width: 54px;
	height: 86px;
	margin: 0 auto 22px;
	border-radius: 28px 28px 18px 18px;
	border: 2px solid rgba(240, 212, 138, 0.7);
	background:
		radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.2), transparent 45%),
		#12182a;
	box-shadow: 0 0 0 10px rgba(126, 176, 255, 0.08);
}

.voice-seats {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	max-width: 640px;
	margin: 0 auto;
}

.voice-seats span {
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid rgba(240, 212, 138, 0.45);
	background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.1), #101624 62%);
	box-shadow: 0 0 0 7px rgba(126, 176, 255, 0.08);
}

.page-about .quote-block {
	padding: 32px 28px;
	border-radius: 28px;
	border-left: 3px solid var(--gold);
	background: linear-gradient(145deg, rgba(36, 24, 12, 0.72), rgba(10, 8, 16, 0.9));
}

.page-about .quote-block p {
	font-family: var(--display);
	font-size: clamp(1.25rem, 2vw, 1.7rem);
	line-height: 1.45;
}

.page-about .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.page-features .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.page-features .info-card,
.page-help-faq .info-card,
.page-contact .info-card {
	border-radius: 20px;
	background: rgba(14, 9, 26, 0.82);
	border: 1px solid rgba(240, 212, 138, 0.18);
}

.page-help-faq .info-card h3 {
	color: var(--gold);
	font-size: 1.15rem;
}

.page-creator-programs .journey,
.page-creator-earnings .journey {
	gap: 14px;
}

.page-creator-programs .journey {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-creator-programs .journey li {
	padding: 62px 14px 14px;
}

.page-creator-earnings .journey {
	margin-left: 8px;
	padding-left: 8px;
	border-left: 1px solid rgba(240, 212, 138, 0.28);
}

.page-creator-earnings .block table { min-width: 0; }

.page-download .store-row { margin-top: 8px; }

.page-download .store-card {
	min-width: min(100%, 220px);
	flex: 1 1 220px;
	padding: 18px;
	border-radius: 20px;
	background: rgba(14, 9, 26, 0.82);
}

.page-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 8px 28px;
	align-items: start;
}

.page-contact .page-hero,
.page-contact .block--prose,
.page-contact .block--links { grid-column: 1 / -1; }

.page-contact .block--cards,
.page-contact .owner-note { grid-column: 1; }

.page-contact .form-panel {
	grid-column: 2;
	grid-row: 3 / span 3;
	border-radius: 24px;
	background: rgba(12, 8, 20, 0.86);
	border: 1px solid rgba(240, 212, 138, 0.22);
}

.kind-legal .legal-doc,
.kind-legal-index .legal-index {
	padding: 8px 0 12px;
}

.kind-legal .legal-doc {
	max-width: 74ch;
	padding: 8px 4px 20px;
}

.kind-legal-index .legal-index {
	grid-template-columns: 1fr 1fr;
}

.kind-legal .source-banner,
.kind-legal-index .source-banner {
	max-width: 74ch;
}

.page-virtual-gifts .split-block {
	align-items: center;
}

.page-virtual-gifts .split-block img {
	max-height: 280px;
}

.home .hero { padding-top: 48px; padding-bottom: 28px; }

.home .feature-row a,
.home .benefits li,
.home .preview-card {
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.home .preview-card:hover,
.home .feature-row a:hover {
	transform: translateY(-2px);
}

.site-footer {
	margin-top: 12px;
	background: linear-gradient(180deg, rgba(16, 10, 28, 0.35), rgba(0, 0, 0, 0.28));
}

@media (min-width: 1101px) {
	.header-inner {
		flex-wrap: nowrap;
		max-width: 1480px;
		gap: 8px;
		padding-inline: 14px;
	}

	.nav-list {
		flex-wrap: nowrap;
		justify-content: flex-end;
	}

	.nav-list a,
	.legal-toggle {
		padding: 6px 6px;
		font-size: 0.78rem;
		white-space: nowrap;
	}

	.brand__name {
		font-size: 1.12rem;
		letter-spacing: 0.08em;
	}

	.header-inner .btn-gold {
		padding-inline: 14px;
		font-size: 0.88rem;
	}
}

@media (min-width: 1500px) {
	.tier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.page-features .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.gift-stage,
	.page-contact,
	.page-creator-programs .journey,
	.page-about .card-grid,
	.kind-legal-index .legal-index {
		grid-template-columns: 1fr 1fr;
	}

	.page-contact .form-panel {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
	.gift-stage,
	.page-contact,
	.kind-legal-index .legal-index {
		grid-template-columns: 1fr;
	}

	.page-contact .form-panel { grid-column: 1; }

	.page-creator-programs .journey,
	.page-about .card-grid,
	.page-features .card-grid,
	.tier-grid,
	.voice-seats {
		grid-template-columns: 1fr 1fr;
	}

	.voice-seats { max-width: 360px; }
	.live-stage { min-height: 260px; }
	.gift-panel { min-height: 0; }
}

@media (max-width: 430px) {
	.page-wrap,
	.page-premium-membership,
	.page-vip-membership,
	.page-profile-frames-badges {
		width: min(100% - 28px, 1240px);
	}

	.tier-grid,
	.page-about .card-grid,
	.page-features .card-grid,
	.page-creator-programs .journey,
	.kind-legal-index .legal-index {
		grid-template-columns: 1fr;
	}

	.tier-card figcaption { font-size: 1.05rem; }
	.page-about .quote-block { padding: 20px 16px; }
	.premium-bridge { padding-inline: 12px; }
	.page-vip-membership .pair-grid { grid-template-columns: 1fr; }
}

.tier-grid--single {
	grid-template-columns: minmax(0, 280px);
}

body.route-premium-membership {
	background:
		radial-gradient(880px 460px at 100% -12%, rgba(212, 168, 74, 0.18), transparent 56%),
		radial-gradient(640px 380px at -8% 18%, rgba(92, 52, 16, 0.4), transparent 52%),
		#07040c;
}

body.route-vip-membership {
	background:
		radial-gradient(820px 440px at 100% -10%, rgba(90, 140, 230, 0.2), transparent 56%),
		radial-gradient(620px 380px at -10% 24%, rgba(24, 40, 96, 0.45), transparent 52%),
		#060712;
}

body.route-live-streaming {
	background:
		radial-gradient(760px 400px at 88% -8%, rgba(180, 40, 72, 0.2), transparent 58%),
		radial-gradient(560px 320px at 0% 16%, rgba(90, 40, 130, 0.22), transparent 54%),
		#07040f;
}

body.route-voice-rooms {
	background:
		radial-gradient(720px 380px at 90% -8%, rgba(70, 170, 180, 0.16), transparent 56%),
		radial-gradient(520px 320px at 0% 20%, rgba(70, 50, 150, 0.24), transparent 52%),
		#07040f;
}

body.route-virtual-gifts {
	background:
		radial-gradient(700px 360px at 92% -8%, rgba(220, 160, 70, 0.16), transparent 56%),
		radial-gradient(520px 300px at 0% 22%, rgba(140, 40, 120, 0.2), transparent 52%),
		#07040f;
}

body.route-profile-frames-badges {
	background:
		radial-gradient(680px 340px at 100% 0%, rgba(180, 160, 120, 0.12), transparent 55%),
		#08060e;
}

.page-premium-membership .page-hero {
	background:
		radial-gradient(520px 220px at 100% 0%, rgba(240, 212, 138, 0.22), transparent 60%),
		linear-gradient(165deg, #1c140c, #09070c 72%);
}

.page-vip-membership .pair-grid {
	grid-template-columns: repeat(2, minmax(0, 240px));
	justify-content: start;
}

.page-vip-membership .pair-grid img {
	max-width: 240px;
	max-height: 190px;
}

.page-vip-membership .page-hero {
	border-color: rgba(126, 176, 255, 0.28);
	background:
		radial-gradient(520px 220px at 100% 0%, rgba(126, 176, 255, 0.2), transparent 60%),
		linear-gradient(165deg, #10182c, #07060f 72%);
}

.page-vip-membership .page-hero__mark {
	border-color: rgba(126, 176, 255, 0.55);
	background: radial-gradient(circle at 35% 30%, rgba(210, 228, 255, 0.7), rgba(80, 120, 210, 0.12) 46%, transparent 70%);
}

.page-live-streaming .page-hero__mark {
	border-radius: 18px;
	border-color: rgba(255, 120, 140, 0.45);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
		radial-gradient(circle at 50% 50%, rgba(225, 29, 72, 0.45), transparent 62%);
}

.page-voice-rooms .page-hero__mark {
	border-color: rgba(120, 210, 200, 0.5);
	box-shadow: inset 0 0 0 16px rgba(126, 176, 255, 0.08), 0 0 0 8px rgba(120, 210, 200, 0.08);
}

.page-virtual-gifts .page-hero__mark {
	border-radius: 22px;
	transform: rotate(45deg);
	background: linear-gradient(160deg, rgba(255, 244, 210, 0.7), rgba(199, 150, 69, 0.15) 48%, transparent 70%);
}

.page-about .page-hero__mark { border-radius: 8px 28px; }

.page-creator-earnings .page-hero,
.page-creator-programs .page-hero {
	background:
		radial-gradient(420px 180px at 100% 0%, rgba(240, 212, 138, 0.12), transparent 62%),
		linear-gradient(180deg, rgba(16, 18, 14, 0.94), rgba(8, 8, 10, 0.9));
}

.page-features .card-grid { align-items: stretch; }

.page-features .info-card:last-child { grid-column: 1 / -1; }

.page-creator-earnings .legal-table-wrap {
	border: 1px solid rgba(240, 212, 138, 0.18);
	border-radius: 18px;
	background: rgba(10, 8, 16, 0.55);
}

.live-stage__lens {
	position: relative;
}

.live-stage__lens::before,
.live-stage__lens::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.live-stage__lens::before { inset: 18% 30%; }
.live-stage__lens::after { inset: 32% 38%; border-color: rgba(240, 212, 138, 0.35); }

.voice-mic {
	position: relative;
}

.voice-mic::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -16px;
	width: 28px;
	height: 14px;
	transform: translateX(-50%);
	border: 2px solid rgba(240, 212, 138, 0.55);
	border-top: 0;
	border-radius: 0 0 16px 16px;
}

.home .panel { padding-top: 46px; }
.home .section-head { margin-bottom: 26px; }
.home .gallery-grid { gap: 18px; }
.home .hero { gap: 48px; }

@media (max-width: 430px) {
	.header-inner { padding-inline: 12px; gap: 8px; }
	.brand__name { font-size: 1rem; letter-spacing: 0.08em; }
	.header-inner .btn-gold { padding-inline: 10px; font-size: 0.82rem; }
	.page-hero {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px 16px;
	}
	.page-hero__mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tier-card,
	.home .preview-card,
	.home .feature-row a {
		transition: none;
	}

	.tier-card:hover,
	.home .preview-card:hover,
	.home .feature-row a:hover {
		transform: none;
	}
}

:root {
	--bg: #090411;
	--ink: #ffffff;
	--muted: #c9bbd8;
	--gold: #f6c75b;
	--gold-deep: #c79645;
	--violet: #a52cff;
	--magenta: #e34bff;
}

body {
	background:
		radial-gradient(900px 480px at 100% -10%, rgba(165, 44, 255, 0.28), transparent 58%),
		radial-gradient(720px 420px at 0% 12%, rgba(109, 25, 184, 0.35), transparent 55%),
		radial-gradient(640px 320px at 50% 100%, rgba(227, 75, 255, 0.12), transparent 50%),
		var(--bg);
}

.nav-list a[aria-current="page"] {
	color: var(--gold);
	box-shadow: inset 0 -2px 0 var(--gold);
}

.studio-hero {
	width: min(1240px, calc(100% - 40px));
	margin: 36px auto 12px;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(200px, 0.72fr) minmax(240px, 0.9fr);
	gap: 22px;
	align-items: center;
}

.studio-hero h1 {
	font-size: clamp(4rem, 7vw, 6.6rem);
	line-height: 0.88;
	background: linear-gradient(180deg, #fff8df, #f6c75b 42%, #a56d28);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.art-emblem,
.art-scene__svg {
	width: min(100%, 340px);
	height: auto;
	margin-inline: auto;
}

.art-scene { margin: 0 0 22px; }

.signin-panel,
.feature-card,
.download-band,
.social-band {
	border: 1px solid rgba(246, 199, 91, 0.28);
	border-radius: 28px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
		rgba(19, 8, 32, 0.82);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.signin-panel { padding: 22px 18px 16px; }

.signin-methods {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.signin-method {
	display: grid;
	justify-items: center;
	gap: 4px;
	min-height: 84px;
	padding: 8px 4px;
	border-radius: 16px;
	background: rgba(9, 4, 17, 0.55);
	color: var(--ink);
	font-size: 0.82rem;
}

.signin-icon { width: 40px; height: 40px; }

.feature-cards {
	width: min(1240px, calc(100% - 40px));
	margin: 18px auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.feature-card {
	display: block;
	padding: 18px 16px;
	text-decoration: none;
	color: var(--ink);
}

.feature-card h2 { font-size: 1.35rem; }

.feature-card p { color: var(--muted); }

.benefits-row,
.member-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.benefits-row li,
.member-row a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 8px 12px;
	border-radius: 16px;
	border: 1px solid rgba(246, 199, 91, 0.22);
	text-decoration: none;
	color: var(--ink);
}

.download-band,
.social-band {
	width: min(1240px, calc(100% - 40px));
	margin: 18px auto;
	padding: 22px;
}

.site-footer .social-band {
	width: min(1240px, calc(100% - 40px));
}

.social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	border: 1px solid rgba(246, 199, 91, 0.35);
	color: var(--gold);
	text-decoration: none;
	background: rgba(9, 4, 17, 0.4);
}

.social-link svg { width: 22px; height: 22px; fill: currentColor; }

.social-link:hover,
.social-link:focus-visible {
	color: #fff6de;
	box-shadow: 0 0 0 3px rgba(227, 75, 255, 0.28);
}

.tier-mark { width: 100%; height: auto; }

.help-search {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: end;
	margin: 0 0 22px;
}

.help-search label { flex: 1 1 100%; }

.help-search input {
	flex: 1 1 220px;
	min-height: 46px;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid rgba(246, 199, 91, 0.4);
	background: #0c0816;
	color: var(--ink);
	font: inherit;
}

@media (max-width: 1100px) {
	.studio-hero,
	.feature-cards { grid-template-columns: 1fr 1fr; }
	.studio-hero__copy { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
	.studio-hero,
	.feature-cards,
	.signin-methods { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
	.signin-methods,
	.feature-cards { grid-template-columns: 1fr; }
	.studio-hero h1 { font-size: clamp(3.2rem, 18vw, 4.4rem); }
}


/* WINART PAGE NEON SYSTEM V1 — local visual enhancement */
body.route-home { --page-neon: #c026d3; --page-neon-soft: rgba(192,38,211,.20); }
body.route-about { --page-neon: #38bdf8; --page-neon-soft: rgba(56,189,248,.22); }
body.route-features { --page-neon: #22d3ee; --page-neon-soft: rgba(34,211,238,.18); }
body.route-live-streaming { --page-neon: #fb7185; --page-neon-soft: rgba(251,113,133,.20); }
body.route-voice-rooms { --page-neon: #38bdf8; --page-neon-soft: rgba(56,189,248,.20); }
body.route-virtual-gifts { --page-neon: #f472b6; --page-neon-soft: rgba(244,114,182,.20); }
body.route-creator-programs { --page-neon: #34d399; --page-neon-soft: rgba(52,211,153,.18); }
body.route-creator-earnings { --page-neon: #4ade80; --page-neon-soft: rgba(74,222,128,.18); }
body.route-vip-membership { --page-neon: #60a5fa; --page-neon-soft: rgba(96,165,250,.22); }
body.route-premium-membership { --page-neon: #fbbf24; --page-neon-soft: rgba(251,191,36,.20); }
body.route-profile-frames-badges { --page-neon: #e879f9; --page-neon-soft: rgba(232,121,249,.20); }
body.route-download { --page-neon: #2dd4bf; --page-neon-soft: rgba(45,212,191,.18); }
body.route-help-faq { --page-neon: #a3e635; --page-neon-soft: rgba(163,230,53,.16); }
body.route-contact { --page-neon: #f59e0b; --page-neon-soft: rgba(245,158,11,.20); }
body.route-legal { --page-neon: #93c5fd; --page-neon-soft: rgba(147,197,253,.16); }

body[class*="route-"] .page-wrap .page-hero {
    border-color: color-mix(in srgb, var(--page-neon, #f0d48a) 58%, transparent);
    background:
        radial-gradient(500px 240px at 100% 0%, var(--page-neon-soft, rgba(240,212,138,.15)), transparent 68%),
        linear-gradient(165deg, rgba(24,16,36,.96), rgba(8,6,14,.94));
    box-shadow: 0 0 28px var(--page-neon-soft, rgba(240,212,138,.12)),
                inset 0 0 24px var(--page-neon-soft, rgba(240,212,138,.06));
}

body[class*="route-"] .page-wrap .page-hero__mark {
    border-color: var(--page-neon, #f0d48a);
    box-shadow: 0 0 18px var(--page-neon-soft, rgba(240,212,138,.15)),
                inset 0 0 20px var(--page-neon-soft, rgba(240,212,138,.10));
}

body[class*="route-"] .page-wrap :is(
    .tier-card, .shot-card, .content-card, .info-card,
    .contact-card, .faq-item, .split-block
) {
    border-color: color-mix(in srgb, var(--page-neon, #f0d48a) 42%, transparent);
    box-shadow: 0 10px 30px var(--page-neon-soft, rgba(240,212,138,.08));
}

body[class*="route-"] .page-wrap :is(.tier-card, .shot-card, .content-card, .info-card):hover {
    border-color: var(--page-neon, #f0d48a);
    box-shadow: 0 0 22px var(--page-neon-soft, rgba(240,212,138,.18));
}

@media (prefers-reduced-motion: no-preference) {
    body[class*="route-"] .page-wrap .page-hero {
        animation: winart-neon-breathe 6s ease-in-out infinite alternate;
    }

    @keyframes winart-neon-breathe {
        from { filter: drop-shadow(0 0 2px var(--page-neon-soft)); }
        to   { filter: drop-shadow(0 0 9px var(--page-neon-soft)); }
    }
}
/* END WINART PAGE NEON SYSTEM V1 */
/* WINART PAGE NEON SYSTEM V2 — LOCAL ONLY */

/* Shared card surfaces */
body[class*="route-"] .page-wrap :is(
    .tier-card,
    .gift-panel,
    .info-card,
    .feature-card,
    .form-panel,
    .premium-bridge,
    .store-card,
    .signin-panel,
    .download-band,
    .social-band,
    .contact-note
) {
    border-color: color-mix(
        in srgb,
        var(--page-neon, #f0d48a) 48%,
        transparent
    );
    box-shadow:
        0 8px 28px var(--page-neon-soft, rgba(240,212,138,.10)),
        inset 0 0 18px rgba(255,255,255,.015);
    transition:
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s ease,
        background-color .28s ease;
}

/* Creator and feature grids */
body[class*="route-"] .page-wrap .feature-cards,
body[class*="route-"] .page-wrap .card-grid,
body[class*="route-"] .page-wrap .tier-grid {
    position: relative;
}

body[class*="route-"] .page-wrap :is(
    .tier-card,
    .gift-panel,
    .info-card,
    .feature-card,
    .form-panel,
    .premium-bridge,
    .store-card,
    .signin-panel,
    .download-band,
    .social-band
):hover {
    border-color: var(--page-neon, #f0d48a);
    box-shadow:
        0 0 12px var(--page-neon-soft, rgba(240,212,138,.15)),
        0 0 30px var(--page-neon-soft, rgba(240,212,138,.12));
    transform: translateY(-3px);
}

/* Creator journey steps */
body[class*="route-"] .page-wrap .journey li {
    border-color: color-mix(
        in srgb,
        var(--page-neon, #f0d48a) 40%,
        transparent
    );
}

/* Section headings */
body[class*="route-"] .page-wrap :is(
    .crest-block h2,
    .premium-band__kicker,
    .gift-panel h2,
    .feature-card h2
) {
    text-shadow: 0 0 14px var(--page-neon-soft, transparent);
}

/* Contact note */
body.route-contact .page-wrap .contact-note {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--page-neon, #f59e0b);
    border-radius: 16px;
    background: var(--page-neon-soft, rgba(245,158,11,.10));
    color: var(--ink);
}

/* Legal document accent */
body.route-legal .page-wrap .legal-doc {
    border-left: 2px solid var(--page-neon, #93c5fd);
    padding-left: 18px;
}

/* Subtle animation */
@media (prefers-reduced-motion: no-preference) {
    body[class*="route-"] .page-wrap :is(
        .tier-card,
        .gift-panel,
        .info-card,
        .feature-card,
        .form-panel
    ) {
        animation: winart-card-glow 7s ease-in-out infinite alternate;
    }

    @keyframes winart-card-glow {
        from {
            box-shadow: 0 8px 22px var(--page-neon-soft);
        }
        to {
            box-shadow: 0 10px 30px var(--page-neon-soft);
        }
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    body[class*="route-"] .page-wrap * {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mobile hover safety */
@media (hover: none) {
    body[class*="route-"] .page-wrap :is(
        .tier-card,
        .gift-panel,
        .info-card,
        .feature-card,
        .form-panel
    ):hover {
        transform: none;
    }
}

/* END WINART PAGE NEON SYSTEM V2 */

/* WINART ABOUT DESIGN V3 — LOCAL ONLY */

body.route-about .page-wrap .page-hero {
    margin-bottom: 16px;
    border-color: rgba(56,189,248,.48);
    background:
        radial-gradient(480px 220px at 100% 0%, rgba(56,189,248,.18), transparent 68%),
        linear-gradient(165deg, rgba(10,24,40,.96), rgba(8,6,14,.94));
    box-shadow: 0 0 28px rgba(56,189,248,.12);
}

body.route-about .page-wrap .page-hero__mark {
    border-color: rgba(56,189,248,.65);
    background: radial-gradient(circle at 35% 30%, rgba(186,230,253,.42), rgba(56,189,248,.12) 48%, transparent 72%);
    box-shadow: 0 0 22px rgba(56,189,248,.20), inset 0 0 18px rgba(56,189,248,.12);
}

body.route-about .page-wrap .art-scene {
    margin: 0 auto 12px;
    text-align: center;
}

body.route-about .page-wrap .art-scene__svg {
    width: min(100%, 240px);
    max-height: 190px;
    display: block;
    margin: 0 auto;
}

body.route-about .page-wrap .quote-block {
    border-left-color: #38bdf8;
    border-color: rgba(56,189,248,.42);
    background: linear-gradient(145deg, rgba(9,28,44,.82), rgba(10,8,16,.94));
    box-shadow: 0 0 24px rgba(56,189,248,.10);
}

body.route-about .page-wrap .info-card {
    border-color: rgba(56,189,248,.38);
    box-shadow: 0 8px 24px rgba(56,189,248,.09);
}

body.route-about .page-wrap .info-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 0 24px rgba(56,189,248,.20);
}

@media (max-width: 700px) {
    body.route-about .page-wrap .page-hero {
        margin-bottom: 12px;
        padding: 22px 18px;
    }

    body.route-about .page-wrap .art-scene__svg {
        width: min(100%, 210px);
        max-height: 165px;
    }
}

/* END WINART ABOUT DESIGN V3 */

/* WINART PROFESSIONAL TYPOGRAPHY V1 — LOCAL ONLY */

/* Global reading comfort */
body {
    font-size: 15px;
    line-height: 1.65;
}

p, li {
    font-size: 15px;
    line-height: 1.65;
}

/* Consistent page headings */
h1,
.page-wrap h1 {
    font-size: clamp(30px, 3.2vw, 40px);
    line-height: 1.16;
    letter-spacing: 0;
}

h2 {
    font-size: clamp(21px, 2vw, 24px);
    line-height: 1.25;
}

h3 {
    font-size: 18px;
    line-height: 1.35;
}

/* Interior page hero */
.page-hero {
    margin-bottom: 22px;
    padding: 26px 28px 24px;
    border-radius: 22px;
}

.page-hero__copy p:last-child {
    font-size: 15px;
    line-height: 1.6;
}

/* Content spacing */
.block {
    margin-bottom: 20px;
}

.info-card,
.form-panel {
    padding: 16px;
}

.info-card p,
.info-card li,
.form-panel p {
    font-size: 14px;
    line-height: 1.65;
}

.info-card h3 {
    font-size: 17px;
}

/* About page */
.page-about .quote-block {
    padding: 22px 24px;
    border-radius: 22px;
}

.page-about .quote-block p {
    font-size: 16px;
    line-height: 1.65;
    font-family: var(--font);
}

.page-about .info-card {
    padding: 17px;
}

/* Legal readability */
.legal-doc p,
.legal-doc li {
    font-size: 14px;
    line-height: 1.75;
}

.legal-doc h2 {
    font-size: 22px;
}

.legal-doc h3 {
    font-size: 17px;
}

/* Footer typography */
.site-footer p,
.site-footer li,
.site-footer a {
    font-size: 13px;
    line-height: 1.6;
}

.footer-base {
    font-size: 12px;
}

/* Mobile */
@media (max-width: 700px) {
    body {
        font-size: 14px;
    }

    p, li {
        font-size: 14px;
    }

    h1,
    .page-wrap h1 {
        font-size: clamp(27px, 7vw, 34px);
    }

    h2 {
        font-size: 21px;
    }

    h3 {
        font-size: 17px;
    }

    .page-hero {
        padding: 20px 18px;
        margin-bottom: 16px;
        border-radius: 18px;
    }

    .page-hero__copy p:last-child {
        font-size: 14px;
    }

    .info-card,
    .form-panel {
        padding: 14px;
    }

    .page-about .quote-block {
        padding: 18px;
    }

    .page-about .quote-block p {
        font-size: 15px;
    }
}

/* END WINART PROFESSIONAL TYPOGRAPHY V1 */

/* =========================================================
   WINART TYPOGRAPHY V2 — FULL WEBSITE CONTENT STANDARD
   Content-focused sizing; preserves branding and artwork.
   ========================================================= */

/* Main page reading text */
.page-wrap {
    font-size: 15px;
    line-height: 1.65;
}

.page-wrap p,
.page-wrap li,
.page-wrap dd,
.page-wrap dt,
.page-wrap blockquote,
.page-wrap figcaption {
    font-size: 15px;
    line-height: 1.65;
}

/* Consistent content headings */
.page-wrap h1 {
    font-size: clamp(30px, 3.2vw, 38px);
    line-height: 1.18;
}

.page-wrap h2 {
    font-size: clamp(21px, 2vw, 24px);
    line-height: 1.3;
}

.page-wrap h3 {
    font-size: 17px;
    line-height: 1.4;
}

.page-wrap h4,
.page-wrap h5,
.page-wrap h6 {
    font-size: 15px;
    line-height: 1.4;
}

/* Cards, feature descriptions and membership details */
.page-wrap .info-card p,
.page-wrap .feature-card p,
.page-wrap .store-card p,
.page-wrap .tier-card p,
.page-wrap .gift-panel p,
.page-wrap .form-panel p,
.page-wrap .card-grid p {
    font-size: 14px;
    line-height: 1.65;
}

.page-wrap .info-card h3,
.page-wrap .feature-card h3,
.page-wrap .store-card h3,
.page-wrap .tier-card h3 {
    font-size: 17px;
    line-height: 1.4;
}

/* FAQ, legal and informational sections */
.page-wrap .faq-item,
.page-wrap .faq-item p,
.page-wrap .legal-doc p,
.page-wrap .legal-doc li,
.page-wrap .contact-note {
    font-size: 14px;
    line-height: 1.75;
}

.page-wrap .legal-doc h2 {
    font-size: 21px;
}

.page-wrap .legal-doc h3 {
    font-size: 17px;
}

/* Forms and field labels */
.page-wrap .contact-form label,
.page-wrap .form-panel label {
    font-size: 14px;
    line-height: 1.5;
}

.page-wrap input,
.page-wrap select,
.page-wrap textarea {
    font-size: 14px;
}

/* Buttons and text links */
.page-wrap .btn,
.page-wrap button,
.page-wrap .text-link {
    font-size: 14px;
}

/* Footer reading text */
.site-footer p,
.site-footer li,
.site-footer a {
    font-size: 13px;
    line-height: 1.6;
}

/* Mobile reading comfort */
@media (max-width: 640px) {
    .page-wrap {
        font-size: 14px;
        line-height: 1.65;
    }

    .page-wrap p,
    .page-wrap li,
    .page-wrap dd,
    .page-wrap dt,
    .page-wrap blockquote,
    .page-wrap figcaption {
        font-size: 14px;
        line-height: 1.65;
    }

    .page-wrap h1 {
        font-size: clamp(27px, 7vw, 34px);
    }

    .page-wrap h2 {
        font-size: 20px;
    }

    .page-wrap h3 {
        font-size: 16px;
    }

    .page-wrap .info-card p,
    .page-wrap .feature-card p,
    .page-wrap .store-card p,
    .page-wrap .tier-card p,
    .page-wrap .gift-panel p,
    .page-wrap .form-panel p {
        font-size: 13.5px;
    }

    .page-wrap .faq-item,
    .page-wrap .faq-item p,
    .page-wrap .legal-doc p,
    .page-wrap .legal-doc li,
    .page-wrap .contact-note {
        font-size: 13.5px;
    }
}


/* WINART SOCIAL BRAND BUTTONS — 3D PREMIUM */
.social-row {
    gap: 12px;
    flex-wrap: wrap;
}

.social-link {
    min-height: 48px;
    padding: 8px 16px 8px 11px;
    gap: 10px;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    background: linear-gradient(145deg, #292333, #100c19);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 5px 0 rgba(0,0,0,.38),
        0 8px 18px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.16);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    text-decoration: none;
}

.social-link svg {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    fill: currentColor;
}

.social-link:hover,
.social-link:focus-visible {
    color: #fff;
    transform: translateY(-3px);
    filter: brightness(1.12);
    box-shadow:
        0 8px 0 rgba(0,0,0,.3),
        0 12px 25px rgba(0,0,0,.3);
}

/* Facebook */
.social-link--facebook {
    background: linear-gradient(145deg, #1877f2, #0755bd);
    border-color: #559bff;
    box-shadow: 0 4px 0 #063b87, 0 8px 20px rgba(24,119,242,.28), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Instagram */
.social-link--instagram {
    background: linear-gradient(125deg, #833ab4 0%, #c13584 42%, #e1306c 68%, #f77737 100%);
    border-color: #e88ab8;
    box-shadow: 0 4px 0 #70265f, 0 8px 20px rgba(225,48,108,.28), inset 0 1px 0 rgba(255,255,255,.3);
}

/* YouTube */
.social-link--youtube {
    background: linear-gradient(145deg, #ff3030, #c90000);
    border-color: #ff7777;
    box-shadow: 0 4px 0 #850000, 0 8px 20px rgba(255,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
}

/* LinkedIn */
.social-link--linkedin {
    background: linear-gradient(145deg, #0a85c9, #075b91);
    border-color: #50b9f0;
    box-shadow: 0 4px 0 #06416a, 0 8px 20px rgba(10,132,201,.25), inset 0 1px 0 rgba(255,255,255,.3);
}

/* X */
.social-link--twitter {
    background: linear-gradient(145deg, #343434, #080808);
    border-color: #777;
    box-shadow: 0 4px 0 #000, 0 8px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.22);
}

.footer-email-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    text-decoration: none;
}

.footer-email-link svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.footer-email-link:hover {
    color: var(--gold);
}

@media (max-width: 640px) {
    .social-row {
        gap: 10px;
    }

    .social-link {
        min-height: 44px;
        padding: 7px 12px 7px 9px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-link {
        transition: none;
    }
}

/* WINART SIGN-IN LUXURY GLASS CARD V1 */
.signin-panel {
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding: 28px 22px 22px;
    border: 1px solid rgba(255,210,105,.72);
    border-radius: 25px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(154,55,255,.24), transparent 55%),
        linear-gradient(145deg, rgba(35,17,53,.97), rgba(10,5,20,.98) 70%);
    box-shadow: 0 0 0 1px rgba(180,100,255,.12), 0 16px 45px rgba(0,0,0,.42), 0 0 28px rgba(156,65,255,.18), inset 0 1px 0 rgba(255,255,255,.16);
}

.signin-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,218,130,.85), transparent 28%, rgba(185,74,255,.65) 72%, rgba(255,218,130,.7));
    opacity: .5;
    filter: blur(9px);
    pointer-events: none;
}

.signin-panel .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 17px;
    margin-bottom: 9px;
    border: 1px solid rgba(255,205,91,.65);
    border-radius: 999px;
    color: #ffd66f;
    background: rgba(15,8,27,.8);
    letter-spacing: .16em;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.signin-panel h2 {
    color: #fff2d0;
    text-shadow: 0 0 18px rgba(255,190,90,.24);
    margin-bottom: 12px;
}

.signin-panel > p:not(.eyebrow) {
    color: #e2d9ef;
    font-size: 14px;
    line-height: 1.65;
}

.signin-methods {
    gap: 12px;
    margin-top: 18px;
}

.signin-methods li { min-width: 0; }

.signin-method {
    display: flex;
    min-height: 88px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 6px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(15,8,28,.9));
    box-shadow: 0 5px 0 rgba(0,0,0,.32), 0 9px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.signin-icon {
    display: block;
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.28));
}

.signin-method > span {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.signin-methods li:nth-child(1) .signin-method { border-color: rgba(66,133,244,.8); box-shadow: 0 5px 0 #173b77, 0 0 17px rgba(66,133,244,.2); }
.signin-methods li:nth-child(2) .signin-method { border-color: rgba(24,119,242,.8); box-shadow: 0 5px 0 #103e83, 0 0 17px rgba(24,119,242,.2); }
.signin-methods li:nth-child(3) .signin-method { border-color: rgba(52,168,83,.8); box-shadow: 0 5px 0 #14552d, 0 0 17px rgba(52,168,83,.2); }
.signin-methods li:nth-child(4) .signin-method { border-color: rgba(220,220,230,.65); box-shadow: 0 5px 0 #44404e, 0 0 17px rgba(255,255,255,.12); }
.signin-methods li:nth-child(5) .signin-method { border-color: rgba(234,67,53,.75); box-shadow: 0 5px 0 #7e2925, 0 0 17px rgba(234,67,53,.18); }
.signin-methods li:nth-child(6) .signin-method { border-color: rgba(190,90,255,.8); box-shadow: 0 5px 0 #57217c, 0 0 17px rgba(190,90,255,.2); }

@media (hover: hover) {
    .signin-method:hover {
        transform: translateY(-4px);
        border-color: #ffd36d;
        box-shadow: 0 8px 0 rgba(0,0,0,.3), 0 0 24px rgba(190,100,255,.3);
    }
}

@media (max-width: 640px) {
    .signin-panel { padding: 22px 16px 18px; border-radius: 21px; }
    .signin-methods { gap: 9px; }
    .signin-method { min-height: 78px; }
    .signin-icon { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .signin-method { transition: none; }
}

/* ==========================================================
   WINART ALL-PAGES FINAL LUXURY PATCH
   Premium 3D Neon Purple / Gold / Pink
   Local website theme only
   ========================================================== */

:root {
    --wa-bg: #09040f;
    --wa-panel: #160b22;
    --wa-panel-light: #21102f;
    --wa-gold: #ffd36d;
    --wa-gold-soft: #c99b45;
    --wa-purple: #c15cff;
    --wa-pink: #ff4fd8;
    --wa-blue: #54a9ff;
    --wa-text: #f5edff;
    --wa-muted: #cbbce0;
    --wa-border: rgba(255, 211, 109, .30);
    --wa-shadow: 0 15px 36px rgba(0, 0, 0, .38);
}

/* Global page atmosphere */
body {
    background-color: var(--wa-bg);
}

.page-wrap {
    position: relative;
    isolation: isolate;
}

.page-wrap > section,
.page-wrap > article {
    position: relative;
}

/* Universal section headings */
.section-head {
    margin-bottom: 24px;
}

.section-head h2,
.page-hero h1,
.page-wrap h2 {
    text-shadow: 0 2px 16px rgba(255, 194, 91, .16);
}

.eyebrow {
    color: var(--wa-gold);
    letter-spacing: .15em;
    font-weight: 800;
}

/* Page hero cards */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(25px, 4vw, 48px);
    border: 1px solid var(--wa-border);
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 90% 10%, rgba(190, 75, 255, .19), transparent 43%),
        linear-gradient(145deg, #21102f, #0e0718 72%);
    box-shadow: var(--wa-shadow), inset 0 1px 0 rgba(255,255,255,.09);
}

.page-hero::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -110px;
    top: -115px;
    border: 1px solid rgba(255,211,109,.35);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(191,75,255,.24);
    pointer-events: none;
}

.page-hero__mark {
    filter: drop-shadow(0 0 20px rgba(194,85,255,.35));
}

/* Main content blocks */
.block,
.panel,
.split-block,
.gallery-section,
.premium-bridge {
    border-radius: 23px;
}

.block--prose,
.block--cards,
.block--steps,
.block--table,
.block--links,
.split-block,
.panel {
    background: linear-gradient(145deg, rgba(34,17,49,.72), rgba(13,7,22,.86));
    border: 1px solid rgba(255,211,109,.20);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* Universal card grids */
.card-grid,
.feature-cards,
.gallery-grid,
.pair-grid,
.store-row {
    gap: 18px;
}

.info-card,
.feature-card,
.preview-card,
.store-card,
.shot-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,211,109,.35);
    border-radius: 21px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(190,75,255,.13), transparent 55%),
        linear-gradient(145deg, #21112f, #100818 80%);
    box-shadow:
        0 9px 0 rgba(0,0,0,.25),
        0 14px 28px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.09);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.info-card,
.store-card {
    padding: 23px;
}

.feature-card,
.preview-card {
    padding: 22px;
}

.info-card::before,
.feature-card::before,
.preview-card::before,
.store-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255,255,255,.055), transparent 38%);
    pointer-events: none;
}

.info-card h3,
.feature-card h3,
.preview-card__title,
.store-card__name {
    color: #fff2d0;
    text-shadow: 0 2px 12px rgba(255,195,90,.18);
}

.info-card p,
.feature-card p,
.preview-card__text,
.store-card__detail {
    color: var(--wa-muted);
    line-height: 1.7;
}

/* Hover interaction */
@media (hover: hover) {
    .info-card:hover,
    .feature-card:hover,
    .preview-card:hover,
    .store-card:hover,
    .shot-card:hover {
        transform: translateY(-6px);
        border-color: var(--wa-gold);
        box-shadow:
            0 12px 0 rgba(0,0,0,.25),
            0 18px 35px rgba(0,0,0,.32),
            0 0 23px rgba(190,75,255,.19),
            inset 0 1px 0 rgba(255,255,255,.16);
    }
}

/* Feature icon containers */
.feature-icon {
    border: 1px solid rgba(255,211,109,.48);
    border-radius: 14px;
    background: linear-gradient(145deg, #392052, #170c25);
    box-shadow: 0 0 17px rgba(190,75,255,.20);
}

/* Benefit cards */
.benefits-row {
    gap: 12px;
}

.benefits-row li {
    border: 1px solid rgba(255,211,109,.32);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(145deg, #241332, #100819);
    box-shadow: 0 7px 18px rgba(0,0,0,.23);
}

/* Creator journey */
.tick-list li,
.journey li {
    border-bottom: 1px solid rgba(255,211,109,.18);
    padding: 13px 8px;
}

.journey li {
    background: rgba(35,17,49,.48);
    border-radius: 12px;
    margin-bottom: 9px;
}

/* Membership */
.member-row,
.premium-band,
.vip-band {
    gap: 15px;
}

.member-row > *,
.premium-band > *,
.vip-band > * {
    border: 1px solid rgba(255,211,109,.38);
    border-radius: 19px;
    background: linear-gradient(145deg, #291438, #100819);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.premium-band,
.vip-band {
    padding: 18px;
}

.premium-bridge {
    border: 1px solid rgba(193,92,255,.4);
    background: linear-gradient(145deg, #251035, #100819);
    padding: 24px;
    box-shadow: 0 0 25px rgba(193,92,255,.12);
}

/* Legal documents */
.legal-doc {
    position: relative;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(255,211,109,.32);
    border-radius: 22px;
    background: linear-gradient(145deg, #1c1029, #0d0715);
    box-shadow: var(--wa-shadow);
    line-height: 1.85;
}

.legal-doc h2,
.legal-doc h3,
.legal-doc h4 {
    color: #ffe2a0;
    text-shadow: 0 0 14px rgba(255,190,90,.15);
}

.legal-doc p,
.legal-doc li {
    color: #ded2ec;
}

.legal-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    padding: 0;
    list-style: none;
}

.legal-index li {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(255,211,109,.34);
    border-radius: 18px;
    background: linear-gradient(145deg, #241333, #100819);
    box-shadow: 0 8px 20px rgba(0,0,0,.24);
    transition: transform .22s ease, border-color .22s ease;
}

.legal-index a {
    color: #ffe3a1;
    font-weight: 700;
}

@media (hover: hover) {
    .legal-index li:hover {
        transform: translateY(-4px);
        border-color: var(--wa-purple);
    }
}

/* Legal and source notices */
.source-banner,
.caution,
.fine-caution,
.contact-note {
    border-radius: 13px;
    padding: 14px 17px;
    border: 1px solid rgba(255,211,109,.28);
    background: rgba(32,17,45,.75);
    color: #e7d9f5;
}

/* Tables */
.legal-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255,211,109,.30);
    border-radius: 17px;
    background: #130a1d;
}

.legal-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.legal-table-wrap th {
    color: #ffe3a1;
    background: #291638;
}

.legal-table-wrap th,
.legal-table-wrap td {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255,211,109,.17);
}

/* Contact and FAQ */
.form-panel,
.contact-form,
.help-search {
    border: 1px solid rgba(255,211,109,.30);
    border-radius: 21px;
    background: linear-gradient(145deg, #21112f, #100819);
    box-shadow: var(--wa-shadow);
}

.form-panel {
    padding: 24px;
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.help-search input {
    border: 1px solid rgba(255,211,109,.36);
    border-radius: 11px;
    background: #100819;
    color: #fff;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.help-search input:focus {
    border-color: var(--wa-purple);
    box-shadow: 0 0 0 3px rgba(193,92,255,.17);
    outline: none;
}

/* Store cards */
.store-card__state {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 12px;
    background: linear-gradient(135deg, #ffdf83, #d69b32);
    color: #211000;
    font-weight: 800;
    font-size: 11px;
}

/* Quote and artwork */
.quote-block,
.shot-card {
    border: 1px solid rgba(255,211,109,.34);
    border-radius: 20px;
    background: linear-gradient(145deg, #241332, #100819);
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.shot-card img {
    border-radius: inherit;
}

/* Buttons and links */
.page-wrap .btn-gold {
    box-shadow: 0 6px 0 #815c20, 0 10px 22px rgba(255,190,80,.20);
    transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
    .page-wrap .btn-gold:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #815c20, 0 14px 28px rgba(255,190,80,.30);
    }
}

.page-wrap a:focus-visible,
.page-wrap button:focus-visible {
    outline: 2px solid var(--wa-gold);
    outline-offset: 4px;
}

/* Page-specific accent variations */
.page-about { --wa-accent: #55baff; }
.page-features { --wa-accent: #c15cff; }
.page-live-streaming { --wa-accent: #ff4fd8; }
.page-voice-rooms { --wa-accent: #54d8ff; }
.page-virtual-gifts { --wa-accent: #ffbd55; }
.page-creator-programs { --wa-accent: #ff78d4; }
.page-creator-earnings { --wa-accent: #f5c45d; }
.page-vip-membership { --wa-accent: #bd8aff; }
.page-premium-membership { --wa-accent: #ffd36d; }
.page-profile-frames-badges { --wa-accent: #ff82ce; }
.page-contact { --wa-accent: #62caff; }
.page-help-faq { --wa-accent: #a78bff; }

.page-wrap[class*="page-"] .info-card,
.page-wrap[class*="page-"] .preview-card {
    --local-glow: var(--wa-accent, var(--wa-purple));
}

.page-wrap[class*="page-"] .info-card:hover,
.page-wrap[class*="page-"] .preview-card:hover {
    box-shadow:
        0 12px 0 rgba(0,0,0,.25),
        0 0 24px color-mix(in srgb, var(--local-glow) 30%, transparent);
}

/* Responsive layout */
@media (max-width: 900px) {
    .legal-index {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-grid,
    .gallery-grid,
    .feature-cards {
        gap: 13px;
    }
}

@media (max-width: 640px) {
    .page-hero {
        padding: 23px 17px;
        border-radius: 19px;
    }

    .info-card,
    .store-card,
    .feature-card,
    .preview-card {
        padding: 18px;
        border-radius: 17px;
    }

    .legal-doc {
        padding: 20px 16px;
        border-radius: 17px;
    }

    .legal-index {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .legal-index li {
        padding: 16px;
    }

    .form-panel {
        padding: 18px;
    }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .info-card,
    .feature-card,
    .preview-card,
    .store-card,
    .shot-card,
    .legal-index li,
    .page-wrap .btn-gold {
        transition: none !important;
        transform: none !important;
    }
}

/* End WINART ALL-PAGES FINAL LUXURY PATCH */

/* ==========================================================
   WINART GLOBAL PREMIUM 3D CARD SYSTEM V1
   Shared card design for every official website page
   ========================================================== */

:root {
    --winart-card-gold: #e8bd65;
    --winart-card-gold-soft: rgba(232,189,101,.42);
    --winart-card-purple: #291338;
    --winart-card-glow: rgba(178,91,255,.24);
    --winart-card-text: #f8edff;
}

/* Common card surfaces across all pages */
:where(
    .card-grid > *,
    .feature-cards > *,
    .gallery-grid > *,
    .signin-methods > *,
    .store-row > *,
    .benefits-row > *,
    .member-row > *,
    .journey > *,
    .pair-grid > *,
    .info-card,
    .feature-card,
    .shot-card,
    .preview-card,
    .store-card,
    .panel,
    .earn-panel,
    .contact-note,
    .form-panel,
    .legal-index > *,
    .block--cards > *,
    .block--steps .journey > *,
    .member-row > *,
    .premium-band > *,
    .vip-band > *
) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--winart-card-gold-soft);
    border-radius: 20px;
    background:
        radial-gradient(
            ellipse at 12% 0%,
            rgba(160,75,220,.20),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(48,23,65,.97),
            rgba(15,8,24,.98) 72%
        );
    box-shadow:
        0 12px 28px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.075),
        inset 0 -1px 0 rgba(232,189,101,.08);
    transform: translateZ(0);
    transform-style: preserve-3d;
    transition:
        transform .38s cubic-bezier(.2,.75,.25,1),
        border-color .35s ease,
        box-shadow .38s ease,
        background .35s ease;
}

/* Soft ambient light */
:where(
    .card-grid > *,
    .feature-cards > *,
    .gallery-grid > *,
    .signin-methods > *,
    .store-row > *,
    .benefits-row > *,
    .member-row > *,
    .journey > *,
    .pair-grid > *,
    .info-card,
    .feature-card,
    .shot-card,
    .preview-card,
    .store-card,
    .panel,
    .earn-panel,
    .contact-note,
    .form-panel,
    .legal-index > *,
    .block--cards > *,
    .premium-band > *,
    .vip-band > *
)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(255,220,150,.10),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.025) 50%,
            transparent 75%
        );
    opacity: .8;
}

/* Animated glass reflection */
:where(
    .card-grid > *,
    .feature-cards > *,
    .gallery-grid > *,
    .signin-methods > *,
    .store-row > *,
    .benefits-row > *,
    .member-row > *,
    .journey > *,
    .pair-grid > *,
    .info-card,
    .feature-card,
    .shot-card,
    .preview-card,
    .store-card,
    .panel,
    .earn-panel,
    .contact-note,
    .form-panel,
    .legal-index > *,
    .block--cards > *,
    .premium-band > *,
    .vip-band > *
)::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -75%;
    width: 48%;
    height: 180%;
    z-index: 0;
    pointer-events: none;
    transform: rotate(22deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );
    opacity: 0;
    transition: left .75s ease, opacity .35s ease;
}

/* Keep card content above decorative layers */
:where(
    .card-grid > *,
    .feature-cards > *,
    .gallery-grid > *,
    .signin-methods > *,
    .store-row > *,
    .benefits-row > *,
    .member-row > *,
    .journey > *,
    .pair-grid > *,
    .info-card,
    .feature-card,
    .shot-card,
    .preview-card,
    .store-card,
    .panel,
    .earn-panel,
    .contact-note,
    .form-panel,
    .legal-index > *,
    .block--cards > *,
    .premium-band > *,
    .vip-band > *
) > * {
    position: relative;
    z-index: 1;
}

/* 3D hover interaction */
@media (hover: hover) and (pointer: fine) {
    :where(
        .card-grid > *,
        .feature-cards > *,
        .gallery-grid > *,
        .signin-methods > *,
        .store-row > *,
        .benefits-row > *,
        .member-row > *,
        .journey > *,
        .pair-grid > *,
        .info-card,
        .feature-card,
        .shot-card,
        .preview-card,
        .store-card,
        .panel,
        .earn-panel,
        .contact-note,
        .form-panel,
        .legal-index > *,
        .block--cards > *,
        .premium-band > *,
        .vip-band > *
    ):hover {
        transform: translateY(-7px) perspective(900px) rotateX(1.2deg);
        border-color: rgba(255,211,119,.88);
        box-shadow:
            0 22px 42px rgba(0,0,0,.42),
            0 0 24px var(--winart-card-glow),
            0 0 8px rgba(232,189,101,.16),
            inset 0 1px 0 rgba(255,255,255,.13);
    }

    :where(
        .card-grid > *,
        .feature-cards > *,
        .gallery-grid > *,
        .signin-methods > *,
        .store-row > *,
        .benefits-row > *,
        .member-row > *,
        .journey > *,
        .pair-grid > *,
        .info-card,
        .feature-card,
        .shot-card,
        .preview-card,
        .store-card,
        .panel,
        .earn-panel,
        .contact-note,
        .form-panel,
        .legal-index > *,
        .block--cards > *,
        .premium-band > *,
        .vip-band > *
    ):hover::after {
        left: 130%;
        opacity: 1;
    }
}

/* Premium heading and body typography inside cards */
:where(
    .info-card,
    .feature-card,
    .shot-card,
    .preview-card,
    .store-card,
    .panel,
    .earn-panel
) :where(h2, h3, h4, .card-title) {
    color: #ffe6a8;
    text-shadow: 0 2px 12px rgba(232,189,101,.16);
}

:where(
    .info-card,
    .feature-card,
    .shot-card,
    .preview-card,
    .store-card,
    .panel,
    .earn-panel
) :where(p, li) {
    line-height: 1.75;
}

/* Keyboard accessibility */
:where(
    .card-grid > *,
    .feature-cards > *,
    .gallery-grid > *,
    .signin-methods > *,
    .store-row > *,
    .info-card,
    .feature-card,
    .shot-card,
    .preview-card,
    .store-card
):focus-within {
    outline: 2px solid rgba(255,211,119,.75);
    outline-offset: 3px;
}

/* Responsive card surfaces */
@media (max-width: 767px) {
    :where(
        .card-grid > *,
        .feature-cards > *,
        .gallery-grid > *,
        .signin-methods > *,
        .store-row > *,
        .benefits-row > *,
        .member-row > *,
        .journey > *,
        .pair-grid > *,
        .info-card,
        .feature-card,
        .shot-card,
        .preview-card,
        .store-card,
        .panel,
        .earn-panel,
        .contact-note,
        .form-panel,
        .legal-index > *,
        .block--cards > *,
        .premium-band > *,
        .vip-band > *
    ) {
        border-radius: 16px;
        box-shadow:
            0 8px 20px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.07);
    }
}

/* Respect device motion preferences */
@media (prefers-reduced-motion: reduce) {
    :where(
        .card-grid > *,
        .feature-cards > *,
        .gallery-grid > *,
        .signin-methods > *,
        .store-row > *,
        .benefits-row > *,
        .member-row > *,
        .journey > *,
        .pair-grid > *,
        .info-card,
        .feature-card,
        .shot-card,
        .preview-card,
        .store-card,
        .panel,
        .earn-panel,
        .contact-note,
        .form-panel,
        .legal-index > *,
        .block--cards > *,
        .premium-band > *,
        .vip-band > *
    ) {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    :where(
        .card-grid > *,
        .feature-cards > *,
        .gallery-grid > *,
        .signin-methods > *,
        .store-row > *,
        .benefits-row > *,
        .member-row > *,
        .journey > *,
        .pair-grid > *,
        .info-card,
        .feature-card,
        .shot-card,
        .preview-card,
        .store-card,
        .panel,
        .earn-panel,
        .contact-note,
        .form-panel,
        .legal-index > *,
        .block--cards > *,
        .premium-band > *,
        .vip-band > *
    )::after {
        display: none !important;
    }
}

/* END WINART GLOBAL PREMIUM 3D CARD SYSTEM V1 */

/* WINART EXACT CARD SELECTOR FIX V1 */

/* Creator Programs: actual journey list items */
body.route-creator-programs .page-wrap .journey li,
body[class*="route-"] .page-wrap .journey li {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(232,189,101,.72) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(160,75,220,.22), transparent 60%),
        linear-gradient(145deg, #291338, #100817 85%) !important;
    box-shadow:
        0 12px 28px rgba(0,0,0,.34),
        0 0 16px rgba(178,91,255,.12),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
    transition: transform .38s ease, box-shadow .38s ease, border-color .38s ease !important;
}

@media (hover:hover) and (pointer:fine) {
    body.route-creator-programs .page-wrap .journey li:hover,
    body[class*="route-"] .page-wrap .journey li:hover {
        transform: translateY(-7px) !important;
        border-color: #f5d58c !important;
        box-shadow:
            0 20px 38px rgba(0,0,0,.42),
            0 0 25px rgba(178,91,255,.25),
            0 0 12px rgba(232,189,101,.18) !important;
    }
}

/* Page Gallery: actual preview-card links */
.gallery-grid > .preview-card,
.home .gallery-grid .preview-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(232,189,101,.68) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(160,75,220,.24), transparent 55%),
        linear-gradient(145deg, #291338, #100817 82%) !important;
    box-shadow:
        0 13px 30px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
    transition: transform .38s ease, box-shadow .38s ease, border-color .38s ease !important;
}

.gallery-grid > .preview-card .preview-card__title {
    color: #ffe6a8 !important;
    text-shadow: 0 2px 14px rgba(232,189,101,.18);
}

.gallery-grid > .preview-card .preview-card__text {
    color: #d9c9f4 !important;
}

@media (hover:hover) and (pointer:fine) {
    .gallery-grid > .preview-card:hover {
        transform: translateY(-8px) perspective(900px) rotateX(1deg) !important;
        border-color: #f5d58c !important;
        box-shadow:
            0 22px 42px rgba(0,0,0,.44),
            0 0 28px rgba(178,91,255,.24),
            inset 0 1px 0 rgba(255,255,255,.14) !important;
    }
}

/* END WINART EXACT CARD SELECTOR FIX V1 */

/* WINART REALISTIC CARD IMAGE SYSTEM V1 */

.page-creator-programs .journey li,
.home .feature-card {
    overflow: hidden;
    padding-top: 0 !important;
    border: 1px solid rgba(232,189,101,.8) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg,#291338,#100817 85%) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.38),
                0 0 18px rgba(178,91,255,.16) !important;
}

.page-creator-programs .journey li::before,
.home .feature-card::before {
    content: "";
    display: block;
    width: calc(100% + 40px);
    height: 145px;
    margin: 0 -20px 14px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 18px 18px 12px 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

.page-creator-programs .journey li:nth-child(1)::before {
    background-image: url("../images/premium-cards/creator-identity.webp");
}
.page-creator-programs .journey li:nth-child(2)::before {
    background-image: url("../images/premium-cards/creator-profile.webp");
}
.page-creator-programs .journey li:nth-child(3)::before {
    background-image: url("../images/premium-cards/creator-activity.webp");
}
.page-creator-programs .journey li:nth-child(4)::before {
    background-image: url("../images/premium-cards/creator-verification.webp");
}

.home .feature-card:nth-child(1)::before {
    background-image: url("../images/premium-cards/home-live-streaming.webp");
}
.home .feature-card:nth-child(2)::before {
    background-image: url("../images/premium-cards/home-voice-rooms.webp");
}
.home .feature-card:nth-child(3)::before {
    background-image: url("../images/premium-cards/home-virtual-gifts.webp");
}
.home .feature-card:nth-child(4)::before {
    background-image: url("../images/premium-cards/home-creator.webp");
}

@media (hover:hover) and (pointer:fine) {
    .page-creator-programs .journey li:hover,
    .home .feature-card:hover {
        transform: translateY(-7px) perspective(900px) rotateX(1deg);
        border-color: #ffe0a0 !important;
        box-shadow: 0 22px 42px rgba(0,0,0,.45),
                    0 0 28px rgba(178,91,255,.28) !important;
    }
}

@media (max-width:767px) {
    .page-creator-programs .journey li::before,
    .home .feature-card::before {
        height: 125px;
    }
}

/* END WINART REALISTIC CARD IMAGE SYSTEM V1 */

/* WINART IMAGE ABOVE TEXT NO NUMBERING V2 */

/* Creator cards: image first, content below */
body.route-creator-programs .page-wrap .journey li {
    display: block !important;
    list-style: none !important;
    counter-increment: none !important;
    padding: 0 16px 18px !important;
    overflow: hidden !important;
}

body.route-creator-programs .page-wrap .journey li::marker {
    content: "" !important;
    display: none !important;
}

body.route-creator-programs .page-wrap .journey li::before {
    content: "" !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: calc(100% + 32px) !important;
    height: 155px !important;
    margin: 0 -16px 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px 18px 12px 12px !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
    transform: none !important;
}

/* Remove any remaining numbered badge */
body.route-creator-programs .page-wrap .journey li::after {
    content: none !important;
    display: none !important;
}

/* Titles and descriptions must stay below image */
body.route-creator-programs .page-wrap .journey li h2,
body.route-creator-programs .page-wrap .journey li h3,
body.route-creator-programs .page-wrap .journey li h4,
body.route-creator-programs .page-wrap .journey li p {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
}

/* Home feature cards: image banner followed by text */
.home .feature-card {
    display: block !important;
    padding: 0 20px 20px !important;
    overflow: hidden !important;
}

.home .feature-card::before {
    content: "" !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: calc(100% + 40px) !important;
    height: 165px !important;
    margin: 0 -20px 16px !important;
    border: 0 !important;
    border-radius: 18px 18px 12px 12px !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
    transform: none !important;
}

/* Keep text and icon below the image */
.home .feature-card > * {
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 767px) {
    body.route-creator-programs .page-wrap .journey li::before,
    .home .feature-card::before {
        height: 125px !important;
    }
}

/* END WINART IMAGE ABOVE TEXT NO NUMBERING V2 */

/* WINART CARD IMAGE CLEANUP V3 */

/* HOME: remove separate decorative icons below image */
.home .feature-card > svg,
.home .feature-card > .icon,
.home .feature-card > .feature-icon,
.home .feature-card > .card-icon,
.home .feature-card > .icon-wrap,
.home .feature-card .feature-icon,
.home .feature-card .card-icon,
.home .feature-card .icon-wrap {
    display: none !important;
}

/* Home image: remove the icon gap and use full image area */
.home .feature-card {
    padding-top: 0 !important;
}

.home .feature-card::before {
    height: 185px !important;
    margin: 0 -20px 12px !important;
    border-radius: 18px 18px 12px 12px !important;
}

/* Title should sit directly below image */
.home .feature-card h2,
.home .feature-card h3,
.home .feature-card h4,
.home .feature-card .card-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* CREATOR PROGRAMS: remove list numbering and number badges */
body.route-creator-programs .page-wrap .journey,
body.route-creator-programs .page-wrap .journey ol,
body.route-creator-programs .page-wrap .journey ul {
    list-style: none !important;
    counter-reset: none !important;
}

body.route-creator-programs .page-wrap .journey li {
    list-style: none !important;
    counter-increment: none !important;
}

body.route-creator-programs .page-wrap .journey li::marker {
    content: none !important;
    display: none !important;
}

/* Hide common step-number badge elements */
body.route-creator-programs .page-wrap .journey li .step-number,
body.route-creator-programs .page-wrap .journey li .step-count,
body.route-creator-programs .page-wrap .journey li .step-index,
body.route-creator-programs .page-wrap .journey li .step-badge,
body.route-creator-programs .page-wrap .journey li .journey-number,
body.route-creator-programs .page-wrap .journey li .number,
body.route-creator-programs .page-wrap .journey li [class*="step-number"],
body.route-creator-programs .page-wrap .journey li [class*="step-count"],
body.route-creator-programs .page-wrap .journey li [class*="step-index"] {
    display: none !important;
    visibility: hidden !important;
}

/* Remove generated numbering from card pseudo elements */
body.route-creator-programs .page-wrap .journey li::after {
    content: none !important;
    display: none !important;
}

/* Preserve image banner and text below it */
body.route-creator-programs .page-wrap .journey li::before {
    height: 165px !important;
    margin-bottom: 12px !important;
    background-position: center !important;
    background-size: cover !important;
}

body.route-creator-programs .page-wrap .journey li h2,
body.route-creator-programs .page-wrap .journey li h3,
body.route-creator-programs .page-wrap .journey li h4 {
    margin-top: 0 !important;
}

/* Mobile image sizing */
@media (max-width: 767px) {
    .home .feature-card::before {
        height: 145px !important;
    }

    body.route-creator-programs .page-wrap .journey li::before {
        height: 135px !important;
    }
}

/* END WINART CARD IMAGE CLEANUP V3 */
