.szsb {
	--szsb-height: 300px;
	--szsb-mobile-height: 470px;
	position: relative;
	isolation: isolate;
	width: 100%;
	margin: 0;
	background: #050814;
	color: #f5f8ff;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.szsb,
.szsb * { box-sizing: border-box; }

.szsb__viewport {
	position: relative;
	height: var(--szsb-height);
	overflow: hidden;
	border-block: 1px solid rgba(128, 154, 230, .12);
	background:
		radial-gradient(circle at 18% 15%, rgba(73, 95, 255, .12), transparent 36%),
		linear-gradient(115deg, #060914, #0b0c20 62%, #080a16);
}

.szsb__track { position: relative; height: 100%; }

.szsb__slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(470px, .98fr);
	align-items: stretch;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.015);
	transition: opacity .65s ease, transform 1s cubic-bezier(.2,.7,.2,1), visibility .65s;
	pointer-events: none;
}

.szsb__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	pointer-events: auto;
}

.szsb__image {
	position: absolute;
	inset: 0 0 0 45%;
	overflow: hidden;
}

.szsb__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, #070a16 0%, rgba(7,10,22,.88) 10%, rgba(7,10,22,.18) 54%, rgba(7,10,22,.42) 100%),
		linear-gradient(0deg, rgba(5,8,20,.8), transparent 38%);
}

.szsb__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 24%;
	filter: saturate(.88) contrast(1.03) brightness(.75);
	transform: scale(1.035);
	transition: transform 8s linear;
}

.szsb__slide.is-active .szsb__image img { transform: scale(1.085); }

.szsb__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--szsb-accent) 9%, transparent), transparent 35%),
		radial-gradient(circle at 63% 55%, color-mix(in srgb, var(--szsb-accent) 9%, transparent), transparent 31%);
}

.szsb__veil::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: min(55vw, 900px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--szsb-accent), transparent);
	opacity: .65;
	box-shadow: 0 0 20px color-mix(in srgb, var(--szsb-accent) 50%, transparent);
}

.szsb__content {
	position: relative;
	z-index: 3;
	grid-column: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(780px, calc(100vw - 150px));
	padding: 34px clamp(82px, 6vw, 120px) 42px;
}

.szsb__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 9px;
	color: #a7b4d3;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.szsb__pulse {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--szsb-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--szsb-accent) 10%, transparent), 0 0 14px var(--szsb-accent);
}

.szsb__status {
	display: inline-flex;
	align-items: center;
	min-height: 21px;
	margin-left: 4px;
	padding: 2px 8px;
	border: 1px solid color-mix(in srgb, var(--szsb-accent) 34%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--szsb-accent) 9%, rgba(9,12,28,.7));
	color: #eafaff;
	font-size: 8px;
	letter-spacing: .12em;
}

.szsb__status.is-release {
	border-color: rgba(74, 235, 176, .35);
	background: rgba(45, 206, 148, .1);
	color: #8af2c9;
}

.szsb__status.is-soon { color: #d9c9ff; }

.szsb__product {
	margin: 0 0 7px;
	color: var(--szsb-accent);
	font: 800 10px/1.2 "Cascadia Code", Consolas, monospace;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.szsb h2 {
	max-width: 650px;
	margin: 0;
	color: #f7f9ff;
	font-size: clamp(27px, 2.5vw, 43px);
	font-weight: 790;
	line-height: 1.02;
	letter-spacing: -.04em;
	text-wrap: balance;
}

.szsb__description {
	max-width: 630px;
	margin: 12px 0 0;
	color: #aeb9d1;
	font-size: clamp(12px, .95vw, 15px);
	line-height: 1.55;
}

.szsb__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	margin-top: 15px;
	padding: 8px 12px;
	border: 1px solid color-mix(in srgb, var(--szsb-accent) 34%, transparent);
	border-radius: 9px;
	background: rgba(11, 16, 34, .72);
	color: #eff8ff !important;
	font-size: 10px;
	font-weight: 750;
	text-decoration: none !important;
	backdrop-filter: blur(10px);
	transition: border-color .2s, background .2s, transform .2s;
}

.szsb__cta span { color: var(--szsb-accent); font-size: 14px; }
.szsb__cta:hover { transform: translateY(-1px); border-color: var(--szsb-accent); background: color-mix(in srgb, var(--szsb-accent) 9%, #0b1022); }
.szsb :where(a,button):focus-visible { outline: 2px solid var(--szsb-accent, #48dfff); outline-offset: 3px; }

.szsb__arrow {
	position: absolute;
	z-index: 6;
	top: 50%;
	display: grid;
	place-items: center;
	width: 34px;
	height: 42px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid rgba(155, 175, 225, .16);
	border-radius: 10px;
	background: rgba(6, 9, 20, .64);
	color: #cbd7ed;
	font: 300 25px/1 sans-serif;
	cursor: pointer;
	backdrop-filter: blur(10px);
	transition: background .2s, color .2s, border-color .2s;
}

.szsb__arrow:hover { color: #fff; border-color: rgba(81, 216, 255, .45); background: rgba(13, 21, 42, .88); }
.szsb__arrow--prev { left: 28px; }
.szsb__arrow--next { right: 28px; }

.szsb__navigation {
	position: absolute;
	z-index: 7;
	left: 50%;
	bottom: 15px;
	display: flex;
	align-items: center;
	gap: 4px;
	transform: translateX(-50%);
	padding: 4px;
	border: 1px solid rgba(151, 173, 225, .12);
	border-radius: 999px;
	background: rgba(5, 8, 18, .64);
	backdrop-filter: blur(10px);
}

.szsb__navigation button {
	width: 30px;
	height: 19px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.szsb__navigation button span {
	display: block;
	width: 13px;
	height: 3px;
	margin: auto;
	border-radius: 999px;
	background: #53607a;
	transition: width .25s, background .25s, box-shadow .25s;
}

.szsb__navigation button[aria-selected="true"] span {
	width: 22px;
	background: #62dfff;
	box-shadow: 0 0 10px rgba(98, 223, 255, .55);
}

.szsb__progress {
	position: absolute;
	z-index: 7;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(255,255,255,.025);
}

.szsb__progress span {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #695cff, #43dfff);
	box-shadow: 0 0 12px rgba(76, 202, 255, .42);
}

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

@keyframes szsb-progress { from { width: 0; } to { width: 100%; } }

@media (max-width: 900px) {
	.szsb__slide { grid-template-columns: 1fr; }
	.szsb__image { inset: 0 0 0 30%; }
	.szsb__content { width: min(680px, calc(100vw - 110px)); padding-inline: 70px; }
	.szsb__arrow--prev { left: 16px; }
	.szsb__arrow--next { right: 16px; }
}

@media (max-width: 620px) {
	.szsb__viewport { height: var(--szsb-mobile-height); }
	.szsb__slide { align-items: end; }
	.szsb__image { inset: 0 0 44% 0; }
	.szsb__image::after { background: linear-gradient(0deg, #070a16 0%, rgba(7,10,22,.72) 30%, rgba(7,10,22,.08) 72%); }
	.szsb__content { justify-content: flex-end; width: 100%; min-height: 64%; padding: 28px 24px 52px; }
	.szsb__meta { flex-wrap: wrap; gap: 7px; font-size: 8px; }
	.szsb h2 { font-size: clamp(27px, 9vw, 38px); }
	.szsb__description { font-size: 13px; line-height: 1.5; }
	.szsb__arrow { top: 25%; width: 31px; height: 38px; }
	.szsb__arrow--prev { left: 10px; }
	.szsb__arrow--next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.szsb__slide,
	.szsb__image img,
	.szsb__cta { transition: none; }
	.szsb.is-playing .szsb__progress span { animation: none; }
}

.szsb__ticker {
	position: relative;
	z-index: 8;
	overflow: hidden;
	min-height: 44px;
	border-bottom: 1px solid rgba(255,255,255,.14);
	background: linear-gradient(90deg, color-mix(in srgb, var(--szsb-ticker-bg, #b91c1c) 82%, #5b0710), var(--szsb-ticker-bg, #b91c1c), color-mix(in srgb, var(--szsb-ticker-bg, #b91c1c) 82%, #5b0710));
	box-shadow: 0 10px 32px rgba(80, 5, 14, .26), inset 0 1px rgba(255,255,255,.12);
}

.szsb__ticker-link {
	display: block;
	width: 100%;
	min-height: 44px;
	overflow: hidden;
	color: #fff !important;
	text-decoration: none !important;
}

.szsb__ticker-track {
	display: flex;
	align-items: center;
	width: max-content;
	min-height: 44px;
	animation: szsb-ticker-scroll var(--szsb-ticker-duration, 28s) linear infinite;
	will-change: transform;
}

.szsb__ticker-item {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 28px;
	padding-right: 56px;
	font-size: 13px;
	font-weight: 720;
	letter-spacing: .035em;
	white-space: nowrap;
}

.szsb__ticker-item strong {
	font-size: 12px;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.szsb__ticker-item i { color: #ffd166; font-style: normal; }
.szsb__ticker:hover .szsb__ticker-track,
.szsb__ticker:focus-within .szsb__ticker-track { animation-play-state: paused; }

.szsb__sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@keyframes szsb-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (max-width: 620px) {
	.szsb__ticker,
	.szsb__ticker-link,
	.szsb__ticker-track { min-height: 42px; }
	.szsb__ticker-item { gap: 18px; padding-right: 38px; font-size: 11px; }
	.szsb__ticker-item strong { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.szsb__ticker-track { width: 100%; justify-content: center; animation: none; }
	.szsb__ticker-item { padding: 9px 18px; white-space: normal; text-align: center; }
	.szsb__ticker-item:nth-child(2) { display: none; }
}