@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&display=swap");

@font-face {
	font-family: "Playpen Sans Hebrew";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("./assets/fonts/playpen-sans-hebrew.ttf") format("truetype");
}

:root {
	--anchor-offset: 88px;
	--display-font: "Playpen Sans Hebrew", "Arial", sans-serif;
	--content-font: "Assistant", "Segoe UI", Arial, sans-serif;
	--bg: #070b12;
	--bg-soft: #0c1320;
	--ink: #f6f8fc;
	--muted: #a7b6ce;
	--line: #203049;
	--primary: #4ef2a4;
	--primary-deep: #2fd88a;
	--secondary: #7dc3ff;
	--secondary-deep: #5aaeff;
	--card: #0f1829;
	--card-2: #121f35;
	--shadow: 0 18px 45px rgb(2 7 14 / 55%);
	--scrollbar-thumb: rgb(78 242 164 / 34%);
	--scrollbar-thumb-hover: rgb(47 216 138 / 100%);
	--scrollbar-track: rgb(17 29 48 / 28%);
	--scrollbar-corner: #0c1320;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--anchor-offset);
	scrollbar-gutter: stable both-edges;
}

/* Standard scrollbar styling for modern browsers */
@supports (scrollbar-color: auto) {
	html {
		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
		scrollbar-width: thin;
	}

	/* Keep custom scroll regions visually consistent with the page scrollbar */
	* {
		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	}
}

/* Fallback for engines that expose non-standard WebKit scrollbar selectors */
@supports selector(::-webkit-scrollbar) {
	html::-webkit-scrollbar,
	body::-webkit-scrollbar,
	*::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}

	html::-webkit-scrollbar-track,
	body::-webkit-scrollbar-track,
	*::-webkit-scrollbar-track {
		background: var(--scrollbar-track);
		border-radius: 999px;
	}

	html::-webkit-scrollbar-thumb,
	body::-webkit-scrollbar-thumb,
	*::-webkit-scrollbar-thumb {
		background:
			linear-gradient(180deg, var(--secondary) 0%, var(--scrollbar-thumb) 52%, var(--scrollbar-thumb-hover) 100%);
		border: 2px solid var(--scrollbar-track);
		border-radius: 999px;
		box-shadow: 0 0 0 1px rgb(255 255 255 / 5%) inset;
		opacity: 0.34;
		transition:
			opacity 220ms ease,
			box-shadow 220ms ease,
			background 220ms ease;
	}

	html::-webkit-scrollbar-thumb:hover,
	body::-webkit-scrollbar-thumb:hover,
	*::-webkit-scrollbar-thumb:hover {
		background: linear-gradient(180deg, #89d4ff 0%, var(--scrollbar-thumb-hover) 100%);
		opacity: 1;
		box-shadow:
			0 0 0 1px rgb(255 255 255 / 16%) inset,
			0 0 14px rgb(78 242 164 / 22%);
	}

	html::-webkit-scrollbar-corner,
	body::-webkit-scrollbar-corner,
	*::-webkit-scrollbar-corner {
		background: var(--scrollbar-corner);
	}
}

body {
	font-family: var(--content-font);
	line-height: 1.45;
	background:
		radial-gradient(circle at 8% 12%, rgb(52 95 173 / 28%) 0, transparent 28%),
		radial-gradient(circle at 92% 10%, rgb(49 170 120 / 26%) 0, transparent 24%),
		radial-gradient(circle at 50% 120%, rgb(24 77 57 / 32%) 0, transparent 42%),
		repeating-linear-gradient(
			90deg,
			rgb(255 255 255 / 0.02) 0,
			rgb(255 255 255 / 0.02) 1px,
			transparent 1px,
			transparent 68px
		),
		var(--bg);
	color: var(--ink);
	position: relative;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.footer-brand,
.plan-head-label,
.brand-mark {
	font-family: var(--display-font);
}

body::before,
body::after {
	content: "";
	position: fixed;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

body::before {
	width: 360px;
	height: 360px;
	top: -120px;
	left: -120px;
	background:
		radial-gradient(circle at 28% 28%, rgb(120 197 255 / 38%) 0, transparent 55%),
		conic-gradient(
			from 22deg,
			rgb(255 255 255 / 0.16),
			rgb(255 255 255 / 0.02),
			rgb(255 255 255 / 0.12),
			rgb(255 255 255 / 0.02),
			rgb(255 255 255 / 0.16)
		);
	filter: blur(2px);
	opacity: 0.44;
}

body::after {
	width: 280px;
	height: 280px;
	bottom: -90px;
	right: -60px;
	background:
		radial-gradient(circle, transparent 56%, rgb(78 242 164 / 36%) 57%, transparent 62%),
		radial-gradient(circle, rgb(125 195 255 / 24%) 0, transparent 66%);
	opacity: 0.5;
}

.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, #6dc8ff 0%, #4ef2a4 55%, #9df7cf 100%);
	box-shadow: 0 0 18px rgb(78 242 164 / 36%);
	pointer-events: none;
	z-index: 50;

	/* Fallback baseline for browsers without scroll timelines */
	will-change: transform;
}

@keyframes grow-progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes reveal-up {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes hero-parallax {
	from {
		transform: translateY(0) scale(1);
	}
	to {
		transform: translateY(34px) scale(1.045);
	}
}

@keyframes jackpot-glow {
	0%,
	100% {
		box-shadow:
			0 0 0 1px rgb(78 242 164 / 22%) inset,
			0 14px 28px rgb(7 40 27 / 26%);
	}
	50% {
		box-shadow:
			0 0 0 1px rgb(78 242 164 / 30%) inset,
			0 18px 36px rgb(7 40 27 / 34%),
			0 0 24px rgb(78 242 164 / 26%);
	}
}

@keyframes bullet-pop {
	from {
		opacity: 0;
		transform: scale(0.72);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes image-reveal {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.96);
		filter: saturate(0.86);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: saturate(1);
	}
}

h1,
h2,
h3,
p {
	margin: 0;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(8px);
	background: rgb(8 12 20 / 78%);
	border-bottom: 1px solid var(--line);
}

section[id],
.hero[id] {
	scroll-margin-top: var(--anchor-offset);
}

.topbar-inner,
main {
	width: min(1120px, 92vw);
	margin-inline: auto;
}

.topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	gap: 10px;
	position: relative;
}

.brand {
	text-decoration: none;
	color: inherit;
	font-weight: 700;
	font-size: clamp(1.3rem, 3vw, 2rem);
}

.top-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.top-actions-desktop {
	flex-wrap: nowrap;
	min-width: 0;
}

.top-link {
	text-decoration: none;
	color: #bfd4ef;
	font-size: 0.93rem;
	font-weight: 600;
	padding: 4px 2px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.top-link:hover {
	color: #e0f1ff;
	border-color: rgb(125 195 255 / 46%);
}

.pill {
	text-decoration: none;
	color: var(--secondary);
	border: 1px solid #2d4363;
	background: linear-gradient(150deg, #111e33, #0b1728);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
}

.pill:hover {
	border-color: #4d79ae;
	color: #cae6ff;
}

.pill-primary {
	color: #062315;
	background: linear-gradient(130deg, var(--primary), #3de09b);
	border-color: transparent;
	box-shadow: 0 8px 20px rgb(39 221 141 / 24%);
}

.pill-primary:hover {
	color: #062315;
	background: var(--primary-deep);
	border-color: transparent;
}

.top-menu-trigger {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	appearance: none;
	place-items: center;
	border: 1px solid #2d4363;
	background: linear-gradient(150deg, #111e33, #0b1728);
	border-radius: 12px;
	cursor: pointer;
	user-select: none;
	transition:
		transform 0.22s ease,
		border-color 0.2s ease,
		box-shadow 0.24s ease,
		background-color 0.2s ease;
}

.top-menu-trigger:hover {
	border-color: #4d79ae;
	box-shadow: 0 10px 24px rgb(5 11 22 / 34%);
}

.top-menu-trigger:active {
	transform: translateY(1px) scale(0.98);
}

.topbar-inner.topbar-collapsed .top-actions-desktop {
	display: none;
}

.topbar-inner.topbar-collapsed .top-menu-trigger {
	display: grid;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.topbar-inner.topbar-collapsed {
	padding-right: 54px;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
	display: block;
	width: 16px;
	height: 2px;
	background: #b9d7fb;
	border-radius: 99px;
	transition: transform 0.24s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.hamburger-icon {
	position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.hamburger-icon::before {
	transform: translateY(-5px);
}

.hamburger-icon::after {
	transform: translateY(5px);
}

.top-menu-trigger[aria-expanded="true"] .hamburger-icon {
	background: transparent;
}

.top-menu-trigger[aria-expanded="true"] .hamburger-icon::before {
	transform: translateY(0) rotate(45deg);
}

.top-menu-trigger[aria-expanded="true"] .hamburger-icon::after {
	transform: translateY(0) rotate(-45deg);
}

.top-mobile-panel {
	margin: 0;
	inset: auto;
	padding: 10px;
	width: min(360px, calc(100vw - 24px));
	border: 1px solid rgb(133 175 227 / 24%);
	border-radius: 14px;
	background: linear-gradient(160deg, rgb(14 27 45 / 96%), rgb(9 16 28 / 98%));
	box-shadow: 0 16px 30px rgb(2 7 14 / 36%);
	display: grid;
	gap: 6px;
	position: fixed;
	top: 62px;
	right: 4vw;
	z-index: 30;
	opacity: 0;
	transform-origin: top right;
	transform: translateY(-12px) scale(0.96);
	transition:
		opacity 0.24s ease,
		transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
		overlay 0.3s allow-discrete,
		display 0.3s allow-discrete;
}

.top-mobile-panel:popover-open {
	display: grid;
	opacity: 1;
	transform: translateY(0) scale(1);
}

@starting-style {
	.top-mobile-panel:popover-open {
		opacity: 0;
		transform: translateY(-12px) scale(0.96);
	}
}

@media (max-width: 640px) {
	.top-mobile-panel {
		width: calc(100vw - 20px);
	}
}

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

.top-mobile-link {
	text-decoration: none;
	color: #c7dcf4;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid transparent;
}

.top-mobile-link:hover {
	border-color: rgb(125 195 255 / 26%);
	background: rgb(17 31 50 / 56%);
}

main {
	padding: 24px 0 48px;
	display: grid;
	gap: 22px;
}

.section,
.hero {
	background:
		linear-gradient(155deg, rgb(19 30 50 / 92%), rgb(10 18 31 / 96%)),
		var(--card);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: clamp(16px, 2.4vw, 28px);
	box-shadow: var(--shadow);
}

.section {
	position: relative;
	overflow: hidden;
}

.section::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgb(78 242 164 / 62%), transparent);
	opacity: 0.45;
}

.hero {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	grid-template-areas: "copy visual";
	gap: clamp(14px, 2.8vw, 28px);
	align-items: stretch;
	background:
		radial-gradient(circle at 80% 16%, rgb(78 242 164 / 14%) 0, transparent 42%),
		radial-gradient(circle at 30% 90%, rgb(125 195 255 / 16%) 0, transparent 48%),
		linear-gradient(140deg, rgb(15 27 45 / 98%), rgb(8 14 24 / 98%));
}

.hero-copy {
	grid-area: copy;
}

.hero-visual {
	grid-area: visual;
	display: grid;
	position: relative;
}

.hero-visual::before {
	content: "";
	position: absolute;
	inset: 8% 6% 10% 6%;
	background:
		radial-gradient(circle at 65% 35%, rgb(78 242 164 / 20%) 0, transparent 55%),
		radial-gradient(circle at 30% 75%, rgb(125 195 255 / 18%) 0, transparent 58%);
	filter: blur(18px);
	pointer-events: none;
	z-index: 0;
}

.hero h1 {
	font-size: clamp(2rem, 6vw, 4.1rem);
	line-height: 0.98;
	margin-bottom: 14px;
}

.hero-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	font-size: clamp(1.06rem, 2.3vw, 1.5rem);
}

.hero-line-text {
	font-family: var(--display-font);
	color: #e5eefc;
}

.hero-summary {
	margin-top: 14px;
	max-width: 56ch;
	color: #c7d6ed;
}

.word-emphasis {
	display: inline-block;
	font-family: var(--display-font);
	font-size: clamp(1.55rem, 4.1vw, 2.55rem);
	font-weight: 700;
	line-height: 0.95;
	color: var(--primary);
	text-shadow: 0 0 26px rgb(78 242 164 / 26%);
}

.hero-cta {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.hero-note {
	margin-top: 10px;
	font-size: 0.95rem;
	color: #a9bbd8;
}

.btn {
	text-decoration: none;
	border-radius: 12px;
	padding: 11px 16px;
	font-weight: 700;
	transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn-primary {
	background: linear-gradient(130deg, var(--primary), #3de09b);
	color: #062315;
	box-shadow: 0 10px 28px rgb(39 221 141 / 28%);
}

.btn-primary:hover {
	background: var(--primary-deep);
	box-shadow: 0 12px 30px rgb(33 206 132 / 38%);
}

.btn-secondary {
	border: 1px solid #35557f;
	background: rgb(19 34 55 / 72%);
	color: var(--secondary);
}

.btn-secondary:hover {
	border-color: #5e8cc5;
	color: #c7e6ff;
}

.image-placeholder {
	background: transparent;
	border-radius: 16px;
	padding: 0;
	display: grid;
	align-content: center;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.image-placeholder::before {
	content: none;
}

.image-placeholder::after {
	content: none;
}

.placeholder-title {
	font-weight: 800;
	font-size: 1.02rem;
	color: #e8f2ff;
}

.placeholder-caption {
	font-size: 0.92rem;
	color: #b9c9e2;
}

.hero-shot {
	min-height: 330px;
}

.hero-shot-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid rgb(132 177 230 / 20%);
	box-shadow:
		0 18px 38px rgb(2 10 22 / 40%),
		0 0 22px rgb(78 242 164 / 7%);
}

/* Fallback reveal classes used when view-timeline is unsupported */
.reveal-fallback {
	opacity: 0;
	transform: translateY(34px) scale(0.99);
	filter: none;
	transition:
		opacity 0.62s ease,
		transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1),
		filter 0.25s ease;
}

.reveal-fallback.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

.reveal-fallback.reveal-fast {
	transition-duration: 0.48s;
}

.reveal-fallback.reveal-image {
	transform: translateY(42px) scale(0.96);
	filter: saturate(0.86);
}

.reveal-fallback.reveal-image.is-visible {
	transform: none;
	filter: none;
}

.section-heading {
	display: grid;
	gap: 8px;
	max-width: 60ch;
}

.section h2 {
	font-size: clamp(1.8rem, 4vw, 2.55rem);
	font-weight: 800;
	line-height: 1.08;
}

.eyebrow {
	font-family: var(--display-font);
	font-size: clamp(1.15rem, 2.4vw, 1.7rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--secondary);
}

.how-it-works-grid {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 16px 24px;
	align-items: start;
	margin-top: 16px;
}

.how-it-works-copy {
	display: grid;
	gap: 14px;
}

.steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.step-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: linear-gradient(160deg, rgb(18 31 53 / 92%), rgb(11 20 36 / 94%));
	border: 1px solid rgb(133 175 227 / 18%);
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow:
		0 14px 28px rgb(2 7 14 / 24%),
		0 0 0 1px rgb(138 172 219 / 8%) inset;
}

.step-card h3 {
	font-size: 1.02rem;
	margin-bottom: 4px;
}

.step-card p {
	color: #afc1dd;
}

.step-badge {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.95rem;
	font-weight: 800;
	color: #ddf8ff;
	background: radial-gradient(circle at 30% 30%, rgb(125 195 255 / 38%), rgb(15 29 48 / 96%));
	border: 1px solid rgb(125 195 255 / 28%);
	box-shadow:
		0 0 0 1px rgb(78 242 164 / 10%) inset,
		0 0 18px rgb(125 195 255 / 16%);
}

.section-actions {
	display: flex;
	justify-content: flex-start;
	margin-top: 2px;
}

.how-it-works-visual {
	display: grid;
	align-items: start;
	position: relative;
}

.how-it-works-visual::before {
	content: "";
	position: absolute;
	inset: 10% 8% 12% 8%;
	background:
		radial-gradient(circle at 30% 35%, rgb(78 242 164 / 18%) 0, transparent 52%),
		radial-gradient(circle at 70% 65%, rgb(125 195 255 / 18%) 0, transparent 58%);
	filter: blur(20px);
	pointer-events: none;
	border-radius: 24px;
	opacity: 0.9;
}

.flow-shot,
.scoring-shot,
.prediction-reveal-shot,
.premium-intro-shot,
.tv-showcase-shot {
	max-width: 100%;
	position: relative;
	z-index: 1;
	margin-inline-start: auto;
	margin-inline-end: 0;
}


.flow-shot,
.scoring-shot,
.prediction-reveal-shot {
	width: min(100%, 500px);
}


.hero-shot-image,
.flow-shot-image,
.scoring-shot-image,
.prediction-reveal-image,
.premium-intro-image,
.tv-showcase-image {
	display: block;
	width: 100%;
	border-radius: 12px;
	border: 1px solid rgb(132 177 230 / 20%);
	box-shadow:
		0 18px 38px rgb(2 10 22 / 40%),
		0 0 22px rgb(78 242 164 / 7%);
}


.flow-shot-image {
	height: auto;
	object-fit: contain;
}

.scoring {
	background:
		radial-gradient(circle at 18% 14%, rgb(78 242 164 / 10%) 0, transparent 35%),
		radial-gradient(circle at 85% 22%, rgb(125 195 255 / 14%) 0, transparent 45%),
		linear-gradient(160deg, rgb(14 27 45 / 96%), rgb(9 16 28 / 98%));
}

.scoring-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 16px 24px;
	align-items: start;
}

.scoring-content {
	display: grid;
	gap: 10px;
}

.scoring-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	justify-items: start;
}

.scoring-card {
	padding: 11px 12px;
	border-radius: 14px;
	border: 1px solid rgb(133 175 227 / 22%);
	background:
		radial-gradient(circle at 82% 18%, rgb(125 195 255 / 16%) 0, transparent 42%),
		linear-gradient(160deg, rgb(17 30 50 / 90%), rgb(9 18 31 / 92%));
	box-shadow:
		0 14px 28px rgb(2 7 14 / 24%),
		0 0 0 1px rgb(138 172 219 / 10%) inset;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px;
	width: min(100%, 380px);
	height: 100%;
	min-height: 84px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.scoring-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 35%, rgb(255 255 255 / 8%) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.4s ease;
	pointer-events: none;
}

.scoring-card:hover {
	border-color: rgb(156 198 246 / 40%);
	box-shadow:
		0 18px 30px rgb(2 7 14 / 30%),
		0 0 0 1px rgb(138 172 219 / 14%) inset;
}

.scoring-card:hover::after {
	transform: translateX(120%);
}

.scoring-copy {
	display: grid;
	gap: 1px;
	align-content: start;
}

.coin-piles {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 4px;
	min-height: 40px;
	padding: 0;
}

.coin-stack {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
}

.coin {
	width: 14px;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, #8dd6ff, #70f0d8);
	border: 1px solid rgb(166 230 255 / 42%);
	box-shadow:
		0 1px 2px rgb(4 15 28 / 40%),
		0 0 8px rgb(125 195 255 / 18%);
}

.coin-piles-many .coin {
	width: 12px;
	height: 5px;
	background: linear-gradient(90deg, #86cfff, #7fe9d0);
}

.coin-piles-few {
	gap: 7px;
}

.coin-piles-few .coin {
	width: 15px;
	height: 6px;
}

.coin-piles-soliko .coin {
	width: 16px;
	height: 7px;
	background: linear-gradient(90deg, #8efbd2, #7ee7ff);
	border-color: rgb(157 255 222 / 48%);
	box-shadow:
		0 1px 2px rgb(4 15 28 / 45%),
		0 0 10px rgb(78 242 164 / 22%);
}

.scoring-impact {
	color: #9cb2d4;
	font-size: 0.98rem;
	line-height: 1.15;
}

.scoring-card .scoring-count {
	color: #88f0ff;
	font-weight: 650;
	font-size: 1.05rem;
	line-height: 1.1;
	text-shadow: 0 0 14px rgb(125 195 255 / 22%);
}

.scoring-card-many .scoring-count {
	color: #98d9ff;
}

.scoring-card-few .scoring-count {
	color: #8eeed7;
}

.scoring-card-highlight {
	border-color: rgb(78 242 164 / 42%);
	background:
		radial-gradient(circle at 76% 24%, rgb(78 242 164 / 22%) 0, transparent 44%),
		radial-gradient(circle at 18% 78%, rgb(78 242 164 / 10%) 0, transparent 42%),
		linear-gradient(160deg, rgb(16 35 57 / 90%), rgb(8 24 38 / 92%));
	box-shadow:
		0 0 0 1px rgb(78 242 164 / 22%) inset,
		0 14px 28px rgb(7 40 27 / 26%);
}

.scoring-card-soliko .scoring-label {
	color: #d8ffe8;
}

.scoring-card-soliko {
	animation: jackpot-glow 2.6s ease-in-out infinite;
}

.scoring-summary {
	color: #d5e3f7;
	font-weight: 600;
	max-width: 62ch;
}

.scoring-foot {
	margin-top: 14px;
	display: grid;
	gap: 10px;
}

.scoring-actions {
	margin-top: 0;
}

.scoring-actions .btn {
	width: auto;
}

.scoring-visual {
	display: grid;
	align-items: start;
	align-self: start;
	position: relative;
}

.scoring-visual::before {
	content: "";
	position: absolute;
	inset: 10% 6% 12% 6%;
	background:
		radial-gradient(circle at 35% 38%, rgb(125 195 255 / 20%) 0, transparent 58%),
		radial-gradient(circle at 72% 64%, rgb(78 242 164 / 16%) 0, transparent 62%);
	filter: blur(24px);
	pointer-events: none;
	border-radius: 24px;
	opacity: 0.88;
}

.scoring-shot-image {
	height: auto;
	object-fit: contain;
}

.prediction-reveal {
	background:
		radial-gradient(circle at 14% 18%, rgb(125 195 255 / 14%) 0, transparent 34%),
		radial-gradient(circle at 88% 78%, rgb(78 242 164 / 12%) 0, transparent 34%),
		linear-gradient(160deg, rgb(14 27 45 / 96%), rgb(9 16 28 / 98%));
}

.prediction-reveal-heading {
	max-width: 42rem;
}

.prediction-reveal-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: 18px 26px;
	align-items: start;
	margin-top: 12px;
}

.prediction-reveal-copy {
	display: grid;
	gap: 14px;
	align-content: start;
	max-width: 29rem;
}

.prediction-reveal-summary {
	color: #d3def0;
	font-size: 0.98rem;
	max-width: 31ch;
}

.prediction-reveal-lead {
	margin-top: 0;
}

.prediction-reveal-note {
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgb(133 175 227 / 18%);
	background:
		radial-gradient(circle at 92% 18%, rgb(78 242 164 / 8%) 0, transparent 30%),
		linear-gradient(160deg, rgb(18 31 53 / 92%), rgb(11 20 36 / 94%));
	box-shadow:
		0 14px 28px rgb(2 7 14 / 24%),
		0 0 0 1px rgb(138 172 219 / 8%) inset;
	color: #e6f1ff;
	max-width: 29rem;
}

.prediction-reveal-note p {
	margin: 0;
}

.prediction-reveal-note-title {
	font-weight: 700;
	color: #90f4c2;
	margin-bottom: 4px;
	text-shadow: 0 0 18px rgb(78 242 164 / 20%);
}

.prediction-reveal-visual {
	display: grid;
	align-items: start;
	position: relative;
	min-width: 0;
}

.prediction-reveal-visual::before {
	content: "";
	position: absolute;
	inset: 10% 4% 12% 4%;
	background:
		radial-gradient(circle at 24% 24%, rgb(125 195 255 / 20%) 0, transparent 44%),
		radial-gradient(circle at 72% 68%, rgb(78 242 164 / 18%) 0, transparent 42%);
	filter: blur(28px);
	opacity: 0.95;
	pointer-events: none;
	border-radius: 24px;
}

.prediction-reveal-image {
	height: auto;
	object-fit: cover;
}

.premium-intro {
	background:
		radial-gradient(circle at 20% 18%, rgb(78 242 164 / 11%) 0, transparent 36%),
		radial-gradient(circle at 82% 72%, rgb(125 195 255 / 13%) 0, transparent 40%),
		linear-gradient(160deg, rgb(14 27 45 / 96%), rgb(9 16 28 / 98%));
}

.premium-intro-heading {
	max-width: 52rem;
}

.premium-intro-highlight {
	color: var(--primary);
	text-shadow: 0 0 18px rgb(78 242 164 / 24%);
}

.premium-intro-highlight-secondary {
	color: var(--secondary);
	text-shadow: 0 0 18px rgb(125 195 255 / 24%);
}

.premium-intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
	gap: 18px 26px;
	align-items: start;
	margin-top: 14px;
}


.premium-intro-copy,
.tv-showcase-copy {
	display: grid;
	gap: 12px;
	max-width: 34rem;
}


.premium-intro-copy {
	align-content: start;
}

.premium-intro-lead {
	margin-top: 0;
	color: #d7e4f8;
	font-weight: 600;
}

.premium-intro-summary {
	color: #c5d5ec;
	font-size: 0.98rem;
	max-width: 48ch;
}

.premium-intro-visual {
	display: grid;
	align-items: start;
	position: relative;
	min-width: 0;
}

.premium-intro-visual::before {
	content: "";
	position: absolute;
	inset: 8% 4% 10% 4%;
	background:
		radial-gradient(circle at 20% 22%, rgb(125 195 255 / 20%) 0, transparent 42%),
		radial-gradient(circle at 78% 68%, rgb(78 242 164 / 20%) 0, transparent 42%);
	filter: blur(28px);
	opacity: 0.92;
	pointer-events: none;
	border-radius: 24px;
}

.premium-intro-shot {
	width: min(100%, 560px);
}

.premium-intro-image {
	height: auto;
	object-fit: contain;
}

.premium {
	background:
		radial-gradient(circle at 14% 20%, rgb(125 195 255 / 12%) 0, transparent 34%),
		radial-gradient(circle at 86% 78%, rgb(78 242 164 / 11%) 0, transparent 36%),
		linear-gradient(160deg, rgb(14 27 45 / 96%), rgb(9 16 28 / 98%));
}

.premium-heading {
	max-width: 40rem;
}

.premium-cards {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.premium-card {
	--accent: #7dc3ff;
	--accent-rgb: 125 195 255;
	background: linear-gradient(160deg, rgb(18 31 53 / 92%), rgb(11 20 36 / 94%));
	border: 1px solid rgb(133 175 227 / 18%);
	border-radius: 14px;
	padding: 14px;
	box-shadow:
		0 14px 28px rgb(2 7 14 / 24%),
		0 0 0 1px rgb(138 172 219 / 8%) inset;
	display: grid;
	gap: 12px;
	align-content: start;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.premium-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / 78%), transparent);
	opacity: 0.78;
}

.premium-card:hover {
	transform: translateY(-1px);
	border-color: rgb(var(--accent-rgb) / 45%);
	box-shadow:
		0 18px 30px rgb(2 7 14 / 28%),
		0 0 0 1px rgb(var(--accent-rgb) / 14%) inset;
}

.premium-card-group {
	--accent: #6fd6ff;
	--accent-rgb: 111 214 255;
}

.premium-card-branding {
	--accent: #8eb7ff;
	--accent-rgb: 142 183 255;
}

.premium-card-tv {
	--accent: #66f1b4;
	--accent-rgb: 102 241 180;
}

.premium-card-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.premium-icon-shell {
	width: 58px;
	height: 58px;
	border-radius: 14px;
	border: 1px solid rgb(var(--accent-rgb) / 26%);
	background:
		radial-gradient(circle at 28% 28%, rgb(var(--accent-rgb) / 28%) 0, transparent 58%),
		linear-gradient(150deg, rgb(17 29 48 / 95%), rgb(10 18 31 / 95%));
	display: grid;
	place-items: center;
	box-shadow:
		0 10px 22px rgb(2 7 14 / 25%),
		0 0 0 1px rgb(var(--accent-rgb) / 12%) inset,
		0 0 18px rgb(var(--accent-rgb) / 15%);
}

.premium-icon {
	width: 34px;
	height: 34px;
	display: block;
}

.premium-kicker {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--accent);
	text-shadow: 0 0 16px rgb(var(--accent-rgb) / 26%);
}

.premium-card-tv .premium-kicker,
.premium-card-tv .premium-inline-emphasis {
	font-family: var(--display-font);
}

.premium-card-copy {
	display: grid;
	gap: 8px;
}

.premium-card h3 {
	font-size: clamp(1.02rem, 1.5vw, 1.22rem);
	line-height: 1.2;
	color: #ebf4ff;
}

.premium-card p {
	margin: 0;
	color: #b9cae3;
	font-size: 0.98rem;
	line-height: 1.45;
}

.premium-inline-emphasis {
	color: #d8ffe8;
	font-weight: 700;
	text-shadow: 0 0 16px rgb(78 242 164 / 28%);
}

.premium-actions {
	margin-top: 14px;
}

.tv-showcase {
	background:
		radial-gradient(circle at 14% 20%, rgb(125 195 255 / 11%) 0, transparent 32%),
		radial-gradient(circle at 84% 78%, rgb(78 242 164 / 12%) 0, transparent 36%),
		linear-gradient(160deg, rgb(11 21 37 / 96%), rgb(8 14 24 / 98%));
}

.tv-showcase-heading {
	max-width: 48rem;
}

.tv-showcase-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 18px 26px;
	align-items: start;
	margin-top: 14px;
}

.tv-showcase-summary {
	margin: 0;
	color: #c5d5ec;
	font-size: 0.98rem;
	line-height: 1.55;
}

.tv-showcase-list-wrap {
	display: grid;
	gap: 10px;
}

.tv-showcase-list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 10px;
}

.tv-showcase-list li {
	margin: 0;
	list-style: none;
	display: flex;
	align-items: center;
	padding: 12px 14px;
	min-height: 56px;
	text-align: start;
	border: 1px solid rgb(125 195 255 / 14%);
	border-radius: 12px;
	background: linear-gradient(160deg, rgb(18 31 53 / 78%), rgb(11 20 36 / 90%));
	color: #e4eefc;
	line-height: 1.35;
	box-shadow: 0 10px 22px rgb(2 7 14 / 16%);
	overflow: hidden;
}

.tv-showcase-visual {
	display: grid;
	justify-items: end;
	min-width: 0;
}

.tv-showcase-shot {
	width: min(100%, 620px);
}

.tv-showcase-image {
	height: auto;
	object-fit: contain;
	box-shadow:
		0 18px 38px rgb(2 10 22 / 42%),
		0 0 22px rgb(78 242 164 / 7%);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.tv-showcase-image.is-fading {
	opacity: 0;
	transform: scale(0.985);
}

.pricing {
	background:
		radial-gradient(circle at 12% 18%, rgb(125 195 255 / 12%) 0, transparent 34%),
		radial-gradient(circle at 88% 80%, rgb(78 242 164 / 11%) 0, transparent 38%),
		linear-gradient(160deg, rgb(14 27 45 / 96%), rgb(9 16 28 / 98%));
}


.plans-pricing-wrap {
	overflow-x: auto;
	padding: 0;
}

.plans-mobile-cards {
	display: none;
}

.plans-grid {
	display: grid;
	grid-template-columns: minmax(170px, 0.9fr) repeat(2, minmax(280px, 1fr));
	column-gap: 12px;
	row-gap: 0;
	min-width: 820px;
	direction: rtl;
}

.feature-head {
	border-bottom: 1px solid rgb(133 175 227 / 16%);
}

.plan-card-head {
	display: block;
	border-radius: 18px 18px 0 0;
	padding: 8px 14px;
	border: 1px solid rgb(133 175 227 / 24%);
	border-bottom: 0;
	box-shadow: 0 6px 12px rgb(2 7 14 / 12%);
	text-align: center;
	direction: rtl;
	unicode-bidi: plaintext;
	margin-inline: 0;
	margin-bottom: -1px;
	position: relative;
	z-index: 2;
}

.plan-head-free {
	background:
		radial-gradient(circle at 18% 18%, rgb(125 195 255 / 22%) 0, transparent 48%),
		linear-gradient(150deg, rgb(24 46 74 / 96%), rgb(14 28 47 / 96%));
	color: #d8ebff;
}

.plan-head-pro {
	background:
		radial-gradient(circle at 16% 18%, rgb(78 242 164 / 20%) 0, transparent 46%),
		linear-gradient(150deg, rgb(19 52 42 / 96%), rgb(12 37 32 / 96%));
	color: #d8ffe8;
	border-color: rgb(78 242 164 / 32%);
}

.feature-cell,
.plan-cell {
	padding: 10px 12px;
	text-align: right;
	direction: rtl;
	unicode-bidi: plaintext;
	font-size: 0.94rem;
}

.feature-cell {
	font-weight: 400;
	color: #e5f1ff;
	background: rgb(16 31 51 / 44%);
	border-bottom: 1px solid rgb(133 175 227 / 14%);
	display: flex;
	align-items: center;
}

.plan-cell {
	color: #ccdcf1;
	border-inline: 1px solid rgb(133 175 227 / 16%);
	border-bottom: 1px solid rgb(133 175 227 / 12%);
	background: linear-gradient(160deg, rgb(17 30 50 / 86%), rgb(10 18 31 / 90%));
	display: flex;
	align-items: center;
}

.plan-cell-start {
	border-top: 1px solid rgb(133 175 227 / 16%);
	padding-top: 10px;
}

.plan-cell-free {
	color: #c7d8ef;
}

.plan-cell-pro {
	color: #d8ffe8;
	font-weight: 400;
	border-color: rgb(78 242 164 / 24%);
	background:
		radial-gradient(circle at 88% 12%, rgb(78 242 164 / 14%) 0, transparent 46%),
		linear-gradient(160deg, rgb(15 37 35 / 90%), rgb(9 24 26 / 92%));
}

.plan-cell-price {
	display: block;
}

.plan-cell-end {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.plan-cell-cta {
	padding-top: 12px;
	padding-bottom: 12px;
}

.plan-head-label,
.plan-head-price,
.plan-head-sub {
	display: block;
	unicode-bidi: plaintext;
}

.plan-head-label {
	font-size: 1rem;
	font-weight: 800;
	opacity: 0.95;
}

.plan-price-main {
	font-size: 1.1rem;
	font-weight: 800;
	color: #d8ffe8;
	line-height: 1.1;
}

.plan-price-sub {
	margin-top: 2px;
	font-size: 0.84rem;
	font-weight: 600;
	color: #9ec4eb;
}

.plan-yes,
.plan-no {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	column-gap: 6px;
	font-weight: 400;
}

.plan-yes::before,
.plan-no::before {
	display: grid;
	place-items: center;
	width: 1em;
	height: 1em;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1;
	font-family: var(--content-font);
}

.plan-yes {
	color: #d8ffe8;
}

.plan-yes::before {
	content: "V";
	color: #4ef2a4;
}

.plan-no {
	color: #a7b6ce;
	opacity: 0.82;
}

.plan-no::before {
	content: "X";
	color: #7d8da6;
}

.plan-cell .btn {
	display: inline-flex;
	justify-content: center;
	width: 100%;
}

.plan-mobile-card {
	border: 1px solid rgb(133 175 227 / 22%);
	border-radius: 14px;
	background:
		radial-gradient(circle at 12% 12%, rgb(125 195 255 / 12%) 0, transparent 48%),
		linear-gradient(160deg, rgb(15 28 46 / 90%), rgb(9 17 30 / 94%));
	overflow: hidden;
	box-shadow: 0 10px 20px rgb(2 7 14 / 18%);
}

.plan-mobile-card-pro {
	border-color: rgb(78 242 164 / 28%);
	background:
		radial-gradient(circle at 16% 12%, rgb(78 242 164 / 16%) 0, transparent 50%),
		linear-gradient(160deg, rgb(14 38 35 / 92%), rgb(9 24 27 / 95%));
}

.plan-mobile-head {
	padding: 12px 14px;
	border-bottom: 1px solid rgb(133 175 227 / 16%);
	display: grid;
	gap: 3px;
}

.plan-mobile-head h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	color: #e8f4ff;
}

.plan-mobile-price {
	margin: 0;
	font-size: 1.12rem;
	font-weight: 800;
	color: #d8ffe8;
}

.plan-mobile-price-note {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: #9ec4eb;
}

.plan-mobile-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.plan-mobile-list li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 10px 14px;
	border-top: 1px solid rgb(133 175 227 / 11%);
	color: #ccdcf1;
	font-size: 0.94rem;
}

.plan-mobile-list li:first-child {
	border-top: 0;
}

.plan-mobile-list li > span {
	color: #e5f1ff;
	font-weight: 400;
}

.plan-mobile-list li > strong {
	justify-self: start;
	font-weight: 700;
	color: #d8ebff;
}

.plan-mobile-card-pro .plan-mobile-list li > strong {
	color: #d8ffe8;
}

.faq-short {
	background:
		radial-gradient(circle at 10% 18%, rgb(125 195 255 / 12%) 0, transparent 40%),
		radial-gradient(circle at 92% 82%, rgb(78 242 164 / 10%) 0, transparent 44%),
		linear-gradient(160deg, rgb(14 27 45 / 96%), rgb(9 16 28 / 98%));
}

.faq-list {
	display: grid;
	gap: 12px;
	margin-top: 10px;
}

.faq-short .section-heading h2 {
	background: linear-gradient(130deg, #e9f4ff, #9bd0ff 52%, #8ff5c2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.faq-item {
	border: 1px solid rgb(133 175 227 / 24%);
	border-radius: 12px;
	background:
		radial-gradient(circle at 16% 16%, rgb(125 195 255 / 10%) 0, transparent 45%),
		linear-gradient(160deg, rgb(15 27 45 / 88%), rgb(10 18 31 / 92%));
	overflow: hidden;
	box-shadow:
		0 10px 18px rgb(2 7 14 / 14%),
		0 0 0 1px rgb(138 172 219 / 6%) inset;
}

.faq-item:nth-child(2n) {
	background:
		radial-gradient(circle at 84% 18%, rgb(78 242 164 / 9%) 0, transparent 42%),
		linear-gradient(160deg, rgb(14 28 47 / 88%), rgb(9 17 32 / 92%));
}

.faq-item h3 {
	margin: 0;
	padding: 12px 14px;
	font-size: 1rem;
	font-weight: 700;
	color: #b8dcff;
	text-shadow: 0 0 10px rgb(125 195 255 / 16%);
}

.faq-item p {
	margin: 0;
	padding: 12px 14px;
	color: #a9c2de;
	line-height: 1.55;
	border-top: 1px solid rgb(133 175 227 / 14%);
}

.faq-item:nth-child(2n) h3 {
	color: #9deec6;
}

.faq-item:nth-child(3n) h3 {
	color: #c7ceff;
}

.faq-actions {
	margin-top: 12px;
}

.final-cta {
	text-align: center;
	background:
		radial-gradient(circle at 50% -20%, rgb(78 242 164 / 22%) 0, transparent 48%),
		linear-gradient(160deg, rgb(14 28 47 / 98%), rgb(8 15 26 / 98%));
}

.final-cta-heading {
	max-width: none;
	text-align: center;
	margin-inline: auto;
}

.final-cta-heading h2 {
	max-width: 28ch;
	margin-inline: auto;
	display: grid;
	gap: 6px;
}

.final-cta-highlight {
	color: #8ff5c2;
	text-shadow: 0 0 18px rgb(78 242 164 / 26%);
}

.final-cta-note {
	font-size: 0.62em;
	font-weight: 600;
	color: #9fb3d0;
	text-shadow: none;
}

.final-cta-actions {
	margin-top: 14px;
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.final-cta-actions .btn {
	min-width: 210px;
	text-align: center;
}

.lead {
	margin-top: 10px;
}

.format {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: start;
}

.points,
.checks,
.steps {
	margin: 10px 0 0;
	padding-right: 20px;
	display: grid;
	gap: 6px;
}

.points.bullets {
	list-style: disc;
}

.highlight {
	margin-top: 12px;
	color: #8cf6bf;
	font-weight: 700;
}

.credibility {
	margin-top: 12px;
	font-size: 0.92rem;
	color: var(--muted);
}

.format-visual {
	display: grid;
	gap: 10px;
}

.mechanic-card,
.pro-card {
	background: linear-gradient(160deg, rgb(18 31 53 / 92%), rgb(11 20 36 / 94%));
	border: 1px solid rgb(133 175 227 / 18%);
	border-radius: 14px;
	padding: 12px;
	box-shadow:
		0 14px 28px rgb(2 7 14 / 24%),
		0 0 0 1px rgb(138 172 219 / 8%) inset;
}

.mechanic-card {
	display: grid;
	gap: 6px;
}

.mechanic-icon {
	font-size: 0;
	line-height: 1;
}

.mechanic-icon::before {
	content: "⚽";
	font-size: 1.08rem;
	color: #e9f4ff;
	text-shadow: 0 0 10px rgb(125 195 255 / 38%);
}

.mechanic-card h3 {
	font-size: 1.02rem;
}

.free {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 14px;
	align-items: stretch;
}

.subgroup-title {
	margin-top: 12px;
	font-weight: 700;
}

.limit-note {
	margin-top: 12px;
	font-weight: 700;
	color: #d1ddf3;
}

.free-shot {
	min-height: 260px;
}

.pro-head {
	margin-bottom: 12px;
}

.price {
	margin-top: 8px;
	font-size: clamp(1.4rem, 4vw, 2.2rem);
	font-weight: 800;
	color: var(--primary);
	text-shadow: 0 0 26px rgb(78 242 164 / 23%);
}

.pro-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 10px;
}

.pro-text {
	display: grid;
	gap: 10px;
}

.pro-card p {
	margin-top: 10px;
}

.tv-feature-shot {
	margin-top: 10px;
	min-height: 240px;
}

.value-line {
	font-weight: 700;
	color: #bcefd6;
}

.compare-line {
	border-top: 1px dashed #35506f;
	padding-top: 8px;
	font-size: 0.93rem;
	color: #afc1dd;
}

.social-subline {
	margin-top: 10px;
	font-weight: 700;
}

.social-grid {
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.social-grid p {
	margin: 0;
	padding: 10px;
	background: linear-gradient(160deg, rgb(18 31 53 / 92%), rgb(11 20 36 / 94%));
	border: 1px solid rgb(133 175 227 / 18%);
	border-radius: 14px;
	box-shadow:
		0 14px 28px rgb(2 7 14 / 24%),
		0 0 0 1px rgb(138 172 219 / 8%) inset;
}

.tv-name-shot {
	margin-top: 10px;
	min-height: 160px;
}

.final-cta p {
	margin-top: 10px;
}

.closing-main {
	font-weight: 700;
}

.closing-sub {
	max-width: 780px;
	margin-inline: auto;
}

.final-actions {
	justify-content: center;
}

.site-footer {
	margin-top: 20px;
	border-top: 1px solid rgb(133 175 227 / 18%);
	background:
		radial-gradient(circle at 50% -120%, rgb(125 195 255 / 14%) 0, transparent 48%),
		linear-gradient(180deg, rgb(8 14 24 / 86%), rgb(7 12 20 / 94%));
}

.site-footer-inner {
	width: min(1120px, 92vw);
	margin-inline: auto;
	padding: 18px 0 22px;
	display: grid;
	gap: 12px;
	justify-items: center;
	text-align: center;
}

.footer-brand {
	font-size: 1.18rem;
	font-weight: 800;
	color: #e8f2ff;
}

.footer-links {
	display: flex;
	gap: 8px 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.footer-links a {
	text-decoration: none;
	color: #a9c2de;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.footer-links a:hover {
	color: #d6ecff;
	border-color: rgb(125 195 255 / 32%);
	background: rgb(16 30 49 / 46%);
}

.footer-note {
	text-align: center;
	color: #9cb0cf;
	font-size: 0.95rem;
}

.footer-note-link,
.footer-note-link:visited {
	color: #c8d8ee;
	text-decoration: none;
	font-weight: 700;
}

.footer-note-link:hover,
.footer-note-link:focus-visible {
	color: #dce9fb;
	text-decoration: none;
}

.scroll-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid rgb(125 195 255 / 35%);
	border-radius: 999px;
	background: linear-gradient(150deg, rgb(18 33 55 / 94%), rgb(10 19 34 / 96%));
	color: #dff0ff;
	font-size: 1.25rem;
	line-height: 1;
	box-shadow:
		0 12px 24px rgb(3 9 18 / 42%),
		0 0 0 1px rgb(125 195 255 / 12%) inset;
	cursor: pointer;
	z-index: 60;
	opacity: 0;
	transform: translateY(12px) scale(0.92);
	pointer-events: none;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.scroll-to-top:hover {
	border-color: rgb(78 242 164 / 54%);
	box-shadow:
		0 14px 28px rgb(3 9 18 / 48%),
		0 0 0 1px rgb(78 242 164 / 18%) inset,
		0 0 18px rgb(78 242 164 / 22%);
}

.scroll-to-top:focus-visible {
	outline: 2px solid rgb(78 242 164 / 82%);
	outline-offset: 2px;
}

.scroll-to-top.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

@supports (animation-timeline: scroll()) {
	.scroll-progress {
		animation: grow-progress linear both;
		animation-timeline: scroll(root block);
	}

	.hero-shot-image {
		animation: hero-parallax linear both;
		animation-timeline: scroll(root block);
		animation-range: 0% 65%;
	}
}

/* Entry reveals are handled as one-way slide-ins via JS intersection logic. */

@media (prefers-reduced-motion: reduce) {
	.scroll-progress,
	.hero-shot-image,
	.section,
	.hero,
	.step-card,
	.scoring-card,
	.premium-card,
	.faq-item,
	.scoring-card-soliko {
		animation: none !important;
		animation-timeline: none !important;
		transition: none !important;
		filter: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

@media (max-width: 980px) {
	.hero {
		grid-template-columns: 1fr;
		grid-template-areas:
			"copy"
			"visual"
			"cta";
	}

	.hero-shot {
		min-height: 230px;
	}

	.how-it-works-grid,
	.scoring-grid,
	.prediction-reveal-grid,
	.premium-intro-grid,
	.tv-showcase-grid,
	.premium-cards,
	.tv-showcase-list,
	.format,
	.free,
	.pro-grid,
	.social-grid {
		grid-template-columns: 1fr;
	}

	.tv-showcase-visual {
		justify-items: stretch;
	}

	.plans-grid {
		grid-template-columns: minmax(160px, 0.8fr) repeat(2, minmax(240px, 1fr));
		min-width: 720px;
	}

	.prediction-reveal-shot,
	.premium-intro-shot {
		width: 100%;
	}

	.prediction-reveal-copy,
	.premium-intro-copy {
		max-width: none;
	}

	.prediction-reveal-summary,
	.prediction-reveal-note,
	.premium-intro-summary,
	.tv-showcase-copy {
		max-width: none;
	}

	.scoring-foot {
		margin-top: 10px;
	}

	.scoring-cards {
		grid-template-columns: 1fr;
		gap: 8px;
		justify-items: stretch;
	}

	.scoring-card {
		grid-template-columns: 1fr;
		gap: 10px;
		width: 100%;
		min-height: 0;
	}

	.coin-piles {
		justify-content: center;
	}

	.how-it-works-visual,
	.flow-shot,
	.scoring-visual,
	.scoring-shot {
		min-height: 0;
	}

	.hero-visual .image-placeholder {
		min-height: 210px;
	}

	.btn {
		width: 100%;
		text-align: center;
	}

	.final-cta-actions {
		justify-content: stretch;
	}

	.footer-links {
		gap: 6px 8px;
	}

	.footer-links a {
		width: auto;
	}

	.section-actions {
		justify-content: stretch;
	}

	.scroll-to-top {
		right: 14px;
		bottom: 14px;
	}
}

@media (max-width: 760px) {
	.plans-pricing-wrap {
		display: none;
	}

	.plans-mobile-cards {
		display: grid;
		gap: 12px;
	}
}