/**
 * StingTune theme — frontend.
 * Design system shared with the ST Home dashboard (StingTune tokens):
 * purple accent, Inter, offset-shadow cards, scroll reveals.
 */

.stt {
	--st-accent: #5b21b6;
	--st-accent-bright: #7c3aed;
	--st-accent-rgb: 91, 33, 182;
	--st-accent-soft: rgba(91, 33, 182, 0.14);
	--st-ink: #0a0a0b;
	--st-surface: #ffffff;
	--st-dark: #0f0a1a;
	--st-border: #d4d4d8;
	--st-border-bold: #18181b;
	--st-text: #0a0a0b;
	--st-text-muted: #52525b;
	--st-radius: 10px;
	--st-radius-lg: 22px;
	--st-font: "Inter", system-ui, -apple-system, sans-serif;

	font-family: var(--st-font);
	color: var(--st-text);
	line-height: 1.6;
	overflow-x: hidden;
}

.stt *,
.stt *::before,
.stt *::after {
	box-sizing: border-box;
}

.stt h1,
.stt h2,
.stt h3 {
	font-family: var(--st-font);
}

/* ---------- Layout: full-bleed inside Astra ---------- */
body.stt-landing .ast-container,
body.stt-page .ast-container {
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	/* Astra makes .ast-container flex — that pushes our sections to the left */
	display: block;
}

body.stt-landing #content,
body.stt-page #content {
	padding: 0;
	margin: 0;
}

body.stt-landing #primary,
body.stt-page #primary,
body.stt-landing .site-main,
body.stt-page .site-main {
	width: 100%;
	margin: 0;
	padding: 0;
}

body.stt-landing .stt,
body.stt-page .stt {
	width: 100%;
}

body.stt-landing .entry-header,
body.stt-page .entry-header {
	display: none;
}

/* ---------- Custom header ---------- */
.stt-header {
	position: sticky;
	top: 0;
	z-index: 90;
	overflow: visible; /* .stt sets overflow-x hidden — would clip dropdowns */
	background: rgba(255, 255, 255, 0.84);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(10, 10, 11, 0.07);
	transition: box-shadow 0.3s ease;
}

body.admin-bar .stt-header {
	top: 32px;
}

.stt-header.stt-scrolled {
	box-shadow: 0 10px 30px rgba(10, 10, 11, 0.08);
}

.stt-header__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px clamp(16px, 4vw, 32px);
}

.stt-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex: 0 0 auto;
}

.stt-header__brand img,
.stt-header__brand .custom-logo,
.stt-header__logo-img {
	max-height: 44px;
	max-width: 200px;
	width: auto;
	display: block;
	object-fit: contain;
}

.stt-header__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--st-accent), var(--st-accent-bright));
	box-shadow: 0 8px 20px rgba(var(--st-accent-rgb), 0.35);
}

.stt-header__brand-mark .stt-eq i {
	background: #fff;
}

.stt-header__brand-name {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--st-ink);
}

.stt-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.stt-header__menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stt-header__menu li {
	position: relative;
	margin: 0;
}

.stt-header__menu > li > a,
.stt-header__menu > li.page_item > a {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--st-text);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.stt-header__menu > li > a:hover,
.stt-header__menu > li.current-menu-item > a,
.stt-header__menu > li.current_page_item > a {
	background: var(--st-accent-soft);
	color: var(--st-accent);
}

/* Dropdown */
.stt-header__menu .sub-menu,
.stt-header__menu .children {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(10, 10, 11, 0.08);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(10, 10, 11, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 5;
}

.stt-header__menu li:hover > .sub-menu,
.stt-header__menu li:focus-within > .sub-menu,
.stt-header__menu li:hover > .children,
.stt-header__menu li:focus-within > .children {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.stt-header__menu .sub-menu a,
.stt-header__menu .children a {
	display: block;
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--st-text);
	text-decoration: none;
}

.stt-header__menu .sub-menu a:hover,
.stt-header__menu .children a:hover {
	background: var(--st-accent-soft);
	color: var(--st-accent);
}

.stt-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.stt-header__login {
	font-size: 14px;
	font-weight: 700;
	color: var(--st-accent);
	text-decoration: none;
}

.stt-header__login:hover {
	color: var(--st-accent-bright);
}

.stt-header__signup {
	padding: 10px 22px;
	font-size: 13px;
}

/* Hamburger */
.stt-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 10px;
	border: 2px solid var(--st-border);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.stt-header__burger:hover {
	border-color: var(--st-accent);
}

.stt-header__burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--st-ink);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------- Mobile drawer (sidebar) ---------- */
.stt-drawer {
	position: fixed;
	inset: 0;
	z-index: 999;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s linear 0.35s;
}

.stt-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

.stt-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 11, 0.55);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.stt-drawer.is-open .stt-drawer__overlay {
	opacity: 1;
}

.stt-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(330px, 86vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -24px 0 60px rgba(10, 10, 11, 0.25);
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	padding: 20px;
	overflow-y: auto;
}

.stt-drawer.is-open .stt-drawer__panel {
	transform: translateX(0);
}

.stt-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(10, 10, 11, 0.08);
}

.stt-drawer__brand {
	font-size: 17px;
	font-weight: 800;
	color: var(--st-ink, #0a0a0b);
}

.stt-drawer__close {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(91, 33, 182, 0.12);
	color: #5b21b6;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.stt-drawer__close:hover {
	background: #5b21b6;
	color: #fff;
	transform: rotate(90deg);
}

.stt-drawer__menu,
.stt-drawer__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stt-drawer__nav a {
	display: block;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--st-ink, #0a0a0b);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.stt-drawer__nav a:hover,
.stt-drawer__nav .current-menu-item > a,
.stt-drawer__nav .current_page_item > a {
	background: rgba(91, 33, 182, 0.1);
	color: #5b21b6;
	padding-left: 18px;
}

.stt-drawer__nav .sub-menu,
.stt-drawer__nav .children {
	margin-left: 14px;
	border-left: 2px solid rgba(91, 33, 182, 0.18);
}

.stt-drawer__actions {
	display: grid;
	gap: 10px;
	margin-top: auto;
	padding-top: 20px;
}

body.stt-no-scroll {
	overflow: hidden;
}

@media (max-width: 920px) {
	.stt-header__nav,
	.stt-header__login {
		display: none;
	}

	/* Keep Sign Up visible on mobile too */
	.stt-header__signup {
		padding: 9px 16px;
		font-size: 12px;
	}

	.stt-header__burger {
		display: flex;
	}
}

@media (max-width: 782px) {
	body.admin-bar .stt-header {
		top: 46px;
	}
}

/* ---------- Scroll reveal (only hidden when JS is available) ---------- */
html.stt-js .stt-reveal {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--stt-delay, 0ms);
}

html.stt-js .stt-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ---------- Shared bits ---------- */
.stt-eyebrow {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--st-accent-bright);
}

.stt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

.stt-btn--primary {
	background: linear-gradient(135deg, var(--st-accent), var(--st-accent-bright));
	color: #fff;
	box-shadow: 0 12px 32px rgba(var(--st-accent-rgb), 0.35);
}

.stt-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(var(--st-accent-rgb), 0.45);
	color: #fff;
}

.stt-btn--ghost {
	background: rgba(255, 255, 255, 0.8);
	color: var(--st-accent);
	border-color: rgba(var(--st-accent-rgb), 0.3);
	backdrop-filter: blur(8px);
}

.stt-btn--ghost:hover {
	transform: translateY(-2px);
	border-color: var(--st-accent);
	color: var(--st-accent);
}

.stt-btn--lg {
	padding: 16px 32px;
	font-size: 16px;
}

.stt-btn__arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.stt-btn:hover .stt-btn__arrow {
	transform: translateX(4px);
}

.stt-btn--pulse {
	animation: sttPulse 2.6s ease-in-out infinite;
}

@keyframes sttPulse {
	0%, 100% { box-shadow: 0 12px 32px rgba(var(--st-accent-rgb), 0.35), 0 0 0 0 rgba(var(--st-accent-rgb), 0.35); }
	50% { box-shadow: 0 12px 32px rgba(var(--st-accent-rgb), 0.35), 0 0 0 14px rgba(var(--st-accent-rgb), 0); }
}

/* ---------- Hero ---------- */
.stt-hero {
	position: relative;
	padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 32px) 0;
	background:
		radial-gradient(1200px 600px at 10% -20%, rgba(var(--st-accent-rgb), 0.22), transparent 55%),
		radial-gradient(900px 500px at 95% 0%, rgba(14, 165, 233, 0.12), transparent 50%),
		linear-gradient(165deg, #faf5ff 0%, #fff 40%, #f8fafc 100%);
	overflow: hidden;
}

.stt-hero__glow {
	position: absolute;
	inset: -30% auto auto -10%;
	width: 60%;
	height: 80%;
	background: conic-gradient(from 120deg, rgba(var(--st-accent-rgb), 0.3), rgba(14, 165, 233, 0.2), rgba(16, 185, 129, 0.15), rgba(var(--st-accent-rgb), 0.3));
	filter: blur(100px);
	opacity: 0.45;
	pointer-events: none;
	animation: sttGlowDrift 14s ease-in-out infinite alternate;
}

@keyframes sttGlowDrift {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	to { transform: translate3d(6%, 4%, 0) rotate(12deg); }
}

.stt-hero__noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image: radial-gradient(rgba(10, 10, 11, 0.05) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(to bottom, transparent, black 30%, transparent 90%);
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, transparent 90%);
}

.stt-hero__grid {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	padding-bottom: clamp(56px, 7vw, 88px);
}

.stt-hero__title {
	margin: 0 0 16px;
	font-size: clamp(38px, 5.5vw, 62px);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--st-ink);
	background: linear-gradient(110deg, var(--st-ink) 35%, var(--st-accent-bright) 50%, var(--st-ink) 65%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: sttShimmer 7s linear infinite;
}

@keyframes sttShimmer {
	0% { background-position: 120% 0; }
	100% { background-position: -120% 0; }
}

.stt-hero__subtitle {
	margin: 0 0 28px;
	max-width: 540px;
	font-size: clamp(16px, 2vw, 18px);
	color: var(--st-text-muted);
}

.stt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.stt-hero__trust {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--st-text-muted);
}

.stt-hero__trust-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
	animation: sttBlink 2s ease-in-out infinite;
}

@keyframes sttBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* Hero visual */
.stt-hero__visual {
	position: relative;
	min-height: 400px;
}

.stt-hero__ring {
	position: absolute;
	inset: 6% 4%;
	border-radius: 50%;
	border: 2px dashed rgba(var(--st-accent-rgb), 0.25);
	animation: sttSpin 40s linear infinite;
}

.stt-hero__ring::after {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--st-accent-bright);
	box-shadow: 0 0 16px rgba(var(--st-accent-rgb), 0.7);
}

@keyframes sttSpin {
	to { transform: rotate(360deg); }
}

.stt-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	animation: sttFloat 8s ease-in-out infinite;
}

.stt-hero__orb--1 {
	width: 220px;
	height: 220px;
	top: 6%;
	right: 14%;
	background: rgba(var(--st-accent-rgb), 0.4);
}

.stt-hero__orb--2 {
	width: 170px;
	height: 170px;
	bottom: 10%;
	left: 6%;
	background: rgba(14, 165, 233, 0.35);
	animation-delay: -3s;
}

@keyframes sttFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -16px, 0); }
}

.stt-hero__card {
	position: absolute;
	border-radius: var(--st-radius-lg);
	background: rgba(255, 255, 255, 0.92);
	border: 2px solid var(--st-border);
	box-shadow: 8px 8px 0 var(--st-border-bold);
	backdrop-filter: blur(12px);
	animation: sttFloat 6s ease-in-out infinite;
}

.stt-hero__card--main {
	right: 6%;
	top: 22%;
	padding: 24px 28px;
	max-width: 280px;
	z-index: 2;
}

.stt-hero__card--main strong {
	display: block;
	font-size: 18px;
	margin: 8px 0 4px;
	color: var(--st-ink);
}

.stt-hero__card--main small {
	color: var(--st-text-muted);
	font-size: 13px;
}

.stt-hero__card--royalty {
	left: 2%;
	top: 8%;
	padding: 16px 20px;
	animation-delay: -2s;
	z-index: 1;
}

.stt-hero__card--royalty strong {
	display: block;
	font-size: 17px;
	color: #059669;
	margin: 4px 0 2px;
}

.stt-hero__card--royalty small {
	font-size: 12px;
	color: var(--st-text-muted);
}

.stt-hero__card--live {
	left: 14%;
	bottom: 6%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font-size: 13px;
	font-weight: 700;
	color: var(--st-ink);
	animation-delay: -4s;
	z-index: 2;
}

.stt-hero__live-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ef4444;
	box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
	animation: sttBlink 1.6s ease-in-out infinite;
}

.stt-hero__card-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--st-accent-bright);
}

/* Equalizer */
.stt-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 12px;
}

.stt-eq i {
	width: 3px;
	border-radius: 2px;
	background: var(--st-accent-bright);
	animation: sttEq 0.9s ease-in-out infinite;
}

.stt-eq i:nth-child(1) { height: 60%; animation-delay: 0s; }
.stt-eq i:nth-child(2) { height: 100%; animation-delay: -0.3s; }
.stt-eq i:nth-child(3) { height: 45%; animation-delay: -0.6s; }
.stt-eq i:nth-child(4) { height: 80%; animation-delay: -0.15s; }

@keyframes sttEq {
	0%, 100% { transform: scaleY(0.4); }
	50% { transform: scaleY(1); }
}

/* Waveform inside main card */
.stt-hero__wave {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 34px;
	margin-top: 14px;
}

.stt-hero__wave i {
	flex: 1;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--st-accent-bright), rgba(var(--st-accent-rgb), 0.35));
	animation: sttEq 1.2s ease-in-out infinite;
}

.stt-hero__wave i:nth-child(odd) { height: 55%; }
.stt-hero__wave i:nth-child(even) { height: 90%; }
.stt-hero__wave i:nth-child(3n) { height: 35%; animation-delay: -0.4s; }
.stt-hero__wave i:nth-child(4n) { height: 75%; animation-delay: -0.8s; }
.stt-hero__wave i:nth-child(5n) { animation-delay: -0.2s; }

/* Stores marquee — brand logos scrolling both directions */
@keyframes sttMarquee {
	to { transform: translateX(-50%); }
}

.stt-stores {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(10, 10, 11, 0.07);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(8px);
	padding: 28px 0 36px;
}

.stt-stores__label {
	margin: 0 0 24px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--st-text-muted);
}

.stt-stores__row {
	overflow: hidden;
	padding: 9px 0;
	mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}

.stt-stores__row + .stt-stores__row {
	margin-top: 6px;
}

.stt-stores__track {
	display: flex;
	width: max-content;
	gap: 14px;
	animation: sttMarquee 40s linear infinite;
}

.stt-stores__track--reverse {
	animation-direction: reverse;
	animation-duration: 46s;
}

.stt-stores__row:hover .stt-stores__track {
	animation-play-state: paused;
}

.stt-store {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 9px;
	border-radius: 999px;
	background: var(--st-surface);
	border: 2px solid var(--st-border);
	font-size: 14px;
	font-weight: 700;
	color: var(--st-ink);
	white-space: nowrap;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.stt-store:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--st-accent-rgb), 0.45);
	box-shadow: 4px 4px 0 var(--st-border-bold);
}

.stt-store__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: inset 0 0 0 1px rgba(10, 10, 11, 0.08);
}

.stt-store__logo svg {
	width: 17px;
	height: 17px;
}

.stt-store__logo b {
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}

.stt-store__name {
	letter-spacing: 0.01em;
}

/* ---------- Stats ---------- */
.stt-stats {
	padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 32px);
	position: relative;
	z-index: 2;
}

.stt-stats__grid {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.stt-stat-card {
	text-align: center;
	padding: 28px 16px;
	border-radius: var(--st-radius-lg);
	background: var(--st-surface);
	border: 2px solid var(--st-border);
	box-shadow: 4px 4px 0 var(--st-border);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stt-stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 6px 6px 0 var(--st-border-bold);
}

.stt-stat-card__value {
	margin: 0;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	color: var(--st-accent);
	font-variant-numeric: tabular-nums;
}

.stt-stat-card__label {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--st-text-muted);
}

/* ---------- Sections ---------- */
.stt-section {
	position: relative;
	padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 32px);
	max-width: 1180px;
	margin: 0 auto;
}

.stt-section__head {
	text-align: center;
	margin-bottom: clamp(32px, 5vw, 48px);
}

.stt-section__head h2 {
	margin: 0 0 12px;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--st-ink);
}

.stt-section__head p {
	margin: 0 auto;
	max-width: 600px;
	color: var(--st-text-muted);
	font-size: 16px;
}

.stt-section--dark {
	max-width: none;
	/* Hardcoded colors — never renders white even if CSS variables fail */
	background-color: #0f0a1a;
	background-image:
		radial-gradient(720px 380px at 88% 115%, rgba(124, 58, 237, 0.30), transparent 62%),
		radial-gradient(560px 300px at 5% -15%, rgba(14, 165, 233, 0.16), transparent 55%),
		linear-gradient(160deg, #0f0a1a 0%, #1a1030 100%);
	color: #fff;
	overflow: hidden;
}

.stt-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
	pointer-events: none;
}

.stt-section--dark .stt-section__head,
.stt-section--dark .stt-steps {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.stt-section__head--light h2,
.stt-section__head--light p {
	color: #fff;
}

.stt-section__head--light p {
	opacity: 0.75;
}

.stt-section__deco {
	position: absolute;
	inset: auto -10% -40% auto;
	width: 55%;
	height: 90%;
	background: radial-gradient(circle, rgba(var(--st-accent-rgb), 0.35), transparent 65%);
	filter: blur(80px);
	pointer-events: none;
	animation: sttGlowDrift 16s ease-in-out infinite alternate;
}

/* ---------- Steps ---------- */
.stt-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

/* Solid dark cards with hard overrides — other plugins paint <article> white */
.stt .stt-steps .stt-step-card {
	position: relative;
	padding: 30px 28px 28px;
	border-radius: 22px;
	background: linear-gradient(180deg, #241742 0%, #160f28 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
	margin: 0;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Top accent line */
.stt-step-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 3px;
	border-radius: 0 0 6px 6px;
	background: linear-gradient(90deg, #5b21b6, #7c3aed, #38bdf8);
	opacity: 0.85;
}

/* Big ghost number in the corner */
.stt-step-card::after {
	content: attr(data-num);
	position: absolute;
	right: 18px;
	bottom: 2px;
	font-size: 76px;
	font-weight: 900;
	line-height: 1;
	color: rgba(255, 255, 255, 0.06);
	pointer-events: none;
}

.stt .stt-steps .stt-step-card:hover {
	transform: translateY(-8px);
	border-color: rgba(124, 58, 237, 0.6) !important;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(124, 58, 237, 0.35), 0 0 44px rgba(124, 58, 237, 0.25) !important;
}

.stt-step-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: linear-gradient(135deg, #5b21b6, #7c3aed);
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	box-shadow: 0 10px 24px rgba(124, 58, 237, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: transform 0.3s ease;
}

.stt-step-card:hover .stt-step-card__num {
	transform: rotate(-8deg) scale(1.1);
}

.stt .stt-steps .stt-step-card h3 {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 800;
	color: #fff !important;
}

.stt .stt-steps .stt-step-card p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75) !important;
}

.stt-step-card__arrow {
	position: absolute;
	top: 50%;
	right: -21px;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(124, 58, 237, 0.9);
	font-size: 15px;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
	z-index: 2;
	animation: sttArrowNudge 1.6s ease-in-out infinite;
}

@keyframes sttArrowNudge {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50% { transform: translateY(-50%) translateX(4px); }
}

/* ---------- Features ---------- */
.stt-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.stt-feature-card {
	padding: clamp(22px, 3vw, 28px);
	border-radius: var(--st-radius-lg);
	background: var(--st-surface);
	border: 2px solid var(--st-border);
	box-shadow: 4px 4px 0 var(--st-border);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.stt-feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 8px 8px 0 var(--st-border-bold);
	border-color: rgba(var(--st-accent-rgb), 0.35);
}

.stt-feature-card h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 800;
	color: var(--st-ink);
}

.stt-feature-card p {
	margin: 0;
	color: var(--st-text-muted);
	font-size: 13px;
}

.stt-feature-card__icon {
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: var(--st-radius);
	background: var(--st-accent-soft);
	border: 2px solid rgba(var(--st-accent-rgb), 0.2);
	position: relative;
	transition: transform 0.25s ease;
}

.stt-feature-card:hover .stt-feature-card__icon {
	transform: rotate(-6deg) scale(1.06);
}

.stt-feature-card__icon::after {
	content: "";
	position: absolute;
	inset: 11px;
	background: var(--st-accent);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.stt-icon--globe::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); }
.stt-icon--mic::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 11a7 7 0 01-14 0m7 7v3m-4 0h8M12 15a4 4 0 004-4V7a4 4 0 10-8 0v4a4 4 0 004 4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 11a7 7 0 01-14 0m7 7v3m-4 0h8M12 15a4 4 0 004-4V7a4 4 0 10-8 0v4a4 4 0 004 4z'/%3E%3C/svg%3E"); }
.stt-icon--tag::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'/%3E%3C/svg%3E"); }
.stt-icon--play::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664zM21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664zM21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); }
.stt-icon--infinity::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3C/svg%3E"); }
.stt-icon--chart::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7h8m0 0v8m0-8l-8 8-4-4-6 6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7h8m0 0v8m0-8l-8 8-4-4-6 6'/%3E%3C/svg%3E"); }
.stt-icon--store::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'/%3E%3C/svg%3E"); }
.stt-icon--bolt::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E"); }
.stt-icon--shield::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E"); }
.stt-icon--analytics::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'/%3E%3C/svg%3E"); }

/* Features page extras */
.stt-features--three {
	grid-template-columns: repeat(3, 1fr);
}

.stt-section--tint {
	border-radius: 32px;
	background:
		radial-gradient(700px 360px at 80% -10%, rgba(var(--st-accent-rgb), 0.10), transparent 60%),
		#faf7ff;
	border: 1px solid rgba(var(--st-accent-rgb), 0.10);
	margin-top: 12px;
	margin-bottom: 12px;
}

.stt-checklist {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 28px;
}

.stt-checklist li {
	position: relative;
	padding: 12px 14px 12px 44px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.88);
}

.stt-checklist li::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, #5b21b6, #7c3aed);
}

.stt-checklist li::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 50%;
	transform: translateY(-60%) rotate(-45deg);
	width: 9px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

@media (max-width: 1024px) {
	.stt-features--three {
		grid-template-columns: repeat(2, 1fr);
	}

	.stt-checklist {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.stt-features--three,
	.stt-checklist {
		grid-template-columns: 1fr;
	}
}

/* ---------- Pricing ---------- */
.stt-section--pricing {
	max-width: none;
	background: linear-gradient(180deg, #faf5ff 0%, #fff 30%, #f8fafc 100%);
	overflow: hidden;
}

.stt-pricing__glow {
	position: absolute;
	inset: -10% auto auto 30%;
	width: 40%;
	height: 50%;
	background: radial-gradient(circle, rgba(var(--st-accent-rgb), 0.16), transparent 65%);
	filter: blur(70px);
	pointer-events: none;
}

.stt-plans {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.stt-plans--count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.stt-plans--count-2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.stt-plans--count-4 { grid-template-columns: repeat(4, 1fr); }

.stt-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3.5vw, 36px);
	border-radius: var(--st-radius-lg);
	background: var(--st-surface);
	border: 2px solid var(--st-border);
	box-shadow: 4px 4px 0 var(--st-border);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	will-change: transform;
}

.stt-plan:hover {
	transform: translateY(-6px);
	box-shadow: 8px 8px 0 var(--st-border-bold);
	border-color: rgba(var(--st-accent-rgb), 0.35);
}

.stt-plan--featured {
	border-color: var(--st-accent);
	box-shadow: 8px 8px 0 var(--st-accent);
	background:
		radial-gradient(600px 300px at 50% -10%, rgba(var(--st-accent-rgb), 0.1), transparent 60%),
		var(--st-surface);
	transform: scale(1.03);
	z-index: 1;
}

.stt-plan--featured:hover {
	transform: scale(1.03) translateY(-6px);
	box-shadow: 10px 10px 0 var(--st-accent);
}

.stt-plan__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--st-accent), var(--st-accent-bright));
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(var(--st-accent-rgb), 0.4);
}

.stt-plan__name {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 800;
	color: var(--st-ink);
}

.stt-plan__price {
	margin: 0 0 10px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.stt-plan__amount {
	font-size: clamp(34px, 4vw, 44px);
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--st-ink);
}

.stt-plan--featured .stt-plan__amount {
	background: linear-gradient(135deg, var(--st-accent), var(--st-accent-bright));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.stt-plan__period {
	font-size: 13px;
	font-weight: 600;
	color: var(--st-text-muted);
}

.stt-plan__desc {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--st-text-muted);
}

.stt-plan__features {
	list-style: none;
	margin: 0 0 24px;
	padding: 18px 0 0;
	border-top: 1px dashed var(--st-border);
	flex: 1;
}

.stt-plan__features li {
	position: relative;
	padding: 0 0 10px 28px;
	font-size: 14px;
	color: var(--st-text);
}

.stt-plan__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--st-accent-soft);
}

.stt-plan__features li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 7px;
	width: 8px;
	height: 5px;
	border-left: 2px solid var(--st-accent);
	border-bottom: 2px solid var(--st-accent);
	transform: rotate(-45deg);
}

.stt-plan__btn {
	width: 100%;
}

.stt-pricing__note {
	max-width: 1180px;
	margin: 28px auto 0;
	text-align: center;
	font-size: 13px;
	color: var(--st-text-muted);
}

/* ---------- Artists marquee ---------- */
.stt-section--artists {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.stt-artists {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	padding: 8px 0;
}

.stt-artists__track {
	display: flex;
	width: max-content;
	gap: 16px;
	animation: sttMarquee 48s linear infinite;
}

.stt-artists:hover .stt-artists__track {
	animation-play-state: paused;
}

.stt-artist-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 10px;
	border-radius: 999px;
	background: var(--st-surface);
	border: 2px solid var(--st-border);
	font-size: 14px;
	font-weight: 700;
	color: var(--st-ink);
	white-space: nowrap;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.stt-artist-chip:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--st-accent-rgb), 0.4);
	box-shadow: 4px 4px 0 var(--st-border-bold);
}

.stt-artist-chip__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, hsl(var(--stt-chip-hue, 270), 65%, 48%), hsl(calc(var(--stt-chip-hue, 270) + 40), 70%, 60%));
}

/* ---------- FAQ ---------- */
.stt-section--faq {
	max-width: 820px;
}

.stt-faq__item {
	margin-bottom: 12px;
	border-radius: var(--st-radius-lg);
	background: var(--st-surface);
	border: 2px solid var(--st-border);
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.stt-faq__item[open] {
	border-color: rgba(var(--st-accent-rgb), 0.4);
	box-shadow: 4px 4px 0 var(--st-border-bold);
}

.stt-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--st-ink);
	cursor: pointer;
	list-style: none;
}

.stt-faq__item summary::-webkit-details-marker {
	display: none;
}

.stt-faq__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--st-accent-soft);
	transition: transform 0.3s ease, background 0.3s ease;
}

.stt-faq__toggle::before,
.stt-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background: var(--st-accent);
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}

.stt-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.stt-faq__item[open] .stt-faq__toggle {
	transform: rotate(135deg);
	background: var(--st-accent);
}

.stt-faq__item[open] .stt-faq__toggle::before,
.stt-faq__item[open] .stt-faq__toggle::after {
	background: #fff;
}

.stt-faq__answer {
	padding: 0 22px 18px;
	font-size: 14px;
	color: var(--st-text-muted);
	animation: sttFadeIn 0.35s ease;
}

.stt-faq__answer p {
	margin: 0;
}

@keyframes sttFadeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- CTA ---------- */
.stt-cta {
	padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 32px) clamp(72px, 8vw, 110px);
}

.stt-cta__inner {
	position: relative;
	max-width: 840px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(40px, 6vw, 64px);
	border-radius: 30px;
	background:
		radial-gradient(800px 400px at 50% 0%, rgba(var(--st-accent-rgb), 0.15), transparent 60%),
		var(--st-surface);
	border: 2px solid rgba(var(--st-accent-rgb), 0.25);
	box-shadow: 0 24px 60px rgba(var(--st-accent-rgb), 0.12);
	overflow: hidden;
}

.stt-cta__orbit {
	position: absolute;
	inset: -60% -20% auto;
	height: 130%;
	background: conic-gradient(from 0deg, transparent 70%, rgba(var(--st-accent-rgb), 0.12) 85%, transparent);
	animation: sttSpin 14s linear infinite;
	pointer-events: none;
}

.stt-cta__inner h2 {
	position: relative;
	margin: 0 0 12px;
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 800;
	color: var(--st-ink);
}

.stt-cta__inner p {
	position: relative;
	margin: 0 auto 28px;
	max-width: 560px;
	color: var(--st-text-muted);
}

.stt-cta__inner .stt-btn {
	position: relative;
}

/* ---------- Footer ---------- */
.stt-footer {
	position: relative;
	background: linear-gradient(160deg, var(--st-dark, #0f0a1a) 0%, #1a1030 100%);
	color: rgba(255, 255, 255, 0.85);
	padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 32px) 24px;
	overflow: hidden;
	font-family: "Inter", system-ui, sans-serif;
}

.stt-footer__glow {
	position: absolute;
	inset: auto -10% -60% 30%;
	width: 60%;
	height: 100%;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.25), transparent 65%);
	filter: blur(90px);
	pointer-events: none;
}

.stt-footer__grid {
	position: relative;
	max-width: 1180px;
	margin: 0 auto 36px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 36px;
}

.stt-footer__name {
	font-size: 22px;
	font-weight: 800;
	display: block;
	margin-bottom: 10px;
	color: #fff;
}

.stt-footer__brand p {
	margin: 0;
	font-size: 14px;
	opacity: 0.7;
	max-width: 320px;
}

.stt-footer__brand .custom-logo,
.stt-footer__logo {
	max-height: 48px;
	max-width: 220px;
	width: auto;
	display: block;
	margin-bottom: 14px;
	object-fit: contain;
}

.stt-footer__logo-link {
	display: inline-block;
}

.stt-footer h3 {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
}

.stt-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stt-footer li {
	margin-bottom: 9px;
	font-size: 14px;
}

.stt-footer a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.stt-footer__col a:hover {
	color: #fff;
	padding-left: 4px;
}

.stt-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.stt-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: background 0.2s ease, transform 0.2s ease;
}

.stt-footer__social-link svg {
	width: 17px;
	height: 17px;
}

.stt-footer__social-link:hover {
	background: #7c3aed;
	transform: translateY(-3px);
	color: #fff;
}

.stt-footer__bottom {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
	font-size: 13px;
	opacity: 0.6;
}

/* ---------- Page hero (Pricing page etc.) ---------- */
.stt-page-hero {
	position: relative;
	text-align: center;
	padding: clamp(52px, 7vw, 88px) clamp(16px, 4vw, 32px) clamp(8px, 2vw, 16px);
	background:
		radial-gradient(900px 420px at 50% -20%, rgba(var(--st-accent-rgb), 0.16), transparent 60%),
		linear-gradient(180deg, #faf5ff 0%, #fff 100%);
	overflow: hidden;
}

.stt-page-hero__glow {
	position: absolute;
	inset: -40% 20% auto;
	height: 80%;
	background: conic-gradient(from 120deg, rgba(var(--st-accent-rgb), 0.18), rgba(14, 165, 233, 0.12), rgba(var(--st-accent-rgb), 0.18));
	filter: blur(90px);
	pointer-events: none;
}

.stt-page-hero__title {
	position: relative;
	margin: 0 0 10px;
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--st-ink);
}

.stt-page-hero__intro {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	color: var(--st-text-muted);
	font-size: 16px;
}

/* ---------- Legal pages ---------- */
.stt-legal {
	padding-bottom: clamp(48px, 6vw, 72px);
	background: linear-gradient(180deg, #faf5ff 0%, #fff 25%);
}

.stt-legal__hero {
	text-align: center;
	padding: clamp(48px, 7vw, 80px) clamp(16px, 4vw, 32px) clamp(28px, 4vw, 40px);
}

.stt-legal__title {
	margin: 0 0 10px;
	font-size: clamp(32px, 4.5vw, 48px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--st-ink);
}

.stt-legal__updated {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--st-text-muted);
}

.stt-legal__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 52px);
	border-radius: var(--st-radius-lg);
	background: var(--st-surface);
	border: 2px solid var(--st-border);
	box-shadow: 6px 6px 0 var(--st-border);
}

.stt-legal__content h2 {
	margin: 28px 0 10px;
	font-size: 20px;
	font-weight: 800;
	color: var(--st-ink);
}

.stt-legal__content h2:first-child {
	margin-top: 0;
}

.stt-legal__content p {
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--st-text-muted);
}

.stt-legal__back {
	text-align: center;
	margin-top: 32px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.stt-hero__grid {
		grid-template-columns: 1fr;
	}

	.stt-hero__visual {
		min-height: 320px;
	}

	.stt-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stt-features {
		grid-template-columns: repeat(2, 1fr);
	}

	.stt-steps {
		grid-template-columns: 1fr;
	}

	.stt-step-card__arrow {
		display: none;
	}

	.stt-plans,
	.stt-plans--count-4 {
		grid-template-columns: 1fr;
		max-width: 460px;
	}

	.stt-plan--featured,
	.stt-plan--featured:hover {
		transform: none;
	}

	.stt-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.stt-stats__grid {
		grid-template-columns: 1fr;
	}

	.stt-features {
		grid-template-columns: 1fr;
	}

	.stt-footer__grid {
		grid-template-columns: 1fr;
	}

	.stt-hero__card--royalty {
		display: none;
	}

	.stt-hero__visual {
		min-height: 280px;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.stt *,
	.stt *::before,
	.stt *::after,
	.stt-footer *,
	.stt-reveal {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.stt-reveal {
		opacity: 1;
		transform: none;
	}
}