.siv-problems,
.siv-problems * {
	box-sizing: border-box;
}

.siv-problems {
	--siv-ink: #020914;
	--siv-navy: #06162b;
	--siv-panel: rgba(4, 18, 37, 0.88);
	--siv-blue: #1677ed;
	--siv-cyan: #5bc6ff;
	--siv-silver: #c9d8e8;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	min-height: 980px;
	padding: clamp(64px, 6vw, 96px) 24px 26px;
	color: #f7fbff;
	background:
		linear-gradient(180deg, #020812 0%, #041329 52%, #020914 100%);
	font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.siv-problems::before,
.siv-problems::after {
	content: "";
	position: absolute;
	z-index: 5;
	right: 0;
	left: 0;
	height: 1px;
	pointer-events: none;
}

.siv-problems::before {
	top: 0;
	background: linear-gradient(90deg, transparent, rgba(91, 198, 255, 0.48), transparent);
}

.siv-problems::after {
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(46, 123, 222, 0.34), transparent);
}

.siv-problems__art,
.siv-problems__wash {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
}

.siv-problems__art::before {
	content: "";
	position: absolute;
	inset: -2%;
	background-image: var(--siv-problems-desktop);
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.82;
	transform: scale(1.01);
	animation: siv-scene-breathe 22s ease-in-out infinite alternate;
	will-change: transform;
}

.siv-problems__art::after {
	content: "";
	position: absolute;
	top: 27%;
	left: 50%;
	width: clamp(360px, 42vw, 620px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 123, 255, 0.12), transparent 67%);
	filter: blur(4px);
	transform: translateX(-50%);
	animation: siv-halo-breathe 7s ease-in-out infinite alternate;
}

.siv-problems__wash {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(1, 7, 16, 0.18) 0%, rgba(1, 7, 16, 0.02) 35%, rgba(2, 9, 20, 0.08) 66%, rgba(2, 9, 20, 0.92) 100%),
		radial-gradient(circle at 50% 47%, transparent 0 24%, rgba(2, 9, 20, 0.05) 48%, rgba(2, 9, 20, 0.68) 100%);
}

.siv-problems__inner {
	position: relative;
	z-index: 2;
	width: min(100%, 1440px);
	margin: 0 auto;
}

.siv-problems__header {
	width: min(100%, 840px);
	margin: 0 auto;
	text-align: center;
	text-wrap: balance;
}

.siv-problems__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 14px;
	color: #70c8ff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;
}

.siv-problems__eyebrow span {
	width: 28px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #2a9cff);
}

.siv-problems__eyebrow span:last-child {
	transform: rotate(180deg);
}

.siv-problems__header h2 {
	max-width: 780px;
	margin: 0 auto;
	color: #fff;
	font-size: clamp(42px, 5vw, 76px);
	font-weight: 850;
	letter-spacing: -0.055em;
	line-height: 0.98;
	text-shadow: 0 8px 34px rgba(0, 0, 0, 0.48);
}

.siv-problems__intro {
	max-width: 710px;
	margin: 22px auto 0;
	color: rgba(230, 239, 249, 0.8);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.65;
}

.siv-problems__stage {
	position: relative;
	min-height: 680px;
	margin-top: 6px;
}

.siv-problems__connectors {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	opacity: 0.42;
	filter: drop-shadow(0 0 5px rgba(82, 184, 255, 0.3));
}

.siv-problems__connectors path {
	fill: none;
	stroke: rgba(83, 185, 255, 0.62);
	stroke-width: 1.4;
	stroke-dasharray: 3 9;
	stroke-linecap: round;
}

.siv-problems.is-ready .siv-problems__connectors path {
	animation: siv-line-flow 18s linear infinite;
}

.siv-problems__cards {
	position: absolute;
	inset: 0;
}

.siv-problems__card {
	position: absolute;
	z-index: 2;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 16px;
	width: clamp(250px, 22vw, 318px);
	min-height: 170px;
	padding: 26px 24px 22px;
	border: 1px solid rgba(94, 179, 255, 0.35);
	border-radius: 20px;
	background:
		linear-gradient(145deg, rgba(7, 31, 59, 0.94), rgba(2, 12, 27, 0.88));
	box-shadow:
		0 18px 54px rgba(0, 0, 0, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 30px rgba(25, 113, 232, 0.08);
	backdrop-filter: blur(13px);
	-webkit-backdrop-filter: blur(13px);
	transform: translateY(0);
	transition:
		transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 360ms ease,
		box-shadow 360ms ease;
}

.siv-problems.is-enhanced .siv-problems__card {
	opacity: 0;
	transform: translateY(18px);
}

.siv-problems.is-enhanced .siv-problems__card.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 700ms ease var(--siv-delay, 0ms),
		transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--siv-delay, 0ms),
		border-color 360ms ease,
		box-shadow 360ms ease;
}

.siv-problems__card:hover {
	z-index: 4;
	border-color: rgba(109, 202, 255, 0.68);
	box-shadow:
		0 24px 64px rgba(0, 0, 0, 0.46),
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 36px rgba(25, 113, 232, 0.14);
	transform: translateY(-4px);
}

.siv-problems.is-enhanced .siv-problems__card.is-visible:hover {
	transform: translateY(-4px);
}

.siv-problems__card[data-card="1"] {
	top: 76px;
	left: 1%;
	--siv-delay: 40ms;
}

.siv-problems__card[data-card="2"] {
	top: 350px;
	left: 4.5%;
	--siv-delay: 130ms;
}

.siv-problems__card[data-card="3"] {
	top: 76px;
	right: 1%;
	--siv-delay: 220ms;
}

.siv-problems__card[data-card="4"] {
	top: 350px;
	right: 4.5%;
	--siv-delay: 310ms;
}

.siv-problems__card[data-card="5"] {
	bottom: -5px;
	left: 50%;
	width: clamp(300px, 31vw, 440px);
	min-height: 150px;
	transform: translateX(-50%);
	--siv-delay: 400ms;
}

.siv-problems.is-enhanced .siv-problems__card[data-card="5"] {
	transform: translate(-50%, 18px);
}

.siv-problems.is-enhanced .siv-problems__card[data-card="5"].is-visible {
	transform: translate(-50%, 0);
}

.siv-problems.is-enhanced .siv-problems__card[data-card="5"].is-visible:hover {
	transform: translate(-50%, -4px);
}

.siv-problems__number {
	position: absolute;
	top: -16px;
	left: 20px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(103, 201, 255, 0.75);
	border-radius: 50%;
	color: #fff;
	background: #06172d;
	box-shadow: 0 0 18px rgba(50, 153, 255, 0.35);
	font-size: 13px;
	font-weight: 850;
}

.siv-problems__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-top: 5px;
	border: 1px solid rgba(85, 190, 255, 0.38);
	border-radius: 18px;
	color: #66c6ff;
	background: linear-gradient(145deg, rgba(21, 96, 177, 0.18), rgba(2, 11, 24, 0.35));
	box-shadow: inset 0 0 22px rgba(48, 145, 255, 0.08);
}

.siv-problems__icon svg {
	width: 40px;
	height: 40px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.siv-problems__icon .accent {
	stroke: #d8f1ff;
}

.siv-problems__copy h3 {
	margin: 0;
	color: #f8fbff;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.siv-problems__rule {
	display: block;
	width: 34px;
	height: 2px;
	margin: 10px 0 11px;
	border-radius: 999px;
	background: linear-gradient(90deg, #1685f5, #69ceff);
	box-shadow: 0 0 8px rgba(70, 179, 255, 0.32);
}

.siv-problems__copy p {
	margin: 0;
	color: rgba(222, 233, 244, 0.75);
	font-size: 13px;
	line-height: 1.56;
}

.siv-problems__solution {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: 46px 1fr auto;
	align-items: center;
	gap: 16px;
	margin-top: 26px;
	padding: 18px 20px;
	border: 1px solid rgba(79, 167, 255, 0.22);
	border-radius: 18px;
	background: linear-gradient(90deg, rgba(8, 31, 58, 0.93), rgba(6, 24, 48, 0.9));
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.siv-problems__shield {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(88, 190, 255, 0.32);
	border-radius: 14px;
	color: #7bd1ff;
	background: rgba(35, 121, 219, 0.12);
}

.siv-problems__shield svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.siv-problems__solution-copy h3 {
	margin: 0 0 4px;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.siv-problems__solution-copy p {
	margin: 0;
	color: rgba(219, 232, 245, 0.68);
	font-size: 12px;
	line-height: 1.45;
}

.siv-problems__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid rgba(121, 207, 255, 0.34);
	border-radius: 999px;
	color: #fff !important;
	background: linear-gradient(135deg, #126ee8, #238fff);
	box-shadow: 0 10px 25px rgba(18, 110, 232, 0.22);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none !important;
	transition: transform 250ms ease, box-shadow 250ms ease, filter 250ms ease;
}

.siv-problems__cta:hover {
	color: #fff;
	filter: brightness(1.08);
	box-shadow: 0 13px 30px rgba(18, 110, 232, 0.32);
	transform: translateY(-2px);
}

.siv-problems__cta svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 250ms ease;
}

.siv-problems__cta:hover svg {
	transform: translateX(3px);
}

@keyframes siv-scene-breathe {
	from { transform: scale(1.01) translate3d(0, 0, 0); }
	to { transform: scale(1.035) translate3d(0, -5px, 0); }
}

@keyframes siv-halo-breathe {
	from { opacity: 0.45; transform: translateX(-50%) scale(0.96); }
	to { opacity: 0.72; transform: translateX(-50%) scale(1.04); }
}

@keyframes siv-line-flow {
	to { stroke-dashoffset: -120; }
}

@media (max-width: 1180px) {
	.siv-problems {
		min-height: 940px;
	}

	.siv-problems__card {
		grid-template-columns: 54px 1fr;
		gap: 13px;
		width: 270px;
		padding: 24px 18px 20px;
	}

	.siv-problems__icon {
		width: 54px;
		height: 54px;
		border-radius: 15px;
	}

	.siv-problems__icon svg {
		width: 33px;
		height: 33px;
	}

	.siv-problems__card[data-card="1"],
	.siv-problems__card[data-card="3"] {
		top: 70px;
	}

	.siv-problems__card[data-card="2"],
	.siv-problems__card[data-card="4"] {
		top: 330px;
	}
}

@media (max-width: 900px) {
	.siv-problems {
		min-height: 0;
		padding: 52px 18px 18px;
		background: linear-gradient(180deg, #020812 0%, #041329 38%, #020914 100%);
	}

	.siv-problems__art {
		height: 690px;
		overflow: hidden;
	}

	.siv-problems__art::before {
		inset: 0;
		background-image: var(--siv-problems-mobile);
		background-position: center top;
		background-size: min(100%, 520px) auto;
		opacity: 0.8;
		transform: scale(1);
		animation-duration: 24s;
	}

	.siv-problems__art::after {
		top: 265px;
		width: 360px;
	}

	.siv-problems__wash {
		background:
			linear-gradient(180deg, rgba(2, 9, 20, 0.08) 0%, rgba(2, 9, 20, 0.02) 38%, rgba(2, 9, 20, 0.48) 57%, #020914 83%),
			linear-gradient(90deg, rgba(2, 9, 20, 0.22), transparent 28% 72%, rgba(2, 9, 20, 0.22));
	}

	.siv-problems__header h2 {
		font-size: clamp(38px, 10vw, 58px);
		line-height: 1;
	}

	.siv-problems__intro {
		max-width: 580px;
		margin-top: 18px;
		font-size: 15px;
	}

	.siv-problems__stage {
		min-height: 0;
		margin-top: 390px;
	}

	.siv-problems__connectors {
		display: none;
	}

	.siv-problems__cards {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.siv-problems__card,
	.siv-problems__card[data-card] {
		position: relative;
		inset: auto;
		display: grid;
		grid-template-columns: 58px 1fr;
		width: auto;
		min-height: 165px;
		padding: 24px 18px 18px;
		transform: none;
	}

	.siv-problems__card[data-card="5"] {
		grid-column: 1 / -1;
	}

	.siv-problems.is-enhanced .siv-problems__card[data-card] {
		transform: translateY(18px);
	}

	.siv-problems.is-enhanced .siv-problems__card[data-card].is-visible {
		transform: translateY(0);
	}

	.siv-problems.is-enhanced .siv-problems__card[data-card].is-visible:hover {
		transform: translateY(-3px);
	}

	.siv-problems__solution {
		margin-top: 18px;
	}
}

@media (max-width: 620px) {
	.siv-problems {
		padding-right: 14px;
		padding-left: 14px;
	}

	.siv-problems__eyebrow {
		font-size: 10px;
		letter-spacing: 0.18em;
	}

	.siv-problems__eyebrow span {
		width: 18px;
	}

	.siv-problems__header h2 {
		font-size: clamp(36px, 12vw, 48px);
	}

	.siv-problems__intro {
		font-size: 14px;
		line-height: 1.6;
	}

	.siv-problems__stage {
		margin-top: 335px;
	}

	.siv-problems__cards {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.siv-problems__card,
	.siv-problems__card[data-card] {
		grid-template-columns: 62px 1fr;
		min-height: 0;
	}

	.siv-problems__card[data-card="5"] {
		grid-column: auto;
	}

	.siv-problems__solution {
		grid-template-columns: 44px 1fr;
		padding: 16px;
	}

	.siv-problems__cta {
		grid-column: 1 / -1;
		width: 100%;
		margin-top: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.siv-problems *,
	.siv-problems *::before,
	.siv-problems *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}