/* ==========================================================================
   Homepage hero — technical architecture diagram (responsive)
   Mobile: compact animated band below CTA
   Tablet: simplified smaller animated version
   Desktop: full animation beside copy
   ========================================================================== */

.hero__layout {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hero__visual {
	display: block;
	width: 100%;
	max-width: min(14rem, 78vw);
	height: auto;
	min-height: 0;
	margin-top: var(--space-3);
	margin-inline: auto;
	overflow: visible;
	position: relative;
	border-radius: var(--radius-lg);
	contain: layout style;
	background: radial-gradient(
		ellipse 90% 100% at 50% 50%,
		rgba(0, 209, 255, 0.045) 0%,
		transparent 72%
	);
}

.hero-diagram {
	position: relative;
	width: 100%;
	max-width: min(14rem, 78vw);
	margin-inline: auto;
	aspect-ratio: 1;
}

.hero-diagram__ambient {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 209, 255, 0.07) 0%, transparent 68%);
	opacity: 0.4;
	pointer-events: none;
	animation: hero-diagram-ambient-lite 10s ease-in-out infinite;
}

.hero-diagram__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hero-diagram__line {
	stroke: rgba(0, 209, 255, 0.22);
	stroke-width: 1;
	stroke-linecap: round;
	animation: hero-diagram-line-glow-lite 10s ease-in-out infinite;
}

.hero-diagram__line--1 { animation-delay: 0s; }
.hero-diagram__line--2 { animation-delay: -2s; }
.hero-diagram__line--3 { animation-delay: -4s; }
.hero-diagram__line--4 { animation-delay: -6s; }

.hero-diagram__dot {
	fill: rgba(0, 209, 255, 0.4);
	transform-origin: center;
	transform-box: fill-box;
	animation: hero-diagram-dot-pulse-lite 10s ease-in-out infinite;
}

.hero-diagram__dot--hub {
	fill: rgba(0, 209, 255, 0.5);
}

.hero-diagram__nodes {
	position: absolute;
	inset: 0;
}

.hero-diagram__node {
	--float-delay: 0s;
	--pulse-delay: 0s;

	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.22rem 0.35rem;
	background: rgba(20, 20, 20, 0.62);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	animation:
		hero-diagram-float-lite 10s ease-in-out var(--float-delay) infinite,
		hero-diagram-node-pulse-lite 10s ease-in-out var(--pulse-delay) infinite;
}

.hero-diagram__node--woo {
	--y: 10%;
}

.hero-diagram__node--seo {
	--y: 90%;
}

.hero-diagram__node--center {
	padding: 0.28rem 0.42rem;
	border-color: rgba(0, 209, 255, 0.18);
	animation:
		hero-diagram-float-lite 10s ease-in-out var(--float-delay) infinite,
		hero-diagram-node-pulse-lite 10s ease-in-out var(--pulse-delay) infinite;
}

.hero-diagram__icon {
	display: flex;
	flex-shrink: 0;
	color: rgba(0, 209, 255, 0.5);
}

.hero-diagram__icon svg {
	width: 9px;
	height: 9px;
}

.hero-diagram__label {
	font-family: var(--font-mono);
	font-size: 0.4375rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	line-height: 1;
}

.hero-diagram__node--center .hero-diagram__label {
	color: rgba(255, 255, 255, 0.78);
}

.hero-diagram__label-full {
	display: none;
}

.hero-diagram__node--seo {
	white-space: nowrap;
	max-width: none;
}

.hero-diagram__node--ai {
	--x: 10%;
	--y: 50%;
}

.hero-diagram__node--api {
	--x: 90%;
	--y: 50%;
}

/* ---- Tablet: simplified smaller animated version ---- */
@media (min-width: 48rem) and (max-width: 74.99rem) {
	.hero__layout {
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.72fr);
		gap: var(--space-6);
		align-items: center;
	}

	.hero__visual {
		height: auto;
		max-height: none;
		min-height: 0;
		margin-top: 0;
		background: none;
		border-radius: 0;
	}

	.hero__visual {
		max-width: 17rem;
		margin-top: 0;
	}

	.hero-diagram {
		max-width: 17rem;
		max-height: 17rem;
		aspect-ratio: 1;
	}

	.hero-diagram__node--woo {
		--y: 8%;
	}

	.hero-diagram__node--seo {
		--y: 92%;
	}

	.hero-diagram__node--ai {
		--x: 8%;
		--y: 50%;
	}

	.hero-diagram__node--api {
		--x: 92%;
		--y: 50%;
	}

	.hero-diagram__ambient {
		animation: hero-diagram-ambient-lite 10s ease-in-out infinite;
	}

	.hero-diagram__line {
		animation: hero-diagram-line-glow-lite 10s ease-in-out infinite;
	}

	.hero-diagram__line--1 { animation-delay: 0s; }
	.hero-diagram__line--2 { animation-delay: -2s; }
	.hero-diagram__line--3 { animation-delay: -4s; }
	.hero-diagram__line--4 { animation-delay: -6s; }

	.hero-diagram__dot {
		animation: hero-diagram-dot-pulse-lite 10s ease-in-out infinite;
	}

	.hero-diagram__node {
		padding: 0.38rem 0.52rem;
		animation:
			hero-diagram-float-lite 10s ease-in-out var(--float-delay) infinite,
			hero-diagram-node-pulse-lite 10s ease-in-out var(--pulse-delay) infinite;
	}

	.hero-diagram__node--center {
		animation:
			hero-diagram-float-lite 10s ease-in-out var(--float-delay) infinite,
			hero-diagram-node-pulse-lite 10s ease-in-out var(--pulse-delay) infinite;
	}

	.hero-diagram__icon svg {
		width: 12px;
		height: 12px;
	}

	.hero-diagram__label {
		font-size: 0.5625rem;
	}

}

.hero-diagram__connectors--desktop {
	display: none;
}

/* ---- Desktop: full animation beside copy ---- */
@media (min-width: 75rem) {
	.hero-diagram__connectors--default {
		display: none;
	}

	.hero-diagram__connectors--desktop {
		display: block;
	}

	.hero__visual {
		max-width: 34rem;
	}

	.hero-diagram__node--woo {
		--y: 11%;
	}

	.hero-diagram__node--seo {
		--y: 89%;
	}

	.hero-diagram__node--ai {
		--x: 9%;
		--y: 50%;
	}

	.hero-diagram__node--api {
		--x: 91%;
		--y: 50%;
	}

	.hero__layout {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--space-10);
		align-items: center;
	}

	.hero__visual {
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;
		height: 100%;
		min-height: 100%;
		margin-top: 0;
		background: none;
		border-radius: 0;
	}

	.hero-diagram {
		max-width: 34rem;
		max-height: none;
		aspect-ratio: 1;
	}

	.hero-diagram__ambient {
		inset: 8%;
		opacity: 1;
		animation: hero-diagram-ambient 8s ease-in-out infinite;
	}

	.hero-diagram__line {
		stroke: rgba(0, 209, 255, 0.28);
		animation: hero-diagram-line-glow 8s ease-in-out infinite;
	}

	.hero-diagram__line--1 { animation-delay: 0s; animation-duration: 7s; }
	.hero-diagram__line--2 { animation-delay: -1.5s; animation-duration: 8s; }
	.hero-diagram__line--3 { animation-delay: -3s; animation-duration: 9s; }
	.hero-diagram__line--4 { animation-delay: -4.5s; animation-duration: 10s; }

	.hero-diagram__dot {
		animation: hero-diagram-dot-pulse 8s ease-in-out infinite;
	}

	.hero-diagram__node {
		gap: 0.4rem;
		padding: 0.45rem 0.65rem;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-radius: var(--radius-md);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
		opacity: 1;
		animation:
			hero-diagram-float 8s ease-in-out var(--float-delay) infinite,
			hero-diagram-node-pulse 8s ease-in-out var(--pulse-delay) infinite,
			hero-diagram-node-glow 8s ease-in-out var(--pulse-delay) infinite;
	}

	.hero-diagram__node--center {
		padding: 0.55rem 0.8rem;
		border-color: rgba(0, 209, 255, 0.2);
		animation:
			hero-diagram-float 8s ease-in-out var(--float-delay) infinite,
			hero-diagram-node-pulse 8s ease-in-out var(--pulse-delay) infinite,
			hero-diagram-node-glow-center 8s ease-in-out var(--pulse-delay) infinite;
	}

	.hero-diagram__icon svg {
		width: 14px;
		height: 14px;
	}

	.hero-diagram__label {
		font-size: 0.625rem;
		letter-spacing: 0.04em;
	}

	.hero-diagram__node--center .hero-diagram__label {
		color: rgba(255, 255, 255, 0.82);
	}

	.hero-diagram__node--seo {
		white-space: nowrap;
		max-width: none;
	}
}

/* ---- Animations (desktop) ---- */
@keyframes hero-diagram-float {
	0%,
	100% {
		transform: translate(-50%, -50%) translate(0, 0);
	}

	25% {
		transform: translate(-50%, -50%) translate(2px, -4px);
	}

	50% {
		transform: translate(-50%, -50%) translate(-2px, -6px);
	}

	75% {
		transform: translate(-50%, -50%) translate(3px, -3px);
	}
}

@keyframes hero-diagram-node-pulse {
	0%,
	100% {
		opacity: 0.72;
	}

	50% {
		opacity: 1;
	}
}

@keyframes hero-diagram-node-glow {
	0%,
	100% {
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	}

	50% {
		box-shadow:
			0 8px 28px rgba(0, 0, 0, 0.45),
			0 0 18px rgba(0, 209, 255, 0.1);
	}
}

@keyframes hero-diagram-node-glow-center {
	0%,
	100% {
		box-shadow:
			0 4px 24px rgba(0, 0, 0, 0.4),
			0 0 16px rgba(0, 209, 255, 0.05);
	}

	50% {
		box-shadow:
			0 10px 32px rgba(0, 0, 0, 0.5),
			0 0 28px rgba(0, 209, 255, 0.14);
	}
}

@keyframes hero-diagram-line-glow {
	0%,
	100% {
		stroke-opacity: 0.25;
		stroke-width: 1;
	}

	50% {
		stroke-opacity: 0.85;
		stroke-width: 1.5;
	}
}

@keyframes hero-diagram-dot-pulse {
	0%,
	100% {
		opacity: 0.4;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.5);
	}
}

@keyframes hero-diagram-ambient {
	0%,
	100% {
		opacity: 0.45;
		transform: scale(0.96);
	}

	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

/* ---- Animations (tablet lite) ---- */
@keyframes hero-diagram-float-lite {
	0%,
	100% {
		transform: translate(-50%, -50%) translate(0, 0);
	}

	50% {
		transform: translate(-50%, -50%) translate(1px, -3px);
	}
}

@keyframes hero-diagram-node-pulse-lite {
	0%,
	100% {
		opacity: 0.78;
	}

	50% {
		opacity: 0.95;
	}
}

@keyframes hero-diagram-line-glow-lite {
	0%,
	100% {
		stroke-opacity: 0.22;
	}

	50% {
		stroke-opacity: 0.55;
	}
}

@keyframes hero-diagram-dot-pulse-lite {
	0%,
	100% {
		opacity: 0.45;
		transform: scale(1);
	}

	50% {
		opacity: 0.75;
		transform: scale(1.2);
	}
}

@keyframes hero-diagram-ambient-lite {
	0%,
	100% {
		opacity: 0.35;
		transform: scale(0.98);
	}

	50% {
		opacity: 0.6;
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-diagram__ambient,
	.hero-diagram__line,
	.hero-diagram__dot,
	.hero-diagram__node,
	.hero-diagram__node--center {
		animation: none;
	}

	.hero-diagram__node,
	.hero-diagram__node--center {
		opacity: 0.9;
		transform: translate(-50%, -50%);
	}
}