/* Refinements from the July design review. */
.site-header nav { color: #d1d8d4; font-size: 14px; font-weight: 600; }
.header-cta { margin-left: auto; }
.system-label { font-size: 11px; color: #b1bcb6; letter-spacing: .08em; font-weight: 600; }
.data-node small { font-size: 10px; color: #a8b3ad; line-height: 1.4; }
.core > small { font-size: 10px; color: #b3bdb8; }
.core-tags span { font-size: 9px; color: #b5c0ba; border-color: #39483f; }

.proof-band { min-height: 360px; grid-template-columns: 1.35fr repeat(3, 1fr); align-items: center; padding-top: 70px; padding-bottom: 70px; gap: 38px; }
.proof-band header { align-self: center; }
.proof-band header .kicker { color: #075c4b; }
.proof-band h2 { max-width: 620px; margin: 0; font-size: clamp(34px, 3.5vw, 58px); line-height: 1.02; letter-spacing: -.05em; }
.proof-band > div { flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 26px; }
.proof-band strong { font-size: clamp(48px, 5vw, 76px); line-height: .9; letter-spacing: -.06em; }
.proof-band span { font-size: 11px; line-height: 1.55; text-transform: none; letter-spacing: .03em; }

.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.platform .section-head { grid-template-columns: 1fr; }
.platform .section-head p { max-width: 620px; margin: 28px 0 0; font-size: 16px; }
.feature, .feature-large { min-height: 660px; }
.feature-large { grid-row: auto; }
.feature { padding: 26px; }
.feature > div:last-child { min-height: 125px; }
.feature h3 { font-size: 23px; }
.feature p { font-size: 13px; line-height: 1.65; }
.feature .tape-visual { top: 18%; left: 5%; right: 5%; transform: none; }
.feature-large .tape-visual { right: auto; transform: scale(.74); transform-origin: top left; width: 121.62%; }

.why { gap: 8vw; }
.why h2 em { color: #006b56; }
.why .team-link {
	gap: 18px;
	padding: 12px 16px;
	border: 1px solid #829089;
	background: rgba(255, 255, 255, .35);
	color: #17231e;
	font-weight: 600;
	transition: background .2s, border-color .2s, transform .2s;
}
.why .team-link:hover {
	border-color: #52625a;
	background: rgba(255, 255, 255, .72);
	transform: translateY(-2px);
}
.compare-head, .compare-row { grid-template-columns: 1fr 1fr; }
.compare-head span { color: #4f5c55; }
.compare-head span:last-child { color: #006b56; }
.compare-row { border-color: #b6c0ba; }
.compare-row > span { font-size: 14px; line-height: 1.35; }
.compare-row > span:first-child { color: #606c66; background: #f5f7f5; }
.compare-row > span:last-child { background: #dce8e2; color: #10251d; font-weight: 600; }

.network-bg {
	animation: network-ring-drift 12s ease-in-out infinite alternate;
	will-change: transform;
}
.network-bg::before {
	animation: network-ring-breathe 7s ease-in-out infinite;
}
.network-bg::after {
	animation: network-ring-breathe 7s ease-in-out -3.5s infinite reverse;
}

@keyframes network-ring-drift {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(-16px, 12px, 0) rotate(2deg); }
	100% { transform: translate3d(10px, 24px, 0) rotate(-2deg); }
}

@keyframes network-ring-breathe {
	0%, 100% { opacity: .55; transform: scale(1); }
	50% { opacity: 1; transform: scale(.94); }
}

.steps > div {
	position: relative;
	min-height: 320px;
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.steps > div > p {
	max-width: 44%;
}
.step-illustration {
	display: block;
	width: 88px;
	height: 58px;
	margin: 18px 0 4px;
	fill: none;
	stroke: #61716a;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .25s ease, transform .35s ease;
}
.step-illustration .step-accent { stroke: #00d3a7; stroke-width: 2; }
.step-illustration .step-accent-fill { fill: #00d3a7; stroke: none; }
.step-detail {
	position: absolute;
	top: 28px;
	right: 24px;
	width: 150px;
	padding: 12px 13px;
	border: 1px solid #293a33;
	background: rgba(10, 18, 15, .72);
	transform-origin: top right;
	transition: border-color .25s ease, background .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.step-detail strong {
	display: block;
	color: #00d3a7;
	font-size: 16px;
	font-weight: 500;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .25s ease;
}
.steps > div .step-detail small {
	display: block;
	margin: 3px 0 0;
	color: #84938c;
	font-size: 7px;
	line-height: 1.35;
	letter-spacing: .08em;
}
.step-signals {
	position: absolute;
	top: 118px;
	right: 24px;
	display: grid;
	gap: 0;
	width: 150px;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid #34433d;
	list-style: none;
	transform-origin: top right;
	transition: border-color .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.step-signals li {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid #26332e;
	color: #97a49e;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: .025em;
	transition: color .25s ease, transform .25s ease;
}
.step-signals li:last-child { border-bottom: 0; }
.steps > div .step-signals span {
	display: none;
}
.steps > div:hover {
	border-color: #00a985;
	background: linear-gradient(180deg, rgba(18, 37, 30, .95), rgba(8, 13, 11, .35));
	transform: translateY(-6px);
}
.steps > div:hover .step-illustration {
	stroke: #a7b8b0;
	transform: translateY(-3px) scale(1.06);
}
.steps > div:hover .step-detail {
	border-color: #397362;
	background: rgba(12, 28, 22, .94);
	transform: translateY(-2px) scale(1.06);
}
.steps > div:hover .step-detail strong {
	color: #3ee7c3;
	transform: translateX(4px) scale(1.08);
}
.steps > div:hover .step-signals {
	border-color: #397362;
	transform: translateY(2px) scale(1.06);
}
.steps > div:hover .step-signals li {
	color: #c5d0cb;
	border-color: #315047;
	transform: translateX(3px);
}
.steps > div:hover .step-signals li:nth-child(2) {
	transition-delay: .05s;
}
.steps > div:hover .step-operate circle {
	animation: step-pulse 1.1s ease-in-out infinite alternate;
}
.steps > div:hover .step-administer .step-accent {
	animation: step-line 1.2s ease-in-out infinite alternate;
}
.steps > div:hover .step-connect {
	transform: translateY(-3px) scale(1.06) rotate(3deg);
}

@keyframes step-pulse {
	to { fill: rgba(0, 211, 167, .14); stroke: #00d3a7; }
}
@keyframes step-line {
	to { transform: translateY(-3px); }
}

.cta .cta-ring {
	will-change: transform;
}
.cta .cta-ring::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(5, 45, 36, .48);
	box-shadow: 0 0 0 8px rgba(5, 45, 36, .07);
}
.cta .ring-one {
	animation: cta-ring-one 15s ease-in-out infinite alternate;
}
.cta .ring-two {
	animation: cta-ring-two 11s ease-in-out infinite alternate-reverse;
}

@keyframes cta-ring-one {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(26px, 18px, 0) rotate(70deg) scale(1.05); }
	100% { transform: translate3d(8px, 38px, 0) rotate(145deg) scale(.96); }
}
@keyframes cta-ring-two {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.94); }
	50% { transform: translate3d(-30px, -18px, 0) rotate(-95deg) scale(1.07); }
	100% { transform: translate3d(-12px, -36px, 0) rotate(-180deg) scale(1); }
}

footer { grid-template-columns: 1.4fr 1fr; color: #9ba7a1; }
.footer-intro p { max-width: 390px; margin: 22px 0 0; font-size: 13px; line-height: 1.7; }
.footer-cta { justify-self: center; color: #fff; }

@media (max-width: 1100px) {
	.feature-grid { grid-template-columns: 1fr; }
	.feature, .feature-large { min-height: 650px; }
	.feature-large .tape-visual { right: 5%; transform: none; width: auto; }
	.proof-band { grid-template-columns: 1fr 1fr; }
	.proof-band header { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.proof-band { grid-template-columns: 1fr 1fr; }
	.proof-band header { grid-column: 1 / -1; }
	footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.proof-band { grid-template-columns: 1fr; min-height: auto; }
	.proof-band header { grid-column: auto; }
	.proof-band h2 { font-size: 36px; }
	.feature, .feature-large { min-height: 620px; }
	.feature > div:last-child { min-height: 120px; }
	.compare-head, .compare-row { grid-template-columns: 1fr 1fr; }
	footer { grid-template-columns: 1fr; }
}