/* ==========================================================================
   Lime Technologies - Premium Service Page Architecture
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE & VARIABLES
   -------------------------------------------------------------------------- */
.lime-service-page-wrapper {
	font-family: var(--wp--preset--font-family--inter, sans-serif);
	overflow-x: hidden;
	color: #0f172a;
}

:root {
	--lime-container-max: 100%;
	--lime-container-wide: 100%;
	--lime-container-narr: 900px;
	--lime-bg-dark: #070b14;
	--lime-bg-darker: #04060b;
	--lime-bg-light: #ffffff;
	--lime-bg-alt: #f8fafc;
	--lime-border-light: rgba(15, 23, 42, 0.08);
	--lime-border-dark: rgba(255, 255, 255, 0.1);
	--lime-text-muted: #64748b;
	--lime-text-muted-dark: #94a3b8;
}

/* --------------------------------------------------------------------------
   UTILITY
   -------------------------------------------------------------------------- */
.lime-container {
	max-width: var(--lime-container-max);
	margin: 0 auto;
	padding: 0 8%;
}

.lime-container.is-wide {
	max-width: var(--lime-container-wide);
	padding: 0 5%;
}

.lime-container.is-narrow {
	max-width: var(--lime-container-narr);
	margin: 0 auto;
	padding: 0 5%;
}

.lime-eyebrow {
	display: inline-flex;
	align-items: center;
	color: var(--lime-primary, #92F425);
	font-weight: 700;
	letter-spacing: 2px;
	font-size: 13px;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.lime-eyebrow::before {
	content: '';
	display: block;
	width: 24px;
	height: 2px;
	background: var(--lime-primary, #92F425);
	margin-right: 12px;
}

.lime-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #0f172a;
	color: #fff;
	padding: 14px 32px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lime-btn-primary:hover {
	background: #1e293b;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.lime-btn-primary.is-light {
	background: var(--lime-primary, #92F425);
	color: #0f172a;
}
.lime-btn-primary.is-light:hover {
	background: #fff;
	color: #0f172a;
	box-shadow: 0 10px 20px rgba(255,255,255,0.1);
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY HIERARCHY
   -------------------------------------------------------------------------- */
.lime-h1 {
	font-size: clamp(38px, 4.05vw, 61px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -2px;
	margin-bottom: 32px;
}
.lime-text-accent {
	color: var(--lime-primary, #92F425);
	white-space: nowrap;
}
.lime-h2 {
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -1.5px;
	margin-bottom: 32px;
}
.lime-h3 {
	font-size: clamp(24px, 3vw, 36px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.5px;
}
.lime-p-large {
	font-size: clamp(20px, 2.5vw, 28px);
	line-height: 1.35;
	color: var(--lime-text-muted);
}
.lime-p-standard {
	font-size: 18px;
	line-height: 1.6;
	color: var(--lime-text-muted);
}
.is-dark .lime-p-large,
.is-dark .lime-p-standard {
	color: var(--lime-text-muted-dark);
}
.is-dark .lime-h1,
.is-dark .lime-h2,
.is-dark .lime-h3 {
	color: #fff;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.lime-service-hero {
	background: var(--lime-bg-alt);
	padding: 100px 0 80px;
	position: relative;
	overflow: hidden;
}

.lime-service-hero .lime-container {
	display: grid;
	grid-template-columns: 44% 56%;
	align-items: center;
	gap: 0;
}

.lime-hero-content {
	padding-right: 60px;
	position: relative;
	z-index: 10;
}
.lime-hero-content .lime-btn-primary {
	margin-top: 24px;
}

.lime-hero-visual {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hero Layers */
.hero-layer-bg {
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);
	background-size: 40px 40px;
	transform: perspective(1000px) rotateX(60deg) translateY(-100px) translateZ(-200px);
	opacity: 0.5;
}

.hero-layer-browser {
	position: absolute;
	width: 80%;
	aspect-ratio: 4/3;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.08);
	border: 1px solid rgba(0,0,0,0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: perspective(1000px) rotateY(-15deg) rotateX(5deg) translateX(40px);
}
.hero-browser-top {
	height: 48px;
	background: #f1f5f9;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 8px;
}
.hero-url-bar {
	flex-grow: 1;
	height: 24px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #d1d9e4;
	margin-left: 8px;
	display: flex;
	align-items: center;
	padding: 0 12px;
}
.hero-url-bar span {
	font-size: 10px;
	color: #64748b;
	font-family: monospace;
	letter-spacing: 0.3px;
}
.hero-browser-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #cbd5e1;
}
.hero-browser-body {
	flex-grow: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hb-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.hb-pill {
	width: 50px;
	height: 14px;
	background: var(--lime-primary, #92F425);
	border-radius: 10px;
}
.hb-lines {
	display: flex;
	gap: 16px;
}
.hb-line {
	width: 30px;
	height: 4px;
	background: #cbd5e1;
	border-radius: 2px;
}
.hb-hero {
	height: 100px;
	background: #0f172a;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hb-hero-dot {
	width: 20px;
	height: 20px;
	background: var(--lime-primary, #92F425);
	border-radius: 50%;
}
.hb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
}
.hb-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hb-card {
	height: 50px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hb-card.accent {
	background: var(--lime-primary, #92F425);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
}
.hb-card-dot {
	width: 14px;
	height: 14px;
	background: var(--lime-primary, #92F425);
	border-radius: 50%;
}
.hb-col-line {
	height: 4px;
	background: #cbd5e1;
	border-radius: 2px;
	width: 100%;
}
.hb-col-line:last-child {
	width: 60%;
}

.hero-layer-mobile {
	position: absolute;
	width: 30%;
	aspect-ratio: 10/19;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 40px 80px rgba(0,0,0,0.12);
	border: 6px solid #0f172a;
	right: 5%;
	bottom: 10%;
	transform: perspective(1000px) rotateY(-5deg) translateZ(100px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 12px;
}

.m-notch {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 45%;
	height: 16px;
	background: #0f172a;
	border-radius: 0 0 10px 10px;
}

.m-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	margin-bottom: 14px;
}

.m-pill {
	width: 36px;
	height: 12px;
	background: var(--lime-primary, #92F425);
	border-radius: 10px;
}

.m-burger {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.m-burger span {
	width: 14px;
	height: 2px;
	background: #94a3b8;
	border-radius: 2px;
}

.m-hero {
	flex-shrink: 0;
	height: 35%;
	background: var(--lime-primary, #92F425);
	border-radius: 8px;
	margin-bottom: 14px;
}

.m-lines {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}

.m-line {
	height: 5px;
	background: #cbd5e1;
	border-radius: 3px;
	width: 100%;
}

.m-line.short {
	width: 65%;
}

.m-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.m-card {
	flex-shrink: 0;
	height: 36px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 6px;
}

.m-fab {
	position: absolute;
	bottom: 14px;
	right: 14px;
	width: 24px;
	height: 24px;
	background: var(--lime-primary, #92F425);
	border-radius: 50%;
}

.hero-layer-ui {
	position: absolute;
	width: auto;
	min-width: 180px;
	background: rgba(15,23,42,0.65);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(146,244,37,0.15);
	border-radius: 12px;
	padding: 16px 20px;
	left: 5%;
	top: 15%;
	transform: perspective(1000px) rotateY(5deg) translateZ(150px);
	box-shadow: 
		0 20px 40px rgba(0,0,0,0.2),
		inset 0 1px 0 rgba(255,255,255,0.05),
		-10px 0 30px rgba(146,244,37,0.05);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Data card */
.hero-layer-data {
	position: absolute;
	left: 0%;
	bottom: calc(5% + 100px);
	transform: perspective(1000px) rotateY(8deg) translateZ(200px);
	z-index: 10;
}
.data-card {
	background: rgba(255,255,255,0.55);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 12px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.dc-chart {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 36px;
	width: 48px;
}
.dc-bar {
	width: 8px;
	background: var(--lime-primary, #92F425);
	border-radius: 2px 2px 0 0;
}
.dc-bar:nth-child(1) { opacity: 0.4; }
.dc-bar:nth-child(2) { opacity: 0.6; }
.dc-bar:nth-child(3) { opacity: 0.8; }
.dc-bar:nth-child(4) { opacity: 1; }

.dc-circle {
	width: 44px;
	height: 44px;
}
.circular-chart {
	display: block;
	max-width: 100%;
	max-height: 250px;
}
.circle-bg {
	fill: none;
	stroke: rgba(146,244,37,0.2);
	stroke-width: 3.8;
}
.circle {
	fill: none;
	stroke: var(--lime-primary, #92F425);
	stroke-width: 3.8;
	stroke-linecap: round;
}

.dc-stats {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dc-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 9px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.dc-label svg {
	color: var(--lime-primary, #92F425);
}
.dc-value {
	font-size: 24px;
	font-weight: 800;
	color: var(--lime-primary, #92F425);
	line-height: 1;
	letter-spacing: -0.5px;
}

.hero-layer-ui::before {
	display: none;
}

.ui-label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	position: relative;
	z-index: 1;
}

.ui-label .lime-dot {
	width: 8px;
	height: 8px;
	background: var(--lime-primary, #92F425);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(146,244,37,0.4);
}

/* Animations */
@media (prefers-reduced-motion: no-preference) {
	.lime-service-hero .hero-layer-bg {
		animation: fadeUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}
	.lime-service-hero .hero-layer-browser {
		opacity: 0;
		animation: slideInBrowser 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s, floatBrowser 8s ease-in-out infinite 1.7s;
	}
	.lime-service-hero .hero-layer-mobile {
		opacity: 0;
		animation: slideInMobile 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s, floatMobile 6s ease-in-out infinite 1.9s;
	}
	.lime-service-hero .hero-layer-ui {
		opacity: 0;
		animation: slideInUI 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s, floatUI 5s ease-in-out infinite 2.1s;
	}
	.lime-service-hero .hero-layer-data {
		opacity: 0;
		animation: slideInData 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s, floatData 7s ease-in-out infinite 2.3s;
	}
	.lime-service-hero .circle {
		stroke-dashoffset: 100;
		animation: loadCircle 2s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.2s;
	}
	.lime-service-hero .dc-bar {
		transform: scaleY(0);
		transform-origin: bottom;
		animation: loadBar 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.5s;
	}
}

@keyframes fadeUp {
	from { opacity: 0; transform: perspective(1000px) rotateX(60deg) translateY(0) translateZ(-200px); }
	to { opacity: 0.5; transform: perspective(1000px) rotateX(60deg) translateY(-100px) translateZ(-200px); }
}
@keyframes slideInBrowser {
	from { opacity: 0; transform: perspective(1000px) rotateY(-15deg) rotateX(5deg) translateX(100px) translateZ(-100px); }
	to { opacity: 1; transform: perspective(1000px) rotateY(-15deg) rotateX(5deg) translateX(40px) translateZ(0); }
}
@keyframes floatBrowser {
	0%, 100% { transform: perspective(1000px) rotateY(-15deg) rotateX(5deg) translateX(40px) translateZ(0); }
	50% { transform: perspective(1000px) rotateY(-15deg) rotateX(5deg) translateX(40px) translateY(-10px) translateZ(0); }
}
@keyframes slideInMobile {
	from { opacity: 0; transform: perspective(1000px) rotateY(-5deg) translateY(40px) translateZ(100px); }
	to { opacity: 1; transform: perspective(1000px) rotateY(-5deg) translateY(0) translateZ(100px); }
}
@keyframes slideInUI {
	from { opacity: 0; transform: perspective(1000px) translateX(-40px) translateZ(150px); }
	to { opacity: 1; transform: perspective(1000px) translateX(0) translateZ(150px); }
}
@keyframes slideInData {
	from { opacity: 0; transform: perspective(1000px) rotateY(8deg) translateY(40px) translateZ(200px); }
	to { opacity: 1; transform: perspective(1000px) rotateY(8deg) translateY(0) translateZ(200px); }
}

@keyframes floatMobile {
	0%, 100% { transform: perspective(1000px) rotateY(-5deg) translateY(0) translateZ(100px); }
	50% { transform: perspective(1000px) rotateY(-5deg) translateY(-15px) translateZ(100px); }
}
@keyframes floatUI {
	0%, 100% { transform: perspective(1000px) translateX(0) translateZ(150px); }
	50% { transform: perspective(1000px) translateX(0) translateY(-10px) translateZ(150px); }
}
@keyframes floatData {
	0%, 100% { transform: perspective(1000px) rotateY(8deg) translateY(0) translateZ(200px); }
	50% { transform: perspective(1000px) rotateY(8deg) translateY(-12px) translateZ(200px); }
}
@keyframes loadCircle {
	from { stroke-dashoffset: 100; }
	to { stroke-dashoffset: 0; }
}
@keyframes loadBar {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}



/* Browser window — enhanced */
.hero-browser-top {
	height: 44px;
	background: #e8edf3;
	border-bottom: 1px solid #d1d9e4;
	display: flex;
	align-items: center;
	padding: 0 14px;
	gap: 6px;
}
.hero-browser-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}
.hbd-red   { background: #ff5f57; }
.hbd-amber { background: #febc2e; }
.hbd-green { background: #28c840; }

.hero-url-bar {
	flex-grow: 1;
	height: 24px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #d1d9e4;
	margin-left: 8px;
	display: flex;
	align-items: center;
	padding: 0 12px;
}
.hero-url-bar span {
	font-size: 10px;
	color: #64748b;
	font-family: monospace;
	letter-spacing: 0.3px;
}




/* --------------------------------------------------------------------------
   DIRECT ANSWER
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   DIRECT ANSWER / WEB BUILD STACK
   -------------------------------------------------------------------------- */
.lime-section-overview {
	background: #ffffff;
	padding: 180px 0;
	position: relative;
	overflow: hidden;
}

.lime-section-overview::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-image: 
		linear-gradient(rgba(146, 244, 37, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(146, 244, 37, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
	opacity: 0.5;
}

.lime-section-overview::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: radial-gradient(circle at 50% 100%, rgba(146, 244, 37, 0.05) 0%, transparent 70%);
	pointer-events: none;
}

.lime-overview-top {
	display: grid;
	grid-template-columns: 32% 68%;
	gap: 60px;
	align-items: start;
	position: relative;
	z-index: 2;
	margin-bottom: 120px;
}

.lime-overview-marker {
	font-size: 13px;
	font-weight: 800;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-top: 2px solid rgba(15, 23, 42, 0.1);
	padding-top: 24px;
	line-height: 1.5;
}

.lime-overview-content {
	border-top: 2px solid var(--lime-primary);
	padding-top: 24px;
}

.lime-p-editorial {
	font-size: 32px;
	line-height: 1.4;
	font-weight: 500;
	color: #1e293b;
	margin: 0;
	max-width: 850px;
	letter-spacing: -0.5px;
}

/* WEB BUILD STACK */
.lime-build-stack {
	position: relative;
	z-index: 2;
	width: 100%;
}

.stack-architecture-line {
	position: absolute;
	top: 14px;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(15, 23, 42, 0.05);
	z-index: 1;
}

.stack-architecture-line::after {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 0;
	background: var(--lime-primary);
}

@media (prefers-reduced-motion: no-preference) {
	.stack-architecture-line::after {
		animation: stackLineDraw 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
	}
}

@keyframes stackLineDraw {
	to { width: 100%; }
}

.stack-stages {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 20px;
	position: relative;
	z-index: 2;
}

.stack-stage {
	position: relative;
	padding-top: 40px;
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.lime-p-editorial {
		animation: editorialResolve 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		opacity: 0;
		transform: translateY(10px);
	}
	.stack-stage {
		opacity: 0;
		transform: translateY(10px);
		animation: stageEstablish 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}
	.stack-stage:nth-child(1) { animation-delay: 0.5s; }
	.stack-stage:nth-child(2) { animation-delay: 0.6s; }
	.stack-stage:nth-child(3) { animation-delay: 0.7s; }
	.stack-stage:nth-child(4) { animation-delay: 0.8s; }
	.stack-stage:nth-child(5) { animation-delay: 0.9s; }
	.stack-stage:nth-child(6) { animation-delay: 1.0s; }
	.stack-stage:nth-child(7) { animation-delay: 1.1s; }
}

@keyframes editorialResolve {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes stageEstablish {
	to { opacity: 1; transform: translateY(0); }
}

.stage-node {
	position: absolute;
	top: 10px;
	left: 0;
	width: 10px;
	height: 10px;
	background: #fff;
	border: 2px solid var(--lime-primary);
	border-radius: 50%;
	z-index: 3;
	transition: all 0.3s ease;
	box-shadow: 0 0 0 0 rgba(146, 244, 37, 0);
}

.stack-stage:hover .stage-node {
	background: var(--lime-primary);
	box-shadow: 0 0 0 6px rgba(146, 244, 37, 0.2);
}

.stage-num {
	font-family: monospace;
	font-size: 14px;
	font-weight: 700;
	color: #94a3b8;
	margin-bottom: 8px;
	transition: color 0.3s ease;
}

.stage-label {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
	transition: color 0.3s ease;
}

.stage-desc {
	font-size: 13px;
	color: #64748b;
	line-height: 1.4;
	transition: color 0.3s ease;
}

.stack-stage:hover .stage-num {
	color: #0f172a;
}
.stack-stage:hover .stage-label {
	color: var(--lime-primary);
}
.stack-stage:hover .stage-desc {
	color: #334155;
}

/* Spotlight Animation */
.stack-stage .stage-node { animation: spotlightNode 10.5s infinite; }
.stack-stage .stage-num { animation: spotlightNum 10.5s infinite; }
.stack-stage .stage-label { animation: spotlightLabel 10.5s infinite; }
.stack-stage .stage-desc { animation: spotlightDesc 10.5s infinite; }

.stack-stage:nth-child(1) .stage-node, .stack-stage:nth-child(1) .stage-num, .stack-stage:nth-child(1) .stage-label, .stack-stage:nth-child(1) .stage-desc { animation-delay: 0s; }
.stack-stage:nth-child(2) .stage-node, .stack-stage:nth-child(2) .stage-num, .stack-stage:nth-child(2) .stage-label, .stack-stage:nth-child(2) .stage-desc { animation-delay: 1.5s; }
.stack-stage:nth-child(3) .stage-node, .stack-stage:nth-child(3) .stage-num, .stack-stage:nth-child(3) .stage-label, .stack-stage:nth-child(3) .stage-desc { animation-delay: 3.0s; }
.stack-stage:nth-child(4) .stage-node, .stack-stage:nth-child(4) .stage-num, .stack-stage:nth-child(4) .stage-label, .stack-stage:nth-child(4) .stage-desc { animation-delay: 4.5s; }
.stack-stage:nth-child(5) .stage-node, .stack-stage:nth-child(5) .stage-num, .stack-stage:nth-child(5) .stage-label, .stack-stage:nth-child(5) .stage-desc { animation-delay: 6.0s; }
.stack-stage:nth-child(6) .stage-node, .stack-stage:nth-child(6) .stage-num, .stack-stage:nth-child(6) .stage-label, .stack-stage:nth-child(6) .stage-desc { animation-delay: 7.5s; }
.stack-stage:nth-child(7) .stage-node, .stack-stage:nth-child(7) .stage-num, .stack-stage:nth-child(7) .stage-label, .stack-stage:nth-child(7) .stage-desc { animation-delay: 9.0s; }

/* Pause and allow manual hover interaction */
.stack-stages:hover .stage-node,
.stack-stages:hover .stage-num,
.stack-stages:hover .stage-label,
.stack-stages:hover .stage-desc {
	animation: none !important;
}

@keyframes spotlightNode {
    0%, 14%, 100% { background: #fff; box-shadow: 0 0 0 0 rgba(146, 244, 37, 0); }
    7% { background: var(--lime-primary); box-shadow: 0 0 0 6px rgba(146, 244, 37, 0.2); }
}
@keyframes spotlightNum {
    0%, 14%, 100% { color: #94a3b8; }
    7% { color: #0f172a; }
}
@keyframes spotlightLabel {
    0%, 14%, 100% { color: #0f172a; }
    7% { color: var(--lime-primary); }
}
@keyframes spotlightDesc {
    0%, 14%, 100% { color: #64748b; }
    7% { color: #334155; }
}

@media (max-width: 1024px) {
	.lime-overview-top {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-bottom: 80px;
	}
	.lime-overview-marker {
		border-top: none;
		padding-top: 0;
	}
	.stack-stages {
		grid-template-columns: repeat(4, 1fr);
		row-gap: 60px;
	}
	.stack-architecture-line {
		display: none;
	}
}

@media (max-width: 768px) {
	.lime-section-overview {
		padding: 120px 0;
	}
	.lime-p-editorial {
		font-size: 26px;
	}
	.stack-stages {
		grid-template-columns: 1fr 1fr;
		row-gap: 40px;
	}
}

@media (max-width: 500px) {
	.stack-stages {
		grid-template-columns: 1fr;
		row-gap: 0;
		padding-left: 32px;
	}
	.stack-stage {
		padding-top: 0;
		padding-bottom: 40px;
	}
	.stack-stage:last-child {
		padding-bottom: 0;
	}
	.stage-node {
		top: 4px;
		left: -32px;
	}
	.stack-stage::before {
		content: '';
		position: absolute;
		top: 18px;
		left: -28px;
		bottom: -22px;
		width: 2px;
		background: rgba(146, 244, 37, 0.3);
	}
	.stack-stage:last-child::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   WHAT WE BUILD
   -------------------------------------------------------------------------- */
.lime-section-build {
	background: var(--lime-bg-alt);
	padding: 160px 0;
}

.lime-build-bands {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--lime-border-light);
}

.lime-build-band {
	display: grid;
	grid-template-columns: 80px 1fr 2fr;
	gap: 40px;
	padding: 40px 0;
	border-bottom: 1px solid var(--lime-border-light);
	transition: background 0.3s ease, padding 0.3s ease;
}

.lime-build-band:hover {
	background: #fff;
	padding-left: 20px;
	padding-right: 20px;
	box-shadow: inset 4px 0 0 var(--lime-primary);
}

.lime-build-num {
	font-size: 24px;
	font-weight: 700;
	color: var(--lime-text-muted-dark);
}

.lime-build-title {
	font-size: 28px;
	font-weight: 700;
	margin: 0;
}

.lime-build-desc {
	font-size: 18px;
	color: var(--lime-text-muted);
	margin: 0;
	line-height: 1.6;
}

.lime-build-visual {
	margin-top: 120px;
	width: 100%;
	height: 640px;
	background: #0f172a;
	border-radius: 24px;
	position: relative;
	overflow: hidden;
}

.build-system-bg {
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), 
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	background-position: center;
	opacity: 0.8;
}

.build-system-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, transparent 30%, #0f172a 80%);
}

.build-system-layers {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 2000px;
	transform-style: preserve-3d;
}

.build-layer {
	position: absolute;
	background: rgba(30, 41, 59, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 
		0 40px 80px rgba(0,0,0,0.6), 
		inset 0 1px 0 rgba(255,255,255,0.15);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.layer-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2px;
	color: #94a3b8;
	text-transform: uppercase;
	padding: 16px 24px;
	background: rgba(15, 23, 42, 0.5);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	display: flex;
	align-items: center;
	gap: 12px;
}
.layer-label::before {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	background: var(--lime-primary);
	border-radius: 50%;
}
.layer-label.center { text-align: left; border: none; padding: 0; flex-grow: 1; }
.layer-label.bottom { border-bottom: none; border-top: 1px solid rgba(255,255,255,0.05); margin-top: auto; padding: 16px; justify-content: center; background: transparent; }
.layer-label.bottom::before { display: none; }

.build-layer-header {
	height: 48px;
	background: rgba(15, 23, 42, 0.8);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	display: flex;
	align-items: center;
	padding: 0 24px;
}
.build-layer-header .dots { display: flex; gap: 8px; opacity: 0.3; }
.build-layer-header .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
}
.build-layer-body {
	flex-grow: 1;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.b-skel { background: rgba(255,255,255,0.05); border-radius: 4px; border: 1px solid rgba(255,255,255,0.03); }
.b-skel.accent { background: rgba(146, 244, 37, 0.15); border-color: rgba(146, 244, 37, 0.3); position: relative; overflow: hidden; }
.b-skel.accent::after {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(90deg, transparent, rgba(146, 244, 37, 0.2), transparent);
	transform: translateX(-100%);
	animation: skelShimmer 3s infinite;
}
@keyframes skelShimmer {
	100% { transform: translateX(100%); }
}

.b-skel-group { display: flex; gap: 16px; }
.b-skel-group .b-card { flex: 1; height: 100px; }
.b-hero { height: 180px; }
.b-form { height: 160px; width: 80%; margin: 0 auto; }
.b-form-btn { height: 48px; width: 40%; margin: 0 auto; background: var(--lime-primary); border-radius: 4px; }
.b-grid { flex-grow: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.b-grid::before, .b-grid::after { content:''; background:rgba(255,255,255,0.05); border-radius:4px; border: 1px solid rgba(255,255,255,0.03); }
.b-sidebar { height: 100%; width: 80px; float: left; margin-right: 24px; }

/* Positions */
.build-layer-main {
	width: 55%;
	height: 65%;
	z-index: 3;
	transform: rotateY(-20deg) rotateX(10deg) translateZ(120px);
}
.build-layer-landing {
	width: 30%;
	height: 45%;
	left: 5%;
	top: 15%;
	z-index: 2;
	transform: rotateY(-20deg) rotateX(10deg) translateZ(-60px) translateX(-40px);
}
.build-layer-platform {
	width: 35%;
	height: 55%;
	right: 5%;
	bottom: 10%;
	z-index: 1;
	transform: rotateY(-20deg) rotateX(10deg) translateZ(-150px) translateX(60px);
}
.build-layer-mobile {
	width: 18%;
	height: 65%;
	right: 15%;
	top: 15%;
	z-index: 4;
	border-radius: 32px;
	border: 12px solid #000;
	background: #1e293b;
	transform: rotateY(-20deg) rotateX(10deg) translateZ(250px);
}
.build-layer-mobile .build-layer-body { padding: 16px; gap: 16px; }
.build-layer-mobile .b-nav { height: 40px; border-radius: 20px; }
.build-layer-mobile .b-hero { height: 120px; border-radius: 12px; }
.build-layer-mobile .b-card { height: 60px; border-radius: 12px; }
.build-layer-mobile .m-notch {
	position: absolute;
	top: 0; left: 50%; transform: translateX(-50%);
	width: 40%; height: 24px;
	background: #000; border-radius: 0 0 12px 12px;
}

/* Animations */
@media (prefers-reduced-motion: no-preference) {
	.lime-section-build .build-layer-main {
		animation: sysLayerIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.lime-section-build .build-layer-landing {
		animation: sysLayerIn2 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s;
	}
	.lime-section-build .build-layer-platform {
		animation: sysLayerIn3 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
	}
	.lime-section-build .build-layer-mobile {
		animation: sysLayerIn4 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s;
	}
}

@keyframes sysLayerIn {
	from { opacity: 0; transform: rotateY(-20deg) rotateX(10deg) translateZ(0px) translateY(80px); }
	to { opacity: 1; transform: rotateY(-20deg) rotateX(10deg) translateZ(120px) translateY(0); }
}
@keyframes sysLayerIn2 {
	from { opacity: 0; transform: rotateY(-20deg) rotateX(10deg) translateZ(-140px) translateX(-40px); }
	to { opacity: 1; transform: rotateY(-20deg) rotateX(10deg) translateZ(-60px) translateX(-40px); }
}
@keyframes sysLayerIn3 {
	from { opacity: 0; transform: rotateY(-20deg) rotateX(10deg) translateZ(-250px) translateX(60px); }
	to { opacity: 1; transform: rotateY(-20deg) rotateX(10deg) translateZ(-150px) translateX(60px); }
}
@keyframes sysLayerIn4 {
	from { opacity: 0; transform: rotateY(-20deg) rotateX(10deg) translateZ(150px) translateY(80px); }
	to { opacity: 1; transform: rotateY(-20deg) rotateX(10deg) translateZ(250px) translateY(0); }
}

/* --------------------------------------------------------------------------
   STRATEGY + UX (DARK)
   -------------------------------------------------------------------------- */
.lime-section-strategy {
	background: var(--lime-bg-dark);
	color: #fff;
	padding: 160px 0;
	position: relative;
	overflow: hidden;
}

.lime-strategy-grid {
	display: grid;
	grid-template-columns: 45% 55%;
	gap: 80px;
	align-items: center;
}

.lime-ux-visual {
	width: 100%;
	aspect-ratio: 4/5;
	position: relative;
	background: radial-gradient(circle at center, rgba(146,244,37,0.03) 0%, transparent 60%);
	border-radius: 24px;
	border: 1px solid rgba(255,255,255,0.05);
	overflow: hidden;
}

.ux-bg-architecture {
	position: absolute;
	inset: 0;
	padding: 40px;
	opacity: 0.2;
	pointer-events: none;
}
.ux-wireframe {
	width: 100%;
	height: 100%;
	border: 2px dashed rgba(255,255,255,0.1);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
}
.wire-header { height: 40px; border-bottom: 2px dashed rgba(255,255,255,0.1); }
.wire-hero { flex-grow: 1; border: 2px dashed rgba(255,255,255,0.1); border-radius: 12px; }
.wire-grid { height: 120px; display: flex; gap: 20px; }
.wire-box { flex: 1; border: 2px dashed rgba(255,255,255,0.1); border-radius: 12px; }

/* SVG flow path */
.ux-flow-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}
.ux-flow-path {
	fill: none;
	stroke: var(--lime-primary, #92F425);
	stroke-width: 2;
	stroke-dasharray: 8 8;
	opacity: 0.6;
}

/* Nodes */
.ux-node {
	background: rgba(15,23,42,0.95);
	border: 1px solid rgba(146,244,37,0.3);
	border-radius: 12px;
	padding: 16px 24px;
	position: absolute;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(12px);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #fff;
	z-index: 2;
	box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
	white-space: nowrap;
}
.ux-node .lime-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--lime-primary, #92F425);
	box-shadow: 0 0 12px rgba(146,244,37,0.6);
	flex-shrink: 0;
}

.ux-node-1 { top: 7%; left: 20%; }
.ux-node-2 { top: 23%; left: 80%; }
.ux-node-3 { top: 44%; left: 20%; }
.ux-node-4 { top: 63%; left: 80%; }
.ux-node-5 { top: 91%; left: 80%; border-color: #fff; color: var(--lime-primary); }

@media (prefers-reduced-motion: no-preference) {
	.ux-node {
		opacity: 0;
		animation: uxNodeIn 0.8s forwards;
	}
.ux-node-1 { animation-delay: 0s; }
	.ux-node-2 { animation-delay: 0.2s; }
	.ux-node-3 { animation-delay: 0.4s; }
	.ux-node-4 { animation-delay: 0.6s; }
	.ux-node-5 { animation-delay: 0.8s; }
	
	.ux-flow-path {
		animation: uxPathFlow 1.5s linear infinite;
	}
}

@keyframes uxNodeIn {
	from { opacity: 0; transform: translate(-50%, -30%); }
	to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes uxPathFlow {
	from { stroke-dashoffset: 16; }
	to   { stroke-dashoffset: 0; }
}

@keyframes uxNodeFade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ux-node-5 .lime-dot {
	animation: dotBlink 1.5s infinite alternate;
}

@keyframes dotBlink {
	from { opacity: 0.3; box-shadow: 0 0 4px rgba(255,255,255,0.3); }
	to   { opacity: 1; box-shadow: 0 0 16px rgba(255,255,255,1); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE DESIGN (BRIGHT)
   -------------------------------------------------------------------------- */
.lime-section-responsive {
	background: var(--lime-bg-light);
	padding: 160px 0;
	text-align: center;
}

.lime-responsive-visual {
	margin-top: 100px;
	position: relative;
	height: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 1500px;
}
.res-desktop {
	width: 700px;
	height: 440px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.05);
	position: absolute;
	z-index: 1;
	box-shadow: 0 30px 60px rgba(0,0,0,0.08);
	transform: translateZ(-100px) translateY(-40px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.res-tablet {
	width: 320px;
	height: 460px;
	background: #fff;
	border-radius: 24px;
	border: 8px solid #cbd5e1;
	position: absolute;
	right: 10%;
	top: 10%;
	z-index: 2;
	box-shadow: -30px 40px 60px rgba(0,0,0,0.1);
	transform: translateZ(50px) rotateY(-5deg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.res-mobile {
	width: 230px;
	height: 480px;
	background: #fff;
	border-radius: 36px;
	border: 12px solid #0f172a;
	position: absolute;
	left: 15%;
	bottom: 5%;
	z-index: 3;
	box-shadow: 30px 50px 80px rgba(0,0,0,0.25);
	transform: translateZ(180px) rotateY(5deg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Skeleton content styling for responsive layers */
.res-skel-nav { height: 48px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; position: relative; z-index: 10; }
.res-skel-nav::before { content:''; width: 30px; height: 10px; background: var(--lime-primary); border-radius: 4px; }
.res-scroll-wrap {
	display: flex;
	flex-direction: column;
	animation: scrollWrap 6s linear infinite;
	position: relative;
	z-index: 1;
}
@keyframes scrollWrap {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}

.res-skel-hero { height: 160px; min-height: 160px; background: #f1f5f9; margin: 16px; border-radius: 8px; border-left: 4px solid var(--lime-primary); flex-shrink: 0; }
.res-skel-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 0 16px; height: 120px; min-height: 120px; flex-shrink: 0; }
.res-skel-3col::before, .res-skel-3col::after, .res-skel-footer { content:''; background: #e2e8f0; border-radius: 8px; }
.res-skel-footer { height: 60px; min-height: 60px; margin: 16px; flex-shrink: 0; }
.res-skel-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px; height: 120px; min-height: 120px; flex-shrink: 0; }
.res-skel-2col::before, .res-skel-2col::after { content:''; background: #e2e8f0; border-radius: 8px; }
.res-skel-nav-burger { height: 40px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; flex-shrink: 0; position: relative; z-index: 10; }
.res-skel-nav-burger::before { content:''; width: 20px; height: 3px; background: #0f172a; box-shadow: 0 6px 0 #0f172a, 0 12px 0 #0f172a; }
.res-skel-hero-stacked { height: 160px; min-height: 160px; background: #f1f5f9; margin: 16px; border-radius: 8px; border-left: 4px solid var(--lime-primary); flex-shrink: 0; }
.res-skel-1col { margin: 0 16px 16px; background: #e2e8f0; height: 120px; min-height: 120px; border-radius: 8px; flex-shrink: 0; }

/* Device state labels */
.res-device-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--lime-primary, #92F425);
	background: #0f172a;
	text-align: center;
	padding: 6px 0;
	flex-shrink: 0;
	position: relative;
	z-index: 10;
}
.res-device-label-mobile {
	background: #0f172a;
	color: var(--lime-primary, #92F425);
	font-size: 10px;
	letter-spacing: 2.5px;
}

/* Entrance Animations – one‑time only */
@media (prefers-reduced-motion: no-preference) {
  /* Desktop device entrance */
  .lime-section-responsive .res-desktop {
    animation: entranceDesktop 0.9s ease-out forwards;
  }
  @keyframes entranceDesktop {
    from { opacity: 0; transform: translateZ(-100px) translateY(-8px); }
    to   { opacity: 1; transform: translateZ(-100px) translateY(-20px); }
  }

  /* Tablet device entrance & float */
  .lime-section-responsive .res-tablet {
    animation: entranceTablet 0.9s ease-out 0.2s forwards, floatTablet 6s ease-in-out infinite alternate 1.1s;
  }
  @keyframes entranceTablet {
    from { opacity: 0; transform: translateZ(50px) rotateY(-5deg) translateY(12px); }
    to   { opacity: 1; transform: translateZ(50px) rotateY(-5deg) translateY(0); }
  }
  @keyframes floatTablet {
    from { transform: translateZ(50px) rotateY(-5deg) translateY(0); }
    to   { transform: translateZ(50px) rotateY(-5deg) translateY(-15px); }
  }

  /* Mobile device entrance & float */
  .lime-section-responsive .res-mobile {
    animation: entranceMobile 0.9s ease-out 0.4s forwards, floatResMobile 5s ease-in-out infinite alternate 1.3s;
  }
  @keyframes entranceMobile {
    from { opacity: 0; transform: translateZ(180px) rotateY(5deg) translateY(24px); }
    to   { opacity: 1; transform: translateZ(180px) rotateY(5deg) translateY(0); }
  }
  @keyframes floatResMobile {
    from { transform: translateZ(180px) rotateY(5deg) translateY(0); }
    to   { transform: translateZ(180px) rotateY(5deg) translateY(-20px); }
  }
}

/* Subtle hover lift – only on larger viewports */
@media (min-width: 1024px) {
  .lime-section-responsive .res-desktop:hover {
    transform: translateZ(-100px) translateY(-22px); /* 2 px lift */
  }
  .lime-section-responsive .res-tablet:hover {
    transform: translateZ(50px) rotateY(-10deg) translateY(13px); /* 1 px lift */
  }
  .lime-section-responsive .res-mobile:hover {
    transform: translateZ(150px) rotateY(10deg) translateY(7px); /* 1 px lift */
  }
}

/* Disable hover lifts on small screens */
@media (max-width: 1023px) {
  .lime-section-responsive .res-desktop:hover,
  .lime-section-responsive .res-tablet:hover,
  .lime-section-responsive .res-mobile:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   TECHNICAL DEVELOPMENT & SEO (DARK CHAPTER)
   -------------------------------------------------------------------------- */
.lime-section-tech {
	background: var(--lime-bg-dark);
	padding: 160px 0;
}

.lime-tech-chapter {
	display: flex;
	flex-direction: column;
	gap: 120px;
	position: relative;
}

/* Connecting line between Dev and SEO */
.lime-tech-chapter::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 15%;
	bottom: 15%;
	width: 2px;
	background: rgba(255,255,255,0.05);
	z-index: 0;
}
.lime-tech-chapter::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 15%;
	bottom: 15%;
	width: 2px;
	background: var(--lime-primary);
	z-index: 1;
	transform-origin: top;
	transform: scaleY(0);
}

@media (prefers-reduced-motion: no-preference) {
	.lime-tech-chapter::after {
		animation: techLineDraw 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 1s;
	}
}

@keyframes techLineDraw {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

.lime-tech-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.lime-tech-bridge {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}
.bridge-node {
	background: #0f172a;
	color: var(--lime-primary);
	border: 1px solid rgba(146, 244, 37, 0.3);
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
	position: relative;
	z-index: 2;
}
/* Horizontal line connecting to right column */
.bridge-line-h-top {
	position: absolute;
	top: 50%;
	left: 100%;
	width: 50vw;
	height: 1px;
	background: linear-gradient(90deg, var(--lime-primary), transparent);
	z-index: 1;
	opacity: 0.3;
}
/* Horizontal line connecting to left column */
.bridge-line-h-bottom {
	position: absolute;
	top: 50%;
	right: 100%;
	width: 50vw;
	height: 1px;
	background: linear-gradient(270deg, var(--lime-primary), transparent);
	z-index: 1;
	opacity: 0.3;
}

@media (max-width: 1024px) {
	.lime-tech-bridge {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		margin: -60px auto;
		width: max-content;
	}
	.bridge-line-h-top, .bridge-line-h-bottom {
		display: none;
	}
	/* Vertical connecting line for mobile */
	.bridge-line-v {
		position: absolute;
		top: -40px;
		bottom: -40px;
		left: 50%;
		width: 1px;
		background: var(--lime-primary);
		opacity: 0.3;
		z-index: 1;
		transform-origin: top;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.bridge-node {
		opacity: 0;
		animation: devLayerIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.2s;
	}
	.bridge-line-h-top {
		transform-origin: right;
		transform: scaleX(0);
		animation: bridgeLineDrawX 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.5s;
	}
	.bridge-line-h-bottom {
		transform-origin: left;
		transform: scaleX(0);
		animation: bridgeLineDrawX 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.5s;
	}
	.bridge-line-v {
		transform-origin: top;
		transform: scaleY(0);
		animation: techLineDraw 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.5s;
	}
}

@keyframes bridgeLineDrawX {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.lime-tech-row.reverse {
	direction: rtl;
}
.lime-tech-row.reverse > * {
	direction: ltr;
}

/* DEV VISUAL */
.lime-dev-visual, .lime-seo-visual {
	background: rgba(255,255,255,0.02);
	border-radius: 24px;
	padding: 60px;
	border: 1px solid rgba(255,255,255,0.05);
}

.dev-stack-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	perspective: 1000px;
	transform-style: preserve-3d;
}

.dev-layer {
	width: 100%;
	max-width: 320px;
	background: rgba(15, 23, 42, 0.8);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	font-weight: 800;
	letter-spacing: 2px;
	font-size: 14px;
	color: rgba(255,255,255,0.8);
	box-shadow: 
		inset 0 1px 0 rgba(255,255,255,0.1),
		0 20px 40px rgba(0,0,0,0.5);
	opacity: 0;
}

.dev-layer.layer-front { border-color: rgba(146,244,37,0.5); color: var(--lime-primary); }
.dev-layer.layer-perf { background: rgba(7,11,20,0.9); }

@media (prefers-reduced-motion: no-preference) {
	.dev-layer {
		animation: devLayerIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.dev-layer.layer-perf { animation-delay: 0.1s; }
	.dev-layer.layer-api { animation-delay: 0.3s; }
	.dev-layer.layer-component { animation-delay: 0.5s; }
	.dev-layer.layer-cms { animation-delay: 0.7s; }
	.dev-layer.layer-front { animation-delay: 0.9s; }
}

@keyframes devLayerIn {
	from { opacity: 0; transform: translateY(-40px) translateZ(-100px); }
	to { opacity: 1; transform: translateY(-16px) translateZ(0); }
}

/* SEO VISUAL */
.seo-stack-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	align-items: flex-start;
}

.seo-node-item {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #fff;
	background: rgba(255,255,255,0.05);
	padding: 16px 24px;
	border-radius: 8px;
	width: 100%;
	max-width: 360px;
	border: 1px solid rgba(255,255,255,0.05);
	position: relative;
	opacity: 0;
}
.seo-node-item::before {
	content: '';
	position: absolute;
	left: 29px;
	top: -16px;
	bottom: -16px;
	width: 2px;
	background: rgba(255,255,255,0.1);
	z-index: 0;
}
.seo-node-item:first-child::before { top: 50%; }
.seo-node-item:last-child::before { bottom: 50%; }

.seo-dot {
	width: 12px;
	height: 12px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	animation: dotWave 1.2s infinite;
}
.seo-node-item:nth-child(1) .seo-dot { animation-delay: 0s; }
.seo-node-item:nth-child(2) .seo-dot { animation-delay: 0.2s; }
.seo-node-item:nth-child(3) .seo-dot { animation-delay: 0.4s; }
.seo-node-item:nth-child(4) .seo-dot { animation-delay: 0.6s; }
.seo-node-item:nth-child(5) .seo-dot { animation-delay: 0.8s; }
.seo-node-item:nth-child(6) .seo-dot { animation-delay: 1.0s; }

@keyframes dotWave {
	0%, 100% { opacity: 0.3; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.2); }
}

.seo-dot.active {
	background: var(--lime-primary);
	box-shadow: 0 0 12px var(--lime-primary);
}
.seo-node-item.seo-end {
	border-color: rgba(146,244,37,0.3);
	background: rgba(146,244,37,0.05);
	color: var(--lime-primary);
}

@media (prefers-reduced-motion: no-preference) {
	.seo-node-item {
		animation: seoNodeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.seo-node-item:nth-child(1) { animation-delay: 1.5s; }
	.seo-node-item:nth-child(2) { animation-delay: 1.7s; }
	.seo-node-item:nth-child(3) { animation-delay: 1.9s; }
	.seo-node-item:nth-child(4) { animation-delay: 2.1s; }
	.seo-node-item:nth-child(5) { animation-delay: 2.3s; }
	.seo-node-item:nth-child(6) { animation-delay: 2.5s; }
}

@keyframes seoNodeIn {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   CMS & INTEGRATIONS
   -------------------------------------------------------------------------- */
.lime-section-cms {
	background: var(--lime-bg-alt);
	padding: 160px 0;
}

.lime-cms-container {
	background: #fff;
	border-radius: 24px;
	padding: 80px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.03);
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.cms-text-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
.cms-text-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cms-integration-system {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #f8fafc;
	border-radius: 16px;
	padding: 40px;
	border: 1px solid #e2e8f0;
}

.system-panel {
	flex: 1;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
	border: 1px solid #e2e8f0;
	position: relative;
	height: 360px;
}

/* CMS Panel */
.panel-cms {
	display: flex;
	overflow: hidden;
}
.cms-sidebar {
	width: 80px;
	background: #0f172a;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}
.skel-line {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255,255,255,0.1);
}
.skel-line.active { background: var(--lime-primary); }

.cms-editor {
	flex: 1;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-right: 1px solid #e2e8f0;
}
.skel-box { background: #f1f5f9; border-radius: 6px; position: relative; overflow: hidden; }
.skel-box.head { height: 40px; width: 60%; }
.skel-box.body { flex: 1; }
.skel-box.comp { height: 80px; border: 2px dashed #cbd5e1; background: transparent; }

.cms-preview {
	width: 140px;
	background: #f8fafc;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	opacity: 0;
}
.preview-hero { height: 60px; background: #cbd5e1; border-radius: 6px; }
.preview-grid { height: 100px; background: #e2e8f0; border-radius: 6px; }

/* Connector */
.system-connector {
	display: flex;
	align-items: center;
	width: 80px;
	opacity: 0;
}
.connector-line {
	flex: 1;
	height: 4px;
	background: var(--lime-primary);
}
.connector-arrow {
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 12px solid var(--lime-primary);
}

/* Integrations Panel */
.panel-integrations {
	display: flex;
	justify-content: center;
	align-items: center;
}
.int-center-node {
	background: #0f172a;
	color: #fff;
	padding: 16px 24px;
	border-radius: 8px;
	font-weight: 700;
	letter-spacing: 1px;
	z-index: 2;
	position: relative;
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	opacity: 0;
	transition: all 0.3s;
}
.int-orbit {
	position: absolute;
	inset: 20px;
	border: 2px dashed #cbd5e1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.int-node {
	position: absolute;
	background: #fff;
	border: 1px solid #cbd5e1;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	color: #0f172a;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	opacity: 0;
}
.int-node:nth-child(1) { top: -16px; }
.int-node:nth-child(2) { right: -16px; top: 20%; }
.int-node:nth-child(3) { right: -16px; bottom: 20%; }
.int-node:nth-child(4) { bottom: -16px; }
.int-node:nth-child(5) { left: -16px; bottom: 20%; }
.int-node:nth-child(6) { left: -16px; top: 20%; }

/* CMS / Integrations Animation Sequence */
@media (prefers-reduced-motion: no-preference) {
	/* 1. Content field activates */
	.skel-box::after {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(146,244,37,0.3);
		transform: translateX(-100%);
		animation: cmsFieldActive 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.5s;
	}
	
	/* 2. Component preview resolves */
	.cms-preview {
		animation: cmsFadeIn 0.5s forwards 1.1s;
	}
	
	/* 3. Website active */
	.int-center-node {
		animation: cmsWebsiteActive 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.6s;
	}
	
	/* 4. Signal leaves website */
	.system-connector {
		animation: cmsSignal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 2.2s;
	}
	
	/* 5. Integration nodes establish sequentially */
	.int-node {
		animation: intNodePop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.int-node:nth-child(1) { animation-delay: 2.7s; }
	.int-node:nth-child(2) { animation-delay: 2.8s; }
	.int-node:nth-child(3) { animation-delay: 2.9s; }
	.int-node:nth-child(4) { animation-delay: 3.0s; }
	.int-node:nth-child(5) { animation-delay: 3.1s; }
	.int-node:nth-child(6) { animation-delay: 3.2s; }
}

@keyframes cmsFieldActive {
	100% { transform: translateX(100%); }
}
@keyframes cmsFadeIn {
	to { opacity: 1; }
}
@keyframes cmsWebsiteActive {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); background: var(--lime-primary); color: #0f172a; }
}
@keyframes cmsSignal {
	from { opacity: 0; transform: translateX(-20px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes intNodePop {
	from { opacity: 0; transform: scale(0.5); }
	to { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   PROCESS
   -------------------------------------------------------------------------- */
.lime-section-process {
	background: var(--lime-bg-light);
	padding: 180px 0;
}

.lime-process-path {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-top: 120px;
	position: relative;
}

.lime-process-path::before {
	content: '';
	position: absolute;
	top: 60px;
	left: 12.5%;
	right: 12.5%;
	height: 4px;
	background: rgba(15,23,42,0.05);
	z-index: 1;
}
.lime-process-path::after {
	content: '';
	position: absolute;
	top: 60px;
	left: 12.5%;
	width: 0;
	height: 4px;
	background: var(--lime-primary);
	z-index: 1;
}

.lime-process-step {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 20px;
	opacity: 0;
}

.process-num {
	width: 120px;
	height: 120px;
	background: #fff;
	border: 8px solid var(--lime-bg-light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 40px;
	font-family: monospace;
	font-size: 40px;
	font-weight: 800;
	color: #0f172a;
	box-shadow: 
		0 20px 40px rgba(0,0,0,0.08),
		inset 0 0 0 2px var(--lime-primary);
	position: relative;
}

.lime-process-step h3 {
	font-size: 24px !important;
	font-weight: 800 !important;
	letter-spacing: -0.5px;
	color: #0f172a;
	margin-bottom: 16px !important;
}

.lime-process-step p {
	font-size: 16px !important;
	color: #475569 !important;
	line-height: 1.6;
}

@media (min-width: 1025px) {
	.lime-process-path {
		gap: 60px;
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
	.lime-process-path::before,
	.lime-process-path::after {
		top: 72px;
	}
	.process-num {
		width: 144px;
		height: 144px;
		font-size: 48px;
		margin-bottom: 48px;
	}
	.lime-process-step h3 {
		font-size: 28px !important;
		margin-bottom: 24px !important;
	}
	.lime-process-step p {
		font-size: 18px !important;
		line-height: 1.7;
	}
}

/* Process Animation */
@media (prefers-reduced-motion: no-preference) {
	.lime-process-path::after {
		animation: processLine 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.lime-process-step {
		animation: processStep 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.lime-process-step:nth-child(1) { animation-delay: 0s; }
	.lime-process-step:nth-child(2) { animation-delay: 0.6s; }
	.lime-process-step:nth-child(3) { animation-delay: 1.2s; }
	.lime-process-step:nth-child(4) { animation-delay: 1.8s; }
}

@keyframes processLine {
	0% { width: 0; }
	33% { width: 25%; }
	66% { width: 50%; }
	100% { width: 75%; }
}
@keyframes processStep {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.lime-process-step:hover .process-num {
	transform: translateY(-8px);
	box-shadow: 
		0 20px 40px rgba(0,0,0,0.1),
		inset 0 0 0 2px var(--lime-primary);
	color: var(--lime-primary);
}

.lime-process-step:hover .process-num::after {
	opacity: 1;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   WHY LIME
   -------------------------------------------------------------------------- */
.lime-section-why {
	background: var(--lime-bg-dark);
	color: #fff;
	padding: 160px 0;
	position: relative;
	overflow: hidden;
}

.lime-why-typography {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	position: relative;
	margin-bottom: 80px;
}

.why-word {
	font-size: clamp(60px, 8vw, 120px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -2px;
	color: #fff;
	text-transform: uppercase;
	position: relative;
	z-index: 2;
	opacity: 0;
}

.why-word.lime-accent {
	color: var(--lime-primary);
	text-shadow: 0 0 40px rgba(146, 244, 37, 0.4);
}

.why-system-line {
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 2px;
	background: rgba(255,255,255,0.1);
	z-index: 1;
	transform: scaleY(0);
	transform-origin: top;
}

.why-together {
	margin-top: 60px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 4px;
	color: #cbd5e1;
	background: #0f172a;
	padding: 16px 32px;
	border-radius: 40px;
	border: 1px solid rgba(255,255,255,0.1);
	position: relative;
	z-index: 3;
	opacity: 0;
}

/* Why Lime Animation */
@media (prefers-reduced-motion: no-preference) {
	.why-word {
		animation: whyWordIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.why-word:nth-child(1) { animation-delay: 0.2s; }
	.why-word:nth-child(2) { animation-delay: 0.4s; }
	.why-word:nth-child(3) { animation-delay: 0.6s; }
	.why-word:nth-child(4) { animation-delay: 0.8s; }
	
	.why-system-line {
		animation: whyLineDraw 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 1s;
	}
	
	.why-together {
		animation: whyTogetherIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.8s;
	}
}

@keyframes whyWordIn {
	from { opacity: 0; transform: translateY(40px) scale(0.95); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes whyLineDraw {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes whyTogetherIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.lime-section-faq {
	background: var(--lime-bg-alt);
	padding: 160px 0;
}

.lime-faq-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 80px;
}

.lime-faq-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lime-faq-details {
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--lime-border-light);
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.lime-faq-details[open] {
	border-color: var(--lime-primary);
	box-shadow: 0 12px 24px rgba(0,0,0,0.05);
}

.lime-faq-summary {
	padding: 32px;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	position: relative;
	list-style: none;
	color: #0f172a;
	transition: color 0.3s ease;
}
.lime-faq-summary::-webkit-details-marker {
	display: none;
}
.lime-faq-summary:hover {
	color: var(--lime-primary);
}

.lime-faq-summary::after {
	content: '+';
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 28px;
	font-weight: 400;
	color: #64748b;
	transition: all 0.3s ease;
}
.lime-faq-details[open] .lime-faq-summary::after {
	content: '−';
	color: var(--lime-primary);
	transform: translateY(-50%) rotate(180deg);
}

.lime-faq-answer {
	padding: 0 32px 32px 32px;
	font-size: 16px;
	line-height: 1.8;
	color: #475569;
	animation: faqFadeIn 0.4s ease forwards;
}

@keyframes faqFadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   FINAL CTA
   -------------------------------------------------------------------------- */
.lime-section-cta {
	background: var(--lime-bg-darker);
	color: #fff;
	padding: 240px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(255,255,255,0.05);
	opacity: 0;
}

.cta-bg-shape {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150vw;
	height: 150vw;
	background: radial-gradient(circle, rgba(146, 244, 37, 0.08) 0%, rgba(146, 244, 37, 0.02) 20%, transparent 60%);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
}

.lime-section-cta .lime-h2 {
	font-size: clamp(48px, 8vw, 100px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1.1;
	margin-bottom: 32px;
	background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 20px 40px rgba(0,0,0,0.5);
	opacity: 0;
}

.lime-section-cta .lime-p-large {
	opacity: 0;
}

.lime-section-cta .cta-btn-wrapper {
	margin-top: 48px;
	opacity: 0;
}

.lime-section-cta .lime-btn {
	font-size: 18px;
	padding: 20px 48px;
	border-radius: 60px;
	box-shadow: 0 20px 40px rgba(146, 244, 37, 0.2);
}

.lime-section-cta .lime-btn:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 30px 60px rgba(146, 244, 37, 0.3);
}

/* CTA Animation */
@media (prefers-reduced-motion: no-preference) {
	.lime-section-cta {
		animation: ctaContainerIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.cta-bg-shape {
		animation: ctaShapeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s;
	}
	.lime-section-cta .lime-h2 {
		animation: ctaContentIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.8s;
	}
	.lime-section-cta .lime-p-large {
		animation: ctaContentIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1s;
	}
	.lime-section-cta .cta-btn-wrapper {
		animation: ctaBtnIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.2s;
	}
}

@keyframes ctaContainerIn {
	to { opacity: 1; }
}
@keyframes ctaShapeIn {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ctaContentIn {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes ctaBtnIn {
	from { opacity: 0; transform: translateY(20px) scale(0.95); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE (TABLET 1024)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.lime-service-hero .lime-container {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 60px;
	}
	.lime-hero-content {
		padding-right: 0;
		max-width: 800px;
		margin: 0 auto;
	}
	
	.lime-overview-grid,
	.lime-strategy-grid,
	.lime-cms-container,
	.lime-faq-grid,
	.lime-tech-row {
		grid-template-columns: 1fr !important;
		gap: 40px;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	
	.lime-tech-chapter {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	
	.lime-tech-row.reverse {
		direction: ltr;
	}
	
	.lime-build-band {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.lime-process-path {
		grid-template-columns: repeat(2, 1fr);
	}
	.lime-process-path::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   RESPONSIVE (MOBILE 767)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.lime-h1 { font-size: clamp(36px, 10vw, 48px); }
	.lime-h2 { font-size: clamp(28px, 8vw, 36px); }
	
	.lime-service-hero { padding: 120px 0 80px; }
	.lime-section-overview,
	.lime-section-build,
	.lime-section-strategy,
	.lime-section-responsive,
	.lime-section-tech,
	.lime-section-cms,
	.lime-section-process,
	.lime-section-why,
	.lime-section-faq,
	.lime-section-cta {
		padding: 80px 0;
	}
	
	.lime-hero-visual { min-height: 400px; overflow: hidden; }
	.hero-layer-browser { width: 90%; height: 75%; transform: none; max-width: 100%; }
	.hero-layer-mobile { display: none; }
	.hero-layer-ui { display: none; }
	
	.lime-build-visual { display: none; }
	
	.res-desktop, .res-tablet { display: none; }
	.res-mobile { position: relative; left: 0; width: 100%; max-width: 320px; }
	
	.lime-process-path { grid-template-columns: 1fr; }
	
	.lime-cms-container { padding: 40px 20px; }
	
	.lime-faq-summary { padding: 24px; font-size: 18px; }
	.lime-faq-summary::after { right: 24px; }
	.lime-faq-answer { padding: 0 24px 24px; }
}

/* --------------------------------------------------------------------------
   HERO SKELETON ELEMENTS
   -------------------------------------------------------------------------- */
.skeleton-nav {
	width: 100%;
	height: 40px;
	background: #f1f5f9;
	border-radius: 4px;
}
.skeleton-hero {
	width: 100%;
	height: 120px;
	background: rgba(146, 244, 37, 0.08);
	border-radius: 8px;
}
.skeleton-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	height: 80px;
}
.skeleton-2col::before,
.skeleton-2col::after {
	content: '';
	background: #f1f5f9;
	border-radius: 6px;
}
.skeleton-3col {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	height: 60px;
}
.skeleton-3col::before,
.skeleton-3col::after {
	content: '';
	background: #f1f5f9;
	border-radius: 6px;
}
/* Third col needs a pseudo workaround */
.skeleton-3col {
	background: 
		linear-gradient(#f1f5f9, #f1f5f9) 0 0 / 31% 100% no-repeat,
		linear-gradient(#f1f5f9, #f1f5f9) 34.5% 0 / 31% 100% no-repeat,
		linear-gradient(#f1f5f9, #f1f5f9) 69% 0 / 31% 100% no-repeat;
	border-radius: 6px;
}
.skeleton-3col::before,
.skeleton-3col::after {
	display: none;
}

/* MOBILE LAYER */
.mobile-status-bar {
	height: 30px;
	background: #0f172a;
	border-radius: 0;
}
.mobile-hero {
	height: 80px;
	background: #f1f5f9;
	margin: 12px;
	border-radius: 8px;
}
.mobile-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 12px;
	flex-grow: 1;
}
.mobile-cards::before,
.mobile-cards::after {
	content: '';
	height: 50px;
	background: #f8fafc;
	border-radius: 6px;
	border: 1px solid #f1f5f9;
}
.mobile-cta-bar {
	height: 40px;
	background: var(--lime-primary, #92F425);
	margin: 12px;
	border-radius: 20px;
	opacity: 0.8;
}

/* UI PANEL */
.ui-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ui-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: rgba(255,255,255,0.7);
}
.lime-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--lime-primary, #92F425);
	border-radius: 50%;
}

/* --------------------------------------------------------------------------
   BUILD VISUAL CARD SKELETONS
   -------------------------------------------------------------------------- */
.card-top-bar {
	height: 40px;
	border-radius: 8px 8px 0 0;
}
.card-top-1 { background: #f1f5f9; }
.card-top-2 { background: rgba(146, 244, 37, 0.2); }
.card-top-3 { background: #e2e8f0; }
.card-skel-content {
	flex-grow: 1;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: 
		linear-gradient(#f1f5f9, #f1f5f9) 0 0 / 60% 16px no-repeat,
		linear-gradient(#f8fafc, #f8fafc) 0 28px / 80% 12px no-repeat,
		linear-gradient(#f8fafc, #f8fafc) 0 48px / 45% 12px no-repeat;
}

/* --------------------------------------------------------------------------
   RESPONSIVE SECTION SKELETON ELEMENTS
   -------------------------------------------------------------------------- */
.res-desktop,
.res-tablet,
.res-mobile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}
.res-skel-nav {
	height: 24px;
	background: #e2e8f0;
	border-radius: 4px;
}
.res-skel-hero {
	height: 80px;
	background: #e2e8f0;
	border-radius: 6px;
}
.res-skel-3col {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	height: 60px;
}
.res-skel-3col::before,
.res-skel-3col::after {
	content: '';
	display: none;
}
.res-skel-3col {
	background: 
		linear-gradient(#e2e8f0, #e2e8f0) 0 0 / 31% 100% no-repeat,
		linear-gradient(#e2e8f0, #e2e8f0) 34.5% 0 / 31% 100% no-repeat,
		linear-gradient(#e2e8f0, #e2e8f0) 69% 0 / 31% 100% no-repeat;
	border-radius: 6px;
}
.res-skel-footer {
	height: 20px;
	background: #e2e8f0;
	border-radius: 4px;
	margin-top: auto;
}
.res-skel-2col {
	display: grid;
	height: 60px;
	background: 
		linear-gradient(#e2e8f0, #e2e8f0) 0 0 / 48% 100% no-repeat,
		linear-gradient(#e2e8f0, #e2e8f0) 52% 0 / 48% 100% no-repeat;
	border-radius: 6px;
}
.res-skel-nav-burger {
	height: 24px;
	background: 
		linear-gradient(#0f172a, #0f172a) 12px 6px / 18px 3px no-repeat,
		linear-gradient(#0f172a, #0f172a) 12px 12px / 18px 3px no-repeat,
		linear-gradient(#0f172a, #0f172a) 12px 18px / 14px 3px no-repeat,
		#f1f5f9;
	border-radius: 4px;
}
.res-skel-hero-stacked {
	height: 60px;
	background: #e2e8f0;
	border-radius: 6px;
}
.res-skel-1col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}
.res-skel-1col::before,
.res-skel-1col::after {
	content: '';
	height: 40px;
	background: #f1f5f9;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   CMS VISUAL MOCKUP
   -------------------------------------------------------------------------- */
.cms-visual-mockup {
	display: flex;
	gap: 0;
	background: #f8fafc;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--lime-border-light);
	margin-top: 32px;
	height: 280px;
}
.cms-sidebar {
	width: 120px;
	background: #0f172a;
	padding: 20px 0;
}
.cms-sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cms-sidebar li {
	padding: 10px 16px;
	font-size: 12px;
	color: rgba(255,255,255,0.5);
	font-weight: 600;
	letter-spacing: 1px;
	cursor: default;
}
.cms-sidebar li:first-child {
	color: var(--lime-primary, #92F425);
	background: rgba(255,255,255,0.05);
}
.cms-editor {
	flex-grow: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cms-field-title {
	height: 36px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}
.cms-field-content {
	height: 80px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}
.cms-field-component {
	height: 60px;
	background: #fff;
	border: 1px solid var(--lime-primary, #92F425);
	border-radius: 6px;
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   INTEGRATION MAP
   -------------------------------------------------------------------------- */
.integration-map {
	position: relative;
	height: 280px;
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
}
.int-node {
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #64748b;
}
.int-center {
	background: #fff;
	border-color: var(--lime-primary, #92F425);
	color: #0f172a;
	font-size: 14px;
	padding: 16px 28px;
}
.int-lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   UX PATH SVG CONNECTIONS
   -------------------------------------------------------------------------- */
.ux-path {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   SEO VISUAL ADJUSTMENTS
   -------------------------------------------------------------------------- */
.seo-lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.lime-seo-visual {
		aspect-ratio: unset;
		min-height: 200px;
		width: 100%;
	}

/* --------------------------------------------------------------------------
   MOBILE OVERRIDES FOR NEW ELEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.hero-layer-ui,
	.hero-layer-mobile {
		display: none;
	}
	.lime-build-visual {
		display: none;
	}
	.lime-responsive-visual {
		height: auto;
	}
	.res-desktop,
	.res-tablet {
		display: none;
	}
	.res-mobile {
		position: relative;
		left: auto;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
		height: 300px;
	}
	.cms-visual-mockup {
		flex-direction: column;
		height: auto;
	}
	.cms-sidebar {
		width: 100%;
	}
	.cms-sidebar ul {
		display: flex;
		overflow-x: auto;
	}
	.cms-sidebar li {
		white-space: nowrap;
	}
	.integration-map {
		height: auto;
		padding: 20px 0;
	}
	.lime-faq-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.lime-faq-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.lime-cms-container {
		grid-template-columns: 1fr;
		padding: 40px;
	}
}

@media (max-width: 430px) {
	.lime-cms-container {
		padding: 24px 20px;
		width: 100%;
		box-sizing: border-box;
	}
	.integration-map {
		width: 100%;
		box-sizing: border-box;
	}
	.lime-section-cms .lime-container,
	.lime-section-cms .lime-cms-container {
		max-width: 100%;
		overflow: hidden;
	}
}


/* REDUCED MOTION SUPPORT FOR TECH & PROCESS SECTIONS */
@media (prefers-reduced-motion: reduce) {
	.dev-layer,
	.seo-node-item,
	.lime-process-step,
	.bridge-node {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.lime-process-path::after {
		width: 75% !important;
		animation: none !important;
	}
	.bridge-line-h-top,
	.bridge-line-h-bottom {
		transform: scaleX(1) !important;
		animation: none !important;
	}
	.bridge-line-v {
		transform: scaleY(1) !important;
		animation: none !important;
	}
	.lime-tech-chapter::after {
		transform: scaleY(1) !important;
		animation: none !important;
	}
}