
.soleo-cc-wrap{
	--soleo-bg:#0f1013;
	--soleo-card-top:#54565d;
	--soleo-card-bottom:#0d1017;
	--soleo-digit:#f4f4f4;
	--soleo-accent:#d39d24;
	--soleo-shadow:0 16px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
	--soleo-radius:20px;
	width:100%;
	max-width:920px;
	margin:0 auto;
	padding:24px 18px 26px;
	background:radial-gradient(circle at center, #20232a 0%, #0d1220 45%, #07090f 100%);
	border-radius:28px;
	box-sizing:border-box;
	font-family:Arial, Helvetica, sans-serif;
}
.soleo-cc-inner{text-align:center}
.soleo-cc-heading{
	color:#fff;
	font-size:clamp(18px,2.5vw,34px);
	line-height:1.15;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.06em;
	margin:0 auto 18px;
	max-width:94%;
	text-align:center;
}
.soleo-cc-dots{opacity:.9}
.soleo-cc-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(120px,1fr));
	gap:16px;
	align-items:start;
}
.soleo-cc-item{min-width:0}
.soleo-cc-card{
	position:relative;
	height:148px;
	border-radius:var(--soleo-radius);
	box-shadow:var(--soleo-shadow);
	overflow:hidden;
	background:linear-gradient(to bottom, var(--soleo-card-top) 0%, #4a4c54 47%, #10141d 48%, var(--soleo-card-bottom) 100%);
}
.soleo-cc-card::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:50%;
	height:3px;
	transform:translateY(-50%);
	background:#0b0d12;
	box-shadow:0 1px 0 rgba(255,255,255,.16);
	z-index:4;
}
.soleo-cc-static-top,
.soleo-cc-static-bottom,
.soleo-cc-flip-top,
.soleo-cc-flip-bottom{
	display:none !important;
}
.soleo-cc-digit-window{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
	overflow:hidden;
}
.soleo-cc-digit-reel{
	position:relative;
	height:100px;
	width:100%;
	overflow:hidden;
}
.soleo-cc-digit-current,
.soleo-cc-digit-next{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:88px;
	line-height:1;
	font-weight:800;
	font-variant-numeric:tabular-nums lining-nums;
	font-feature-settings:"tnum" 1, "lnum" 1;
	letter-spacing:0;
	color:var(--soleo-digit);
	white-space:nowrap;
	text-shadow:0 2px 2px rgba(0,0,0,.35);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	transform-origin:center center;
}
.soleo-cc-digit-next{
	opacity:0;
	transform:translate(-50%,65%);
}
.soleo-cc-card.is-sliding .soleo-cc-digit-current{
	animation:soleoDigitOut .42s ease forwards;
}
.soleo-cc-card.is-sliding .soleo-cc-digit-next{
	animation:soleoDigitIn .42s ease forwards;
}
@keyframes soleoDigitOut{
	0%{opacity:1;transform:translate(-50%,-50%)}
	100%{opacity:0;transform:translate(-50%,-165%)}
}
@keyframes soleoDigitIn{
	0%{opacity:0;transform:translate(-50%,65%)}
	100%{opacity:1;transform:translate(-50%,-50%)}
}
.soleo-cc-label{
	margin-top:10px;
	color:var(--soleo-accent);
	font-size:clamp(12px,1.25vw,18px);
	letter-spacing:.14em;
	text-transform:uppercase;
}
.soleo-cc-finished{
	margin-top:24px;
	color:#fff;
	font-size:22px;
	font-weight:700;
}
@media (max-width: 767px){
	.soleo-cc-wrap{padding:20px 12px}
	.soleo-cc-heading{
		font-size:clamp(16px,4.8vw,24px);
		margin-bottom:14px;
		max-width:98%;
	}
	.soleo-cc-grid{
		grid-template-columns:repeat(2,minmax(120px,1fr));
		gap:14px;
	}
	.soleo-cc-card{height:118px}
	.soleo-cc-digit-reel{height:80px}
	.soleo-cc-digit-current,
	.soleo-cc-digit-next{font-size:66px}
	.soleo-cc-label{font-size:12px}
}
