.rps-showcase{
	--rps-bg:#15042E;
	--rps-card:#25163D;
	--rps-accent:#B2D135;
	--rps-text:#fff;
	--rps-muted:#C7BDD4;
	--rps-border:rgba(255,255,255,.09);
	width:100%;
	background:var(--rps-bg);
	color:var(--rps-text);
}

.rps-showcase *{box-sizing:border-box}

.rps-tabs-wrap{
	width:100%;
	overflow:hidden;
	margin-bottom:18px;
}

.rps-tabs{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	gap:12px;
	direction:rtl;
}

.rps-tab{
	appearance:none;
	border:1px solid var(--rps-border);
	background:rgba(255,255,255,.025);
	color:#C8BED3;
	min-height:62px;
	border-radius:12px;
	padding:10px 12px;
	cursor:pointer;
	font:inherit;
	font-size:14px;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	overflow:hidden;
	transition:border-color .25s ease,background .25s ease,color .25s ease,transform .25s ease;
}

.rps-tab:hover{
	border-color:color-mix(in srgb,var(--rps-accent) 40%,transparent);
	background:var(--rps-card);
	color:#fff;
}

.rps-tab.is-active{
	color:var(--rps-accent);
	border-color:color-mix(in srgb,var(--rps-accent) 65%,transparent);
	background:var(--rps-card);
}

.rps-tab.is-active:after{
	content:"";
	position:absolute;
	right:8px;
	left:8px;
	bottom:0;
	height:3px;
	border-radius:6px 6px 0 0;
	background:var(--rps-accent);
}

.rps-tab-all{
	background:var(--rps-card);
	color:#fff;
}

.rps-panel{
	position:relative;
	min-height:480px;
	padding:42px;
	border:1px solid rgba(255,255,255,.07);
	background:linear-gradient(145deg,var(--rps-card) 0%,#1D0C35 100%);
	border-radius:24px;
	box-shadow:0 24px 70px rgba(0,0,0,.24);
	overflow:hidden;
}

.rps-panel:before{
	content:"";
	position:absolute;
	width:360px;
	height:360px;
	border-radius:50%;
	background:color-mix(in srgb,var(--rps-accent) 6%,transparent);
	left:-120px;
	bottom:-160px;
	pointer-events:none;
}

.rps-slide{
	display:none;
	grid-template-columns:minmax(0,.86fr) minmax(0,1.45fr);
	gap:34px;
	align-items:center;
	position:relative;
	z-index:2;
}

.rps-slide.is-active{
	display:grid;
	animation:rpsFade .35s ease both;
}

.rps-media-right .rps-slide{
	grid-template-columns:minmax(0,1.45fr) minmax(0,.86fr);
}

.rps-media-right .rps-copy{order:2}
.rps-media-right .rps-media{order:1}

.rps-copy{
	align-self:center;
	padding:15px 6px;
}

.rps-kicker{
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin-bottom:12px;
	color:var(--rps-accent);
	font-size:13px;
	font-weight:800;
}

.rps-kicker:before{
	content:"";
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--rps-accent);
	box-shadow:0 0 0 6px color-mix(in srgb,var(--rps-accent) 10%,transparent);
}

.rps-title{
	margin:0 0 12px;
	color:#fff;
	font-size:clamp(30px,3.3vw,52px);
	line-height:1.25;
	font-weight:800;
}

.rps-subtitle{
	margin:0 0 15px;
	color:#F2EDF7;
	font-size:19px;
	line-height:1.9;
	font-weight:700;
}

.rps-description{
	margin:0 0 27px;
	color:var(--rps-muted);
	font-size:15px;
	line-height:2.05;
	max-width:560px;
}

.rps-actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px;
}

.rps-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	padding:0 22px;
	border-radius:12px;
	text-decoration:none !important;
	font-weight:800;
	font-size:14px;
	transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}

.rps-btn-primary{
	background:var(--rps-accent);
	color:var(--rps-bg) !important;
	box-shadow:0 10px 26px color-mix(in srgb,var(--rps-accent) 18%,transparent);
}

.rps-btn-primary:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 30px color-mix(in srgb,var(--rps-accent) 26%,transparent);
}

.rps-btn-secondary{
	color:#fff !important;
	background:rgba(255,255,255,.035);
	border:1px solid rgba(255,255,255,.12);
}

.rps-media{
	position:relative;
	min-height:395px;
	border-radius:20px;
	overflow:hidden;
	background:
		radial-gradient(circle at 20% 25%,color-mix(in srgb,var(--rps-accent) 10%,transparent),transparent 31%),
		linear-gradient(135deg,#1D0C35,#21113B 58%,#18082F);
	border:1px solid color-mix(in srgb,var(--rps-accent) 12%,transparent);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:28px;
}

.rps-media img,
.rps-media video{
	display:block;
	width:100%;
	height:100%;
	max-height:430px;
	object-fit:contain;
	border-radius:14px;
}

.rps-placeholder{
	width:100%;
	min-height:330px;
	height:100%;
	position:relative;
	overflow:hidden;
	padding:18px;
	border-radius:16px;
	background:#1B0A32;
	box-shadow:0 22px 55px rgba(0,0,0,.22);
}

.rps-mock-top{
	height:28px;
	border-radius:8px;
	background:#2B1943;
	margin-bottom:16px;
	display:flex;
	align-items:center;
	gap:5px;
	padding:0 10px;
	direction:ltr;
}

.rps-mock-top i{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#796C89;
}

.rps-mock-body{
	display:grid;
	grid-template-columns:62px 1fr;
	gap:14px;
	height:calc(100% - 44px);
	direction:ltr;
}

.rps-mock-side{
	border-radius:10px;
	background:linear-gradient(180deg,var(--rps-accent),#8EAE22);
}

.rps-mock-content{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	align-content:start;
}

.rps-mock-box{
	min-height:94px;
	border-radius:12px;
	background:#2A1743;
	border:1px solid rgba(255,255,255,.06);
}

.rps-mock-big{
	grid-column:1/-1;
	min-height:142px;
	position:relative;
	overflow:hidden;
}

.rps-mock-big:after{
	content:"";
	position:absolute;
	height:48px;
	right:20px;
	left:20px;
	bottom:20px;
	border-radius:8px;
	background:linear-gradient(90deg,#72892A 0 13%,transparent 13% 18%,#91AE2E 18% 33%,transparent 33% 38%,var(--rps-accent) 38% 54%,transparent 54% 60%,#94B22B 60% 76%,transparent 76% 82%,#6F8429 82% 100%);
}

.rps-media-label{
	position:absolute;
	left:18px;
	bottom:16px;
	color:#D7CCDF;
	background:rgba(21,4,46,.82);
	border:1px solid rgba(255,255,255,.09);
	padding:7px 10px;
	border-radius:8px;
	font-size:12px;
}

.rps-progress{
	position:absolute;
	right:0;
	left:0;
	bottom:0;
	height:3px;
	background:rgba(255,255,255,.07);
	z-index:10;
}

.rps-progress span{
	display:block;
	width:0;
	height:100%;
	background:var(--rps-accent);
}

.rps-progress span.is-playing{
	animation:rpsProgress var(--rps-delay,7000ms) linear forwards;
}

@keyframes rpsProgress{
	from{width:0}
	to{width:100%}
}

@keyframes rpsFade{
	from{opacity:0;transform:translateY(10px)}
	to{opacity:1;transform:none}
}

@media(max-width:980px){
	.rps-tabs{
		display:flex;
		overflow-x:auto;
		padding-bottom:5px;
		scrollbar-width:none;
	}
	.rps-tabs::-webkit-scrollbar{display:none}
	.rps-tab{min-width:165px}
	.rps-slide,
	.rps-media-right .rps-slide{
		grid-template-columns:1fr;
	}
	.rps-media-right .rps-copy,
	.rps-media-right .rps-media{
		order:initial;
	}
}

@media(max-width:620px){
	.rps-panel{
		min-height:0;
		padding:20px;
		border-radius:18px;
	}
	.rps-slide{gap:20px}
	.rps-title{font-size:34px}
	.rps-subtitle{font-size:16px}
	.rps-description{font-size:14px}
	.rps-media{min-height:250px;padding:14px}
	.rps-placeholder{min-height:230px}
	.rps-btn{width:100%}
}