/**
 * CRM Integration — production assets + shared theme tokens.
 */

.crm-page .crm-hero {
	position: relative;
	overflow: hidden;
	padding: 7.25rem 0 4rem;
	color: #fff;
	background: var(--gradient);
}
.crm-page .crm-hero::before,
.crm-page .crm-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.crm-page .crm-hero::before {
	width: 28rem;
	height: 28rem;
	right: -8rem;
	top: -10rem;
	background: radial-gradient(circle, rgba(212, 255, 63, 0.22), transparent 68%);
}
.crm-page .crm-hero::after {
	width: 22rem;
	height: 22rem;
	left: -6rem;
	bottom: -8rem;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
}
.crm-page .crm-hero .container { position: relative; z-index: 1; }
.crm-page .crm-hero .l1-section-title { color: #fff; }
.crm-page .crm-hero .l1-section-sub {
	color: rgba(255, 255, 255, 0.86);
	max-width: none;
}
.crm-page .crm-orbit {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}
.crm-page .crm-ring {
	transform-origin: 320px 280px;
	animation: crm-spin 32s linear infinite;
}
.crm-page .crm-ring--slow { animation-duration: 52s; animation-direction: reverse; }
.crm-page .crm-spin {
	transform-origin: 0 0;
	animation: crm-spin 36s linear infinite;
}
.crm-page .crm-spin--ticks { animation-duration: 70s; }
.crm-page .crm-spin--radar { animation-duration: 9s; }
.crm-page .crm-spin--sparks { animation-duration: 22s; animation-direction: reverse; }
.crm-page .crm-hub-spin {
	transform-origin: 320px 280px;
	animation: crm-spin 14s linear infinite;
}
.crm-page .crm-spoke path {
	stroke-dasharray: 6 10;
	animation: crm-dash 12s linear infinite;
}
.crm-page .crm-wave {
	transform-origin: 320px 280px;
	animation: crm-wave 4.8s ease-out infinite;
}
.crm-page .crm-wave--2 { animation-delay: 1.6s; }
.crm-page .crm-wave--3 { animation-delay: 3.2s; }
.crm-page .crm-core {
	transform-origin: 320px 280px;
	animation: crm-pulse 2.8s ease-in-out infinite;
}
.crm-page .crm-node {
	animation: crm-float 3.6s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes crm-spin {
	to { transform: rotate(360deg); }
}
@keyframes crm-dash {
	to { stroke-dashoffset: -140; }
}
@keyframes crm-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}
@keyframes crm-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes crm-wave {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(3.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.crm-page .crm-ring,
	.crm-page .crm-spin,
	.crm-page .crm-hub-spin,
	.crm-page .crm-spoke path,
	.crm-page .crm-wave,
	.crm-page .crm-core,
	.crm-page .crm-node { animation: none; }
}

.crm-page #crm-partners { background: var(--l1-soft); }
.crm-page #crm-partners .col { display: flex; }
.crm-page article {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.7rem 1.45rem 1.35rem;
	background:
		radial-gradient(circle at 100% 0%, rgba(43, 92, 230, 0.1), transparent 42%),
		var(--l1-white);
	border: 1px solid var(--l1-line);
	border-radius: var(--l1-radius);
	box-shadow: var(--l1-shadow-sm);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.crm-page article::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--gradient);
}
.crm-page article::after {
	content: "";
	position: absolute;
	right: -2.2rem;
	top: -2.2rem;
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(43, 92, 230, 0.16), transparent 70%);
}
.crm-page article:hover {
	transform: translateY(-6px);
	border-color: rgba(43, 92, 230, 0.28);
	box-shadow: 0 18px 40px rgba(15, 29, 110, 0.12);
}
.crm-page article > div {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 6.5rem;
	margin: 0 0 1.15rem;
	border-radius: 18px;
	background:
		radial-gradient(circle at 30% 25%, #fff 0%, #eef3ff 72%);
	box-shadow: 0 0 0 1px rgba(43, 92, 230, 0.08);
}
.crm-page article > div span {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.crm-page article > div span:first-child {
	width: 0.7rem;
	height: 0.7rem;
	right: 0.7rem;
	top: 0.7rem;
	background: #2b5ce6;
	box-shadow: 0 0 0 4px rgba(43, 92, 230, 0.16);
}
.crm-page article > div span:last-of-type {
	width: 0.45rem;
	height: 0.45rem;
	left: 0.75rem;
	bottom: 0.75rem;
	background: #2b5ce6;
	opacity: 0.85;
}
.crm-page article > div img {
	position: relative;
	z-index: 1;
	width: 180px;
	height: 64px;
	max-width: calc(100% - 2.5rem);
	object-fit: contain;
	object-position: center;
}
.crm-page article p {
	position: relative;
	z-index: 1;
	margin: 0 0 1.2rem;
	color: var(--l1-muted);
	font-size: 0.95rem;
	line-height: 1.65;
	flex: 1;
}
.crm-page article a {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem 0.45rem 0.95rem;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	border-radius: 999px;
	background: var(--gradient);
}
.crm-page article a::after {
	content: "→";
	font-size: 0.95rem;
	transition: transform 0.2s ease;
}
.crm-page article a:hover { color: #fff; }
.crm-page article a:hover::after { transform: translateX(3px); }

@media (max-width: 991.98px) {
	.crm-page .crm-hero { padding: 6.25rem 0 3rem; }
}
@media (max-width: 575.98px) {
	.crm-page .container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}