.cloud-transformation {
				--bg-primary: #ffffff;
				--bg-secondary: #fafbfc;
				--bg-tertiary: #f5f7fa;
				--surface: #ffffff;
				--surface-raised: #ffffff;
				--border-subtle: rgba(15, 23, 42, 0.06);
				--border: rgba(15, 23, 42, 0.1);
				--border-strong: rgba(15, 23, 42, 0.15);
				--purple: #70499b;
				--purple-deep: #56367b;
				--pink: #ec008c;
				--pink-deep: #cb1a71;
				--pink-soft: #f7d9e8;
				--pink-rgb: 236, 0, 140;
				--blue: #27aae1;
				--blue-deep: #1f89c1;
				--blue-soft: #d5ecf7;
				--blue-rgb: 39, 170, 225;
				--green: #8dc63f;
				--green-deep: #6fa82f;
				--green-soft: #e8f3d0;
				--green-rgb: 141, 198, 63;
				--pink-gradient: linear-gradient(
					135deg,
					var(--purple) 0%,
					#a62d82 100%
				);
				--blue-gradient: linear-gradient(
					135deg,
					var(--purple) 0%,
					var(--blue) 100%
				);
				--brand-gradient: linear-gradient(
					135deg,
					var(--pink) 0%,
					var(--purple) 48%,
					var(--blue) 100%
				);
				--button-gradient: linear-gradient(
					135deg,
					var(--pink) 0%,
					#a62d82 50%,
					var(--blue) 100%
				);
				--button-gradient-hover: linear-gradient(
					135deg,
					var(--pink-deep) 0%,
					var(--purple-deep) 48%,
					var(--blue-deep) 100%
				);
				--text-primary: #0f172a;
				--text-secondary: #475569;
				--text-tertiary: #64748b;
				--text-muted: #94a3b8;
				--shadow-sm:
					0 2px 8px -2px rgba(15, 23, 42, 0.06),
					0 4px 12px -4px rgba(15, 23, 42, 0.04);
				--shadow-md:
					0 4px 16px -4px rgba(15, 23, 42, 0.08),
					0 8px 24px -8px rgba(15, 23, 42, 0.06);
				--shadow-lg:
					0 12px 32px -8px rgba(15, 23, 42, 0.12),
					0 20px 48px -16px rgba(15, 23, 42, 0.08);
				--shadow-xl: 0 24px 70px -28px rgba(15, 23, 42, 0.34);
				--font-display: "Space Grotesk", sans-serif;
				--font-body: "Inter", sans-serif;
				--font-accent: "DM Sans", sans-serif;
			}
.cloud-transformation *, .cloud-transformation *::before, .cloud-transformation *::after {
				margin: 0;
				padding: 5;
				box-sizing: border-box;
			}
.cloud-transformation {
				font-family: var(--font-body);
				background:
					linear-gradient(90deg, rgba(15, 23, 42, 0.012) 1px, transparent 1px),
					linear-gradient(180deg, rgba(15, 23, 42, 0.01) 1px, transparent 1px),
					rgba(255, 255, 255, 0.7);
				background-size: 64px 64px;
				color: var(--text-primary);
				line-height: 1.5;
				scroll-behavior: smooth;
				overflow-x: hidden;
				text-rendering: optimizeLegibility;
				-webkit-font-smoothing: antialiased;
			}

			.cloud-transformation::before {
				content: "";
				position: fixed;
				inset: 0;
				pointer-events: none;
				z-index: -2;
				background:
					conic-gradient(
						from 160deg at 10% 8%,
						rgba(var(--pink-rgb), 0.06),
						transparent 24%,
						rgba(var(--blue-rgb), 0.05),
						transparent 58%,
						rgba(var(--green-rgb), 0.04),
						transparent
					);
			}

			.cloud-transformation::after {
				content: none;
			}

			.cloud-transformation .container {
				max-width: 1280px;
				margin: 0 auto;
				padding: 0 24px;
			}

			.cloud-transformation .page-progress {
				position: fixed;
				top: 0;
				left: 0;
				width: 0;
				height: 3px;
				background: var(--brand-gradient);
				z-index: 1000;
				box-shadow: 0 0 18px rgba(var(--pink-rgb), 0.38);
			}

			/* buttons */
			.cloud-transformation .btn-primary {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				background: var(--button-gradient);
				background-size: 160% 160%;
				color: white;
				font-weight: 600;
				padding: 13px 28px;
				border-radius: 40px;
				text-decoration: none;
				transition:
					transform 0.25s ease,
					box-shadow 0.25s ease,
					background-position 0.25s ease;
				border: none;
				cursor: pointer;
				font-size: 0.95rem;
				box-shadow: 0 8px 24px -8px rgba(var(--pink-rgb), 0.45);
			}
			.cloud-transformation .btn-primary:hover {
				background: var(--button-gradient-hover);
				background-position: 100% 50%;
				transform: translateY(-2px);
				box-shadow:
					0 8px 24px -6px rgba(var(--pink-rgb), 0.45),
					0 10px 28px -10px rgba(var(--blue-rgb), 0.45);
			}
			.cloud-transformation .btn-outline {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				background: transparent;
				border: 1px solid rgba(var(--pink-rgb), 0.28);
				color: var(--purple-deep);
				font-weight: 600;
				padding: 10px 24px;
				border-radius: 40px;
				text-decoration: none;
				transition:
					transform 0.25s ease,
					background 0.25s ease,
					border-color 0.25s ease;
			}
			.cloud-transformation .btn-outline:hover {
				background: var(--pink-soft);
				border-color: rgba(var(--pink-rgb), 0.36);
				transform: translateY(-2px);
			}

			/* header / nav */
			.cloud-transformation .navbar {
				padding: 18px 0;
				border-bottom: 1px solid var(--border-subtle);
				position: sticky;
				top: 0;
				background: rgba(255, 255, 255, 0.76);
				backdrop-filter: blur(22px) saturate(160%);
				z-index: 100;
				transition:
					box-shadow 0.25s ease,
					background 0.25s ease;
			}
			.cloud-transformation .navbar.scrolled {
				background: rgba(255, 255, 255, 0.9);
				box-shadow: var(--shadow-sm);
			}
			.cloud-transformation .nav-flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
			}
			.cloud-transformation .logo {
				font-size: 1.8rem;
				font-family: var(--font-display);
				font-weight: 800;
				letter-spacing: -0.02em;
				background: var(--pink-gradient);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}
			.cloud-transformation .nav-links {
				display: flex;
				gap: 32px;
				align-items: center;
			}
			.cloud-transformation .nav-links a {
				text-decoration: none;
				color: var(--text-secondary);
				font-weight: 500;
				transition: color 0.2s ease;
				position: relative;
			}
			.cloud-transformation .nav-links a::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: -7px;
				height: 2px;
				background: var(--brand-gradient);
				transform: scaleX(0);
				transform-origin: left;
				transition: transform 0.25s ease;
			}
			.cloud-transformation .nav-links a:hover,
			.cloud-transformation .nav-links a.active {
				color: var(--text-primary);
			}
			.cloud-transformation .nav-links a:hover::after,
			.cloud-transformation .nav-links a.active::after {
				transform: scaleX(1);
			}

			/* Hero */
			.cloud-transformation .hero {
				position: relative;
				padding: 70px 0 84px;
				overflow: hidden;
				background:
					linear-gradient(120deg, rgba(var(--pink-rgb), 0.08), transparent 32%),
					linear-gradient(245deg, rgba(var(--blue-rgb), 0.09), transparent 34%),
					linear-gradient(
						180deg,
						var(--bg-primary) 0%,
						var(--bg-secondary) 100%
					);
			}
			.cloud-transformation .hero::before {
				content: none;
			}
			.cloud-transformation .hero::after {
				content: "";
				position: absolute;
				left: -8%;
				right: -8%;
				bottom: -120px;
				height: 220px;
				background: linear-gradient(
					90deg,
					transparent,
					rgba(var(--pink-rgb), 0.12),
					rgba(var(--blue-rgb), 0.1),
					transparent
				);
				transform: rotate(-3deg);
				pointer-events: none;
			}
			.cloud-transformation .hero-grid {
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				gap: 48px;
				flex-wrap: wrap;
			}
			.cloud-transformation .hero-content {
				flex: 1 1 560px;
			}
			.cloud-transformation .hero-badge {
				background: rgba(255, 255, 255, 0.8);
				color: var(--pink);
				padding: 8px 14px;
				border-radius: 40px;
				font-size: 0.8rem;
				font-weight: 600;
				margin-bottom: 20px;
				border: 1px solid rgba(var(--pink-rgb), 0.16);
				box-shadow: var(--shadow-sm);
			}
			.cloud-transformation .hero-content h1 {
				font-family: var(--font-display);
				font-size: clamp(3rem, 7vw, 6.8rem);
				font-weight: 800;
				line-height: 0.94;
				margin-bottom: 20px;
				color: var(--text-primary);
				letter-spacing: -0.04em;
			}
			.cloud-transformation .hero-content h1 span {
				display: inline-block;
				background: var(--brand-gradient);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				background-size: 160% 160%;
				animation: gradient-shift 8s ease infinite;
			}
			.cloud-transformation .hero-content p {
				font-size: 1.16rem;
				color: var(--text-secondary);
				margin-bottom: 32px;
				max-width: 620px;
			}
			.cloud-transformation .hero-stats {
				flex: 1 1 390px;
				position: relative;
				background:
					linear-gradient(var(--surface), var(--surface)) padding-box,
					var(--brand-gradient) border-box;
				border-radius: 32px;
				padding: 30px;
				box-shadow: var(--shadow-xl);
				border: 1px solid transparent;
				overflow: hidden;
				transform-style: preserve-3d;
			}
			.cloud-transformation .hero-stats::before {
				content: "";
				position: absolute;
				inset: 0;
				background:
					linear-gradient(120deg, rgba(var(--pink-rgb), 0.12), transparent 32%),
					linear-gradient(300deg, rgba(var(--blue-rgb), 0.12), transparent 35%);
				pointer-events: none;
			}
			.cloud-transformation .hero-stats > * {
				position: relative;
				z-index: 1;
			}
			.cloud-transformation .hero-stat-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 12px;
				margin: 22px 0;
			}
			.cloud-transformation .hero-stat-tile {
				min-height: 92px;
				border: 1px solid var(--border-subtle);
				border-radius: 20px;
				padding: 14px;
				background: rgba(255, 255, 255, 0.76);
			}
			.cloud-transformation .hero-stat-value {
				display: block;
				font-family: var(--font-display);
				font-size: 1.35rem;
				font-weight: 800;
				color: var(--text-primary);
			}
			.cloud-transformation .hero-stat-label {
				color: var(--text-tertiary);
				font-size: 0.78rem;
				font-weight: 600;
			}
			.cloud-transformation .hero-meter {
				height: 10px;
				border-radius: 999px;
				background: rgba(15, 23, 42, 0.08);
				overflow: hidden;
				margin: 18px 0 14px;
			}
			.cloud-transformation .hero-meter span {
				display: block;
				width: 76%;
				height: 100%;
				border-radius: inherit;
				background: var(--brand-gradient);
				animation: meter-fill 1.2s ease both;
			}

			/* section style */
			.cloud-transformation .section {
				position: relative;
				padding: 24px 0;
			}
			.cloud-transformation .section-sm {
				padding: 60px 0;
			}
			.cloud-transformation .section-title {
				text-align: center;
				font-family: var(--font-display);
				font-size: clamp(2.1rem, 4.8vw, 4.2rem);
				font-weight: 800;
				margin-bottom: 16px;
				color: var(--text-primary);
				letter-spacing: -0.035em;
			}
			.cloud-transformation .section-sub {
				text-align: center;
				color: var(--text-secondary);
				max-width: 680px;
				margin: 0 auto 48px;
				font-size: 1.1rem;
			}

			/* cards grid */
			.cloud-transformation .grid-3 {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
				gap: 32px;
			}
			.cloud-transformation .grid-4 {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 24px;
			}
			.cloud-transformation .card {
				position: relative;
				overflow: hidden;
				background:
					linear-gradient(var(--surface), var(--surface)) padding-box,
					linear-gradient(
							145deg,
							rgba(var(--pink-rgb), 0.2),
							rgba(var(--blue-rgb), 0.16),
							transparent
						)
						border-box;
				border-radius: 22px;
				padding: 32px 28px;
				box-shadow: var(--shadow-sm);
				border: 1px solid transparent;
				transition:
					transform 0.28s ease,
					box-shadow 0.28s ease,
					border-color 0.28s ease;
				transform-style: preserve-3d;
			}
			.cloud-transformation .card::before {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(
					120deg,
					rgba(var(--pink-rgb), 0.06),
					transparent 42%,
					rgba(var(--blue-rgb), 0.06)
				);
				opacity: 0;
				transition: opacity 0.28s ease;
				pointer-events: none;
			}
			.cloud-transformation .card:hover {
				transform: translateY(-8px);
				box-shadow: var(--shadow-lg);
				border-color: var(--border);
			}
			.cloud-transformation .card:hover::before {
				opacity: 1;
			}
			.cloud-transformation .card-icon {
				width: 52px;
				height: 52px;
				background: linear-gradient(135deg, var(--pink-soft), var(--blue-soft));
				border-radius: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 24px;
				box-shadow:
					inset 0 1px 0 rgba(255, 255, 255, 0.75),
					0 12px 26px -18px rgba(var(--pink-rgb), 0.7);
			}
			.cloud-transformation .flaticon-icon {
				display: inline-block;
				width: 1em;
				height: 1em;
				object-fit: contain;
				vertical-align: -0.16em;
				flex: 0 0 auto;
			}
			.cloud-transformation .card-icon .flaticon-icon {
				width: 28px;
				height: 28px;
			}
			.cloud-transformation .icon-heading,
			.cloud-transformation .icon-line,
			.cloud-transformation .hero-badge,
			.cloud-transformation .stat-title,
			.cloud-transformation .section-kicker {
				display: inline-flex;
				align-items: center;
				gap: 8px;
			}
			.cloud-transformation .icon-heading .flaticon-icon {
				width: 1.1em;
				height: 1.1em;
			}
			.cloud-transformation .check-list li,
			.cloud-transformation .insight-list li {
				display: flex;
				align-items: flex-start;
				gap: 8px;
			}
			.cloud-transformation .check-icon {
				width: 16px;
				height: 16px;
				margin-top: 3px;
			}
			.cloud-transformation .card h3 {
				font-size: 1.4rem;
				margin-bottom: 12px;
			}
			.cloud-transformation .card p {
				color: var(--text-secondary);
				margin-bottom: 20px;
			}

			/* approach steps */
			.cloud-transformation .steps {
				display: flex;
				flex-wrap: wrap;
				gap: 24px;
				justify-content: center;
				margin-top: 32px;
			}
			.cloud-transformation .step-item {
				position: relative;
				overflow: hidden;
				background: rgba(255, 255, 255, 0.72);
				border-radius: 28px;
				padding: 28px 24px;
				flex: 1;
				min-width: 220px;
				text-align: center;
				border-bottom: 3px solid var(--pink);
				box-shadow: var(--shadow-sm);
				transition:
					transform 0.25s ease,
					box-shadow 0.25s ease;
			}
			.cloud-transformation .step-item:hover {
				transform: translateY(-6px);
				box-shadow: var(--shadow-md);
			}
			.cloud-transformation .step-number {
				display: inline-block;
				background: var(--pink-soft);
				color: var(--pink);
				font-weight: 800;
				padding: 6px 14px;
				border-radius: 40px;
				font-size: 0.8rem;
				margin-bottom: 20px;
			}

			/* journey timeline */
			.cloud-transformation .journey-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
				gap: 24px;
				margin-top: 32px;
			}
			.cloud-transformation .journey-card {
				position: relative;
				background: rgba(255, 255, 255, 0.82);
				border-radius: 22px;
				padding: 24px;
				border: 1px solid var(--border-subtle);
				text-align: center;
				box-shadow: var(--shadow-sm);
				transition:
					transform 0.25s ease,
					box-shadow 0.25s ease;
			}
			.cloud-transformation .journey-card:hover {
				transform: translateY(-7px);
				box-shadow: var(--shadow-md);
			}
			.cloud-transformation .journey-icon {
				margin-bottom: 12px;
			}
			.cloud-transformation .journey-icon .flaticon-icon {
				width: 36px;
				height: 36px;
			}
			.cloud-transformation .provider-icon {
				margin-bottom: 12px;
			}
			.cloud-transformation .provider-icon .flaticon-icon {
				width: 36px;
				height: 36px;
			}

			/* platforms */
			.cloud-transformation .platform-badge {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 14px;
				margin-top: 24px;
			}
			.cloud-transformation .platform-badge span {
				position: relative;
				font-weight: 600;
				background: rgba(255, 255, 255, 0.78);
				padding: 10px 22px;
				border-radius: 60px;
				border: 1px solid var(--border-subtle);
				box-shadow: var(--shadow-sm);
				animation: float-chip 7s ease-in-out infinite;
			}
			.cloud-transformation .platform-badge span:nth-child(2n) {
				animation-delay: -1.8s;
			}
			.cloud-transformation .platform-badge span:nth-child(3n) {
				animation-delay: -3.2s;
			}

			/* leader card new style */
			.cloud-transformation .leader-card {
				background: linear-gradient(
					145deg,
					var(--surface) 0%,
					var(--bg-secondary) 100%
				);
				border-left: 4px solid var(--pink);
				margin-bottom: 24px;
				transition: all 0.25s ease;
				box-shadow: var(--shadow-sm);
			}
			.cloud-transformation .leader-card:hover {
				transform: translateX(6px);
				box-shadow: var(--shadow-md);
			}

			/* footer */
			.cloud-transformation .footer {
				background: var(--text-primary);
				color: rgba(255, 255, 255, 0.72);
				padding: 48px 0 32px;
				margin-top: 40px;
			}
			.cloud-transformation .footer a {
				color: rgba(255, 255, 255, 0.72);
				text-decoration: none;
			}
			.cloud-transformation .reveal {
				opacity: 0;
				transform: translateY(28px);
				transition:
					opacity 0.7s ease,
					transform 0.7s ease;
				transition-delay: var(--delay, 0ms);
			}
			.cloud-transformation .reveal.visible {
				opacity: 1;
				transform: translateY(0);
			}
			.cloud-transformation .cta-panel {
				position: relative;
				overflow: hidden;
				box-shadow: var(--shadow-xl);
				border: 1px solid rgba(var(--blue-rgb), 0.16);
			}
			.cloud-transformation .cta-panel::before {
				content: "";
				position: absolute;
				inset: 0;
				background:
					linear-gradient(110deg, rgba(var(--pink-rgb), 0.12), transparent 34%),
					linear-gradient(250deg, rgba(var(--green-rgb), 0.12), transparent 36%);
				pointer-events: none;
			}
			.cloud-transformation .cta-panel > * {
				position: relative;
				z-index: 1;
			}
			.cloud-transformation .partner-logo {
				filter: grayscale(1);
				opacity: 0.72;
				transition:
					filter 0.25s ease,
					opacity 0.25s ease,
					transform 0.25s ease;
			}
			.cloud-transformation .partner-logo:hover {
				filter: grayscale(0);
				opacity: 1;
				transform: translateY(-3px);
			}
			.cloud-transformation .data-table-wrap {
				overflow-x: auto;
				border-radius: 16px;
				border: 1px solid var(--border);
			}
			.cloud-transformation .data-table {
				width: 100%;
				border-collapse: collapse;
				font-size: 0.9rem;
				text-align: left;
			}
			.cloud-transformation .data-table th {
				background: var(--bg-tertiary);
				padding: 12px 16px;
				font-size: 0.75rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 0.06em;
				color: var(--text-tertiary);
			}
			.cloud-transformation .data-table td {
				padding: 12px 16px;
				color: var(--text-secondary);
				border-top: 1px solid var(--border-subtle);
				vertical-align: top;
				line-height: 1.55;
			}
			.cloud-transformation .data-table tbody tr:hover td {
				background: rgba(var(--blue-rgb), 0.04);
			}
			.cloud-transformation .data-table td:first-child {
				font-weight: 600;
				color: var(--text-primary);
			}
			@keyframes gradient-shift {
				0%,
				100% {
					background-position: 0% 50%;
				}
				50% {
					background-position: 100% 50%;
				}
			}
			@keyframes meter-fill {
				from {
					width: 0;
				}
				to {
					width: 76%;
				}
			}
			@keyframes float-chip {
				0%,
				100% {
					transform: translateY(0);
				}
				50% {
					transform: translateY(-8px);
				}
			}
			@media (prefers-reduced-motion: reduce) {
				*,
				*::before,
				*::after {
					animation-duration: 0.01ms !important;
					animation-iteration-count: 1 !important;
					scroll-behavior: auto !important;
					transition-duration: 0.01ms !important;
				}
				.cloud-transformation .reveal {
					opacity: 1;
					transform: none;
				}
			}
			@media (max-width: 800px) {
				.cloud-transformation .hero-content h1 {
					font-size: 2.4rem;
				}
				.cloud-transformation .hero {
					padding: 76px 0 56px;
				}
				.cloud-transformation .hero-stat-grid {
					grid-template-columns: 1fr;
				}
				.cloud-transformation .nav-links {
					gap: 16px;
					width: 100%;
					margin-top: 14px;
					overflow-x: auto;
					padding-bottom: 4px;
				}
				.cloud-transformation .section {
					padding: 72px 0;
				}
				.cloud-transformation .section-title {
					text-align: left;
				}
				.cloud-transformation .section-sub {
					text-align: left;
					margin-left: 0;
				}
				.cloud-transformation .grid-4 {
					grid-template-columns: 1fr;
				}
			}
			@media (min-width: 801px) and (max-width: 1100px) {
				.cloud-transformation .grid-4 {
					grid-template-columns: repeat(2, 1fr);
				}
			}