/**
 * Tejas Theme — Main Stylesheet
 *
 * Corporate enterprise platform design with distinct page gradients.
 *
 * @package Tejas
 * @since   1.0.0
 */

/* ─── Reset ─── */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* Core palette — Deep indigo/violet corporate */
	--ink: #06071b;
	--ink-light: #0c0d2a;
	--ink-mid: #131438;
	--surface: #1b1c4e;
	--surface-light: #252660;
	--accent: #635bff;
	--accent-bright: #8b83ff;
	--accent-glow: #7c75ff;
	--accent-warm: #ff6b6b;
	--accent-teal: #2dd4bf;
	--accent-sky: #38bdf8;
	--white: #f7f8fc;
	--white-dim: #cbd5e1;
	--white-muted: #94a3b8;
	--white-80: rgba(247, 248, 252, 0.8);
	--white-60: rgba(247, 248, 252, 0.6);
	--white-40: rgba(247, 248, 252, 0.4);
	--white-12: rgba(247, 248, 252, 0.12);
	--white-06: rgba(247, 248, 252, 0.06);
	--white-03: rgba(247, 248, 252, 0.03);
	--glass: rgba(99, 91, 255, 0.08);
	--glass-border: rgba(99, 91, 255, 0.15);
	--text-body: #3d3e5c;
	--text-muted: #6b6d8a;
	--light-bg: #f7f8fc;
	--light-bg-2: #eeedf8;

	/* Page-specific gradients — each page gets a distinct color identity */
	--grad-hero: linear-gradient(150deg, #06071b 0%, #110e3a 35%, #231768 65%, #0d0b28 100%);
	--grad-overview: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #e4e2f4 100%);
	--grad-features: linear-gradient(180deg, #0f2847 0%, #1a1a5e 50%, #131340 100%);
	--grad-experiences: linear-gradient(180deg, #f0faf5 0%, #e0f5ec 40%, #d1efe4 100%);
	--grad-specs: linear-gradient(180deg, #121a24 0%, #0a2f3f 50%, #0e2433 100%);
	--grad-pricing: linear-gradient(180deg, #0a0f1a 0%, #141824 50%, #1a1020 100%);
	--grad-addons: linear-gradient(180deg, #f8f6f0 0%, #f0ece2 50%, #f8f6f0 100%);
	--grad-freedom: linear-gradient(155deg, #0e0a30 0%, #1c1260 40%, #2a186e 70%, #0e0a30 100%);

	/* Typography — elegant corporate */
	--font-display: 'Playfair Display', serif;
	--font-body: 'Manrope', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	color: var(--white);
	background: var(--ink);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* ─── Global link reset ─── */
a {
	color: inherit;
	text-decoration: none;
}

a.btn-white,
a.btn-white:visited,
a.btn-white:link {
	color: var(--ink);
}

a.btn-primary,
a.btn-primary:visited,
a.btn-primary:link {
	color: var(--white);
}

a.btn-secondary,
a.btn-secondary:visited,
a.btn-secondary:link {
	color: var(--white-dim);
}

a.btn-accent,
a.btn-accent:visited,
a.btn-accent:link {
	color: var(--white);
}

a.btn-outline,
a.btn-outline:visited,
a.btn-outline:link {
	color: var(--ink);
}

a.btn-outline-dark,
a.btn-outline-dark:visited,
a.btn-outline-dark:link {
	color: var(--ink);
}

a.hero-btn,
a.hero-btn:visited,
a.hero-btn:link {
	color: var(--white);
}

/* ─── Utility ─── */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.section-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.section-label::before {
	content: '';
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 24px;
	margin: 0;
	overflow: visible;
	clip: auto;
	background: var(--accent);
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ─── Animations ─── */
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes pulse-glow {
	0%, 100% { box-shadow: 0 0 30px rgba(99, 91, 255, 0.3); }
	50% { box-shadow: 0 0 60px rgba(99, 91, 255, 0.6); }
}

@keyframes shimmer {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}

@keyframes rotate-slow {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes pulse {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 1; }
}

@keyframes slideRight {
	from { opacity: 0; transform: translateX(-40px); }
	to { opacity: 1; transform: translateX(0); }
}

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

@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-2%, -2%); }
	30% { transform: translate(3%, -1%); }
	50% { transform: translate(-1%, 3%); }
	70% { transform: translate(2%, 1%); }
	90% { transform: translate(-3%, 2%); }
}

@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Scroll reveal */
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 0 40px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(6, 7, 27, 0.5);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border-bottom: 1px solid var(--white-06);
	transition: all 0.3s ease;
}

.nav.scrolled {
	background: rgba(6, 7, 27, 0.94);
}

.nav-logo {
	text-decoration: none;
	display: flex;
	align-items: center;
}

.nav-logo__img {
	height: 36px !important;
	width: auto !important;
	display: block;
}

/* Mobile toggle button */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 1001;
}

.nav-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--white);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
}

.nav-links a {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--white-dim);
	text-decoration: none;
	transition: color 0.2s;
	position: relative;
}

.nav-links a:hover {
	color: var(--white);
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: width 0.3s ease;
}

.nav-links a:hover::after {
	width: 100%;
}

/* Highlight current page menu item */
.nav-links .current-menu-item a,
.nav-links .current_page_item a {
	color: var(--white);
}

.nav-links .current-menu-item a::after,
.nav-links .current_page_item a::after {
	width: 100%;
}

/* Nav CTA button */
.nav-links .nav-cta > a,
.nav-cta {
	padding: 10px 24px !important;
	background: var(--accent);
	color: var(--white) !important;
	border-radius: 8px;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
}

.nav-links .nav-cta > a:hover,
.nav-cta:hover {
	background: var(--accent-glow) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

.nav-links .nav-cta > a::after,
.nav-cta::after {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO (Shared inner-page hero) — each page overrides
   ═══════════════════════════════════════════════════════════ */
.page-hero {
	padding: 160px 0 80px;
	text-align: center;
	position: relative;
}

/* Default dark hero */
.page-hero--dark {
	background: var(--grad-hero);
	color: var(--white);
}

.page-hero--dark .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

/* Default light hero */
.page-hero--light {
	background: var(--grad-overview);
	color: var(--ink);
}

.page-hero--light .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

/* Overview page hero — Slate to Teal-blue */
.page-hero--overview {
	background: linear-gradient(145deg, #1a2332 0%, #0d3b4f 50%, #1a2332 100%);
	color: var(--white);
}

.page-hero--overview .section-label {
	color: #5eead4;
	margin-bottom: 20px;
}

.page-hero--overview .page-hero-desc {
	color: #94a3b8;
}

/* Features page hero — Steel blue to Indigo */
.page-hero--features {
	background: linear-gradient(145deg, #0f2847 0%, #1a1a5e 50%, #0f2847 100%);
	color: var(--white);
}

.page-hero--features .section-label {
	color: #818cf8;
	margin-bottom: 20px;
}

.page-hero--features .page-hero-desc {
	color: #94a3b8;
}

/* Experiences/Solutions hero — Dark charcoal to Deep emerald */
.page-hero--experiences {
	background: linear-gradient(145deg, #0d1b2a 0%, #0a3d2e 50%, #0d1b2a 100%);
	color: var(--white);
}

.page-hero--experiences .section-label {
	color: #34d399;
	margin-bottom: 20px;
}

.page-hero--experiences .page-hero-desc {
	color: #94a3b8;
}

/* Specs page hero — Gunmetal to Steel cyan */
.page-hero--specs {
	background: linear-gradient(145deg, #121a24 0%, #0a2f3f 50%, #121a24 100%);
	color: var(--white);
}

.page-hero--specs .section-label {
	color: #22d3ee;
	margin-bottom: 20px;
}

.page-hero--specs .page-hero-desc {
	color: #94a3b8;
}

/* Pricing page hero — Midnight to Warm gold accent */
.page-hero--pricing {
	background: linear-gradient(145deg, #0a0f1a 0%, #1a1020 50%, #0a0f1a 100%);
	color: var(--white);
}

.page-hero--pricing .section-label {
	color: var(--accent-warm);
	margin-bottom: 20px;
}

.page-hero--pricing .page-hero-desc {
	color: #94a3b8;
}

.page-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(36px, 4.5vw, 60px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1.1;
	margin-bottom: 20px;
	animation: fadeUp 0.8s ease-out both;
}

.page-hero-desc {
	font-size: 18px;
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto;
	animation: fadeUp 0.8s ease-out 0.15s both;
}

.page-hero--dark .page-hero-desc {
	color: var(--white-muted);
}

.page-hero--light .page-hero-desc {
	color: #64748b;
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION (Front Page) — Deep indigo gradient
   ═══════════════════════════════════════════════════════════ */
.hero {
	position: relative;
	min-height: 100vh;
	background: var(--grad-hero);
	overflow: hidden;
	padding-top: 72px;
}

/* Glow orb */
.hero::before {
	content: '';
	position: absolute;
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(99, 91, 255, 0.2) 0%, transparent 65%);
	top: 10%;
	left: 15%;
	pointer-events: none;
}

/* Grain */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1;
}

.hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 40px;
	align-items: center;
	min-height: calc(100vh - 72px);
}

.hero-text {
	padding: 60px 0;
}

.hero-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--accent-bright);
	margin-bottom: 24px;
	animation: fadeUp 0.6s ease both;
}

.hero-label .dot {
	width: 6px;
	height: 6px;
	background: var(--accent-bright);
	border-radius: 50%;
	animation: pulse 2s ease infinite;
}

.hero h1 {
	font-family: var(--font-display);
	font-size: clamp(52px, 6.5vw, 88px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -3px;
	margin-bottom: 24px;
	animation: fadeUp 0.8s ease 0.1s both;
}

.hero h1 em {
	font-style: normal;
	display: block;
	background: linear-gradient(135deg, var(--accent-bright), var(--accent-warm));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-desc {
	font-size: 17px;
	line-height: 1.75;
	color: var(--white-60);
	max-width: 440px;
	margin-bottom: 36px;
	animation: fadeUp 0.8s ease 0.2s both;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	background: var(--accent);
	color: var(--white);
	font-size: 15px;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s;
	animation: fadeUp 0.8s ease 0.3s both;
}

.hero-btn:hover {
	background: var(--accent-bright);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(99, 91, 255, 0.4);
}

.hero-btn svg {
	transition: transform 0.3s;
}

.hero-btn:hover svg {
	transform: translateX(3px);
}

/* Hero right visual — large product image */
.hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: fadeIn 1.2s ease 0.4s both;
}

.hero-visual-img {
	width: 100%;
	max-width: 580px;
	filter: drop-shadow(0 40px 80px rgba(99, 91, 255, 0.25));
	animation: float 7s ease-in-out infinite;
	border-radius: 20px;
}

/* Decorative rotating ring */
.hero-ring {
	position: absolute;
	width: 460px;
	height: 460px;
	border: 1px solid rgba(99, 91, 255, 0.1);
	border-radius: 50%;
	animation: rotate-slow 60s linear infinite;
}

.hero-ring::before {
	content: '';
	position: absolute;
	top: -3px;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var(--accent-bright);
	border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════
   HERO — Animated Infrastructure SVG
   ═══════════════════════════════════════════════════════════ */
.hero-infra-svg {
	width: 100%;
	max-width: 680px;
	--iso-body: #3d4785;
	--iso-body2: #4e5a9e;
	--iso-top: #6b75b8;
	--iso-front: #2c3570;
	--iso-side: #1e264f;
	--iso-line: #4e5a9e;
	--iso-line2: rgba(78, 90, 158, 0.3);
	--iso-accent: #635bff;
	--iso-accent2: #8b83ff;
	--iso-text: #c5c0f0;
	--iso-text2: #8b83ff;
	--iso-led1: #2dd4bf;
	--iso-led2: #ff6b6b;
	--iso-led3: #38bdf8;
	--iso-screen: #1e264f;
	--iso-screenhi: #635bff;
	--iso-data: #635bff;
}

@media (prefers-color-scheme: dark) {
	.hero-infra-svg {
		--iso-body: #2a3166;
		--iso-body2: #363f80;
		--iso-top: #4a5499;
		--iso-front: #1e2555;
		--iso-side: #141a40;
		--iso-line: #4a5499;
		--iso-line2: rgba(74, 84, 153, 0.4);
		--iso-accent: #8b83ff;
		--iso-accent2: #afa9ec;
		--iso-text: #afa9ec;
		--iso-text2: #7f77dd;
		--iso-screen: #0e1230;
		--iso-screenhi: #8b83ff;
		--iso-data: #8b83ff;
	}
}

.hero-infra-svg .iso-node {
	cursor: pointer;
	transition: opacity 0.2s;
}

.hero-infra-svg .iso-node:hover {
	opacity: 0.78;
}

@keyframes iso-data-up {
	0% { opacity: 0; transform: translateY(8px); }
	30% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-14px); }
}

@keyframes iso-data-right {
	0% { opacity: 0; transform: translateX(-8px); }
	30% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; transform: translateX(14px); }
}

@keyframes iso-data-left {
	0% { opacity: 0; transform: translateX(8px); }
	30% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes iso-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

@keyframes iso-float-y {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.hero-infra-svg .iso-data-dot {
	animation: iso-data-up 2s ease-in-out infinite;
}

.hero-infra-svg .iso-data-dot-r {
	animation: iso-data-right 2.4s ease-in-out infinite;
}

.hero-infra-svg .iso-data-dot-l {
	animation: iso-data-left 2.2s ease-in-out infinite;
}

.hero-infra-svg .iso-led {
	animation: iso-blink 1.8s ease-in-out infinite;
}

.hero-infra-svg .iso-float {
	animation: iso-float-y 4s ease-in-out infinite;
}

.hero-infra-svg .iso-lbl {
	font-size: 11px;
	font-weight: 500;
	fill: var(--iso-text);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hero-infra-svg .iso-lbl-s {
	font-size: 11px;
	font-weight: 400;
	fill: var(--iso-text2);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hero-infra-svg .iso-mono {
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

@media (prefers-reduced-motion: reduce) {
	.hero-infra-svg .iso-data-dot,
	.hero-infra-svg .iso-data-dot-r,
	.hero-infra-svg .iso-data-dot-l,
	.hero-infra-svg .iso-led,
	.hero-infra-svg .iso-float {
		animation: none;
	}
}

.hero-infra-tip {
	position: fixed;
	background: #1e264f;
	color: #f7f8fc;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	z-index: 10;
	white-space: nowrap;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
	.hero-infra-tip {
		background: #4a5499;
		color: #f7f8fc;
	}
}

/* ═══════════════════════════════════════════════════════════
   SHOWCASE — Video + 4 Icon Row
   ═══════════════════════════════════════════════════════════ */
.showcase {
	background: linear-gradient(180deg, #06071b 0%, #0a0b22 100%);
	padding: 80px 0 100px;
	position: relative;
}

.showcase-video {
	max-width: 780px;
	margin: 0 auto 64px;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: transform 0.4s;
}

.showcase-video:hover {
	transform: scale(1.01);
}

.showcase-video img {
	width: 100%;
	display: block;
}

.play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	background: rgba(99, 91, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	backdrop-filter: blur(8px);
}

.play-btn::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 20px solid var(--white);
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	margin-left: 4px;
}

.showcase-video:hover .play-btn {
	background: var(--accent-bright);
	transform: translate(-50%, -50%) scale(1.1);
}

/* 4 feature icons row */
.icon-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	opacity: 0;
	animation: fadeUp 0.6s ease both;
}

.icon-item:nth-child(1) { animation-delay: 0.1s; }
.icon-item:nth-child(2) { animation-delay: 0.2s; }
.icon-item:nth-child(3) { animation-delay: 0.3s; }
.icon-item:nth-child(4) { animation-delay: 0.4s; }

.icon-circle {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.icon-circle.g1 { background: linear-gradient(135deg, #2d1b69, #4a2da0); }
.icon-circle.g2 { background: linear-gradient(135deg, #1b3069, #2d5aa0); }
.icon-circle.g3 { background: linear-gradient(135deg, #1b694a, #2da07a); }
.icon-circle.g4 { background: linear-gradient(135deg, #69381b, #a05a2d); }

.icon-item span {
	font-size: 13px;
	font-weight: 600;
	color: var(--white-60);
	letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════
   FEATURES LIGHT — 2x2 Grid (Light BG)
   ═══════════════════════════════════════════════════════════ */
.features-light {
	background: linear-gradient(180deg, #e4e2f4 0%, #f0eefa 40%, #f7f8fc 100%);
	color: var(--ink);
	padding: 0 0 120px;
}

.features-grid-4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 56px;
	max-width: 860px;
}

.feat-card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.feat-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.feat-icon.fg1 { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.feat-icon.fg2 { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.feat-icon.fg3 { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.feat-icon.fg4 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }

.feat-card h4 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 6px;
	letter-spacing: -0.2px;
}

.feat-card p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   SERVICES SHOWCASE (Light BG) — 3 image cards with overlays
   ═══════════════════════════════════════════════════════════ */
.services {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 40%, #e8e4f8 100%);
	color: var(--ink);
	padding: 120px 0;
}

.services-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 52px;
}

.services-head .overview-tag {
	margin-bottom: 12px;
	color: var(--accent);
}

.services-head .overview-tag::before {
	background: var(--accent);
}

.services-head h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	color: var(--ink);
	line-height: 1.1;
}

.services-head p {
	font-size: 14px;
	color: var(--text-muted);
	max-width: 300px;
	text-align: right;
	line-height: 1.6;
}

.btn-outline {
	padding: 12px 26px;
	border: 1.5px solid var(--ink);
	color: var(--ink);
	background: transparent;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s;
	display: inline-block;
}

.btn-outline:hover {
	background: var(--ink);
	color: var(--white);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.service-card {
	display: flex;
	flex-direction: column;
	padding: 36px 32px;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--glass-border);
	transition: all 0.35s ease;
	position: relative;
}

.service-card:nth-child(1) {
	background: linear-gradient(155deg, rgba(30, 15, 80, 0.6) 0%, rgba(99, 91, 255, 0.12) 50%, rgba(30, 15, 80, 0.4) 100%);
}

.service-card:nth-child(2) {
	background: linear-gradient(155deg, rgba(15, 40, 80, 0.6) 0%, rgba(56, 138, 221, 0.12) 50%, rgba(15, 40, 80, 0.4) 100%);
}

.service-card:nth-child(3) {
	background: linear-gradient(155deg, rgba(80, 15, 50, 0.6) 0%, rgba(216, 90, 48, 0.1) 50%, rgba(80, 15, 50, 0.4) 100%);
}

.service-card:hover {
	border-color: var(--accent);
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(99, 91, 255, 0.15);
}

.service-card__icon {
	font-size: 32px;
	margin-bottom: 20px;
}

.service-tag {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--accent-bright);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 14px;
	width: fit-content;
}

.service-card h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 800;
	color: var(--white);
	margin-bottom: 10px;
}

.service-card p {
	font-size: 14px;
	color: var(--white-60);
	line-height: 1.65;
	flex: 1;
}

.service-card__arrow {
	font-size: 20px;
	color: var(--accent-bright);
	margin-top: 20px;
	transition: transform 0.3s ease;
	display: block;
}

.service-card:hover .service-card__arrow {
	transform: translateX(6px);
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT CTA (Dark BG) — Product image + pricing
   ═══════════════════════════════════════════════════════════ */
.product-cta {
	background: linear-gradient(180deg, #06071b 0%, #0c0b26 50%, #100f2e 100%);
	padding: 120px 0;
	position: relative;
}

.product-cta::before {
	content: '';
	position: absolute;
	width: 500px;
	height: 400px;
	background: radial-gradient(ellipse, rgba(99, 91, 255, 0.08) 0%, transparent 70%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

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

.product-visual {
	display: flex;
	justify-content: center;
}

.product-img {
	max-width: 380px;
	width: 100%;
	filter: drop-shadow(0 24px 48px rgba(99, 91, 255, 0.2));
	animation: float 6s ease-in-out 1s infinite;
	border-radius: 20px;
}

.product-info .overview-tag {
	color: var(--accent-bright);
}

.product-info .overview-tag::before {
	background: var(--accent-bright);
}

.product-info h2 {
	font-family: var(--font-display);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 900;
	letter-spacing: -1.5px;
	margin-bottom: 14px;
}

.product-desc {
	font-size: 15.5px;
	color: var(--white-60);
	line-height: 1.7;
	margin-bottom: 28px;
}

.price-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

.price-label {
	font-size: 13px;
	color: var(--white-40);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.price-value {
	font-family: var(--font-display);
	font-size: 42px;
	font-weight: 900;
	color: var(--white);
}

.btn-accent {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	background: var(--accent);
	color: var(--white);
	font-size: 14.5px;
	font-weight: 700;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s;
	margin-bottom: 32px;
}

.btn-accent:hover {
	background: var(--accent-bright);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(99, 91, 255, 0.4);
}

.perk-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.perk-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.perk-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--white-06);
	border: 1px solid var(--white-06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.perk-text strong {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 2px;
}

.perk-text span {
	font-size: 13px;
	color: var(--white-40);
	line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   SUB-SERVICES (Light BG) — 3 product cards
   ═══════════════════════════════════════════════════════════ */
.sub-services {
	background: linear-gradient(180deg, #f4f3fc 0%, #eae8f6 50%, #f7f8fc 100%);
	color: var(--ink);
	padding: 120px 0;
}

.sub-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 52px;
}

.sub-head h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3vw, 42px);
	font-weight: 900;
	letter-spacing: -1px;
	color: var(--ink);
}

.sub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sub-card {
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(99, 91, 255, 0.05);
	border: 1px solid rgba(99, 91, 255, 0.06);
	transition: all 0.4s;
	cursor: pointer;
}

.sub-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 44px rgba(99, 91, 255, 0.1);
}

.sub-card-img {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

/* Each card gets a unique gradient */
.sub-card:nth-child(1) .sub-card-img { background: linear-gradient(135deg, #f0ecff, #e2dbff); }
.sub-card:nth-child(2) .sub-card-img { background: linear-gradient(135deg, #ecf4ff, #dbe8ff); }
.sub-card:nth-child(3) .sub-card-img { background: linear-gradient(135deg, #ecfff4, #dbffe8); }

.sub-card-img .sub-icon {
	font-size: 56px;
}

.sub-card-body {
	padding: 22px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sub-card-body h4 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.sub-card-body .sub-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s;
}

.sub-card-body .sub-link:hover {
	color: var(--accent-bright);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	background: var(--accent);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	min-height: 44px;
	min-width: 44px;
}

.btn-primary:hover {
	background: var(--accent-glow);
	transform: translateY(-2px);
	box-shadow: 0 12px 36px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	background: transparent;
	color: var(--white-dim);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	min-height: 44px;
	min-width: 44px;
}

.btn-secondary:hover {
	border-color: var(--accent);
	color: var(--white);
	background: rgba(37, 99, 235, 0.08);
}

.btn-white {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 42px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	border: none;
	border-radius: 14px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
	z-index: 2;
	min-height: 44px;
	min-width: 44px;
}

.btn-white:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.btn-outline-dark {
	padding: 12px 28px;
	border: 1.5px solid var(--ink);
	color: var(--ink);
	background: transparent;
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	min-height: 44px;
	min-width: 44px;
}

.btn-outline-dark:hover {
	background: var(--ink);
	color: var(--white);
}

/* ═══════════════════════════════════════════════════════════
   TRUST MARQUEE
   ═══════════════════════════════════════════════════════════ */
.trust-bar {
	background: linear-gradient(180deg, var(--ink) 0%, #0e1a2e 100%);
	padding: 40px 0;
	border-top: 1px solid rgba(37, 99, 235, 0.06);
	border-bottom: 1px solid rgba(37, 99, 235, 0.06);
	overflow: hidden;
}

.marquee-track {
	display: flex;
	animation: marquee 30s linear infinite;
	width: max-content;
}

.marquee-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 48px;
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--white-muted);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.marquee-item .dot {
	width: 5px;
	height: 5px;
	background: var(--accent);
	border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════
   OVERVIEW SPLIT (Light BG)
   ═══════════════════════════════════════════════════════════ */
.overview {
	background: var(--grad-overview);
	color: var(--ink);
	padding: 120px 0;
}

.overview-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 72px;
	align-items: center;
}

.overview-tag {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.overview-tag::before {
	content: '';
	width: 20px;
	height: 1.5px;
	background: var(--accent);
}

.overview-content .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.overview h2 {
	font-family: var(--font-display);
	font-size: clamp(36px, 4.2vw, 54px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -2px;
	color: var(--ink);
	margin-bottom: 20px;
}

.overview-desc {
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--text-muted);
	margin-bottom: 16px;
}

.overview-visual {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(99, 91, 255, 0.1);
}

.overview-visual img {
	width: 100%;
	display: block;
}

.overview-img {
	width: 100%;
	display: block;
	border-radius: 24px;
}

.overview-quote {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	padding: 20px 24px;
	background: rgba(6, 7, 27, 0.88);
	backdrop-filter: blur(16px);
	border-radius: 14px;
	border: 1px solid var(--white-06);
}

/* ─── Animated Control Plane ─── */
.ctrl-plane {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #06071b;
	width: 100%;
}

.ctrl-plane__cv {
	display: block;
	width: 100%;
}

.ctrl-plane__cnt {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 12px;
	font-weight: 500;
	color: #6b7194;
	font-family: 'Courier New', monospace;
}

.ctrl-plane__hud {
	position: absolute;
	bottom: 14px;
	left: 14px;
	right: 14px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.ctrl-plane__pill {
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.25s;
	border: 1px solid rgba(175, 169, 236, 0.15);
	background: rgba(38, 33, 92, 0.6);
	color: #AFA9EC;
	user-select: none;
	font-family: inherit;
	line-height: 1.4;
}

.ctrl-plane__pill:hover,
.ctrl-plane__pill.on {
	background: rgba(60, 52, 137, 0.5);
	border-color: #AFA9EC;
}

.overview-quote q {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--white);
	font-style: italic;
	display: block;
	margin-bottom: 6px;
}

.overview-quote cite {
	font-size: 12px;
	color: var(--accent-bright);
	font-style: normal;
	font-weight: 600;
}

/* Page content area */
.page-content {
	max-width: 800px;
	font-size: 17px;
	line-height: 1.8;
	color: #475569;
}

.page-content h2 {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--ink);
	margin: 48px 0 16px;
}

.page-content p {
	margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════
   FEATURES GRID (Dark — Steel blue to Indigo)
   ═══════════════════════════════════════════════════════════ */
.features {
	background: var(--grad-features);
	padding: 120px 0;
	position: relative;
}

.features-header {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 72px;
}

.features-header .section-label {
	color: #818cf8;
	margin-bottom: 20px;
}

.features-header h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 46px);
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.features-header p {
	font-size: 16px;
	color: var(--white-muted);
	line-height: 1.7;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.feature-card {
	padding: 36px 32px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(37, 99, 235, 0.1);
	border-radius: 20px;
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.feature-card:hover {
	background: rgba(37, 99, 235, 0.06);
	border-color: rgba(37, 99, 235, 0.25);
	transform: translateY(-4px);
}

.feature-card:hover::before {
	opacity: 1;
}

.feature-icon {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	margin-bottom: 20px;
	font-size: 24px;
}

.feature-card:nth-child(1) .feature-icon { background: linear-gradient(135deg, #1e3a5f, #2563eb); }
.feature-card:nth-child(2) .feature-icon { background: linear-gradient(135deg, #1a1a5e, #4f46e5); }
.feature-card:nth-child(3) .feature-icon { background: linear-gradient(135deg, #0a3d2e, #059669); }
.feature-card:nth-child(4) .feature-icon { background: linear-gradient(135deg, #0a2f3f, #0891b2); }
.feature-card:nth-child(5) .feature-icon { background: linear-gradient(135deg, #3b1764, #7c3aed); }
.feature-card:nth-child(6) .feature-icon { background: linear-gradient(135deg, #78350f, #d97706); }

.feature-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--white);
}

.feature-desc {
	font-size: 14px;
	line-height: 1.7;
	color: var(--white-muted);
}

/* ═══════════════════════════════════════════════════════════
   IMMERSIVE SPLIT (Dark BG) — Images + Checklist
   ═══════════════════════════════════════════════════════════ */
.immersive {
	background: var(--grad-freedom);
	padding: 120px 0;
	overflow: hidden;
	position: relative;
}

.immersive::after {
	content: '';
	position: absolute;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(139, 131, 255, 0.1) 0%, transparent 70%);
	top: -100px;
	right: -100px;
	pointer-events: none;
}

.immersive-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 72px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.immersive-images {
	position: relative;
}

.immersive-images .term {
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3);
}

.immersive-visual {
	display: block;
}

/* ─── Deploy · Monitor · Collaborate Scene ─── */
.dmc-scene {
	background: #0d1120;
	border-radius: 16px;
	overflow: hidden;
	padding: 0 0 24px;
}

.dmc-scene__svg {
	width: 100%;
	height: auto;
	display: block;
}

.dmc-scene__stats {
	display: flex;
	gap: 28px;
	justify-content: center;
	padding: 14px 16px 0;
}

.dmc-scene__stat {
	text-align: center;
}

.dmc-scene__stat-num {
	font-family: 'JetBrains Mono', var(--font-mono), monospace;
	font-size: 17px;
	font-weight: 600;
	display: block;
}

.dmc-scene__stat-label {
	font-size: 9px;
	color: #6a7594;
	margin-top: 2px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	display: block;
}

.dmc-scene__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	padding: 18px 16px 0;
}

.dmc-scene__pill {
	padding: 6px 16px;
	border-radius: 18px;
	font-family: 'JetBrains Mono', var(--font-mono), monospace;
	font-size: 10px;
	letter-spacing: 0.5px;
	background: #141a2e;
	border: 1px solid rgba(80, 100, 160, 0.15);
	color: #6a7594;
	cursor: default;
	transition: all 0.3s;
}

.dmc-scene__pill:hover {
	border-color: rgba(78, 110, 245, 0.3);
	color: #c8d0e0;
	background: #1a2240;
}

.dmc-scene__pill--active {
	border-color: rgba(78, 110, 245, 0.4);
	color: #4e6ef5;
	background: rgba(78, 110, 245, 0.08);
}

/* DMC SVG Animations */
.dmc-cursor {
	animation: dmcBlink 1s step-end infinite;
}

@keyframes dmcBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.dmc-float {
	animation: dmcFloatY var(--dmc-dur, 4s) ease-in-out infinite alternate;
}

@keyframes dmcFloatY {
	0% { transform: translateY(0); }
	100% { transform: translateY(var(--dmc-dy, -6px)); }
}

.dmc-check-pop {
	animation: dmcCheckPop 3s ease-in-out infinite;
}

@keyframes dmcCheckPop {
	0%, 60%, 100% { transform: scale(0); opacity: 0; }
	65% { transform: scale(1.2); opacity: 1; }
	70%, 90% { transform: scale(1); opacity: 1; }
}

.dmc-led {
	animation: dmcLedBlink 1.5s ease-in-out infinite;
}

@keyframes dmcLedBlink {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 1; }
}

.dmc-dash-flow {
	stroke-dasharray: 6 4;
	animation: dmcDashMove 1.5s linear infinite;
}

@keyframes dmcDashMove {
	to { stroke-dashoffset: -20; }
}

.dmc-signal {
	animation: dmcSignalPulse 2s ease-out infinite;
}

@keyframes dmcSignalPulse {
	0% { r: 0; opacity: 0.6; }
	100% { r: 18; opacity: 0; }
}

.dmc-spin {
	animation: dmcSpin 8s linear infinite;
	transform-origin: var(--dmc-ox, center) var(--dmc-oy, center);
}

@keyframes dmcSpin {
	to { transform: rotate(360deg); }
}

.dmc-notif-pop {
	animation: dmcNotifAnim 5s ease-in-out infinite;
}

@keyframes dmcNotifAnim {
	0%, 65%, 100% { transform: scale(0); opacity: 0; }
	70% { transform: scale(1.15); opacity: 1; }
	75%, 92% { transform: scale(1); opacity: 1; }
}

@media (max-width: 640px) {
	.dmc-scene__stats {
		flex-wrap: wrap;
		gap: 16px;
	}

	.dmc-scene__stat-num {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dmc-cursor,
	.dmc-float,
	.dmc-check-pop,
	.dmc-led,
	.dmc-dash-flow,
	.dmc-signal,
	.dmc-spin,
	.dmc-notif-pop {
		animation: none !important;
	}

	.dmc-led { opacity: 0.7 !important; }
	.dmc-check-pop { opacity: 1 !important; transform: scale(1) !important; }
}

.immersive-content .overview-tag {
	color: var(--accent-bright);
}

.immersive-content .overview-tag::before {
	background: var(--accent-bright);
}

.immersive-content .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.immersive h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.8vw, 50px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -1.5px;
	margin-bottom: 20px;
}

.immersive-desc {
	font-size: 16px;
	line-height: 1.8;
	color: var(--white-60);
	margin-bottom: 32px;
}

.check-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.check-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	color: var(--white-60);
}

.check-list .ck {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: rgba(99, 91, 255, 0.12);
	color: var(--accent-bright);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

.immersive-features {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.immersive-features li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 15px;
	color: var(--white-dim);
}

.immersive-features li .check {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(99, 91, 255, 0.15);
	border-radius: 8px;
	color: var(--accent-bright);
	font-size: 14px;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE STACK TERMINAL (Immersive section animation)
   ═══════════════════════════════════════════════════════════ */
.term {
	background: #0c0e1a;
	border-radius: 12px;
	border: 1px solid #1e2240;
	overflow: hidden;
	width: 100%;
}

.term-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	background: #11142a;
	border-bottom: 1px solid #1e2240;
}

.term-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.term-title {
	font-family: var(--font-mono);
	font-size: 12px;
	color: #6b7194;
	margin-left: 10px;
}

.term-body {
	padding: 20px;
	min-height: 480px;
}

.term .line {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 5px;
	opacity: 0;
	transition: opacity 0.15s;
	font-size: 13px;
	line-height: 1.7;
	font-family: var(--font-mono);
}

.term .line.vis {
	opacity: 1;
}

.term .ts {
	color: #4a4f72;
	min-width: 72px;
	flex-shrink: 0;
}

.term .prompt {
	color: #5DCAA5;
	flex-shrink: 0;
}

.term .cmd {
	color: #c8cce8;
}

.term .ok {
	color: #5DCAA5;
}

.term .warn {
	color: #EF9F27;
}

.term .err {
	color: #F0997B;
}

.term .info {
	color: #85B7EB;
}

.term .dim {
	color: #4a4f72;
}

.term .accent {
	color: #AFA9EC;
}

.term .svc-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 7px 0;
	opacity: 0;
	transition: opacity 0.3s;
	font-family: var(--font-mono);
}

.term .svc-row.vis {
	opacity: 1;
}

.term .svc-label {
	font-size: 12px;
	color: #6b7194;
	min-width: 150px;
}

.term .svc-status {
	font-size: 12px;
	min-width: 50px;
	text-align: right;
}

.term .progress-line {
	height: 3px;
	background: #1e2240;
	border-radius: 2px;
	overflow: hidden;
}

.term .progress-fill {
	height: 100%;
	border-radius: 2px;
	width: 0;
	transition: width 0.8s ease;
}

.blink-cursor {
	display: inline-block;
	width: 8px;
	height: 15px;
	background: #5DCAA5;
	animation: bc 1s step-end infinite;
	vertical-align: middle;
	margin-left: 3px;
}

@keyframes bc {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.term .data-stream {
	margin: 7px 0;
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.term .data-packet {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 11px;
	border: 1px solid;
	opacity: 0;
	transform: translateX(-8px);
	transition: all 0.25s;
}

.term .data-packet.vis {
	opacity: 1;
	transform: translateX(0);
}

.term .dp-purple {
	color: #AFA9EC;
	border-color: #3C3489;
	background: rgba(60, 52, 137, 0.15);
}

.term .dp-teal {
	color: #5DCAA5;
	border-color: #085041;
	background: rgba(8, 80, 65, 0.15);
}

.term .dp-blue {
	color: #85B7EB;
	border-color: #0C447C;
	background: rgba(12, 68, 124, 0.15);
}

.term .dp-amber {
	color: #EF9F27;
	border-color: #633806;
	background: rgba(99, 56, 6, 0.15);
}

.term .dp-coral {
	color: #F0997B;
	border-color: #712B13;
	background: rgba(113, 43, 19, 0.15);
}

.restart-btn {
	margin-top: 16px;
	padding: 8px 20px;
	background: transparent;
	border: 1px solid #1e2240;
	color: #6b7194;
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s;
}

.restart-btn:hover {
	border-color: #5DCAA5;
	color: #5DCAA5;
}

/* Terminal responsive */
@media (max-width: 768px) {
	.term-body {
		padding: 14px;
		min-height: 360px;
	}

	.term .line {
		font-size: 11px;
	}

	.term .ts {
		display: none;
	}

	.term .svc-label {
		min-width: 110px;
		font-size: 11px;
	}

	.term .data-packet {
		font-size: 10px;
		padding: 2px 6px;
	}
}

/* ═══════════════════════════════════════════════════════════
   SERVICES OVERVIEW CARDS (Dark — Freedom gradient)
   ═══════════════════════════════════════════════════════════ */
.services-overview {
	background: var(--grad-freedom);
	padding: 120px 0;
	position: relative;
	overflow: hidden;
}

.services-overview::after {
	content: '';
	position: absolute;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(139, 131, 255, 0.08) 0%, transparent 70%);
	top: -150px;
	right: -150px;
	pointer-events: none;
}

.services-overview-head {
	text-align: center;
	margin-bottom: 56px;
	position: relative;
	z-index: 2;
}

.services-overview-head .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.services-overview-head h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.8vw, 50px);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -1.5px;
	margin-bottom: 16px;
}

.services-overview-desc {
	font-size: 16px;
	line-height: 1.8;
	color: var(--white-60);
	max-width: 560px;
	margin: 0 auto;
}

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

.svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 18px;
	text-decoration: none;
	color: var(--white);
	transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
	min-height: 200px;
}

.svc-card:hover {
	background: rgba(99, 91, 255, 0.1);
	border-color: var(--accent-bright);
	transform: translateY(-4px);
}

.svc-code {
	display: inline-block;
	padding: 4px 10px;
	background: rgba(99, 91, 255, 0.15);
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--accent-bright);
	letter-spacing: 0.5px;
	width: fit-content;
	margin-bottom: 16px;
}

.svc-title {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--white);
	margin-bottom: auto;
	padding-bottom: 20px;
}

.svc-stats {
	display: flex;
	gap: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--white-06);
}

.svc-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.svc-stat-value {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 900;
	color: var(--white);
}

.svc-stat-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.svc-arrow {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	font-size: 16px;
	color: var(--white-40);
	transition: background 0.3s ease, color 0.3s ease;
}

.svc-card:hover .svc-arrow {
	background: var(--accent);
	color: var(--white);
}

/* ═══════════════════════════════════════════════════════════
   SOLUTIONS / USE CASES (Light — Emerald tint)
   ═══════════════════════════════════════════════════════════ */
.experiences {
	background: var(--grad-experiences);
	color: var(--ink);
	padding: 120px 0;
}

.experiences-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 56px;
}

.experiences-header .section-label {
	color: #059669;
	margin-bottom: 16px;
}

.experiences-header h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 46px);
	font-weight: 800;
	letter-spacing: -1.5px;
	color: var(--ink);
}

.experiences-header p {
	font-size: 15px;
	color: #64748b;
	max-width: 350px;
	text-align: right;
	line-height: 1.6;
}

.experiences-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.experience-card {
	display: flex;
	flex-direction: column;
	padding: 36px 32px;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	transition: all 0.35s ease;
}

.experience-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
	border-color: #059669;
}

.experience-card__icon {
	font-size: 36px;
	margin-bottom: 20px;
}

.experience-tag {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(5, 150, 105, 0.08);
	border: 1px solid rgba(5, 150, 105, 0.15);
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: #059669;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 16px;
	width: fit-content;
}

.experience-card h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 10px;
}

.experience-card p {
	font-size: 14px;
	color: #64748b;
	line-height: 1.65;
	flex: 1;
}

.experience-card__stats {
	display: flex;
	gap: 24px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.experience-card__stat-val {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 900;
	color: #059669;
	letter-spacing: -0.5px;
}

.experience-card__stat-lbl {
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.experience-card__arrow {
	font-size: 20px;
	color: #059669;
	margin-top: 20px;
	transition: transform 0.3s ease;
	display: block;
}

.experience-card:hover .experience-card__arrow {
	transform: translateX(6px);
}

/* ═══════════════════════════════════════════════════════════
   TECHNICAL SPECS (Dark — Gunmetal to Steel cyan)
   ═══════════════════════════════════════════════════════════ */
.specs {
	background: var(--grad-specs);
	padding: 120px 0;
}

.specs-header {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 64px;
}

.specs-header .section-label {
	color: #22d3ee;
	margin-bottom: 20px;
}

.specs-header h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 46px);
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.specs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.spec-item {
	text-align: center;
	padding: 40px 24px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(34, 211, 238, 0.08);
	border-radius: 20px;
	transition: all 0.3s ease;
}

.spec-item:hover {
	background: rgba(34, 211, 238, 0.05);
	border-color: rgba(34, 211, 238, 0.2);
}

.spec-item:nth-child(1) { border-top: 2px solid #2563eb; }
.spec-item:nth-child(2) { border-top: 2px solid #22d3ee; }
.spec-item:nth-child(3) { border-top: 2px solid #34d399; }
.spec-item:nth-child(4) { border-top: 2px solid #a78bfa; }
.spec-item:nth-child(5) { border-top: 2px solid #f59e0b; }
.spec-item:nth-child(6) { border-top: 2px solid #f472b6; }
.spec-item:nth-child(7) { border-top: 2px solid #60a5fa; }
.spec-item:nth-child(8) { border-top: 2px solid #fb923c; }

.spec-value {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 800;
	color: var(--white);
	margin-bottom: 8px;
}

.spec-label {
	font-size: 13px;
	color: var(--white-muted);
	letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════
   PRICING (Dark — Midnight with warm gold accent)
   ═══════════════════════════════════════════════════════════ */
.pricing {
	background: var(--grad-pricing);
	padding: 120px 0;
	position: relative;
}

.pricing::before {
	content: '';
	position: absolute;
	width: 600px;
	height: 400px;
	background: radial-gradient(ellipse, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Legacy two-column pricing grid (for backward compat) */
.pricing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 2;
}

/* New three-column pricing cards */
.pricing-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	position: relative;
	z-index: 2;
}

.pricing-plan-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(245, 158, 11, 0.1);
	border-radius: 24px;
	padding: 40px 32px;
	text-align: center;
	transition: all 0.4s ease;
	position: relative;
}

.pricing-plan-card:hover {
	background: rgba(245, 158, 11, 0.04);
	border-color: rgba(245, 158, 11, 0.2);
	transform: translateY(-4px);
}

.pricing-plan-card--featured {
	background: rgba(245, 158, 11, 0.06);
	border-color: rgba(245, 158, 11, 0.3);
	box-shadow: 0 0 60px rgba(245, 158, 11, 0.08);
}

.pricing-plan-card--featured:hover {
	box-shadow: 0 0 80px rgba(245, 158, 11, 0.12);
}

.pricing-plan-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 20px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #0a0f1a;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 100px;
	white-space: nowrap;
}

.pricing-plan-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 16px;
}

.pricing-plan-period {
	font-size: 14px;
	color: var(--white-muted);
	margin-bottom: 16px;
}

.pricing-plan-desc {
	font-size: 14px;
	color: var(--white-muted);
	line-height: 1.6;
	margin-bottom: 28px;
}

.pricing-plan-card .btn-primary,
.pricing-plan-card .btn-secondary {
	width: 100%;
	justify-content: center;
	margin-bottom: 28px;
}

.pricing-visual {
	display: flex;
	justify-content: center;
}

.pricing-product {
	max-width: 400px;
	width: 100%;
	filter: drop-shadow(0 20px 40px rgba(37, 99, 235, 0.15));
	animation: float 6s ease-in-out 1s infinite;
	border-radius: 24px;
}

.pricing-content .section-label {
	color: var(--accent-warm);
	margin-bottom: 20px;
}

.pricing h2 {
	font-family: var(--font-display);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 800;
	letter-spacing: -1.5px;
	margin-bottom: 16px;
}

.pricing-desc {
	font-size: 16px;
	color: var(--white-muted);
	line-height: 1.7;
	margin-bottom: 32px;
}

.price-tag {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 12px;
	justify-content: center;
}

.price-currency {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--accent-warm);
}

.price-amount {
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 800;
	color: var(--white);
	letter-spacing: -3px;
}

.pricing-perks {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

.pricing-perks li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--white-dim);
}

.pricing-perks li .perk-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 158, 11, 0.1);
	border-radius: 10px;
	font-size: 16px;
	flex-shrink: 0;
}

.pricing-perks li .check {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(52, 211, 153, 0.12);
	border-radius: 6px;
	color: #34d399;
	font-size: 13px;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   ADD-ONS / ACCESSORIES (Light warm)
   ═══════════════════════════════════════════════════════════ */
.accessories {
	background: var(--grad-addons);
	color: var(--ink);
	padding: 120px 0;
}

.accessories-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 56px;
}

.accessories-header .section-label {
	color: #d97706;
	margin-bottom: 12px;
}

.accessories-header h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3vw, 42px);
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--ink);
}

.accessories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.accessory-card {
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(10, 22, 40, 0.06);
	transition: all 0.4s ease;
	cursor: pointer;
	border: 1px solid rgba(10, 22, 40, 0.06);
}

.accessory-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(10, 22, 40, 0.1);
}

.accessory-img-wrap {
	padding: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 220px;
}

.accessory-card:nth-child(1) .accessory-img-wrap { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.accessory-card:nth-child(2) .accessory-img-wrap { background: linear-gradient(135deg, #f0fdf4, #dcfce7); }
.accessory-card:nth-child(3) .accessory-img-wrap { background: linear-gradient(135deg, #fffbeb, #fef3c7); }

.accessory-img {
	max-height: 140px;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.accessory-card:hover .accessory-img {
	transform: scale(1.08);
}

.accessory-info {
	padding: 24px 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.accessory-name {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
}

.accessory-price {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE (P01 Hardware & Software Design)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.svc-hero {
	background: var(--grad-hero);
	padding: 160px 0 100px;
	position: relative;
	overflow: hidden;
}

.svc-hero__grain {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 0;
}

.svc-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.svc-hero__text .section-label {
	color: var(--accent-bright);
	margin-bottom: 24px;
}

.svc-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(36px, 4.5vw, 58px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1.1;
	margin-bottom: 20px;
	animation: fadeUp 0.8s ease-out both;
}

.svc-hero h1 em {
	color: var(--accent-bright);
	font-style: italic;
}

.svc-hero__desc {
	font-size: 17px;
	line-height: 1.75;
	color: var(--white-60);
	margin-bottom: 32px;
	max-width: 480px;
}

.svc-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.svc-hero__visual {
	position: relative;
}

.svc-hero__glow {
	position: absolute;
	inset: -40px;
	background: radial-gradient(circle at center, rgba(99, 91, 255, 0.2) 0%, transparent 70%);
	border-radius: 50%;
	animation: pulse-glow 4s ease-in-out infinite;
	z-index: 0;
}

.svc-hero__img {
	width: 100%;
	border-radius: 24px;
	position: relative;
	z-index: 1;
	box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
}

/* ── PCB Architecture Animation ── */
.pcb-wrap {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	z-index: 1;
	box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
	background: #0a0820;
}

.pcb-canvas {
	display: block;
	width: 100%;
}

.pcb-hud {
	position: absolute;
	bottom: 14px;
	left: 14px;
	right: 14px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	z-index: 2;
}

.pcb-chip {
	font-family: var(--font-body);
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.25s;
	border: 1px solid rgba(175, 169, 236, 0.12);
	background: rgba(38, 33, 92, 0.6);
	color: #AFA9EC;
	user-select: none;
}

.pcb-chip:hover,
.pcb-chip.on {
	background: rgba(60, 52, 137, 0.5);
	border-color: #AFA9EC;
}

@media (max-width: 640px) {
	.pcb-chip {
		font-size: 11px;
		padding: 4px 10px;
	}
}

/* ── Problem Statement ── */
.svc-problem {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #e4e2f4 100%);
	color: var(--ink);
	padding: 120px 0;
}

.svc-problem__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 64px;
}

.svc-problem__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.svc-problem__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 24px;
	color: var(--ink);
}

.svc-problem__head p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--text-body);
	margin-bottom: 12px;
}

.svc-problem__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.svc-stat-card {
	background: var(--white);
	border: 1px solid rgba(99, 91, 255, 0.1);
	border-radius: 20px;
	padding: 36px 28px;
	text-align: center;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.svc-stat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(99, 91, 255, 0.12);
}

.svc-stat-card__icon {
	font-size: 32px;
	display: block;
	margin-bottom: 16px;
}

.svc-stat-card__value {
	display: block;
	font-family: var(--font-display);
	font-size: 42px;
	font-weight: 900;
	color: var(--accent);
	letter-spacing: -1px;
	margin-bottom: 8px;
}

.svc-stat-card__label {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-muted);
}

/* ── Services Breakdown ── */
.svc-breakdown {
	background: linear-gradient(155deg, #0e0a30 0%, #1c1260 50%, #0e0a30 100%);
	padding: 120px 0;
	position: relative;
	overflow: hidden;
}

.svc-breakdown__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.svc-breakdown__cards .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.svc-breakdown__cards h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 44px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 36px;
}

.svc-detail-card {
	display: flex;
	gap: 20px;
	padding: 28px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	margin-bottom: 16px;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.svc-detail-card:hover {
	background: rgba(99, 91, 255, 0.08);
	border-color: var(--accent-bright);
}

.svc-detail-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
}

.svc-detail-card__icon--purple { background: rgba(99, 91, 255, 0.15); }
.svc-detail-card__icon--blue   { background: rgba(56, 189, 248, 0.15); }
.svc-detail-card__icon--teal   { background: rgba(45, 212, 191, 0.15); }

.svc-detail-card h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
}

.svc-detail-card p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--white-60);
}

.svc-breakdown__visual img {
	width: 100%;
	border-radius: 24px;
	object-fit: cover;
	height: 100%;
	max-height: 560px;
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3);
}

/* ── Process / Timeline ── */
.svc-process {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #f7f8fc 100%);
	color: var(--ink);
	padding: 120px 0;
}

.svc-process__head {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 64px;
}

.svc-process__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.svc-process__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--ink);
}

.svc-process__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.svc-timeline {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	position: relative;
}

.svc-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	padding: 0 12px;
}

.svc-step__marker {
	position: relative;
	margin-bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.svc-step__num {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	position: relative;
	z-index: 2;
	box-shadow: 0 4px 20px rgba(99, 91, 255, 0.3);
}

.svc-step__line {
	position: absolute;
	top: 50%;
	left: calc(50% + 24px);
	width: calc(100% + 24px);
	height: 2px;
	background: linear-gradient(90deg, var(--accent), rgba(99, 91, 255, 0.2));
	transform: translateY(-50%);
	z-index: 1;
}

.svc-step:not(:last-child) .svc-step__line {
	width: 200%;
}

.svc-step__icon {
	font-size: 28px;
	margin-bottom: 14px;
	display: block;
}

.svc-step__body h3 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
}

.svc-step__body p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-muted);
}

/* ── Case Studies ── */
.svc-cases {
	background: linear-gradient(155deg, #0e0a30 0%, #131438 50%, #0e0a30 100%);
	padding: 120px 0;
}

.svc-cases__head {
	text-align: center;
	margin-bottom: 64px;
}

.svc-cases__head .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.svc-cases__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	color: #f7f8fc;
}

/* Logistics truck animation */
.truck-scene {
	border-radius: 16px;
	overflow: hidden;
	background: #0a0820;
}

.truck-scene__cv {
	display: block;
	width: 100%;
}

.svc-case {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	margin-bottom: 64px;
}

.svc-case:last-child {
	margin-bottom: 0;
}

.svc-case--reversed {
	direction: rtl;
}

.svc-case--reversed > * {
	direction: ltr;
}

.svc-case__img {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

.svc-case__img img {
	width: 100%;
	border-radius: 20px;
	object-fit: cover;
	height: 340px;
}

.svc-case__badge {
	position: absolute;
	bottom: 20px;
	left: 20px;
	padding: 14px 20px;
	background: rgba(6, 7, 27, 0.88);
	backdrop-filter: blur(12px);
	border-radius: 14px;
	border: 1px solid var(--white-06);
}

.svc-case__metric {
	display: block;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 900;
	color: var(--accent-bright);
	line-height: 1;
}

.svc-case__metric-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--white-60);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.svc-case__client {
	display: inline-block;
	padding: 6px 18px;
	background: rgba(99, 91, 255, 0.15);
	border: 1px solid rgba(139, 131, 255, 0.25);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	color: #8b83ff;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 24px;
}

.svc-case__content h3 {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	color: #a8a2ff;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 10px;
	margin-top: 20px;
}

.svc-case__content h3:first-of-type {
	margin-top: 0;
}

.svc-case__content > p {
	font-size: 15px;
	line-height: 1.75;
	color: #cbd5e1;
}

.svc-case__result {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px;
	padding: 18px 20px;
	background: rgba(45, 212, 191, 0.1);
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: 14px;
}

.svc-case__result p {
	color: #2dd4bf;
}

.svc-case__result .ck {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: rgba(45, 212, 191, 0.15);
	color: var(--accent-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

/* ── Technology Stack ── */
.svc-stack {
	background: linear-gradient(155deg, #0a0820 0%, #1a1050 50%, #0a0820 100%);
	padding: 100px 0;
}

.svc-stack__head {
	text-align: center;
	margin-bottom: 48px;
}

.svc-stack__head .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.svc-stack__head h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.1;
}

.svc-stack__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.svc-tech {
	padding: 24px 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	text-align: center;
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.svc-tech:hover {
	background: rgba(99, 91, 255, 0.1);
	border-color: var(--accent-bright);
	transform: translateY(-3px);
}

.svc-tech__name {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--white-dim);
	letter-spacing: 0.3px;
}

/* ── Testimonial ── */
.svc-testimonial {
	background: linear-gradient(135deg, #1c1260 0%, #635bff 50%, #2a186e 100%);
	padding: 100px 0;
	position: relative;
	overflow: hidden;
}

.svc-testimonial::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 50%, rgba(139, 131, 255, 0.15) 0%, transparent 70%);
	pointer-events: none;
}

.svc-testimonial__inner {
	text-align: center;
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}

.svc-testimonial__mark {
	font-family: var(--font-display);
	font-size: 120px;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.1);
	line-height: 0.6;
	display: block;
	margin-bottom: 8px;
}

.svc-testimonial blockquote p {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 600;
	font-style: italic;
	line-height: 1.5;
	color: var(--white);
	margin-bottom: 32px;
}

.svc-testimonial cite {
	font-style: normal;
}

.svc-testimonial cite strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 4px;
}

.svc-testimonial cite span {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

/* ── Service CTA ── */
.svc-cta {
	background: linear-gradient(135deg, #2a186e 0%, #635bff 40%, #ff6b9d 100%);
	padding: 120px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.svc-cta__pattern {
	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: 40px 40px;
	pointer-events: none;
}

.svc-cta__inner {
	position: relative;
	z-index: 1;
}

.svc-cta h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 1.1;
	margin-bottom: 16px;
}

.svc-cta p {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
	max-width: 500px;
	margin: 0 auto 36px;
}

.svc-cta__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.svc-cta__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
	text-decoration: none;
	transition: opacity 0.3s;
}

.svc-cta__link:hover {
	opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════
   AI / ML SERVICE PAGE — Unique Sections
   ═══════════════════════════════════════════════════════════ */

/* ── Hero modifier (AI variant) ── */
.svc-hero--ai {
	background: linear-gradient(155deg, #06071b 0%, #1a0e4a 35%, #0d2455 70%, #06071b 100%);
}

/* Hero badge */
.svc-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	padding: 8px 18px;
	background: rgba(99, 91, 255, 0.1);
	border: 1px solid var(--glass-border);
	border-radius: 100px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--white-dim);
}

.svc-hero__badge-dot {
	width: 7px;
	height: 7px;
	background: var(--accent-teal);
	border-radius: 50%;
	animation: pulse 2s ease infinite;
}

/* Hero stats bar */
.svc-hero__stats {
	display: flex;
	gap: 0;
	margin-top: 20px;
	background: rgba(6, 7, 27, 0.7);
	backdrop-filter: blur(16px);
	border: 1px solid var(--white-06);
	border-radius: 14px;
	overflow: hidden;
}

.svc-hero__stat-item {
	flex: 1;
	padding: 18px 20px;
	text-align: center;
	border-right: 1px solid var(--white-06);
}

.svc-hero__stat-item:last-child {
	border-right: none;
}

.svc-hero__stat-item strong {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 900;
	color: var(--accent-bright);
	margin-bottom: 2px;
}

.svc-hero__stat-item span {
	font-size: 11px;
	font-weight: 600;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

/* ── Capabilities (2×2 grid) ── */
.svc-capabilities {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #e4e2f4 100%);
	color: var(--ink);
	padding: 120px 0;
}

.svc-capabilities__head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 56px;
}

.svc-capabilities__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.svc-capabilities__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--ink);
}

.svc-capabilities__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.svc-capabilities__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.svc-cap-card {
	padding: 36px 32px;
	border-radius: 20px;
	background: var(--white);
	border: 1px solid rgba(99, 91, 255, 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.svc-cap-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(99, 91, 255, 0.1);
}

.svc-cap-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 20px;
}

.svc-cap-card--violet .svc-cap-card__icon { background: rgba(99, 91, 255, 0.12); }
.svc-cap-card--blue .svc-cap-card__icon   { background: rgba(56, 189, 248, 0.12); }
.svc-cap-card--teal .svc-cap-card__icon   { background: rgba(45, 212, 191, 0.12); }
.svc-cap-card--rose .svc-cap-card__icon   { background: rgba(255, 107, 107, 0.12); }

.svc-cap-card h3 {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 10px;
}

.svc-cap-card p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-muted);
	margin-bottom: 16px;
}

.svc-cap-card__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.svc-cap-tag {
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 100px;
	letter-spacing: 0.3px;
	background: rgba(99, 91, 255, 0.06);
	color: var(--accent);
}

/* ── Platform Showcase ── */
.svc-platform {
	background: linear-gradient(155deg, #0e0a30 0%, #131438 50%, #0e0a30 100%);
	padding: 120px 0;
}

.svc-platform__head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 56px;
}

.svc-platform__head .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.svc-platform__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
}

.svc-platform__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--white-60);
}

.svc-platform__showcase {
	margin-bottom: 56px;
}

.svc-platform__browser {
	background: #1a1b3a;
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}

.svc-platform__browser-bar {
	display: flex;
	gap: 8px;
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid var(--white-06);
}

.svc-platform__browser-bar span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.svc-platform__browser-bar span:first-child { background: #ff5f57; }
.svc-platform__browser-bar span:nth-child(2) { background: #ffbd2e; }
.svc-platform__browser-bar span:nth-child(3) { background: #28c840; }

.svc-platform__screenshot {
	width: 100%;
	display: block;
}

.svc-platform__features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.svc-platform__feat {
	display: flex;
	gap: 16px;
	padding: 24px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.svc-platform__feat:hover {
	background: rgba(99, 91, 255, 0.08);
	border-color: var(--accent-bright);
}

.svc-platform__feat-icon {
	font-size: 24px;
	flex-shrink: 0;
	line-height: 1;
}

.svc-platform__feat h3 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 6px;
}

.svc-platform__feat p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--white-60);
}

/* ── Use Cases Grid ── */
.svc-usecases {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #f7f8fc 100%);
	color: var(--ink);
	padding: 120px 0;
}

.svc-usecases__head {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 56px;
}

.svc-usecases__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.svc-usecases__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--ink);
}

.svc-usecases__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.svc-usecases__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.svc-uc-card {
	padding: 32px 24px;
	background: var(--white);
	border-radius: 20px;
	border: 1px solid rgba(99, 91, 255, 0.08);
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	text-decoration: none;
}

.svc-uc-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(99, 91, 255, 0.1);
}

.svc-uc-card__icon {
	font-size: 32px;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.svc-uc-card--violet .svc-uc-card__icon { background: rgba(99, 91, 255, 0.1); }
.svc-uc-card--blue .svc-uc-card__icon   { background: rgba(56, 189, 248, 0.1); }
.svc-uc-card--teal .svc-uc-card__icon   { background: rgba(45, 212, 191, 0.1); }
.svc-uc-card--rose .svc-uc-card__icon   { background: rgba(255, 107, 107, 0.1); }

.svc-uc-card__industry {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--accent);
	margin-bottom: 8px;
}

.svc-uc-card h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 10px;
}

.svc-uc-card p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--text-muted);
	margin-bottom: auto;
	padding-bottom: 18px;
}

.svc-uc-card__link {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s;
}

.svc-uc-card__link:hover {
	color: var(--accent-bright);
}

/* ── Research section (reuses svc-breakdown) ── */
.svc-research {
	background: linear-gradient(155deg, #0e0a30 0%, #1c1260 50%, #0e0a30 100%);
	padding: 120px 0;
	position: relative;
	overflow: hidden;
}

/* ── Integration section (reuses svc-process + svc-timeline) ── */
.svc-integration {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #f7f8fc 100%);
	color: var(--ink);
	padding: 120px 0;
}

.svc-deploy-envs {
	text-align: center;
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid rgba(99, 91, 255, 0.1);
}

.svc-deploy-envs .section-label {
	color: var(--accent);
	margin-bottom: 24px;
}

.svc-deploy-envs__grid {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.svc-env-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--white);
	border: 1px solid rgba(99, 91, 255, 0.12);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-env-chip:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(99, 91, 255, 0.1);
}

/* CTA AI variant */
.svc-cta--ai {
	background: linear-gradient(135deg, #1c1260 0%, #635bff 35%, #2dd4bf 100%);
}

/* ═══════════════════════════════════════════════════════════
   CONSULTING SERVICE PAGE — Unique Sections
   ═══════════════════════════════════════════════════════════ */

/* ── Hero modifier (Consulting variant) ── */
.svc-hero--consult {
	background: linear-gradient(155deg, #121218 0%, #1a1a3e 40%, #1c1260 75%, #121218 100%);
}

/* ── Consulting Hero Animation ── */
.consult-anim-wrap {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	z-index: 1;
	box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
	background: #0a0820;
}

.consult-canvas {
	display: block;
	width: 100%;
	height: 440px;
}

.consult-hud {
	position: absolute;
	top: 12px;
	left: 14px;
	display: flex;
	gap: 8px;
	align-items: center;
	z-index: 2;
}

.consult-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #1D9E75;
	animation: consult-pulse 2s ease infinite;
}

@keyframes consult-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

.consult-lbl {
	font-family: var(--font-mono);
	font-size: 12px;
	color: #8888aa;
}

.consult-replay {
	position: absolute;
	top: 12px;
	right: 14px;
	font-family: var(--font-body);
	font-size: 11px;
	padding: 4px 12px;
	border-radius: 20px;
	cursor: pointer;
	border: 1px solid rgba(175, 169, 236, 0.15);
	background: rgba(38, 33, 92, 0.5);
	color: #AFA9EC;
	z-index: 2;
	transition: all 0.2s;
}

.consult-replay:hover {
	border-color: #AFA9EC;
}

/* Hero credential badges */
.svc-hero__credentials {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.svc-credential {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--white-06);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	color: var(--white-dim);
}

/* Consulting capability card color variants (warm palette) */
.svc-cap-card--amber .svc-cap-card__icon { background: rgba(245, 158, 11, 0.12); }
.svc-cap-card--copper .svc-cap-card__icon { background: rgba(217, 119, 87, 0.12); }
.svc-cap-card--sage .svc-cap-card__icon   { background: rgba(74, 162, 120, 0.12); }
.svc-cap-card--slate .svc-cap-card__icon  { background: rgba(100, 116, 139, 0.12); }

/* ── Engagement Models ── */
.consult-models {
	background: linear-gradient(155deg, #0e0a30 0%, #131438 50%, #0e0a30 100%);
	padding: 120px 0;
}

.consult-models__head {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 56px;
}

.consult-models__head .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.consult-models__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
}

.consult-models__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--white-60);
}

.consult-models__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}

.consult-model {
	position: relative;
	padding: 36px 28px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease, border-color 0.35s ease;
}

.consult-model:hover {
	transform: translateY(-6px);
	border-color: rgba(99, 91, 255, 0.3);
}

.consult-model--featured {
	border-color: var(--accent);
	background: rgba(99, 91, 255, 0.06);
}

.consult-model__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 16px;
	background: var(--accent);
	color: var(--white);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	border-radius: 100px;
	white-space: nowrap;
}

.consult-model__icon {
	font-size: 32px;
	display: block;
	margin-bottom: 20px;
}

.consult-model h3 {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}

.consult-model__desc {
	font-size: 14px;
	line-height: 1.7;
	color: var(--white-60);
	margin-bottom: 24px;
}

.consult-model__pricing {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--white-06);
}

.consult-model__price {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 900;
	color: var(--accent-bright);
}

.consult-model__price-label {
	font-size: 13px;
	color: var(--white-40);
}

.consult-model__features {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
	flex-grow: 1;
}

.consult-model__features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--white-60);
}

.consult-model__features .ck {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(99, 91, 255, 0.12);
	color: var(--accent-bright);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}

.consult-model__cta {
	display: block;
	text-align: center;
	padding: 14px 24px;
	border: 1.5px solid var(--glass-border);
	border-radius: 12px;
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s ease;
	min-height: 44px;
}

.consult-model__cta:hover {
	background: var(--accent);
	border-color: var(--accent);
}

.consult-model--featured .consult-model__cta {
	background: var(--accent);
	border-color: var(--accent);
}

.consult-model--featured .consult-model__cta:hover {
	background: var(--accent-glow);
	border-color: var(--accent-glow);
}

/* ── Methodology (6-phase grid) ── */
.consult-method {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #f7f8fc 100%);
	color: var(--ink);
	padding: 120px 0;
}

.consult-method__ring {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.consult-phase {
	padding: 32px 24px;
	background: var(--white);
	border: 1px solid rgba(99, 91, 255, 0.08);
	border-radius: 20px;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.consult-phase:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(99, 91, 255, 0.1);
}

.consult-phase__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 16px;
	box-shadow: 0 4px 16px rgba(99, 91, 255, 0.25);
}

.consult-phase h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
}

.consult-phase p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--text-muted);
	margin-bottom: 14px;
}

.consult-phase__dur {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--accent);
	padding: 4px 10px;
	background: rgba(99, 91, 255, 0.06);
	border-radius: 100px;
}

/* ── Industry Expertise Grid ── */
.consult-industries {
	background: linear-gradient(155deg, #0e0a30 0%, #1a1050 50%, #0e0a30 100%);
	padding: 100px 0;
}

.consult-industries__head {
	text-align: center;
	margin-bottom: 48px;
}

.consult-industries__head .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.consult-industries__head h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.1;
}

.consult-industries__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.consult-ind {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 28px 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	text-align: center;
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.consult-ind:hover {
	background: rgba(99, 91, 255, 0.1);
	border-color: var(--accent-bright);
	transform: translateY(-4px);
}

.consult-ind__icon {
	font-size: 28px;
}

.consult-ind__name {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
}

.consult-ind__count {
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-bright);
}

/* CTA Consulting variant */
.svc-cta--consult {
	background: linear-gradient(135deg, #1c1260 0%, #635bff 40%, #ff6b9d 100%);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════ */

/* Hero — warm indigo to slate */
.page-hero--about {
	background: linear-gradient(145deg, #0d0b28 0%, #1c1260 40%, #2a186e 70%, #0e0a30 100%);
	color: var(--white);
}

.page-hero--about .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.page-hero--about .page-hero-desc {
	color: #94a3b8;
}

/* ── Our Story ── */
.about-story {
	background: var(--ink);
	padding: 120px 0;
}

.about-story-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 72px;
	align-items: start;
}

.about-story-content .overview-tag {
	color: var(--accent-bright);
	margin-bottom: 12px;
}

.about-story-content .overview-tag::before {
	background: var(--accent-bright);
}

.about-story-content h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 24px;
}

.about-story-content p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--white-60);
	margin-bottom: 16px;
}

.about-story-visual {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.about-story-card {
	padding: 24px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	transition: all 0.3s ease;
}

.about-story-card:hover {
	background: rgba(99, 91, 255, 0.08);
	border-color: var(--accent);
	transform: translateX(4px);
}

.about-story-card--accent {
	background: rgba(99, 91, 255, 0.1);
	border-color: var(--accent);
}

.about-story-card-icon {
	color: var(--accent-bright);
	margin-bottom: 12px;
}

.about-story-card-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 800;
	color: var(--white);
	margin-bottom: 6px;
}

.about-story-card-text {
	font-size: 13.5px;
	color: var(--white-60);
	line-height: 1.6;
}

/* ── Mission & Vision ── */
.about-mission {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #e4e2f4 100%);
	padding: 100px 0;
}

.about-mission-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.about-mission-card {
	padding: 40px 32px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
}

.about-mission-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(99, 91, 255, 0.1);
}

.about-mission-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(99, 91, 255, 0.08);
	border-radius: 14px;
	color: var(--accent);
	margin-bottom: 20px;
}

.about-mission-card h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 12px;
}

.about-mission-card p {
	font-size: 14.5px;
	line-height: 1.7;
	color: #64748b;
}

/* ── Values ── */
.about-values {
	background: var(--ink);
	padding: 120px 0;
}

.about-values-head {
	text-align: center;
	margin-bottom: 60px;
}

.about-values-head .section-label {
	color: var(--accent-bright);
	margin-bottom: 16px;
}

.about-values-head h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 900;
	letter-spacing: -1.5px;
}

.about-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.about-value-card {
	padding: 36px 28px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	transition: all 0.3s ease;
}

.about-value-card:hover {
	background: rgba(99, 91, 255, 0.06);
	border-color: var(--accent);
	transform: translateY(-2px);
}

.about-value-num {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-bright);
	display: block;
	margin-bottom: 16px;
}

.about-value-card h4 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 10px;
}

.about-value-card p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--white-60);
}

/* ── Stats ── */
.about-stats {
	background: linear-gradient(135deg, #635bff 0%, #8b83ff 50%, #635bff 100%);
	padding: 72px 0;
}

.about-stats-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
	text-align: center;
}

.about-stat-value {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 900;
	color: #fff;
	letter-spacing: -1px;
	margin-bottom: 4px;
}

.about-stat-label {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ── Capabilities ── */
.about-capabilities {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 100%);
	padding: 120px 0;
}

.about-capabilities-head {
	text-align: center;
	margin-bottom: 60px;
}

.about-capabilities-head .section-label {
	color: var(--accent);
	margin-bottom: 16px;
}

.about-capabilities-head h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 900;
	letter-spacing: -1.5px;
	color: var(--ink);
	margin-bottom: 16px;
}

.about-capabilities-desc {
	font-size: 16px;
	line-height: 1.7;
	color: #64748b;
	max-width: 600px;
	margin: 0 auto;
}

.about-capabilities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.about-cap-card {
	display: block;
	padding: 36px 28px;
	background: #fff;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
}

.about-cap-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 36px rgba(99, 91, 255, 0.1);
	border-color: var(--accent);
}

.about-cap-icon {
	font-size: 28px;
	margin-bottom: 16px;
}

.about-cap-card h4 {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 8px;
}

.about-cap-card p {
	font-size: 13.5px;
	line-height: 1.7;
	color: #64748b;
	margin-bottom: 16px;
}

.about-cap-arrow {
	font-size: 18px;
	color: var(--accent);
	transition: transform 0.3s ease;
}

.about-cap-card:hover .about-cap-arrow {
	transform: translateX(4px);
}

/* ── Products ── */
.about-products {
	background: var(--ink);
	padding: 120px 0;
}

.about-products-head {
	text-align: center;
	margin-bottom: 60px;
}

.about-products-head .section-label {
	color: var(--accent-bright);
	margin-bottom: 16px;
}

.about-products-head h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 900;
	letter-spacing: -1.5px;
}

.about-products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.about-product-card {
	display: block;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	transition: all 0.3s ease;
}

.about-product-card:hover {
	background: rgba(99, 91, 255, 0.06);
	border-color: var(--accent);
	transform: translateY(-4px);
}

.about-product-img {
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.02);
}

.about-product-img img {
	width: 100%;
	max-width: 240px;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
}

.about-product-info {
	padding: 0 24px 28px;
}

.about-product-info h4 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 8px;
	color: var(--white);
}

.about-product-info p {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--white-60);
	margin-bottom: 16px;
}

.about-product-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.about-product-spec {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	background: rgba(99, 91, 255, 0.12);
	color: var(--accent-bright);
	border-radius: 6px;
}

/* ── Certifications ── */
.about-certs {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 100%);
	padding: 80px 0;
}

.about-certs-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.about-certs-text .overview-tag {
	color: var(--accent);
	margin-bottom: 12px;
}

.about-certs-text .overview-tag::before {
	background: var(--accent);
}

.about-certs-text h3 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 12px;
}

.about-certs-text p {
	font-size: 15px;
	line-height: 1.7;
	color: #64748b;
}

.about-certs-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.about-cert-badge {
	padding: 14px 24px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	transition: all 0.3s ease;
}

.about-cert-badge:hover {
	border-color: var(--accent);
	box-shadow: 0 4px 16px rgba(99, 91, 255, 0.1);
	transform: translateY(-2px);
}

.about-cert-badge span {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}

/* ── About CTA ── */
.about-cta {
	background: linear-gradient(135deg, #0e0a30 0%, #1c1260 40%, #635bff 80%, #8b83ff 100%);
	padding: 120px 0;
}

.about-cta-inner {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.about-cta-inner h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 900;
	letter-spacing: -1.5px;
	color: var(--white);
	margin-bottom: 16px;
}

.about-cta-inner p {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 36px;
}

.about-cta-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.about-cta-actions .btn-outline {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.3);
}

.about-cta-actions .btn-outline:hover {
	border-color: #fff;
}

/* ── About responsive ── */
@media (max-width: 1024px) {
	.about-story-grid,
	.about-certs-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.about-mission-grid,
	.about-values-grid,
	.about-capabilities-grid,
	.about-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-stats-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

@media (max-width: 640px) {
	.about-mission-grid,
	.about-values-grid,
	.about-capabilities-grid,
	.about-products-grid {
		grid-template-columns: 1fr;
	}

	.about-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-cta-actions {
		flex-direction: column;
	}
}

/* ═══════════════════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════════════════ */
.cta-banner {
	background: linear-gradient(135deg, #0e0a30 0%, #635bff 35%, #8b83ff 65%, #1c1260 100%);
	padding: 100px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

.cta-banner h2 {
	font-family: var(--font-display);
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 800;
	letter-spacing: -2px;
	color: var(--white);
	margin-bottom: 16px;
	position: relative;
	z-index: 2;
}

.cta-banner p {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 40px;
	position: relative;
	z-index: 2;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer {
	background: linear-gradient(180deg, #040416 0%, #06071b 100%);
	padding: 80px 0 36px;
	border-top: 1px solid var(--white-06);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 60px;
}

.footer-brand {
	margin-bottom: 16px;
}

.footer-brand img {
	height: 40px !important;
	width: auto !important;
	display: block;
}

.footer-tagline {
	font-size: 14px;
	color: var(--white-muted);
	line-height: 1.7;
	max-width: 280px;
}

.footer-col-title {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 20px;
	letter-spacing: 0.5px;
}

.footer-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-links a {
	font-size: 14px;
	color: var(--white-muted);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-links a:hover {
	color: var(--accent-bright);
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-copy {
	font-size: 13px;
	color: var(--white-muted);
}

.footer-socials {
	display: flex;
	gap: 16px;
}

.footer-social-link {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	color: var(--white-muted);
	text-decoration: none;
	font-size: 14px;
	transition: all 0.3s ease;
	min-height: 44px;
	min-width: 44px;
}

.footer-social-link:hover {
	background: var(--accent);
	color: var(--white);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 1024px) {
	.hero-inner,
	.overview-grid,
	.immersive-grid,
	.product-grid,
	.pricing-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.hero-visual {
		order: -1;
	}

	.immersive-images {
		display: block;
	}

	.services-overview-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Service detail page — tablet */
	.svc-hero__inner,
	.svc-breakdown__grid,
	.svc-case {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.svc-case--reversed {
		direction: ltr;
	}

	.svc-hero__visual {
		order: -1;
	}

	.svc-timeline {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.svc-step {
		flex-direction: row;
		text-align: left;
		align-items: flex-start;
		gap: 24px;
		padding: 0 0 32px;
	}

	.svc-step__marker {
		flex-direction: column;
		margin-bottom: 0;
	}

	.svc-step__line {
		position: static;
		width: 2px !important;
		height: 100%;
		transform: none;
		margin-top: 8px;
		background: linear-gradient(180deg, var(--accent), rgba(99, 91, 255, 0.15));
	}

	.svc-step__body {
		padding-top: 4px;
	}

	.svc-problem__stats {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.svc-stack__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* AI/ML page — tablet */
	.svc-capabilities__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.svc-platform__features,
	.svc-usecases__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.svc-hero__stats {
		flex-direction: row;
	}

	/* Consulting page — tablet */
	.consult-models__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
	}

	.consult-method__ring {
		grid-template-columns: repeat(2, 1fr);
	}

	.consult-industries__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.features-grid,
	.specs-grid,
	.pricing-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.container {
		padding: 0 20px;
	}

	.nav {
		padding: 0 20px;
	}

	.nav-toggle {
		display: flex;
	}

	.nav-links {
		display: none;
		position: fixed;
		top: 72px;
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		background: rgba(6, 7, 27, 0.98);
		backdrop-filter: blur(24px);
		padding: 40px 20px;
		gap: 24px;
		align-items: flex-start;
	}

	.nav-links.is-open {
		display: flex;
	}

	.nav-links a {
		font-size: 18px;
	}

	.features-grid,
	.experiences-grid,
	.accessories-grid,
	.specs-grid,
	.pricing-cards {
		grid-template-columns: 1fr;
	}

	.icon-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.features-grid-4,
	.services-grid,
	.services-overview-grid,
	.sub-grid {
		grid-template-columns: 1fr;
	}

	.services-overview {
		padding: 80px 0;
	}

	/* Service detail page — mobile */
	.svc-hero {
		padding: 120px 0 60px;
	}

	.svc-hero__desc {
		max-width: 100%;
	}

	.svc-hero__actions {
		flex-direction: column;
	}

	.svc-hero__actions .btn-primary,
	.svc-hero__actions .btn-secondary {
		width: 100%;
		justify-content: center;
	}

	.svc-problem,
	.svc-breakdown,
	.svc-process,
	.svc-cases {
		padding: 80px 0;
	}

	.svc-stack {
		padding: 60px 0;
	}

	.svc-stack__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.svc-testimonial {
		padding: 60px 0;
	}

	.svc-testimonial__mark {
		font-size: 80px;
	}

	.svc-cta {
		padding: 80px 0;
	}

	.svc-cta__actions {
		flex-direction: column;
	}

	.svc-case__img img {
		height: 240px;
	}

	.svc-breakdown__visual img {
		max-height: 320px;
	}

	/* AI/ML page — mobile */
	.svc-capabilities__grid,
	.svc-platform__features,
	.svc-usecases__grid {
		grid-template-columns: 1fr;
	}

	.svc-capabilities,
	.svc-platform,
	.svc-usecases,
	.svc-research,
	.svc-integration {
		padding: 80px 0;
	}

	.svc-hero__stats {
		flex-direction: column;
	}

	.svc-hero__stat-item {
		border-right: none;
		border-bottom: 1px solid var(--white-06);
	}

	.svc-hero__stat-item:last-child {
		border-bottom: none;
	}

	/* Consulting page — mobile */
	.consult-models__grid {
		max-width: 100%;
	}

	.consult-method__ring,
	.consult-industries__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.consult-models,
	.consult-method,
	.consult-industries {
		padding: 80px 0;
	}

	.svc-hero__credentials {
		flex-direction: column;
	}

	.svc-cap-card {
		padding: 28px 24px;
	}

	.services-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.services-head p {
		text-align: left;
	}

	.sub-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.experiences-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.experiences-header p {
		text-align: left;
	}

	.accessories-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}

	.hero h1 {
		letter-spacing: -2px;
	}

	.product-grid {
		gap: 48px;
	}

	.price-amount {
		font-size: 48px;
	}

	.page-hero {
		padding: 120px 0 60px;
	}

	.page-hero h1 {
		font-size: clamp(28px, 8vw, 42px);
	}

	.product-hero-grid,
	.product-overview-grid,
	.product-contact-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.product-hero-visual {
		order: -1;
	}

	.product-features-grid,
	.product-use-cases-grid,
	.product-industries-grid,
	.product-related-grid,
	.product-gallery-grid {
		grid-template-columns: 1fr;
	}

	.product-form-row {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════
   NAV DROPDOWN (Products menu)
   ═══════════════════════════════════════════════════════════ */
.nav-has-dropdown {
	position: relative;
}

.nav-dropdown-trigger {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
}

.nav-chevron {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.nav-has-dropdown:hover .nav-chevron,
.nav-has-dropdown.is-open .nav-chevron {
	transform: rotate(180deg);
}

.nav-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 0;
	background: rgba(10, 22, 40, 0.97);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(37, 99, 235, 0.18);
	border-radius: 12px;
	min-width: 260px;
	list-style: none;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
	z-index: 1001;
	animation: fadeUp 0.2s ease-out;
}

/* Invisible bridge so hover doesn't break between trigger and dropdown */
.nav-dropdown::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown,
.nav-has-dropdown.is-open .nav-dropdown {
	display: block;
}

.nav-dropdown li {
	list-style: none;
}

.nav-dropdown li a {
	display: block;
	padding: 12px 20px;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--white-muted) !important;
	white-space: nowrap;
	transition: all 0.15s ease;
	border-left: 2px solid transparent;
}

.nav-dropdown li a:hover {
	background: rgba(37, 99, 235, 0.1);
	color: var(--white) !important;
	border-left-color: var(--accent);
}

.nav-dropdown li a::after {
	display: none !important;
}

@media (max-width: 640px) {
	.nav-dropdown {
		position: static;
		transform: none;
		margin-top: 8px;
		padding: 0 0 0 16px;
		background: rgba(255, 255, 255, 0.03);
		border: none;
		border-left: 1px solid rgba(37, 99, 235, 0.2);
		box-shadow: none;
		min-width: 0;
		animation: none;
	}

	.nav-dropdown::before {
		display: none;
	}

	/* On mobile, only show via JS toggle — not hover */
	.nav-has-dropdown:hover .nav-dropdown {
		display: none;
	}

	.nav-has-dropdown.is-open .nav-dropdown {
		display: block;
	}

	.nav-dropdown li a {
		padding: 10px 16px;
		font-size: 16px !important;
		border-left: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGES — SHARED LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* --- Product Hero --- */
.product-hero {
	padding: 140px 0 80px;
	position: relative;
	overflow: hidden;
}

.product-hero::before {
	content: '';
	position: absolute;
	inset: -50%;
	width: 200%;
	height: 200%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
	animation: grain 8s steps(10) infinite;
	pointer-events: none;
	z-index: 0;
}

.product-hero .container {
	position: relative;
	z-index: 1;
}

.product-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.product-hero-content .section-label {
	margin-bottom: 16px;
}

.product-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1.05;
	margin-bottom: 20px;
}

.product-hero-tagline {
	font-size: 17px;
	line-height: 1.7;
	color: var(--white-dim);
	max-width: 480px;
	margin-bottom: 32px;
}

.product-hero-highlights {
	display: flex;
	gap: 32px;
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.product-highlight-value {
	display: block;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 800;
	color: var(--white);
}

.product-highlight-label {
	display: block;
	font-size: 12px;
	color: var(--white-muted);
	margin-top: 2px;
	letter-spacing: 0.3px;
}

.product-hero-actions {
	display: flex;
	gap: 16px;
}

.product-hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.product-hero-img {
	width: 100%;
	max-width: 480px;
	border-radius: 20px;
	filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.25));
	animation: float 6s ease-in-out infinite;
}

.product-hero-video {
	width: 100%;
	max-width: 520px;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
	border: 1px solid var(--white-06);
}

.product-hero-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Distinct gradient per product hero */
.product-hero--625som {
	background: linear-gradient(145deg, #0a1628 0%, #1e3a5f 35%, #2563eb20 70%, #0a1628 100%);
}
.product-hero--625som .section-label { color: var(--accent-bright); }
.product-hero--625som .product-highlight-value { color: var(--accent-bright); }

.product-hero--625evk {
	background: linear-gradient(145deg, #0f1a2e 0%, #0d3b4f 35%, #0e7490aa 70%, #0a1628 100%);
}
.product-hero--625evk .section-label { color: #5eead4; }
.product-hero--625evk .product-highlight-value { color: #5eead4; }

.product-hero--210som {
	background: linear-gradient(145deg, #0d1b2a 0%, #0a3d2e 35%, #059669aa 70%, #0a1628 100%);
}
.product-hero--210som .section-label { color: #34d399; }
.product-hero--210som .product-highlight-value { color: #34d399; }

/* --- Product Overview --- */
.product-overview {
	background: linear-gradient(180deg, #f0f7ff 0%, #e8f0fe 50%, #dde6f4 100%);
	color: var(--ink);
	padding: 100px 0;
}

.product-overview-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 60px;
	align-items: start;
}

.product-overview-content .section-label {
	color: var(--accent);
	margin-bottom: 16px;
}

.product-overview-content h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--ink);
	margin-bottom: 20px;
	line-height: 1.15;
}

.product-overview-desc {
	font-size: 16px;
	line-height: 1.8;
	color: #475569;
	margin-bottom: 24px;
}

.product-overview-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(37, 99, 235, 0.06);
	border: 1px solid rgba(37, 99, 235, 0.12);
	border-radius: 12px;
	margin-top: 8px;
}

.product-badge-accent {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.product-badge-text {
	font-size: 13px;
	color: #64748b;
	line-height: 1.4;
}

/* Quick Specs panel */
.product-overview-specs {
	background: var(--ink);
	border-radius: 20px;
	padding: 36px 32px;
	color: var(--white);
}

.product-specs-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.product-quick-specs {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.product-spec-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	gap: 16px;
}

.product-spec-row:last-child {
	border-bottom: none;
}

.product-spec-row dt {
	font-size: 13px;
	font-weight: 600;
	color: var(--white-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.product-spec-row dd {
	font-size: 13px;
	color: var(--white);
	text-align: right;
	font-weight: 500;
}

/* --- Product Features --- */
.product-features {
	padding: 100px 0;
}

.product-features-header {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 56px;
}

.product-features-header h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	letter-spacing: -1px;
	margin-top: 16px;
}

.product-features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.product-feature-card {
	padding: 28px 24px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	transition: all 0.3s ease;
}

.product-feature-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-3px);
}

.product-feature-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	margin-bottom: 16px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

.product-feature-title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
	margin-bottom: 8px;
}

.product-feature-desc {
	font-size: 13px;
	line-height: 1.65;
	color: var(--white-muted);
}

/* Feature gradient variants */
.product-features--625som {
	background: linear-gradient(180deg, #0a1628 0%, #152540 50%, #1e3a5f 100%);
}
.product-features--625som .section-label { color: var(--accent-bright); }
.product-features--625som .product-feature-icon { background: rgba(37, 99, 235, 0.12); color: var(--accent-bright); }

.product-features--625evk {
	background: linear-gradient(180deg, #0a1a28 0%, #0d3040 50%, #0d3b4f 100%);
}
.product-features--625evk .section-label { color: #5eead4; }
.product-features--625evk .product-feature-icon { background: rgba(94, 234, 212, 0.1); color: #5eead4; }

.product-features--210som {
	background: linear-gradient(180deg, #0d1b2a 0%, #0a2e22 50%, #0a3d2e 100%);
}
.product-features--210som .section-label { color: #34d399; }
.product-features--210som .product-feature-icon { background: rgba(52, 211, 153, 0.1); color: #34d399; }

/* --- Product Use Cases --- */
.product-use-cases {
	padding: 100px 0;
	text-align: center;
}

.product-use-cases h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 800;
	letter-spacing: -1px;
	margin-top: 16px;
	margin-bottom: 12px;
}

.product-use-cases-desc {
	font-size: 16px;
	color: var(--white-muted);
	margin-bottom: 48px;
}

.product-use-cases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px;
	max-width: 900px;
	margin: 0 auto;
}

.product-use-case-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 28px 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	transition: all 0.3s ease;
}

.product-use-case-item:hover {
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-3px);
}

.product-use-case-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
}

.product-use-case-title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

/* Use case gradient variants */
.product-use-cases--625som { background: linear-gradient(180deg, #152540 0%, #1e3a5f 50%, #0a1628 100%); }
.product-use-cases--625som .section-label { color: var(--accent-bright); }
.product-use-cases--625som .product-use-case-icon { color: var(--accent-bright); }

.product-use-cases--625evk { background: linear-gradient(180deg, #0d3040 0%, #0d3b4f 50%, #0a1a28 100%); }
.product-use-cases--625evk .section-label { color: #5eead4; }
.product-use-cases--625evk .product-use-case-icon { color: #5eead4; }

.product-use-cases--210som { background: linear-gradient(180deg, #0a2e22 0%, #0a3d2e 50%, #0d1b2a 100%); }
.product-use-cases--210som .section-label { color: #34d399; }
.product-use-cases--210som .product-use-case-icon { color: #34d399; }

/* --- Product Gallery --- */
.product-gallery {
	background: linear-gradient(180deg, #f0f7ff 0%, #e8f0fe 50%, #f0f7ff 100%);
	color: var(--ink);
	padding: 100px 0;
	text-align: center;
}

.product-gallery .section-label {
	color: var(--accent);
	margin-bottom: 16px;
}

.product-gallery h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--ink);
	margin-bottom: 12px;
}

.product-gallery-desc {
	font-size: 16px;
	color: #64748b;
	margin-bottom: 48px;
}

.product-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	justify-items: center;
}

.product-gallery-grid--3col {
	grid-template-columns: repeat(3, 1fr);
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.product-gallery-item {
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
}

.product-gallery-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
}

.product-gallery-item img {
	width: 100%;
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
}

/* --- Product Architecture --- */
.product-architecture {
	padding: 100px 0;
	text-align: center;
}

.product-architecture .section-label {
	margin-bottom: 16px;
}

.product-architecture h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 12px;
}

.product-arch-desc {
	font-size: 16px;
	color: var(--white-muted);
	max-width: 600px;
	margin: 0 auto 48px;
	line-height: 1.7;
}

.product-arch-diagram {
	max-width: 900px;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 24px;
}

.product-arch-diagram img {
	width: 100%;
	display: block;
	border-radius: 12px;
}

/* Architecture gradient variants */
.product-architecture--625som {
	background: linear-gradient(180deg, #0a1628 0%, #0f1d32 100%);
}
.product-architecture--625som .section-label { color: var(--accent-bright); }

.product-architecture--625evk {
	background: linear-gradient(180deg, #0a1a28 0%, #0d2a3a 100%);
}
.product-architecture--625evk .section-label { color: #5eead4; }

.product-architecture--210som {
	background: linear-gradient(180deg, #0d1b2a 0%, #0a2620 100%);
}
.product-architecture--210som .section-label { color: #34d399; }

/* ═══════════════════════════════════════════════════════════
   IMAGE LIGHTBOX (Product gallery + Architecture diagrams)
   ═══════════════════════════════════════════════════════════ */

/* Zoomable image cursor hint */
img[data-zoomable] {
	cursor: zoom-in;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img[data-zoomable]:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 32px rgba(99, 91, 255, 0.2);
}

/* Lightbox overlay */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(6, 7, 27, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	cursor: zoom-out;
}

.lightbox-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/* Image container — handles zoom + pan */
.lightbox-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.lightbox-inner img {
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
	transform: scale(0.92);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	user-select: none;
	-webkit-user-drag: none;
}

.lightbox-overlay.is-active .lightbox-inner img {
	transform: scale(1);
}

/* Zoomed-in state (click to toggle) */
.lightbox-inner img.is-zoomed {
	max-width: none;
	max-height: none;
	cursor: grab;
	transform: scale(1);
}

.lightbox-inner img.is-zoomed.is-dragging {
	cursor: grabbing;
}

/* Close button */
.lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10001;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	color: var(--white);
	font-size: 20px;
	cursor: pointer;
	transition: background 0.2s ease;
	line-height: 1;
}

.lightbox-close:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* Zoom hint badge */
.lightbox-hint {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10001;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.lightbox-overlay.is-zoomed-in .lightbox-hint {
	opacity: 0;
}

/* Navigation arrows (multi-image gallery) */
.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10001;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	color: var(--white);
	font-size: 18px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.16);
}

.lightbox-nav--prev {
	left: 16px;
}

.lightbox-nav--next {
	right: 16px;
}

.lightbox-nav[hidden] {
	display: none;
}

/* Counter */
.lightbox-counter {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10001;
	font-family: var(--font-mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.lightbox-overlay {
		padding: 16px;
	}

	.lightbox-inner img {
		max-width: 95vw;
		max-height: 80vh;
		border-radius: 8px;
	}

	.lightbox-nav {
		width: 36px;
		height: 36px;
	}

	.lightbox-nav--prev {
		left: 8px;
	}

	.lightbox-nav--next {
		right: 8px;
	}
}

/* --- Product Industries --- */
.product-industries {
	background: linear-gradient(180deg, #f5f7fa 0%, #edf0f4 50%, #f5f7fa 100%);
	color: var(--ink);
	padding: 80px 0;
	text-align: center;
}

.product-industries .section-label {
	color: var(--accent);
	margin-bottom: 16px;
}

.product-industries h2 {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--ink);
	margin-bottom: 48px;
}

.product-industries-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	max-width: 800px;
	margin: 0 auto;
}

.product-industry-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 24px 12px;
	border-radius: 14px;
	transition: all 0.3s ease;
}

.product-industry-item:hover {
	background: rgba(37, 99, 235, 0.04);
}

.product-industry-icon {
	color: var(--accent);
}

.product-industry-title {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	letter-spacing: 0.3px;
}

/* --- Product Related --- */
.product-related {
	background: linear-gradient(180deg, #edf0f4 0%, #f5f7fa 100%);
	color: var(--ink);
	padding: 80px 0;
	text-align: center;
}

.product-related .section-label {
	color: var(--accent);
	margin-bottom: 16px;
}

.product-related h2 {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--ink);
	margin-bottom: 40px;
}

.product-related-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 700px;
	margin: 0 auto;
}

.product-related-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
	display: block;
}

.product-related-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.product-related-img-wrap {
	background: linear-gradient(135deg, #f0f4ff, #e8ecf6);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.product-related-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-related-info {
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-related-title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.product-related-arrow {
	font-size: 18px;
	color: var(--accent);
	transition: transform 0.3s ease;
}

.product-related-card:hover .product-related-arrow {
	transform: translateX(4px);
}

/* --- Product Contact CTA --- */
.product-contact {
	background: linear-gradient(145deg, #0a1628 0%, #1e3a5f 50%, #0a1628 100%);
	padding: 100px 0;
}

.product-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.product-contact h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	letter-spacing: -1.5px;
	margin-bottom: 16px;
}

.product-contact-desc {
	font-size: 16px;
	line-height: 1.7;
	color: var(--white-dim);
	margin-bottom: 32px;
}

.product-contact-options {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-contact-option {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--white-muted);
}

.product-contact-option svg {
	flex-shrink: 0;
	color: var(--accent-bright);
}

/* Contact form */
.product-contact-form {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 36px 32px;
}

.product-contact-form h3 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
}

.product-contact-form > p {
	font-size: 14px;
	color: var(--white-muted);
	margin-bottom: 28px;
}

.product-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.product-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.product-form-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--white-dim);
}

.product-form-field input,
.product-form-field textarea {
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 14px;
	transition: border-color 0.2s;
	min-height: 44px;
}

.product-form-field input:focus,
.product-form-field textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(37, 99, 235, 0.04);
}

.product-form-field textarea {
	resize: vertical;
}

.product-form-submit {
	align-self: flex-start;
	margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGES — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.product-hero-grid,
	.product-overview-grid,
	.product-contact-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.product-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-industries-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.product-hero {
		padding: 110px 0 60px;
	}

	.product-hero-highlights {
		flex-wrap: wrap;
		gap: 20px;
	}

	.product-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.product-features-grid,
	.product-gallery-grid,
	.product-related-grid {
		grid-template-columns: 1fr;
	}

	.product-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-form-row {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════
   PROPOSAL PAGE
   ═══════════════════════════════════════════════════════════ */

/* Hero */
.proposal-hero {
	background: var(--grad-hero);
	padding: 160px 0 80px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.proposal-hero::before {
	content: '';
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(99, 91, 255, 0.12) 0%, transparent 70%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.proposal-hero .section-label {
	color: var(--accent-bright);
	justify-content: center;
	margin-bottom: 24px;
}

.proposal-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 1.1;
	margin-bottom: 20px;
}

.proposal-hero h1 em {
	font-style: normal;
	background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-teal) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.proposal-hero-desc {
	font-size: clamp(16px, 1.4vw, 19px);
	color: var(--white-dim);
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.7;
}

/* Form Section */
.proposal-form-section {
	background: var(--ink);
	padding: 80px 0 120px;
}

.proposal-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 60px;
	align-items: start;
}

/* Form Wrap */
.proposal-form-wrap {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 24px;
	padding: 44px 40px;
}

.proposal-fieldset {
	border: none;
	padding: 0;
	margin: 0 0 36px;
}

.proposal-fieldset legend {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 24px;
	padding: 0;
}

.proposal-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.proposal-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.proposal-row .proposal-field {
	margin-bottom: 0;
}

.proposal-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--white-dim);
}

.proposal-field label span {
	color: var(--accent-warm);
	margin-left: 2px;
}

.proposal-field input,
.proposal-field textarea,
.proposal-field select {
	padding: 13px 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 15px;
	transition: border-color 0.2s, background 0.2s;
	min-height: 44px;
}

.proposal-field input::placeholder,
.proposal-field textarea::placeholder {
	color: var(--white-40);
}

.proposal-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}

.proposal-field select option {
	background: var(--ink-light);
	color: var(--white);
}

.proposal-field select optgroup {
	color: var(--accent-bright);
	font-weight: 600;
}

.proposal-field input:focus,
.proposal-field textarea:focus,
.proposal-field select:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(99, 91, 255, 0.06);
	box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);
}

.proposal-field textarea {
	resize: vertical;
	min-height: 140px;
}

/* Status message */
.proposal-status {
	padding: 16px 20px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 20px;
}

.proposal-status--success {
	background: rgba(45, 212, 191, 0.1);
	border: 1px solid rgba(45, 212, 191, 0.25);
	color: var(--accent-teal);
}

.proposal-status--error {
	background: rgba(255, 107, 107, 0.1);
	border: 1px solid rgba(255, 107, 107, 0.25);
	color: var(--accent-warm);
}

/* Submit button */
.proposal-submit {
	width: 100%;
	justify-content: center;
	font-size: 16px;
	padding: 16px 32px;
	margin-top: 8px;
}

.proposal-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

.proposal-submit svg {
	transition: transform 0.3s;
}

.proposal-submit:not(:disabled):hover svg {
	transform: translateX(3px);
}

/* Sidebar */
.proposal-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 100px;
}

.proposal-sidebar-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	padding: 32px 28px;
}

.proposal-sidebar-card h3 {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 20px;
}

/* Steps */
.proposal-steps {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.proposal-steps li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.proposal-step-num {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(99, 91, 255, 0.12);
	border: 1px solid rgba(99, 91, 255, 0.25);
	color: var(--accent-bright);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.proposal-steps li strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	margin-bottom: 4px;
}

.proposal-steps li p {
	font-size: 13px;
	color: var(--white-muted);
	line-height: 1.5;
}

/* Perks */
.proposal-perks {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.proposal-perks li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--white-dim);
}

.proposal-perks li svg {
	flex-shrink: 0;
}

/* Direct contact card */
.proposal-sidebar-contact {
	text-align: center;
}

.proposal-sidebar-contact p {
	font-size: 14px;
	color: var(--white-muted);
	margin-bottom: 12px;
}

.proposal-email-link {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	color: var(--accent-bright);
	text-decoration: none;
	transition: color 0.2s;
}

.proposal-email-link:hover {
	color: var(--white);
}

/* ─── Proposal Responsive ─── */
@media (max-width: 1024px) {
	.proposal-layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.proposal-sidebar {
		position: static;
	}
}

@media (max-width: 640px) {
	.proposal-hero {
		padding: 130px 0 60px;
	}

	.proposal-form-wrap {
		padding: 28px 20px;
	}

	.proposal-row {
		grid-template-columns: 1fr;
	}

	.proposal-sidebar-card {
		padding: 24px 20px;
	}
}

/* ═══════════════════════════════════════════════════════════
   SOFTWARE DEVELOPMENT PAGE (P02)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero Stats Bar ── */
.svc-hero--dev .svc-hero__stats {
	display: flex;
	gap: 32px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--white-12);
}

.svc-hero__stat-item {
	display: flex;
	flex-direction: column;
}

.svc-hero__stat-val {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 900;
	color: var(--accent-bright);
	letter-spacing: -0.5px;
	line-height: 1;
}

.svc-hero__stat-lbl {
	font-size: 12px;
	font-weight: 600;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 4px;
}

/* ── Code Editor Mockup ── */
.sd-code-editor {
	background: #0d1117;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
	position: relative;
	z-index: 1;
}

.sd-code-editor__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	background: #161b22;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sd-code-editor__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.sd-code-editor__dot--red { background: #ff5f57; }
.sd-code-editor__dot--yellow { background: #febc2e; }
.sd-code-editor__dot--green { background: #28c840; }

.sd-code-editor__filename {
	margin-left: 12px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--white-40);
}

.sd-code-editor__body {
	padding: 24px;
	position: relative;
	min-height: 360px;
}

.sd-code-editor__pre {
	margin: 0;
	line-height: 1.75;
}

.sd-code-editor__code {
	font-family: var(--font-mono);
	font-size: 13.5px;
	color: #c9d1d9;
	white-space: pre;
}

.sd-hl-keyword { color: #ff7b72; }
.sd-hl-string  { color: #a5d6ff; }
.sd-hl-fn      { color: #d2a8ff; }
.sd-hl-type    { color: #79c0ff; }
.sd-hl-prop    { color: #7ee787; }
.sd-hl-num     { color: #ffa657; }
.sd-hl-param   { color: #ffa657; }
.sd-hl-comment { color: #8b949e; font-style: italic; }

.sd-code-editor__cursor {
	display: inline-block;
	width: 2px;
	height: 18px;
	background: var(--accent-bright);
	animation: cursor-blink 1s step-end infinite;
	vertical-align: text-bottom;
	margin-left: 2px;
}

@keyframes cursor-blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* ── Services Grid (Section 2) ── */
.sd-services {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #e4e2f4 100%);
	color: var(--ink);
	padding: 120px 0;
}

.sd-services__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.sd-services__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.sd-services__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--ink);
}

.sd-services__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.sd-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sd-svc-card {
	background: var(--white);
	border: 1px solid rgba(99, 91, 255, 0.08);
	border-radius: 20px;
	padding: 36px 28px;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.sd-svc-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.sd-svc-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 56px rgba(99, 91, 255, 0.12);
	border-color: rgba(99, 91, 255, 0.2);
}

.sd-svc-card:hover::before {
	opacity: 1;
}

.sd-svc-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	flex-shrink: 0;
}

.sd-svc-card__icon--purple { background: rgba(99, 91, 255, 0.1); color: #635bff; }
.sd-svc-card__icon--blue   { background: rgba(56, 189, 248, 0.1); color: #38bdf8; }
.sd-svc-card__icon--teal   { background: rgba(45, 212, 191, 0.1); color: #2dd4bf; }
.sd-svc-card__icon--orange { background: rgba(255, 166, 87, 0.1); color: #ffa657; }
.sd-svc-card__icon--sky    { background: rgba(56, 189, 248, 0.1); color: #38bdf8; }
.sd-svc-card__icon--pink   { background: rgba(255, 107, 157, 0.1); color: #ff6b9d; }

.sd-svc-card__icon--purple + h3 ~ p ~ .sd-svc-card__link { color: #635bff; }
.sd-svc-card__icon--blue   + h3 ~ p ~ .sd-svc-card__link { color: #38bdf8; }
.sd-svc-card__icon--teal   + h3 ~ p ~ .sd-svc-card__link { color: #2dd4bf; }
.sd-svc-card__icon--orange + h3 ~ p ~ .sd-svc-card__link { color: #ffa657; }
.sd-svc-card__icon--sky    + h3 ~ p ~ .sd-svc-card__link { color: #38bdf8; }
.sd-svc-card__icon--pink   + h3 ~ p ~ .sd-svc-card__link { color: #ff6b9d; }

.sd-svc-card:nth-child(1)::before { background: linear-gradient(90deg, #635bff, #8b83ff); }
.sd-svc-card:nth-child(2)::before { background: linear-gradient(90deg, #38bdf8, #7dd3fc); }
.sd-svc-card:nth-child(3)::before { background: linear-gradient(90deg, #2dd4bf, #5eead4); }
.sd-svc-card:nth-child(4)::before { background: linear-gradient(90deg, #ffa657, #fbbf24); }
.sd-svc-card:nth-child(5)::before { background: linear-gradient(90deg, #38bdf8, #818cf8); }
.sd-svc-card:nth-child(6)::before { background: linear-gradient(90deg, #ff6b9d, #f472b6); }

.sd-svc-card h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 10px;
}

.sd-svc-card p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-muted);
	flex: 1;
}

.sd-svc-card__link {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	margin-top: 16px;
	letter-spacing: 0.3px;
	transition: transform 0.3s;
}

.sd-svc-card:hover .sd-svc-card__link {
	transform: translateX(4px);
}

/* ── Technology Expertise Tabs (Section 3) ── */
.sd-tech {
	background: linear-gradient(155deg, #0e0a30 0%, #1c1260 50%, #0e0a30 100%);
	padding: 120px 0;
}

.sd-tech__head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 48px;
}

.sd-tech__head .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.sd-tech__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 44px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
}

.sd-tech__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--white-60);
}

.sd-tabs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}

.sd-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--white-60);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	min-height: 44px;
}

.sd-tab:hover {
	color: var(--white);
	background: rgba(99, 91, 255, 0.1);
	border-color: var(--accent-bright);
}

.sd-tab--active {
	color: var(--white);
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 4px 20px rgba(99, 91, 255, 0.3);
}

.sd-tab__icon {
	display: flex;
	align-items: center;
}

.sd-panel__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.sd-tech-badge {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	padding: 24px;
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.sd-tech-badge:hover {
	background: rgba(99, 91, 255, 0.08);
	border-color: var(--accent-bright);
	transform: translateY(-3px);
}

.sd-tech-badge__info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.sd-tech-badge__name {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
}

.sd-tech-badge__pct {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--accent-bright);
}

.sd-tech-badge__bar {
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	overflow: hidden;
}

.sd-tech-badge__fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--accent), var(--accent-bright));
	border-radius: 100px;
	transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-panel:not([hidden]) .sd-tech-badge__fill {
	width: var(--fill-w);
}

/* ── Development Process Stepper (Section 4) ── */
.sd-process {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #f7f8fc 100%);
	color: var(--ink);
	padding: 120px 0;
}

.sd-process__head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 64px;
}

.sd-process__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.sd-process__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--ink);
}

.sd-process__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.sd-stepper {
	max-width: 680px;
	margin: 0 auto;
}

.sd-step {
	display: flex;
	gap: 28px;
	position: relative;
}

.sd-step__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.sd-step__num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	position: relative;
	z-index: 2;
	box-shadow: 0 4px 20px rgba(99, 91, 255, 0.3);
}

.sd-step__connector {
	width: 2px;
	flex: 1;
	min-height: 32px;
	background: linear-gradient(180deg, var(--accent) 0%, rgba(99, 91, 255, 0.15) 100%);
	margin: 8px 0;
}

.sd-step__content {
	padding-bottom: 40px;
}

.sd-step:last-child .sd-step__content {
	padding-bottom: 0;
}

.sd-step__icon {
	font-size: 28px;
	display: block;
	margin-bottom: 10px;
}

.sd-step__content h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
}

.sd-step__content p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-muted);
}

/* ── Portfolio Showcase (Section 5) ── */
.sd-portfolio {
	background: linear-gradient(155deg, #0e0a30 0%, #131438 50%, #0e0a30 100%);
	padding: 120px 0;
}

.sd-portfolio__head {
	text-align: center;
	margin-bottom: 56px;
}

.sd-portfolio__head .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.sd-portfolio__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
}

.sd-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.sd-project {
	border-radius: 20px;
	padding: 36px;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	display: flex;
	flex-direction: column;
}

.sd-project::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.85;
	border-radius: 20px;
	z-index: 0;
}

.sd-project > * {
	position: relative;
	z-index: 1;
}

.sd-project--purple { background: linear-gradient(135deg, #1c1260 0%, #3b2fa0 50%, #635bff 100%); }
.sd-project--blue   { background: linear-gradient(135deg, #0c3547 0%, #1a5e8a 50%, #38bdf8 100%); }
.sd-project--teal   { background: linear-gradient(135deg, #0a3028 0%, #166050 50%, #2dd4bf 100%); }
.sd-project--orange { background: linear-gradient(135deg, #3b2000 0%, #7a4a10 50%, #ffa657 100%); }

.sd-project:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3);
}

.sd-project__header {
	margin-bottom: 20px;
}

.sd-project__metric {
	display: inline-block;
	padding: 6px 16px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: 0.5px;
}

.sd-project__title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 800;
	color: var(--white);
	margin-bottom: 12px;
	letter-spacing: -0.5px;
}

.sd-project__desc {
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 20px;
	flex: 1;
}

.sd-project__stack {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sd-project__tag {
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.3px;
}

/* ── Code Quality Section (Section 6) ── */
.sd-quality {
	background: linear-gradient(155deg, #0a0820 0%, #1a1050 50%, #0a0820 100%);
	padding: 120px 0;
}

.sd-quality__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.sd-quality__text .section-label {
	color: var(--accent-bright);
	margin-bottom: 20px;
}

.sd-quality__text h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.15;
	margin-bottom: 40px;
}

.sd-quality__metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.sd-quality__metric {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.sd-quality__metric:hover {
	background: rgba(99, 91, 255, 0.08);
	border-color: var(--accent-bright);
}

.sd-quality__metric-icon {
	font-size: 24px;
	flex-shrink: 0;
}

.sd-quality__metric-val {
	display: block;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 900;
	color: var(--accent-bright);
	line-height: 1.2;
}

.sd-quality__metric-lbl {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--white-60);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ── Quality Dashboard Mockup ── */
.sd-dash {
	background: #0d1117;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sd-dash__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	background: #161b22;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sd-dash__title {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--white-dim);
}

.sd-dash__status {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.sd-dash__status--live {
	background: rgba(45, 212, 191, 0.15);
	color: var(--accent-teal);
	animation: pulse 2s ease-in-out infinite;
}

.sd-dash__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 16px 24px;
}

.sd-dash__row:last-child {
	padding-bottom: 24px;
}

.sd-dash__card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 16px;
}

.sd-dash__card-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.sd-dash__card-value {
	display: block;
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 900;
	color: var(--white);
	margin-bottom: 12px;
}

.sd-dash__card-value--green { color: var(--accent-teal); }

.sd-dash__bar {
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 100px;
	overflow: hidden;
}

.sd-dash__bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent-teal), #5eead4);
	border-radius: 100px;
	transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-dash__bar-fill--teal {
	background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.sd-dash__builds {
	display: flex;
	gap: 4px;
	margin-top: 4px;
}

.sd-dash__build-dot {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}

.sd-dash__build-dot--pass {
	background: rgba(45, 212, 191, 0.3);
}

.sd-dash__build-dot--pass:nth-child(odd) {
	background: rgba(45, 212, 191, 0.5);
}

/* ── CTA variant ── */
.svc-cta--dev {
	background: linear-gradient(135deg, #1c1260 0%, #635bff 40%, #38bdf8 100%);
}

/* ═══ Software Development — Responsive ═══ */
@media (max-width: 1024px) {
	.sd-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sd-panel__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sd-portfolio__grid {
		grid-template-columns: 1fr;
	}

	.sd-quality__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.sd-dash__row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.sd-services {
		padding: 80px 0;
	}

	.sd-services__grid {
		grid-template-columns: 1fr;
	}

	.sd-tech {
		padding: 80px 0;
	}

	.sd-tabs {
		gap: 6px;
	}

	.sd-tab {
		padding: 10px 18px;
		font-size: 13px;
	}

	.sd-panel__grid {
		grid-template-columns: 1fr;
	}

	.sd-process {
		padding: 80px 0;
	}

	.sd-portfolio {
		padding: 80px 0;
	}

	.sd-quality {
		padding: 80px 0;
	}

	.sd-quality__metrics {
		grid-template-columns: 1fr;
	}

	.svc-hero--dev .svc-hero__stats {
		flex-direction: column;
		gap: 20px;
	}

	.sd-dash__header {
		padding: 12px 16px;
	}

	.sd-dash__row {
		padding: 12px 16px;
	}

	.sd-dash__card-value {
		font-size: 20px;
	}
}

/* ═══════════════════════════════════════════════════════════
   CYBERSECURITY & DATA PROTECTION PAGE (P04)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero modifier (Cyber variant) ── */
.svc-hero--cyber {
	background: linear-gradient(155deg, #000000 0%, #0a1628 25%, #071a12 55%, #0a0f1a 100%);
	overflow: hidden;
}

.svc-hero__glow--cyber {
	background: radial-gradient(circle, rgba(0, 255, 135, 0.15) 0%, transparent 70%);
}

/* Hero stats bar (cyber variant) */
.cs-hero-stats {
	display: flex;
	gap: 32px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--white-12);
}

.cs-hero-stats .svc-hero__stat-val {
	color: #00ff87;
}

/* ── Shield animation ── */
.cs-shield {
	position: relative;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.cs-shield__outer {
	position: relative;
	width: 200px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cs-shield__inner {
	width: 120px;
	height: 120px;
	background: linear-gradient(135deg, rgba(0, 255, 135, 0.15), rgba(0, 200, 100, 0.08));
	border: 2px solid rgba(0, 255, 135, 0.3);
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	position: relative;
	animation: pulse-glow-green 3s ease-in-out infinite;
}

@keyframes pulse-glow-green {
	0%, 100% { box-shadow: 0 0 30px rgba(0, 255, 135, 0.2), inset 0 0 30px rgba(0, 255, 135, 0.05); }
	50% { box-shadow: 0 0 60px rgba(0, 255, 135, 0.4), inset 0 0 40px rgba(0, 255, 135, 0.1); }
}

.cs-shield__icon {
	color: #00ff87;
}

.cs-shield__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(0, 255, 135, 0.15);
	animation: rotate-slow 20s linear infinite;
}

.cs-shield__ring--1 {
	width: 180px;
	height: 180px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: dashed;
}

.cs-shield__ring--2 {
	width: 240px;
	height: 240px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-direction: reverse;
	animation-duration: 30s;
	border-color: rgba(0, 255, 135, 0.08);
}

.cs-shield__ring--3 {
	width: 300px;
	height: 300px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-duration: 40s;
	border-color: rgba(0, 255, 135, 0.05);
	border-style: dotted;
}

/* Data rain effect */
.cs-shield__data-rain {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.15;
}

.cs-rain-col {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 11px;
	color: #00ff87;
	writing-mode: vertical-rl;
	animation: rain-fall 8s linear infinite;
	letter-spacing: 4px;
}

.cs-rain-col--1 { left: 10%; animation-delay: 0s; }
.cs-rain-col--2 { left: 35%; animation-delay: -2s; }
.cs-rain-col--3 { right: 30%; animation-delay: -4s; }
.cs-rain-col--4 { right: 10%; animation-delay: -6s; }

@keyframes rain-fall {
	0% { transform: translateY(-100%); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateY(400px); opacity: 0; }
}

/* Hero particles */
.cs-hero-particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.cs-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(0, 255, 135, 0.4);
	animation: particle-float 12s ease-in-out infinite;
}

.cs-particle--1 { top: 20%; left: 15%; animation-delay: 0s; }
.cs-particle--2 { top: 60%; left: 80%; animation-delay: -2s; width: 3px; height: 3px; }
.cs-particle--3 { top: 40%; left: 60%; animation-delay: -4s; width: 5px; height: 5px; }
.cs-particle--4 { top: 80%; left: 25%; animation-delay: -6s; }
.cs-particle--5 { top: 10%; left: 70%; animation-delay: -8s; width: 3px; height: 3px; }
.cs-particle--6 { top: 70%; left: 45%; animation-delay: -10s; width: 6px; height: 6px; opacity: 0.3; }

@keyframes particle-float {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
	25% { transform: translate(30px, -40px) scale(1.2); opacity: 0.8; }
	50% { transform: translate(-20px, -80px) scale(0.8); opacity: 0.3; }
	75% { transform: translate(40px, -30px) scale(1.1); opacity: 0.6; }
}

/* ── Section 2: Threat Landscape ── */
.cs-threats {
	background: linear-gradient(180deg, #f7f8fc 0%, #f0f1f7 50%, #e8e7f0 100%);
	padding: 120px 0;
}

.cs-threats__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.cs-threats__head .section-label {
	color: var(--accent-warm);
	margin-bottom: 20px;
}

.cs-threats__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	color: var(--ink);
}

.cs-threats__head p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-muted);
	margin-top: 16px;
}

.cs-threats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.cs-threat-card {
	background: #fff;
	border-radius: 20px;
	padding: 40px 32px;
	text-align: center;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.cs-threat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 20px 20px 0 0;
}

.cs-threat-card--red::before { background: linear-gradient(90deg, #ff4444, #ff6b6b); }
.cs-threat-card--orange::before { background: linear-gradient(90deg, #ff8c00, #ffa657); }
.cs-threat-card--amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.cs-threat-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.cs-threat-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.cs-threat-card--red .cs-threat-card__icon {
	background: rgba(255, 68, 68, 0.08);
	color: #ff4444;
}

.cs-threat-card--orange .cs-threat-card__icon {
	background: rgba(255, 140, 0, 0.08);
	color: #ff8c00;
}

.cs-threat-card--amber .cs-threat-card__icon {
	background: rgba(245, 158, 11, 0.08);
	color: #f59e0b;
}

.cs-threat-card__value {
	display: block;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 1;
	color: var(--ink);
	margin-bottom: 12px;
}

.cs-threat-card__label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-muted);
}

/* ── Section 3: Security Services ── */
.cs-services {
	background: linear-gradient(155deg, #0a0f1a 0%, #0d1f15 40%, #0a1a2e 70%, #0a0f1a 100%);
	padding: 120px 0;
}

.cs-services__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.cs-services__head .section-label {
	color: #00ff87;
	margin-bottom: 20px;
}

.cs-services__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
}

.cs-services__head p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--white-60);
	margin-top: 16px;
}

.cs-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cs-svc-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	padding: 36px 28px 28px;
	position: relative;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, background 0.4s ease;
}

.cs-svc-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cs-svc-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.06);
}

.cs-svc-card:hover::before {
	opacity: 1;
}

/* Color variants */
.cs-svc-card--green::before { background: linear-gradient(90deg, #00ff87, #00cc6a); }
.cs-svc-card--blue::before { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
.cs-svc-card--purple::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.cs-svc-card--teal::before { background: linear-gradient(90deg, #2dd4bf, #14b8a6); }
.cs-svc-card--rose::before { background: linear-gradient(90deg, #fb7185, #e11d48); }

.cs-svc-card:hover {
	border-color: rgba(255, 255, 255, 0.12);
}

.cs-svc-card--green:hover { border-color: rgba(0, 255, 135, 0.2); }
.cs-svc-card--blue:hover { border-color: rgba(56, 189, 248, 0.2); }
.cs-svc-card--purple:hover { border-color: rgba(167, 139, 250, 0.2); }
.cs-svc-card--teal:hover { border-color: rgba(45, 212, 191, 0.2); }
.cs-svc-card--rose:hover { border-color: rgba(251, 113, 133, 0.2); }

.cs-svc-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.cs-svc-card--green .cs-svc-card__icon { background: rgba(0, 255, 135, 0.1); color: #00ff87; }
.cs-svc-card--blue .cs-svc-card__icon { background: rgba(56, 189, 248, 0.1); color: #38bdf8; }
.cs-svc-card--purple .cs-svc-card__icon { background: rgba(167, 139, 250, 0.1); color: #a78bfa; }
.cs-svc-card--teal .cs-svc-card__icon { background: rgba(45, 212, 191, 0.1); color: #2dd4bf; }
.cs-svc-card--rose .cs-svc-card__icon { background: rgba(251, 113, 133, 0.1); color: #fb7185; }

.cs-svc-card h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--white);
}

.cs-svc-card p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--white-60);
	margin-bottom: 18px;
}

.cs-svc-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cs-svc-card__tag {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--white-40);
	letter-spacing: 0.3px;
}

/* Last two cards span the grid for 3+2 layout */
.cs-services__grid .cs-svc-card:nth-child(4) {
	grid-column: 1 / 2;
}

.cs-services__grid .cs-svc-card:nth-child(5) {
	grid-column: 2 / 4;
}

/* ── Section 4: Authentication Comparison ── */
.cs-compare {
	background: linear-gradient(180deg, #f7f8fc 0%, #f0f1f7 50%, #e8e7f0 100%);
	padding: 120px 0;
}

.cs-compare__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.cs-compare__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.cs-compare__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	color: var(--ink);
}

.cs-compare__head p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-muted);
	margin-top: 16px;
}

.cs-compare__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.cs-compare__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.cs-compare__table thead {
	background: linear-gradient(135deg, #0a0f1a 0%, #131438 100%);
}

.cs-compare__table th {
	padding: 24px 28px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.cs-compare__table th:first-child {
	border-radius: 20px 0 0 0;
}

.cs-compare__table th:last-child {
	border-radius: 0 20px 0 0;
}

.cs-compare__tech-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	margin-right: 10px;
	vertical-align: middle;
	color: #00ff87;
}

.cs-compare__table td {
	padding: 20px 28px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--text-body);
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.cs-compare__table tbody tr:last-child td {
	border-bottom: none;
}

.cs-compare__table tbody tr {
	transition: background 0.2s ease;
}

.cs-compare__table tbody tr:hover {
	background: rgba(99, 91, 255, 0.03);
}

.cs-compare__feature {
	font-weight: 700;
	color: var(--ink);
}

/* ── Section 5: Compliance & Certifications ── */
.cs-compliance {
	background: linear-gradient(155deg, #0a0f1a 0%, #0e1e30 40%, #0d1a12 70%, #0a0f1a 100%);
	padding: 120px 0;
}

.cs-compliance__head {
	text-align: center;
	margin-bottom: 64px;
}

.cs-compliance__head .section-label {
	color: #00ff87;
	margin-bottom: 20px;
}

.cs-compliance__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
}

.cs-compliance__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cs-cert {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	padding: 36px 28px;
	text-align: center;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.cs-cert:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 255, 135, 0.2);
	box-shadow: 0 0 40px rgba(0, 255, 135, 0.08);
}

.cs-cert__icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: rgba(0, 255, 135, 0.08);
	color: #00ff87;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	transition: box-shadow 0.4s ease;
}

.cs-cert:hover .cs-cert__icon {
	box-shadow: 0 0 30px rgba(0, 255, 135, 0.15);
}

.cs-cert h3 {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 8px;
}

.cs-cert p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--white-60);
}

/* ── Section 6: Incident Response ── */
.cs-incident {
	background: linear-gradient(180deg, #f7f8fc 0%, #f0f1f7 50%, #e8e7f0 100%);
	padding: 120px 0;
}

.cs-incident__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.cs-incident__head .section-label {
	color: var(--accent-warm);
	margin-bottom: 20px;
}

.cs-incident__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	color: var(--ink);
}

.cs-incident__head p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-muted);
	margin-top: 16px;
}

.cs-incident__sla {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 10px 24px;
	background: rgba(0, 200, 100, 0.08);
	border: 1px solid rgba(0, 200, 100, 0.2);
	border-radius: 100px;
}

.cs-incident__sla-icon {
	color: #00cc64;
	display: flex;
}

.cs-incident__sla-text {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: #00884a;
	letter-spacing: 0.3px;
}

.cs-incident__timeline {
	max-width: 700px;
	margin: 0 auto;
}

.cs-ir-step {
	display: flex;
	gap: 28px;
	padding-bottom: 40px;
}

.cs-ir-step:last-child {
	padding-bottom: 0;
}

.cs-ir-step__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	position: relative;
}

.cs-ir-step__num {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--ink);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.cs-ir-step__status {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
	top: -3px;
	right: -3px;
	z-index: 3;
	border: 2px solid #f7f8fc;
}

.cs-ir-step__status--green { background: #22c55e; }
.cs-ir-step__status--amber { background: #f59e0b; }
.cs-ir-step__status--red { background: #ef4444; }

.cs-ir-step__line {
	width: 2px;
	flex: 1;
	background: linear-gradient(180deg, var(--ink) 0%, rgba(6, 7, 27, 0.1) 100%);
	margin-top: 8px;
}

.cs-ir-step__body {
	padding-top: 4px;
}

.cs-ir-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(99, 91, 255, 0.06);
	color: var(--accent);
	margin-bottom: 14px;
}

.cs-ir-step__body h3 {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
}

.cs-ir-step__body p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-muted);
}

/* ── CTA Cyber variant ── */
.svc-cta--cyber {
	background: linear-gradient(135deg, #0a1a2e 0%, #0d3320 40%, #00ff87 100%);
}

.cs-cta-hex {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 60px 70px;
	pointer-events: none;
}

.svc-cta--cyber .svc-cta h2,
.svc-cta--cyber h2 {
	color: var(--white);
}

.svc-cta--cyber .svc-cta__link {
	color: var(--white);
}

/* ═══ Cybersecurity — Responsive ═══ */
@media (max-width: 1024px) {
	.cs-threats__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
	}

	.cs-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cs-services__grid .cs-svc-card:nth-child(4),
	.cs-services__grid .cs-svc-card:nth-child(5) {
		grid-column: auto;
	}

	.cs-compliance__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cs-compare__table th,
	.cs-compare__table td {
		padding: 16px 20px;
		font-size: 13px;
	}
}

@media (max-width: 768px) {
	.cs-shield__ring--2,
	.cs-shield__ring--3 {
		display: none;
	}

	.cs-shield__data-rain {
		display: none;
	}

	.cs-hero-stats {
		flex-wrap: wrap;
		gap: 20px;
	}

	.cs-hero-stats .svc-hero__stat-item {
		min-width: calc(50% - 10px);
	}
}

@media (max-width: 640px) {
	.cs-threats {
		padding: 80px 0;
	}

	.cs-services {
		padding: 80px 0;
	}

	.cs-services__grid {
		grid-template-columns: 1fr;
	}

	.cs-compare {
		padding: 80px 0;
	}

	.cs-compare__table th,
	.cs-compare__table td {
		padding: 14px 16px;
		font-size: 12.5px;
	}

	.cs-compliance {
		padding: 80px 0;
	}

	.cs-compliance__grid {
		grid-template-columns: 1fr;
	}

	.cs-incident {
		padding: 80px 0;
	}

	.cs-ir-step {
		gap: 18px;
	}

	.cs-hero-stats {
		flex-direction: column;
		gap: 16px;
	}

	.cs-hero-stats .svc-hero__stat-item {
		min-width: unset;
	}

	.cs-hero-particles {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   DATA MANAGEMENT & CONVERSION PAGE (P07)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero modifier (Data variant) ── */
.svc-hero--data {
	background: linear-gradient(155deg, #06071b 0%, #0a1e2e 30%, #0d2a2a 60%, #06071b 100%);
	overflow: hidden;
}

.svc-hero__glow--data {
	background: radial-gradient(circle, rgba(45, 212, 191, 0.15) 0%, transparent 70%);
}

/* Hero stats */
.dm-hero-stats {
	display: flex;
	gap: 32px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--white-12);
}

.dm-hero-stats .svc-hero__stat-val {
	color: var(--accent-teal);
}

/* ── Data flow background ── */
.dm-flow-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.dm-flow-stream {
	position: absolute;
	height: 2px;
	border-radius: 2px;
	opacity: 0.12;
}

.dm-flow-stream--1 {
	top: 30%;
	left: -10%;
	width: 120%;
	background: linear-gradient(90deg, transparent, var(--accent-teal), transparent);
	animation: flow-stream 6s linear infinite;
}

.dm-flow-stream--2 {
	top: 55%;
	left: -10%;
	width: 120%;
	background: linear-gradient(90deg, transparent, var(--accent-sky), transparent);
	animation: flow-stream 8s linear infinite;
	animation-delay: -3s;
}

.dm-flow-stream--3 {
	top: 78%;
	left: -10%;
	width: 120%;
	background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
	animation: flow-stream 7s linear infinite;
	animation-delay: -5s;
}

@keyframes flow-stream {
	0% { transform: translateX(-30%); opacity: 0; }
	20% { opacity: 0.15; }
	80% { opacity: 0.15; }
	100% { transform: translateX(30%); opacity: 0; }
}

/* ── Hero visual — orbit diagram ── */
.dm-visual {
	position: relative;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.dm-visual__core {
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.15), rgba(45, 212, 191, 0.05));
	border: 2px solid rgba(45, 212, 191, 0.3);
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	position: relative;
	color: var(--accent-teal);
	animation: pulse-glow-teal 3s ease-in-out infinite;
}

@keyframes pulse-glow-teal {
	0%, 100% { box-shadow: 0 0 30px rgba(45, 212, 191, 0.2); }
	50% { box-shadow: 0 0 60px rgba(45, 212, 191, 0.4); }
}

.dm-visual__orbit {
	position: absolute;
	border-radius: 50%;
	border: 1px dashed rgba(45, 212, 191, 0.12);
	animation: rotate-slow 25s linear infinite;
}

.dm-visual__orbit--1 {
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dm-visual__orbit--2 {
	width: 280px;
	height: 280px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-direction: reverse;
	animation-duration: 35s;
	border-color: rgba(56, 189, 248, 0.1);
}

.dm-visual__orbit--3 {
	width: 360px;
	height: 360px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-duration: 45s;
	border-color: rgba(139, 131, 255, 0.08);
}

.dm-visual__node {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	letter-spacing: 0.5px;
	animation: rotate-slow 25s linear infinite reverse;
}

.dm-visual__orbit--2 .dm-visual__node {
	animation-duration: 35s;
	animation-direction: normal;
}

.dm-visual__orbit--3 .dm-visual__node {
	animation-duration: 45s;
	animation-direction: reverse;
}

.dm-visual__node--csv  { top: 0; left: 50%; transform: translateX(-50%); background: rgba(45, 212, 191, 0.15); color: var(--accent-teal); border: 1px solid rgba(45, 212, 191, 0.25); }
.dm-visual__node--xml  { bottom: 0; left: 50%; transform: translateX(-50%); background: rgba(45, 212, 191, 0.15); color: var(--accent-teal); border: 1px solid rgba(45, 212, 191, 0.25); }
.dm-visual__node--json { top: 50%; right: 0; transform: translateY(-50%); background: rgba(56, 189, 248, 0.15); color: var(--accent-sky); border: 1px solid rgba(56, 189, 248, 0.25); }
.dm-visual__node--sql  { top: 50%; left: 0; transform: translateY(-50%); background: rgba(56, 189, 248, 0.15); color: var(--accent-sky); border: 1px solid rgba(56, 189, 248, 0.25); }
.dm-visual__node--pdf  { top: 15%; right: 5%; background: rgba(139, 131, 255, 0.15); color: var(--accent-bright); border: 1px solid rgba(139, 131, 255, 0.25); }
.dm-visual__node--tiff { bottom: 15%; left: 5%; background: rgba(139, 131, 255, 0.15); color: var(--accent-bright); border: 1px solid rgba(139, 131, 255, 0.25); }

.dm-visual__pulse {
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 1px solid rgba(45, 212, 191, 0.1);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: dm-pulse-ring 3s ease-out infinite;
}

.dm-visual__pulse--2 {
	animation-delay: 1.5s;
}

@keyframes dm-pulse-ring {
	0% { width: 100px; height: 100px; opacity: 0.5; }
	100% { width: 400px; height: 400px; opacity: 0; }
}

/* ── Section 2: Services ── */
.dm-services {
	background: linear-gradient(180deg, #f7f8fc 0%, #f0f1f7 50%, #e8e7f0 100%);
	padding: 120px 0;
	color: #3d3e5c;
}

.dm-services__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.dm-services__head .section-label {
	color: #14b8a6;
	margin-bottom: 20px;
}

.dm-services__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	color: #06071b;
}

.dm-services__head p {
	font-size: 17px;
	line-height: 1.7;
	color: #6b6d8a;
	margin-top: 16px;
}

.dm-services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

.dm-svc-card {
	background: #fff;
	border-radius: 20px;
	padding: 36px 32px;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.dm-svc-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 20px 20px 0 0;
}

.dm-svc-card--teal::before   { background: linear-gradient(90deg, #2dd4bf, #14b8a6); }
.dm-svc-card--blue::before   { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
.dm-svc-card--green::before  { background: linear-gradient(90deg, #22c55e, #16a34a); }
.dm-svc-card--violet::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }

.dm-svc-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.dm-svc-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.dm-svc-card--teal .dm-svc-card__icon   { background: rgba(45, 212, 191, 0.1); color: #14b8a6; }
.dm-svc-card--blue .dm-svc-card__icon   { background: rgba(56, 189, 248, 0.1); color: #0ea5e9; }
.dm-svc-card--green .dm-svc-card__icon  { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.dm-svc-card--violet .dm-svc-card__icon { background: rgba(167, 139, 250, 0.1); color: #7c3aed; }

.dm-svc-card h3 {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	color: #06071b;
	margin-bottom: 10px;
}

.dm-svc-card p {
	font-size: 14.5px;
	line-height: 1.7;
	color: #6b6d8a;
	margin-bottom: 18px;
}

.dm-svc-card__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dm-svc-card__features li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #3d3e5c;
}

.dm-svc-card--teal .dm-svc-card__features svg   { color: #14b8a6; }
.dm-svc-card--blue .dm-svc-card__features svg   { color: #0ea5e9; }
.dm-svc-card--green .dm-svc-card__features svg  { color: #16a34a; }
.dm-svc-card--violet .dm-svc-card__features svg { color: #7c3aed; }

/* ── Section 3: Pipeline ── */
.dm-pipeline {
	background: linear-gradient(155deg, #0a0f1a 0%, #0d2a2a 40%, #0a1e2e 70%, #0a0f1a 100%);
	padding: 120px 0;
}

.dm-pipeline__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.dm-pipeline__head .section-label {
	color: var(--accent-teal);
	margin-bottom: 20px;
}

.dm-pipeline__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
}

.dm-pipeline__head p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--white-60);
	margin-top: 16px;
}

.dm-pipeline__track {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	margin-bottom: 48px;
}

.dm-stage {
	text-align: center;
	position: relative;
}

.dm-stage__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 18px;
	position: relative;
}

.dm-stage__num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(45, 212, 191, 0.12);
	border: 2px solid rgba(45, 212, 191, 0.3);
	color: var(--accent-teal);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.dm-stage:hover .dm-stage__num {
	background: rgba(45, 212, 191, 0.2);
	box-shadow: 0 0 20px rgba(45, 212, 191, 0.3);
}

.dm-stage__connector {
	position: absolute;
	top: 22px;
	left: calc(50% + 22px);
	width: calc(100% - 44px + 8px);
	height: 2px;
	background: linear-gradient(90deg, rgba(45, 212, 191, 0.3), rgba(45, 212, 191, 0.1));
	z-index: 1;
}

.dm-stage__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--accent-teal);
	margin-bottom: 12px;
}

.dm-stage__body h3 {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 6px;
}

.dm-stage__body p {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--white-40);
}

/* Formats bar */
.dm-formats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 32px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
}

.dm-formats__label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-right: 4px;
}

.dm-formats__tag {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 8px;
	background: rgba(45, 212, 191, 0.08);
	border: 1px solid rgba(45, 212, 191, 0.15);
	color: var(--accent-teal);
	transition: background 0.3s ease, transform 0.3s ease;
}

.dm-formats__tag:hover {
	background: rgba(45, 212, 191, 0.15);
	transform: translateY(-2px);
}

/* ── Section 4: Recovery ── */
.dm-recovery {
	background: linear-gradient(180deg, #f7f8fc 0%, #f0f1f7 50%, #e8e7f0 100%);
	padding: 120px 0;
	color: #3d3e5c;
}

.dm-recovery__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.dm-recovery__text .section-label {
	color: #14b8a6;
	margin-bottom: 20px;
}

.dm-recovery__text h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	color: #06071b;
	margin-bottom: 16px;
}

.dm-recovery__text > p {
	font-size: 16px;
	line-height: 1.7;
	color: #6b6d8a;
	margin-bottom: 32px;
}

.dm-recovery__metrics {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dm-recovery__metric {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: #fff;
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dm-recovery__metric:hover {
	transform: translateX(6px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.dm-recovery__metric-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(45, 212, 191, 0.08);
	color: #14b8a6;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dm-recovery__metric-val {
	display: block;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 900;
	color: #06071b;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.dm-recovery__metric-lbl {
	font-size: 13px;
	color: #6b6d8a;
}

/* Recovery dashboard mock */
.dm-dash {
	background: linear-gradient(135deg, #0a0f1a 0%, #131438 100%);
	border-radius: 20px;
	border: 1px solid var(--glass-border);
	overflow: hidden;
}

.dm-dash__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	border-bottom: 1px solid var(--white-06);
}

.dm-dash__title {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--white-60);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.dm-dash__status {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 100px;
}

.dm-dash__status--live {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.dm-dash__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--white-06);
}

.dm-dash__row + .dm-dash__row {
	border-top: 1px solid var(--white-06);
}

.dm-dash__card {
	padding: 20px 24px;
	background: linear-gradient(135deg, #0a0f1a 0%, #131438 100%);
}

.dm-dash__card-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.dm-dash__card-value {
	display: block;
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 900;
	color: var(--white);
	margin-bottom: 12px;
	line-height: 1;
}

.dm-dash__card-value--green {
	color: #22c55e;
}

.dm-dash__bar {
	height: 6px;
	border-radius: 3px;
	background: var(--white-06);
	overflow: hidden;
}

.dm-dash__bar-fill {
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, #22c55e, #16a34a);
	transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dm-dash__bar-fill--teal {
	background: linear-gradient(90deg, #2dd4bf, #14b8a6);
}

.dm-dash__dots {
	display: flex;
	gap: 4px;
}

.dm-dash__dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
}

.dm-dash__dot--ok {
	background: rgba(34, 197, 94, 0.4);
}

.dm-dash__dot--ok:nth-child(odd) {
	background: rgba(34, 197, 94, 0.6);
}

.dm-dash__regions {
	display: flex;
	gap: 8px;
}

.dm-dash__region {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(45, 212, 191, 0.08);
	color: var(--accent-teal);
	border: 1px solid rgba(45, 212, 191, 0.15);
}

.dm-dash__region--active::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
	margin-right: 6px;
	vertical-align: middle;
}

/* ── CTA Data variant ── */
.svc-cta--data {
	background: linear-gradient(135deg, #0d2a2a 0%, #2dd4bf 50%, #38bdf8 100%);
}

.dm-cta-circuits {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 30px 30px, 40px 40px;
	pointer-events: none;
}

/* ═══ Data Management — Responsive ═══ */
@media (max-width: 1024px) {
	.dm-pipeline__track {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	.dm-stage__connector {
		display: none;
	}

	.dm-recovery__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.dm-dash__row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.dm-visual__orbit--3 {
		display: none;
	}

	.dm-visual__pulse {
		display: none;
	}

	.dm-hero-stats {
		flex-wrap: wrap;
		gap: 20px;
	}

	.dm-pipeline__track {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.dm-services {
		padding: 80px 0;
	}

	.dm-services__grid {
		grid-template-columns: 1fr;
	}

	.dm-pipeline {
		padding: 80px 0;
	}

	.dm-pipeline__track {
		grid-template-columns: 1fr;
		max-width: 300px;
		margin: 0 auto 48px;
	}

	.dm-recovery {
		padding: 80px 0;
	}

	.dm-recovery__metrics {
		gap: 12px;
	}

	.dm-hero-stats {
		flex-direction: column;
		gap: 16px;
	}

	.dm-flow-bg {
		display: none;
	}

	.dm-visual__orbit--2,
	.dm-visual__orbit--3 {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   MONITORING & REMOTE MANAGEMENT PAGE (P08)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero variant ── */
.svc-hero--mon {
	background: linear-gradient(150deg, #06071b 0%, #0a1e3d 35%, #0c2d5e 65%, #06071b 100%);
}

.svc-hero__glow--mon {
	background: radial-gradient(circle at center, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
}

/* ── Hero live metrics bar ── */
.mon-hero-metrics {
	display: flex;
	gap: 24px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--white-12);
}

.mon-hero-metric {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mon-hero-metric__light {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mon-hero-metric__light--green {
	background: #22c55e;
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
	animation: mon-status-pulse 2s ease-in-out infinite;
}

.mon-hero-metric__light--amber {
	background: #f59e0b;
	box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
	animation: mon-status-pulse 1.5s ease-in-out infinite;
}

.mon-hero-metric__light--red {
	background: #ef4444;
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
	animation: mon-status-pulse 1s ease-in-out infinite;
}

@keyframes mon-status-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.mon-hero-metric__val {
	display: block;
	font-family: var(--font-mono);
	font-size: 20px;
	font-weight: 800;
	color: var(--white);
	line-height: 1.1;
}

.mon-hero-metric__lbl {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

/* ── Hero Dashboard Mockup ── */
.mon-dash-hero {
	background: #0d1117;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
	position: relative;
	z-index: 1;
}

.mon-dash-hero__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	background: #161b22;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mon-dash-hero__live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	margin-left: auto;
	animation: mon-status-pulse 2s ease-in-out infinite;
}

.mon-dash-hero__body {
	padding: 20px;
}

.mon-dash-hero__status-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 20px;
}

.mon-dash-hero__svc {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
}

.mon-dash-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mon-dash-hero__dot--green { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.mon-dash-hero__dot--amber { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.mon-dash-hero__dot--red   { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

.mon-dash-hero__svc-name {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--white-dim);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mon-dash-hero__svc-val {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--accent-sky);
}

.mon-dash-hero__chart {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}

.mon-dash-hero__chart-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
}

.mon-dash-hero__svg {
	width: 100%;
	height: 80px;
}

.mon-dash-hero__line {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: mon-draw-line 2s ease-out 0.5s forwards;
}

.mon-dash-hero__pulse-dot {
	animation: mon-status-pulse 1.5s ease-in-out infinite;
}

@keyframes mon-draw-line {
	to { stroke-dashoffset: 0; }
}

.mon-dash-hero__alerts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mon-dash-hero__alert {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--white-dim);
}

.mon-dash-hero__alert--warn {
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.15);
}

.mon-dash-hero__alert--ok {
	background: rgba(34, 197, 94, 0.06);
	border: 1px solid rgba(34, 197, 94, 0.12);
}

.mon-dash-hero__alert-icon {
	font-size: 14px;
	flex-shrink: 0;
}

.mon-dash-hero__alert span:nth-child(2) {
	flex: 1;
}

.mon-dash-hero__alert-time {
	color: var(--white-40);
	font-size: 10px;
	white-space: nowrap;
}

/* ── Monitoring Capabilities (Section 2) ── */
.mon-capabilities {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #e4e2f4 100%);
	color: var(--ink);
	padding: 120px 0;
}

.mon-capabilities__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.mon-capabilities__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.mon-capabilities__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--ink);
}

.mon-capabilities__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.mon-capabilities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.mon-cap-card {
	background: var(--white);
	border: 1px solid rgba(99, 91, 255, 0.08);
	border-radius: 20px;
	padding: 40px 32px;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.mon-cap-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.mon-cap-card--electric::before { background: linear-gradient(90deg, #38bdf8, #818cf8); }
.mon-cap-card--cyan::before    { background: linear-gradient(90deg, #22d3ee, #38bdf8); }
.mon-cap-card--teal::before    { background: linear-gradient(90deg, #2dd4bf, #22d3ee); }

.mon-cap-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 56px rgba(56, 189, 248, 0.1);
}

.mon-cap-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

.mon-cap-card--electric .mon-cap-card__icon { background: rgba(56, 189, 248, 0.1); color: #38bdf8; }
.mon-cap-card--cyan .mon-cap-card__icon     { background: rgba(34, 211, 238, 0.1); color: #22d3ee; }
.mon-cap-card--teal .mon-cap-card__icon     { background: rgba(45, 212, 191, 0.1); color: #2dd4bf; }

.mon-cap-card h3 {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 12px;
}

.mon-cap-card p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-muted);
	margin-bottom: 20px;
}

.mon-cap-card__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mon-cap-card__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--text-body);
}

.mon-cap-card__check {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}

.mon-cap-card--electric .mon-cap-card__check { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.mon-cap-card--cyan .mon-cap-card__check     { background: rgba(34, 211, 238, 0.12); color: #22d3ee; }
.mon-cap-card--teal .mon-cap-card__check     { background: rgba(45, 212, 191, 0.12); color: #2dd4bf; }

/* ── Response Workflow (Section 3) ── */
.mon-workflow {
	background: linear-gradient(155deg, #06071b 0%, #0a1e3d 50%, #06071b 100%);
	padding: 120px 0;
}

.mon-workflow__head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 64px;
}

.mon-workflow__head .section-label {
	color: var(--accent-sky);
	margin-bottom: 20px;
}

.mon-workflow__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
}

.mon-workflow__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--white-60);
}

.mon-timeline {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-bottom: 48px;
}

.mon-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	flex: 1;
	max-width: 260px;
}

.mon-stage__light {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-bottom: 20px;
}

.mon-stage__light--red {
	background: #ef4444;
	box-shadow: 0 0 16px rgba(239, 68, 68, 0.5), 0 0 40px rgba(239, 68, 68, 0.2);
	animation: mon-status-pulse 1s ease-in-out infinite;
}

.mon-stage__light--amber {
	background: #f59e0b;
	box-shadow: 0 0 16px rgba(245, 158, 11, 0.5), 0 0 40px rgba(245, 158, 11, 0.2);
	animation: mon-status-pulse 1.5s ease-in-out infinite;
}

.mon-stage__light--green {
	background: #22c55e;
	box-shadow: 0 0 16px rgba(34, 197, 94, 0.5), 0 0 40px rgba(34, 197, 94, 0.2);
	animation: mon-status-pulse 2s ease-in-out infinite;
}

.mon-stage__time {
	display: inline-block;
	padding: 4px 14px;
	background: rgba(56, 189, 248, 0.1);
	border: 1px solid rgba(56, 189, 248, 0.2);
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--accent-sky);
	margin-bottom: 12px;
}

.mon-stage__content h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 8px;
}

.mon-stage__icon {
	font-size: 18px;
	margin-right: 6px;
}

.mon-stage__content p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--white-60);
	max-width: 200px;
	margin: 0 auto;
}

.mon-stage__connector {
	position: absolute;
	top: 10px;
	right: -12px;
	color: rgba(56, 189, 248, 0.3);
	z-index: 2;
}

/* Escalation path */
.mon-escalation {
	max-width: 520px;
	margin: 0 auto;
	padding: 32px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	text-align: center;
}

.mon-escalation h3 {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 20px;
}

.mon-escalation__path {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.mon-escalation__level {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.mon-escalation__level span:last-child {
	font-size: 12px;
	color: var(--white-60);
	font-weight: 600;
}

.mon-escalation__badge {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(56, 189, 248, 0.12);
	color: var(--accent-sky);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 800;
	border: 1px solid rgba(56, 189, 248, 0.2);
}

.mon-escalation__badge--l2 {
	background: rgba(139, 131, 255, 0.12);
	color: var(--accent-bright);
	border-color: rgba(139, 131, 255, 0.2);
}

.mon-escalation__badge--l3 {
	background: rgba(255, 107, 107, 0.12);
	color: var(--accent-warm);
	border-color: rgba(255, 107, 107, 0.2);
}

.mon-escalation__arrow {
	color: var(--white-40);
	font-size: 18px;
}

/* ── Dashboard Preview (Section 4) ── */
.mon-dashboard {
	background: linear-gradient(155deg, #0a0820 0%, #0c2040 50%, #0a0820 100%);
	padding: 120px 0;
}

.mon-dashboard__head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 48px;
}

.mon-dashboard__head .section-label {
	color: var(--accent-sky);
	margin-bottom: 20px;
}

.mon-dashboard__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 44px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
}

.mon-dashboard__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--white-60);
}

.mon-dashboard__tabs {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 32px;
}

.mon-dtab {
	padding: 12px 24px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--white-60);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	min-height: 44px;
}

.mon-dtab:hover {
	color: var(--white);
	background: rgba(56, 189, 248, 0.08);
	border-color: rgba(56, 189, 248, 0.3);
}

.mon-dtab--active {
	color: var(--white);
	background: rgba(56, 189, 248, 0.15);
	border-color: var(--accent-sky);
	box-shadow: 0 4px 20px rgba(56, 189, 248, 0.2);
}

.mon-dashboard__frame {
	background: #0d1117;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}

.mon-dpanel {
	padding: 28px;
}

/* Overview panel */
.mon-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.mon-preview-sys {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	transition: background 0.3s ease;
}

.mon-preview-sys:hover {
	background: rgba(56, 189, 248, 0.05);
}

.mon-preview-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mon-preview-dot--green { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.mon-preview-dot--amber { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }

.mon-preview-name {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--white-dim);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mon-preview-val {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--white-40);
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 4px;
}

/* Alerts panel */
.mon-alert-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mon-alert-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 12px;
	font-family: var(--font-mono);
	font-size: 12px;
}

.mon-alert-row--critical { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.15); }
.mon-alert-row--warning  { background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.12); }
.mon-alert-row--info     { background: rgba(56, 189, 248, 0.06); border: 1px solid rgba(56, 189, 248, 0.12); }
.mon-alert-row--resolved { background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.12); }

.mon-alert-sev {
	padding: 2px 10px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.mon-alert-row--critical .mon-alert-sev { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.mon-alert-row--warning .mon-alert-sev  { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.mon-alert-row--info .mon-alert-sev     { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.mon-alert-row--resolved .mon-alert-sev { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

.mon-alert-msg {
	flex: 1;
	color: var(--white-dim);
}

.mon-alert-time {
	color: var(--white-40);
	font-size: 10px;
	white-space: nowrap;
}

/* Performance panel */
.mon-perf-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.mon-perf-card {
	padding: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
}

.mon-perf-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.mon-perf-value {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 900;
	color: var(--white);
	margin-bottom: 12px;
}

.mon-perf-bar {
	width: 100%;
	height: 5px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 100px;
	overflow: hidden;
}

.mon-perf-fill {
	height: 100%;
	background: linear-gradient(90deg, #22c55e, #4ade80);
	border-radius: 100px;
	transition: width 1s ease-out;
}

.mon-perf-fill--amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.mon-perf-fill--warn  { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Capacity panel */
.mon-capacity-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mon-cap-res {
	padding: 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
}

.mon-cap-res__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.mon-cap-res__name {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.mon-cap-res__runway {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--accent-teal);
}

.mon-cap-res__bar {
	width: 100%;
	height: 8px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 100px;
	overflow: hidden;
	position: relative;
}

.mon-cap-res__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--accent-sky), #818cf8);
	border-radius: 100px;
	z-index: 2;
	transition: width 1s ease-out;
}

.mon-cap-res__proj {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: rgba(139, 131, 255, 0.2);
	border-radius: 100px;
	z-index: 1;
	transition: width 1.2s ease-out;
}

.mon-cap-res__legend {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--white-40);
}

/* ── CTA variant ── */
.svc-cta--mon {
	background: linear-gradient(135deg, #06071b 0%, #0c2d5e 40%, #38bdf8 100%);
}

.mon-cta-pulse {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 0;
	opacity: 0.5;
}

.mon-cta-pulse__svg {
	width: 100%;
	height: 80px;
}

.mon-cta-pulse__line {
	stroke-dasharray: 4000;
	stroke-dashoffset: 4000;
	animation: mon-draw-line 3s linear 0.5s forwards;
}

/* ═══ Monitoring — Responsive ═══ */
@media (max-width: 1024px) {
	.mon-capabilities__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.mon-timeline {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.mon-stage {
		max-width: 400px;
		width: 100%;
	}

	.mon-stage__connector {
		position: static;
		transform: rotate(90deg);
		margin: -8px 0;
	}

	.mon-dash-hero__status-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.mon-preview-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mon-perf-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.mon-hero-metrics {
		flex-direction: column;
		gap: 16px;
	}

	.mon-capabilities {
		padding: 80px 0;
	}

	.mon-workflow {
		padding: 80px 0;
	}

	.mon-dashboard {
		padding: 80px 0;
	}

	.mon-dashboard__tabs {
		flex-wrap: wrap;
		gap: 6px;
	}

	.mon-dtab {
		padding: 10px 16px;
		font-size: 13px;
	}

	.mon-dpanel {
		padding: 16px;
	}

	.mon-dash-hero__status-row {
		grid-template-columns: 1fr;
	}

	.mon-preview-grid {
		grid-template-columns: 1fr;
	}

	.mon-perf-grid {
		grid-template-columns: 1fr;
	}

	.mon-escalation__path {
		flex-direction: column;
		gap: 12px;
	}

	.mon-escalation__arrow {
		transform: rotate(90deg);
	}

	.mon-stage__content p {
		max-width: 100%;
	}

	.mon-dash-hero__alert span:nth-child(2) {
		font-size: 10px;
	}

	.mon-dash-hero__body {
		padding: 14px;
	}
}

/* ═══════════════════════════════════════════════════════════
   CLOUD & PLATFORM SERVICES PAGE (P05)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero variant ── */
.svc-hero--cloud {
	background: linear-gradient(150deg, #06071b 0%, #0a1e3d 30%, #0e3a6e 60%, #06071b 100%);
}

.svc-hero__glow--cloud {
	background: radial-gradient(circle at center, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
}

/* Hero trust bar */
.cl-hero-trust {
	display: flex;
	gap: 32px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--white-12);
}

.cl-hero-trust__item {
	display: flex;
	flex-direction: column;
}

.cl-hero-trust__val {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 900;
	color: var(--accent-sky);
	letter-spacing: -0.5px;
	line-height: 1;
}

.cl-hero-trust__lbl {
	font-size: 11px;
	font-weight: 600;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-top: 4px;
}

/* ── Isometric cloud illustration ── */
.cl-iso {
	position: relative;
	z-index: 1;
}

.cl-iso__cloud {
	background: rgba(6, 7, 27, 0.6);
	border: 1px solid rgba(56, 189, 248, 0.12);
	border-radius: 24px;
	padding: 20px;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}

.cl-iso__svg {
	width: 100%;
	height: auto;
}

.cl-iso__dot {
	animation: cl-dot-pulse 2s ease-in-out infinite;
}

.cl-iso__dot--1 { animation-delay: 0s; }
.cl-iso__dot--2 { animation-delay: 0.5s; }
.cl-iso__dot--3 { animation-delay: 1s; }
.cl-iso__dot--4 { animation-delay: 1.5s; }

@keyframes cl-dot-pulse {
	0%, 100% { opacity: 0.4; r: 3; }
	50% { opacity: 1; r: 5; }
}

.cl-iso__counter {
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 12px 28px;
	background: rgba(6, 7, 27, 0.9);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(56, 189, 248, 0.2);
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	white-space: nowrap;
}

.cl-iso__counter-val {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 900;
	color: var(--accent-sky);
}

.cl-iso__counter-lbl {
	font-size: 11px;
	font-weight: 600;
	color: var(--white-40);
	margin-left: 6px;
}

/* ── Platform Overview (Section 2) ── */
.cl-overview {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #e4e2f4 100%);
	color: var(--ink);
	padding: 120px 0;
}

.cl-overview__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.cl-overview__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.cl-overview__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--ink);
}

.cl-overview__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.cl-overview__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cl-pillar {
	background: var(--white);
	border: 1px solid rgba(99, 91, 255, 0.08);
	border-radius: 20px;
	padding: 40px 32px;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cl-pillar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.cl-pillar--sky::before    { background: linear-gradient(90deg, #38bdf8, #7dd3fc); }
.cl-pillar--indigo::before { background: linear-gradient(90deg, #635bff, #818cf8); }
.cl-pillar--deep::before   { background: linear-gradient(90deg, #1e40af, #3b82f6); }

.cl-pillar:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 56px rgba(56, 189, 248, 0.1);
}

.cl-pillar__icon {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

.cl-pillar--sky .cl-pillar__icon    { background: rgba(56, 189, 248, 0.1); color: #38bdf8; }
.cl-pillar--indigo .cl-pillar__icon { background: rgba(99, 91, 255, 0.1); color: #635bff; }
.cl-pillar--deep .cl-pillar__icon   { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.cl-pillar h3 {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 12px;
}

.cl-pillar p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-muted);
	margin-bottom: 20px;
}

.cl-pillar__feats {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cl-pillar__feats li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--text-body);
}

.cl-pillar__check {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}

.cl-pillar--sky .cl-pillar__check    { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.cl-pillar--indigo .cl-pillar__check { background: rgba(99, 91, 255, 0.12); color: #635bff; }
.cl-pillar--deep .cl-pillar__check   { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }

/* ── PaaS Deep Dive (Section 3) ── */
.cl-paas {
	background: linear-gradient(155deg, #0e0a30 0%, #1c1260 50%, #0e0a30 100%);
	padding: 120px 0;
}

.cl-paas__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.cl-paas__text .section-label {
	color: var(--accent-sky);
	margin-bottom: 20px;
}

.cl-paas__text h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.15;
	margin-bottom: 32px;
}

.cl-feat {
	display: flex;
	gap: 18px;
	padding: 22px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	margin-bottom: 12px;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.cl-feat:hover {
	background: rgba(56, 189, 248, 0.06);
	border-color: rgba(56, 189, 248, 0.3);
}

.cl-feat__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}

.cl-feat__icon--sky    { background: rgba(56, 189, 248, 0.12); }
.cl-feat__icon--indigo { background: rgba(99, 91, 255, 0.12); }
.cl-feat__icon--teal   { background: rgba(45, 212, 191, 0.12); }
.cl-feat__icon--purple { background: rgba(139, 131, 255, 0.12); }

.cl-feat h3 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}

.cl-feat p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--white-60);
}

/* Browser mockup */
.cl-browser {
	background: #0d1117;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.cl-browser__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	background: #161b22;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-browser__url {
	margin-left: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--white-40);
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
}

.cl-browser__body {
	display: grid;
	grid-template-columns: 140px 1fr;
	min-height: 320px;
}

.cl-browser__sidebar {
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	padding: 16px 0;
}

.cl-browser__nav-item {
	padding: 10px 18px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--white-40);
	cursor: default;
	border-left: 2px solid transparent;
	transition: all 0.2s;
}

.cl-browser__nav-item--active {
	color: var(--accent-sky);
	background: rgba(56, 189, 248, 0.06);
	border-left-color: var(--accent-sky);
}

.cl-browser__main {
	padding: 20px;
}

.cl-browser__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.cl-browser__title {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
}

.cl-browser__badge {
	padding: 3px 12px;
	background: rgba(34, 197, 94, 0.12);
	color: #4ade80;
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cl-browser__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.cl-browser__stat {
	padding: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	text-align: center;
}

.cl-browser__stat-val {
	display: block;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 900;
	color: var(--accent-sky);
}

.cl-browser__stat-lbl {
	font-family: var(--font-mono);
	font-size: 9px;
	color: var(--white-40);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cl-browser__table {
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	overflow: hidden;
}

.cl-browser__row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 10px 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--white-dim);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cl-browser__row:last-child { border-bottom: none; }

.cl-browser__row--head {
	background: rgba(255, 255, 255, 0.03);
	color: var(--white-40);
	font-weight: 700;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ── Infrastructure Map (Section 4) ── */
.cl-map {
	background: linear-gradient(180deg, #f7f8fc 0%, #eeedf8 50%, #e4e2f4 100%);
	color: var(--ink);
	padding: 120px 0;
}

.cl-map__head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 56px;
}

.cl-map__head .section-label {
	color: var(--accent);
	margin-bottom: 20px;
}

.cl-map__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--ink);
}

.cl-map__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.cl-map__visual {
	position: relative;
	background: var(--ink);
	border-radius: 24px;
	padding: 48px;
	overflow: hidden;
}

.cl-map__globe {
	position: relative;
}

.cl-map__svg {
	width: 100%;
	height: auto;
	opacity: 0.6;
}

.cl-map__regions {
	position: absolute;
	inset: 0;
	padding: 48px;
}

.cl-region {
	position: absolute;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.cl-region--us-east  { top: 32%; left: 22%; }
.cl-region--us-west  { top: 35%; left: 10%; }
.cl-region--eu       { top: 26%; left: 48%; }
.cl-region--asia     { top: 48%; left: 70%; }
.cl-region--oceania  { top: 68%; left: 78%; }

.cl-region__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent-sky);
	box-shadow: 0 0 12px rgba(56, 189, 248, 0.6), 0 0 40px rgba(56, 189, 248, 0.2);
	flex-shrink: 0;
	margin-top: 4px;
	animation: cl-dot-pulse 2s ease-in-out infinite;
}

.cl-region__info {
	padding: 10px 14px;
	background: rgba(6, 7, 27, 0.85);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(56, 189, 248, 0.15);
	border-radius: 12px;
	min-width: 130px;
}

.cl-region__name {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
}

.cl-region__city {
	display: block;
	font-size: 11px;
	color: var(--white-40);
	margin-bottom: 6px;
}

.cl-region__meta {
	display: flex;
	gap: 10px;
}

.cl-region__meta span {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--accent-sky);
	padding: 2px 8px;
	background: rgba(56, 189, 248, 0.1);
	border-radius: 4px;
}

/* ── Pricing (Section 5) ── */
.cl-pricing {
	background: linear-gradient(155deg, #0a0820 0%, #0e1e45 50%, #0a0820 100%);
	padding: 120px 0;
}

.cl-pricing__head {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 64px;
}

.cl-pricing__head .section-label {
	color: var(--accent-sky);
	margin-bottom: 20px;
}

.cl-pricing__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 1.1;
	margin-bottom: 16px;
}

.cl-pricing__head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--white-60);
}

.cl-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

.cl-plan {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	padding: 40px 32px;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cl-plan::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.cl-plan--sky::before    { background: linear-gradient(90deg, #38bdf8, #7dd3fc); }
.cl-plan--indigo::before { background: linear-gradient(90deg, #635bff, #818cf8); }
.cl-plan--violet::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

.cl-plan:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 56px rgba(56, 189, 248, 0.1);
}

.cl-plan--popular {
	border-color: var(--accent-sky);
	box-shadow: 0 0 40px rgba(56, 189, 248, 0.1);
}

.cl-plan__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 4px 14px;
	background: rgba(56, 189, 248, 0.15);
	color: var(--accent-sky);
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.cl-plan__name {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 16px;
}

.cl-plan__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 8px;
}

.cl-plan__amount {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 900;
	color: var(--white);
	letter-spacing: -2px;
	line-height: 1;
}

.cl-plan__period {
	font-size: 16px;
	color: var(--white-40);
	font-weight: 600;
}

.cl-plan__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--white-60);
	margin-bottom: 28px;
}

.cl-plan__features {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
}

.cl-plan__features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--white-dim);
}

.cl-plan__check {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}

.cl-plan--sky .cl-plan__check    { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.cl-plan--indigo .cl-plan__check { background: rgba(99, 91, 255, 0.12); color: #635bff; }
.cl-plan--violet .cl-plan__check { background: rgba(139, 92, 246, 0.12); color: #a78bfa; }

.cl-plan__cta {
	width: 100%;
	justify-content: center;
}

.btn-outline-dark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	background: transparent;
	border: 1px solid var(--white-12);
	border-radius: 14px;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	min-height: 44px;
}

.btn-outline-dark:hover {
	border-color: var(--accent-sky);
	background: rgba(56, 189, 248, 0.06);
}

/* ── Migration Support (Section 6) ── */
.cl-migration {
	background: linear-gradient(155deg, #06071b 0%, #0e2e55 50%, #06071b 100%);
	padding: 120px 0;
}

.cl-migration__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.cl-migration__text .section-label {
	color: var(--accent-sky);
	margin-bottom: 20px;
}

.cl-migration__text h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.15;
	margin-bottom: 16px;
}

.cl-migration__text p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--white-60);
	margin-bottom: 28px;
}

.cl-migration__providers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.cl-migration__provider {
	padding: 8px 20px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--glass-border);
	border-radius: 10px;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--white-dim);
	transition: border-color 0.3s, background 0.3s;
}

.cl-migration__provider:hover {
	border-color: var(--accent-sky);
	background: rgba(56, 189, 248, 0.06);
}

.cl-migration__guarantee {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: rgba(45, 212, 191, 0.08);
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-teal);
}

.cl-migration__guarantee-icon { font-size: 18px; }

/* Migration steps */
.cl-mig-step {
	display: flex;
	gap: 20px;
}

.cl-mig-step__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.cl-mig-step__num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(56, 189, 248, 0.12);
	border: 1px solid rgba(56, 189, 248, 0.25);
	color: var(--accent-sky);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
}

.cl-mig-step__line {
	width: 2px;
	flex: 1;
	min-height: 24px;
	background: linear-gradient(180deg, rgba(56, 189, 248, 0.3), rgba(56, 189, 248, 0.05));
	margin: 6px 0;
}

.cl-mig-step__body {
	padding-bottom: 28px;
}

.cl-mig-step:last-child .cl-mig-step__body {
	padding-bottom: 0;
}

.cl-mig-step__body h3 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 4px;
}

.cl-mig-step__body p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--white-60);
}

/* ── CTA variant ── */
.svc-cta--cloud {
	background: linear-gradient(135deg, #0c2d5e 0%, #38bdf8 50%, #2dd4bf 100%);
}

/* ═══ Cloud Platform — Responsive ═══ */
@media (max-width: 1024px) {
	.cl-overview__grid {
		grid-template-columns: 1fr;
	}

	.cl-paas__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.cl-pricing__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}

	.cl-migration__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.cl-map__visual {
		padding: 32px;
	}

	.cl-region__info {
		display: none;
	}

	.cl-browser__body {
		grid-template-columns: 1fr;
	}

	.cl-browser__sidebar {
		display: flex;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		padding: 0;
		overflow-x: auto;
	}

	.cl-browser__nav-item {
		white-space: nowrap;
		border-left: none;
		border-bottom: 2px solid transparent;
	}

	.cl-browser__nav-item--active {
		border-left-color: transparent;
		border-bottom-color: var(--accent-sky);
	}
}

@media (max-width: 640px) {
	.cl-hero-trust {
		flex-direction: column;
		gap: 16px;
	}

	.cl-overview {
		padding: 80px 0;
	}

	.cl-paas {
		padding: 80px 0;
	}

	.cl-map {
		padding: 80px 0;
	}

	.cl-map__visual {
		padding: 20px;
	}

	.cl-map__regions {
		position: static;
		padding: 20px 0 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.cl-region {
		position: static;
	}

	.cl-region__info {
		display: block;
	}

	.cl-map__globe {
		display: none;
	}

	.cl-pricing {
		padding: 80px 0;
	}

	.cl-plan__amount {
		font-size: 40px;
	}

	.cl-migration {
		padding: 80px 0;
	}

	.cl-migration__providers {
		gap: 8px;
	}

	.cl-browser__stats {
		grid-template-columns: 1fr;
	}

	.cl-iso__counter {
		position: static;
		transform: none;
		margin-top: 16px;
		display: flex;
		justify-content: center;
	}
}

/* ─── Animated Dashboard Mock ─── */
.dash-mock {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(99, 91, 255, 0.1);
	background: #0f1023;
	width: 100%;
	font-family: var(--font-body), system-ui, sans-serif;
}

/* Browser bar */
.dash-mock__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: #181930;
	border-bottom: 1px solid rgba(99, 91, 255, 0.12);
}

.dash-mock__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #2a2b4a;
}

.dash-mock__dot:first-child {
	background: #ff5f57;
}

.dash-mock__dot:nth-child(2) {
	background: #febc2e;
}

.dash-mock__dot:nth-child(3) {
	background: #28c840;
}

.dash-mock__url {
	margin-left: 12px;
	font-size: 11px;
	color: #5a5b7a;
	background: #12132a;
	padding: 4px 14px;
	border-radius: 6px;
	flex: 1;
	max-width: 220px;
	letter-spacing: 0.02em;
}

/* Body layout */
.dash-mock__body {
	display: flex;
	min-height: 320px;
}

/* Sidebar */
.dash-mock__sidebar {
	width: 48px;
	background: #13142e;
	border-right: 1px solid rgba(99, 91, 255, 0.08);
	padding: 14px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.dash-mock__logo {
	margin-bottom: 8px;
}

.dash-mock__logo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--accent);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.dash-mock__nav-item {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
}

.dash-mock__nav-item--active {
	background: rgba(99, 91, 255, 0.2);
	box-shadow: 0 0 8px rgba(99, 91, 255, 0.3);
}

/* Main content */
.dash-mock__main {
	flex: 1;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Stats cards */
.dash-mock__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.dash-mock__stat-card {
	background: #181930;
	border: 1px solid rgba(99, 91, 255, 0.08);
	border-radius: 10px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	animation: dashFadeUp 0.6s ease both;
}

.dash-mock__stat-card:nth-child(1) { animation-delay: 0.1s; }
.dash-mock__stat-card:nth-child(2) { animation-delay: 0.2s; }
.dash-mock__stat-card:nth-child(3) { animation-delay: 0.3s; }
.dash-mock__stat-card:nth-child(4) { animation-delay: 0.4s; }

.dash-mock__stat-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #5a5b7a;
}

.dash-mock__stat-value {
	font-size: 20px;
	font-weight: 700;
	color: #e8e9f0;
	line-height: 1.1;
}

.dash-mock__stat-trend {
	font-size: 10px;
	font-weight: 600;
	color: #2dd4bf;
}

/* Chart row */
.dash-mock__chart-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 10px;
	flex: 1;
}

.dash-mock__chart-card {
	background: #181930;
	border: 1px solid rgba(99, 91, 255, 0.08);
	border-radius: 10px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	animation: dashFadeUp 0.6s ease 0.5s both;
}

.dash-mock__chart-title {
	font-size: 11px;
	font-weight: 600;
	color: #8b8ca8;
	margin-bottom: 10px;
}

.dash-mock__chart {
	flex: 1;
	min-height: 80px;
	position: relative;
}

.dash-mock__chart-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.dash-mock__chart-line {
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
	animation: dashDraw 2s ease 0.8s forwards;
}

.dash-mock__chart-area {
	opacity: 0;
	animation: dashAreaIn 1s ease 2s forwards;
}

.dash-mock__chart-dot {
	opacity: 0;
	animation: dashDotPop 0.4s ease forwards;
}

.dash-mock__chart-dot:nth-child(4) { animation-delay: 1.6s; }
.dash-mock__chart-dot:nth-child(5) { animation-delay: 2.1s; }
.dash-mock__chart-dot:nth-child(6) { animation-delay: 2.6s; }

/* Bar chart */
.dash-mock__bars {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	justify-content: center;
}

.dash-mock__bar-row {
	height: 10px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 5px;
	overflow: hidden;
}

.dash-mock__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--accent), var(--accent-bright));
	animation: dashBarGrow 1.2s ease forwards;
}

.dash-mock__bar-row:nth-child(1) .dash-mock__bar-fill { animation-delay: 0.7s; }
.dash-mock__bar-row:nth-child(2) .dash-mock__bar-fill { animation-delay: 0.85s; }
.dash-mock__bar-row:nth-child(3) .dash-mock__bar-fill { animation-delay: 1.0s; }
.dash-mock__bar-row:nth-child(4) .dash-mock__bar-fill { animation-delay: 1.15s; }
.dash-mock__bar-row:nth-child(5) .dash-mock__bar-fill { animation-delay: 1.3s; }

/* Activity rows */
.dash-mock__activity {
	display: flex;
	flex-direction: column;
	gap: 6px;
	animation: dashFadeUp 0.6s ease 0.9s both;
}

.dash-mock__activity-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: #181930;
	border-radius: 8px;
	border: 1px solid rgba(99, 91, 255, 0.06);
}

.dash-mock__pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
	animation: dashPulse 2s ease infinite;
}

.dash-mock__pulse--success {
	background: #2dd4bf;
	animation: none;
}

.dash-mock__activity-line {
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.06);
	width: var(--line-w, 60%);
}

.dash-mock__activity-badge {
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent-bright);
	background: rgba(99, 91, 255, 0.12);
	padding: 2px 8px;
	border-radius: 4px;
	margin-left: auto;
	flex-shrink: 0;
}

.dash-mock__activity-badge--success {
	color: #2dd4bf;
	background: rgba(45, 212, 191, 0.12);
}

/* Variant accents */
.dash-mock--ai .dash-mock__logo-icon {
	background: linear-gradient(135deg, #635bff, #8b83ff);
}

.dash-mock--hardware .dash-mock__logo-icon {
	background: linear-gradient(135deg, #2dd4bf, #38bdf8);
}

.dash-mock--enterprise .dash-mock__logo-icon {
	background: linear-gradient(135deg, #635bff, #ff6b6b);
}

.dash-mock--hardware .dash-mock__stat-trend {
	color: #38bdf8;
}

.dash-mock--hardware .dash-mock__bar-fill {
	background: linear-gradient(90deg, #2dd4bf, #38bdf8);
}

.dash-mock--hardware .dash-mock__nav-item--active {
	background: rgba(45, 212, 191, 0.2);
	box-shadow: 0 0 8px rgba(45, 212, 191, 0.3);
}

/* Animations */
@keyframes dashFadeUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dashDraw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes dashAreaIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dashDotPop {
	from {
		opacity: 0;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes dashBarGrow {
	to {
		width: var(--bar-w, 50%);
	}
}

@keyframes dashPulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.4); }
	50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(99, 91, 255, 0); }
}

/* Responsive */
@media (max-width: 640px) {
	.dash-mock__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.dash-mock__chart-row {
		grid-template-columns: 1fr;
	}

	.dash-mock__sidebar {
		width: 38px;
	}

	.dash-mock__stat-value {
		font-size: 16px;
	}

	.dash-mock__body {
		min-height: 260px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dash-mock__chart-line,
	.dash-mock__chart-area,
	.dash-mock__chart-dot,
	.dash-mock__bar-fill,
	.dash-mock__stat-card,
	.dash-mock__chart-card,
	.dash-mock__activity,
	.dash-mock__pulse {
		animation: none !important;
		opacity: 1 !important;
		stroke-dashoffset: 0 !important;
		width: var(--bar-w, 50%) !important;
	}
}