/**
 * DigiWebFX Homepage Styles
 * Advanced 3D Agency Hero, Glowing Gold Metallic Accents & Pure White Flow
 *
 * @package DigiWebFX
 */

/* 1. Pure White Hero Section with Adobe-Level Interactive Search & AI Console */
.hero-section-white {
	background-color: var(--white);
	position: relative;
	overflow: hidden;
	padding-top: clamp(28px, 3.2vw, 44px);
	padding-bottom: clamp(32px, 3.6vw, 48px);
	border-bottom: 1px solid rgba(15, 27, 61, 0.08);
}

/* Subtle Architectural Ambient Layers on Pure White */
.hero-white-ambient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.ambient-grid-pattern {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(15, 27, 61, 0.045) 1px, transparent 1px);
	background-size: 28px 28px;
}

.ambient-gold-glow {
	position: absolute;
	top: -140px;
	right: -100px;
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.03) 45%, rgba(255, 255, 255, 0) 70%);
}

.ambient-navy-glow {
	position: absolute;
	bottom: -100px;
	left: -80px;
	width: 550px;
	height: 550px;
	background: radial-gradient(circle, rgba(10, 26, 51, 0.035) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Centered High-Impact Hero Container */
.hero-centered-container {
	position: relative;
	z-index: 1;
	max-width: 1040px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 1. Live Agency Scope Pill (Centered) */
.hero-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	border: 1px solid rgba(212, 175, 55, 0.45);
	box-shadow: 0 4px 16px rgba(10, 26, 51, 0.04), 0 0 12px rgba(212, 175, 55, 0.12);
	padding: 6px 14px;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-5);
	max-width: 100%;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-status-pill:hover {
	border-color: rgba(212, 175, 55, 0.7);
	box-shadow: 0 6px 20px rgba(10, 26, 51, 0.06), 0 0 16px rgba(212, 175, 55, 0.18);
}

.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #10B981;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	animation: status-pulse 2s infinite;
	flex-shrink: 0;
}

@keyframes status-pulse {
	0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
	70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pill-primary {
	font-family: var(--font-accent);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--navy-950);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pill-sep {
	color: #D4AF37;
	font-size: 12px;
	line-height: 1;
	flex-shrink: 0;
}

.pill-hubs {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 600;
	color: #64748B;
	letter-spacing: 0.03em;
}

/* 2. Master Search & AI Hook Heading (Centered, Sentence Case, Grammatically Flawless & Keyword-Rich) */
.hero-centered-title {
	font-size: clamp(2.3rem, 1.8rem + 2.5vw, 4.1rem);
	line-height: 1.15;
	font-weight: 850;
	color: var(--navy-950);
	margin: 0 auto var(--space-5);
	letter-spacing: -0.03em;
	max-width: 22ch;
	text-align: center;
}

.hero-centered-title .title-lead {
	display: inline;
	color: var(--navy-950);
}

.hero-centered-title .title-mid {
	color: var(--slate-600);
	font-weight: 700;
	margin: 0 4px;
}

/* Gold Shimmer Text (Metallic Light Sweep) */
.gold-shimmer-text {
	background: linear-gradient(135deg, #8A6D12 0%, #D4AF37 25%, #FFF2A3 45%, #D4AF37 65%, #8A6D12 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	animation: gold-sweep 5s ease-in-out infinite alternate;
}

@keyframes gold-sweep {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

/* 3. Crystal-Clear Value Subhead */
.hero-centered-subhead {
	font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
	line-height: 1.65;
	color: #475569;
	max-width: 58ch;
	margin: 0 auto var(--space-8);
	text-align: center;
}

/* 4. Interactive Website Audit Bar (High Converting) */
.hero-audit-wrapper {
	width: 100%;
	max-width: 680px;
	margin: 0 auto var(--space-10);
}

.hero-audit-form {
	width: 100%;
}

.audit-input-container {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border: 1.5px solid rgba(212, 175, 55, 0.5);
	border-radius: var(--radius-full);
	padding: 6px 8px 6px 18px;
	box-shadow: 0 16px 40px -10px rgba(10, 26, 51, 0.1), 0 0 24px rgba(212, 175, 55, 0.12);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.audit-input-container:focus-within {
	border-color: var(--gold-500);
	box-shadow: 0 20px 48px -10px rgba(10, 26, 51, 0.14), 0 0 32px rgba(212, 175, 55, 0.22);
}

.audit-input-icon {
	display: flex;
	align-items: center;
	color: var(--gold-600);
	margin-right: 10px;
	flex-shrink: 0;
}

.audit-input-field {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--font-accent);
	font-size: 15px;
	color: var(--navy-950);
	padding: 8px 0;
	min-width: 0;
}

.audit-input-field::placeholder {
	color: #94A3B8;
	font-size: 14.5px;
}

.btn-audit-now {
	background: linear-gradient(135deg, #B8922B 0%, #F5D77F 28%, #D4AF37 55%, #FAF0CD 78%, #9C7A1E 100%);
	background-size: 200% auto;
	color: #050D1A;
	font-family: var(--font-accent);
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 12px 28px;
	border-radius: var(--radius-full);
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 8px 20px -2px rgba(212, 175, 55, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.8);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-position 0.5s ease;
	flex-shrink: 0;
}

.btn-audit-now:hover {
	transform: translateY(-2px);
	background-position: right center;
	box-shadow: 0 14px 30px -2px rgba(212, 175, 55, 0.65), inset 0 1px 1px rgba(255, 255, 255, 1);
	color: #050D1A;
}

.btn-arrow-icon {
	transition: transform var(--transition-fast);
}

.btn-audit-now:hover .btn-arrow-icon {
	transform: translateX(3px);
}

.audit-guarantees-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

.audit-guarantee-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
}

.audit-guarantee-sep {
	color: #CBD5E1;
	font-size: 12px;
}

/* 5. Real Advanced-Level Vector Platform Showcase (6 Platforms) */
.hero-platforms-bar {
	width: 100%;
	max-width: 980px;
	margin: 0 auto var(--space-8);
}

.platforms-bar-label {
	display: block;
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--slate-400);
	margin-bottom: var(--space-4);
	text-transform: uppercase;
}

.platforms-bar-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.platform-chip-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-sm);
	text-align: left;
	box-shadow: 0 4px 14px rgba(10, 26, 51, 0.03);
	transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
	cursor: default;
}

.platform-chip-card:hover {
	transform: translateY(-2px);
	border-color: rgba(212, 175, 55, 0.55);
	box-shadow: 0 8px 24px rgba(10, 26, 51, 0.08), 0 0 16px rgba(212, 175, 55, 0.12);
}

.chip-svg-wrap {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--transition-fast);
}

.platform-chip-card:hover .chip-svg-wrap {
	background: #FFFFFF;
}

.platform-icon-svg {
	display: block;
}

.chip-text-wrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chip-title {
	font-family: var(--font-accent);
	font-size: 12.5px;
	font-weight: 750;
	color: var(--navy-950);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chip-sub {
	font-size: 10px;
	font-weight: 600;
	color: #64748B;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 6. Partner Accreditations Strip (Centered) */
.hero-partners-strip {
	margin-bottom: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.hero-partners-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	margin: 0 auto;
}

.partners-label {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--slate-400);
}

.partners-badges-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	justify-content: center;
}

.partner-badge {
	display: inline-flex;
	align-items: center;
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-sm);
	padding: 5px 12px;
	transition: all var(--transition-fast);
}

.partner-badge:hover {
	background: var(--white);
	border-color: rgba(212, 175, 55, 0.4);
	box-shadow: 0 4px 12px rgba(10, 26, 51, 0.06);
	transform: translateY(-1px);
}

.partner-svg {
	display: block;
	height: 18px;
	width: auto;
}

.clutch-badge-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-accent);
	font-size: 11px;
}

.clutch-brand {
	font-weight: 800;
	color: #122238;
	letter-spacing: -0.02em;
}

.clutch-score {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--navy-900);
}

.clutch-stars {
	color: #FF5A36;
	letter-spacing: 1px;
}

.clutch-reviews-count {
	font-size: 10px;
	color: var(--slate-400);
	font-weight: 600;
}

.hubspot-badge-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-accent);
	font-size: 11px;
}

.hubspot-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #FF7A59;
}

.hubspot-brand {
	font-weight: 700;
	color: #33475B;
}

.hubspot-tag {
	font-size: 10px;
	font-weight: 600;
	color: #00A38D;
	background: rgba(0, 163, 141, 0.1);
	padding: 1px 5px;
	border-radius: 3px;
}

/* 3. Right Column: Adobe-Level Interactive Search & AI Console (Pure White Luxury) */
.hero-white-visual {
	position: relative;
	perspective: 1200px;
}

.discovery-console-card,
.global-hubs-card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: var(--radius-md);
	box-shadow: 0 25px 60px -15px rgba(10, 26, 51, 0.1), 0 0 30px rgba(212, 175, 55, 0.08);
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.discovery-console-card:hover,
.global-hubs-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 32px 70px -15px rgba(10, 26, 51, 0.14), 0 0 35px rgba(212, 175, 55, 0.14);
}

.console-glass-specular {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.9) 30%, rgba(245, 222, 136, 1) 50%, rgba(212, 175, 55, 0.9) 70%, rgba(212, 175, 55, 0) 100%);
	z-index: 5;
}

.console-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	background: #F8FAFC;
	border-bottom: 1px solid rgba(15, 27, 61, 0.08);
}

.console-header-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.brand-globe-icon {
	color: var(--gold-600);
	flex-shrink: 0;
}

.console-mac-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mac-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.dot-red { background-color: #EF4444; }
.dot-yellow { background-color: #F59E0B; }
.dot-green { background-color: #10B981; }

.console-title {
	font-family: var(--font-accent);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--navy-950);
}

.console-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 700;
	color: #059669;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.25);
	padding: 2px 7px;
	border-radius: var(--radius-full);
}

.pulse-green-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #10B981;
	animation: status-pulse 2s infinite;
}

/* 4 Regional Tabs (Categorized Pattern with GCC Countries) */
.regional-tabs-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #F1F5F9;
	border-bottom: 1px solid rgba(15, 27, 61, 0.08);
	padding: 6px;
	gap: 6px;
}

.region-tab-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 6px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 700;
	color: #475569;
	cursor: pointer;
	transition: all var(--transition-fast);
	position: relative;
	text-decoration: none;
}

.region-tab-btn:hover {
	background: #FFFFFF;
	color: var(--navy-950);
}

.region-tab-btn:focus-visible {
	outline: 2px solid var(--gold-500);
	outline-offset: 1px;
}

.region-tab-btn.is-active {
	background: #FFFFFF;
	color: var(--navy-950);
	border-color: rgba(212, 175, 55, 0.45);
	box-shadow: 0 2px 8px rgba(10, 26, 51, 0.06);
}

.country-chip-flag,
.tab-flag-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
}

.svg-flag {
	display: inline-block;
	vertical-align: middle;
	border-radius: 2px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
	flex-shrink: 0;
}

.tab-region-flag {
	font-size: 15px;
	line-height: 1;
}

.tab-region-name {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.tab-badge-gold {
	font-family: var(--font-mono);
	font-size: 8px;
	font-weight: 700;
	background: rgba(212, 175, 55, 0.15);
	color: #996515;
	border: 1px solid rgba(212, 175, 55, 0.35);
	padding: 1px 4px;
	border-radius: 3px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Regional Content Panels */
.regional-panels-wrap {
	padding: 16px 18px;
	min-height: 215px;
	background: #FFFFFF;
}

.regional-panel {
	display: none;
	animation: fade-in-panel 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.regional-panel.is-active {
	display: block;
}

@keyframes fade-in-panel {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.region-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px dashed rgba(15, 27, 61, 0.1);
}

.region-label-caps {
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 800;
	color: var(--navy-950);
	letter-spacing: 0.05em;
}

.region-hours-pill {
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 600;
	color: #0284C7;
	background: rgba(2, 132, 199, 0.08);
	border: 1px solid rgba(2, 132, 199, 0.2);
	padding: 2px 8px;
	border-radius: var(--radius-full);
}

/* Country & City Pills Grid (NP Digital Pattern with GCC Countries) */
.country-pills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.country-chip {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 9px;
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--navy-900);
	font-family: var(--font-accent);
	font-size: 11px;
	transition: all var(--transition-fast);
}

.country-chip:hover {
	background: #FFFFFF;
	border-color: rgba(212, 175, 55, 0.6);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(10, 26, 51, 0.06);
	color: var(--navy-950);
}

.country-chip.highlight-chip {
	background: rgba(212, 175, 55, 0.07);
	border-color: rgba(212, 175, 55, 0.4);
}

.country-chip.highlight-chip:hover {
	background: #FFFFFF;
	border-color: var(--gold-500);
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.15);
}

.country-chip-flag {
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}

.country-chip-name {
	font-size: 10.5px;
	color: var(--navy-950);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.country-chip-name strong {
	font-weight: 700;
	color: var(--navy-950);
}

/* Region Capabilities Strip */
.region-capabilities-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 9px 12px;
	background: #FAFAFA;
	border: 1px solid rgba(15, 27, 61, 0.06);
	border-radius: var(--radius-sm);
}

.region-cap-item {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 11px;
	line-height: 1.4;
	color: #475569;
}

.region-cap-item svg {
	flex-shrink: 0;
	margin-top: 2px;
	stroke: var(--gold-600);
}

.region-cap-item span {
	font-weight: 500;
}

/* Lower Workspace Visual Window (Real Office & Code WebP Photography) */
.console-workspace-strip {
	border-top: 1px solid rgba(15, 27, 61, 0.08);
	background: #FAFAFA;
	padding: 10px 16px;
}

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

.ws-label {
	font-family: var(--font-accent);
	font-size: 9.5px;
	font-weight: 800;
	color: var(--gold-700);
	letter-spacing: 0.06em;
}

.ws-current-task {
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 700;
	color: var(--navy-950);
}

.workspace-visual-slider {
	position: relative;
	height: 130px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid rgba(15, 27, 61, 0.1);
}

.ws-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s ease;
}

.ws-frame.is-active {
	opacity: 1;
	visibility: visible;
}

.ws-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ws-frame-tag {
	position: absolute;
	bottom: 8px;
	left: 8px;
	background: rgba(10, 26, 51, 0.85);
	color: #FFFFFF;
	font-family: var(--font-accent);
	font-size: 9.5px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 3px;
	backdrop-filter: blur(8px);
	letter-spacing: 0.02em;
}

/* Integrated Enterprise Trust & Performance Metrics Bar (Zero Overlap) */
.console-metrics-footer {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 10px 16px;
	background: #FFFFFF;
	border-top: 1px solid rgba(15, 27, 61, 0.08);
}

.metric-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.metric-icon-box {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.metric-green {
	background: rgba(16, 185, 129, 0.12);
}

.metric-gold {
	background: rgba(212, 175, 55, 0.15);
}

.metric-text-wrap {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.metric-lbl {
	font-size: 8.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748B;
}

.metric-val {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 700;
	color: var(--navy-950);
}

.metric-divider {
	width: 1px;
	height: 24px;
	background: rgba(15, 27, 61, 0.08);
}

/* Responsive adjustments for Centered Hero & Platforms Bar */
@media (max-width: 1024px) {
	.platforms-bar-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.hero-section-white {
		padding-top: clamp(36px, 5vw, 64px);
		padding-bottom: clamp(48px, 6vw, 80px);
	}
	.hero-centered-title {
		max-width: 100%;
	}
	.platforms-bar-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.platform-chip-card {
		padding: 8px 10px;
		gap: 8px;
	}
	.audit-input-container {
		flex-direction: column;
		border-radius: var(--radius-md);
		padding: 12px;
		gap: 10px;
	}
	.audit-input-icon {
		display: none;
	}
	.audit-input-field {
		width: 100%;
		text-align: center;
		padding: 6px 0;
	}
	.btn-audit-now {
		width: 100%;
		justify-content: center;
		padding: 12px 20px;
	}
	.audit-guarantees-row {
		gap: 8px;
		flex-direction: column;
	}
	.audit-guarantee-sep {
		display: none;
	}
	.hero-white-actions {
		flex-direction: column;
		width: 100%;
	}
	.hero-white-actions .btn {
		width: 100%;
		justify-content: center;
	}
	.console-platform-tabs,
	.regional-tabs-nav {
		grid-template-columns: repeat(2, 1fr);
	}
	.country-pills-grid {
		grid-template-columns: 1fr;
	}
}

/* 4. Pure White Section Overhauls (Sections 3 - 13) */
.section-white {
	background-color: var(--white);
	color: var(--slate-600);
}

.section-white h2,
.section-white h3 {
	color: var(--navy-900);
}

.section-white .section-header p,
.section-white .cta-subhead {
	color: var(--slate-600);
}

/* Logo Strip on White */
.logo-strip-section {
	background-color: var(--white);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
	padding: var(--space-8) 0;
}

.logo-strip-label {
	font-family: var(--font-accent);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--slate-400);
	text-align: center;
	margin-bottom: var(--space-6);
	letter-spacing: 0.12em;
}

.logo-strip-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 4vw, 48px);
}

.logo-item {
	color: var(--navy-900);
	opacity: 0.65;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.logo-item:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* Results Band on White */
.results-band {
	background-color: var(--white);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.results-band .stat-block {
	background-color: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.08);
	box-shadow: 0 10px 30px -10px rgba(10, 26, 51, 0.06);
	border-top: 3px solid var(--gold-500);
}

.results-band .stat-value {
	color: var(--gold-700);
	font-weight: 700;
}

.results-band .stat-label {
	color: var(--navy-900);
}

.results-band .stat-meta {
	color: var(--slate-600);
}

/* Case Study Cards on White */
.work-section {
	background-color: var(--white);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.case-study-card {
	background-color: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.08);
	box-shadow: 0 10px 30px -10px rgba(10, 26, 51, 0.06);
}

.case-study-card:hover {
	border-color: rgba(212, 175, 55, 0.45);
	box-shadow: 0 20px 45px -12px rgba(10, 26, 51, 0.12);
}

.case-card-title {
	color: var(--navy-900);
}

.case-tag {
	color: var(--gold-700);
}

.case-metric-box {
	background-color: #FAF9F5;
	border: 1px solid rgba(212, 175, 55, 0.25);
	border-radius: var(--radius-sm);
}

.case-stat-number {
	color: var(--gold-700);
}

.case-flow {
	color: var(--slate-600);
}

.step-label {
	color: var(--navy-900);
}

/* Process Steps on White */
.process-section {
	background-color: var(--white);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.process-step-card {
	background-color: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.08);
	box-shadow: 0 10px 30px -10px rgba(10, 26, 51, 0.06);
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
	margin-bottom: var(--space-4);
}

.process-step-card:hover {
	border-color: rgba(212, 175, 55, 0.4);
	box-shadow: 0 16px 36px -10px rgba(10, 26, 51, 0.1);
}

.step-badge {
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.1);
	border: 1px solid rgba(212, 175, 55, 0.3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	line-height: 1;
}

.step-body h3 {
	color: var(--navy-900);
	font-size: var(--fs-lg);
	margin-bottom: var(--space-2);
}

.step-body p {
	color: var(--slate-600);
	margin-bottom: 0;
}

/* Testimonials on White */
.testimonials-section {
	background-color: var(--white);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.testimonial-card {
	background-color: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.08);
	box-shadow: 0 10px 30px -10px rgba(10, 26, 51, 0.06);
}

.testimonial-card:hover {
	border-color: rgba(212, 175, 55, 0.4);
	box-shadow: 0 16px 40px -10px rgba(10, 26, 51, 0.1);
}

.testimonial-stars {
	color: var(--gold-500);
	margin-bottom: var(--space-4);
}

.testimonial-quote p {
	color: var(--slate-600);
	font-style: italic;
}

.testimonial-author-meta .author-name {
	color: var(--navy-900);
	font-weight: 700;
}

.testimonial-author-meta .author-sub {
	color: var(--slate-400);
	font-size: var(--fs-xs);
}

/* FAQ on White */
.faq-section {
	background-color: var(--white);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.faq-item {
	background-color: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.08);
	box-shadow: 0 6px 20px rgba(10, 26, 51, 0.04);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item:hover,
.faq-item[open] {
	border-color: rgba(212, 175, 55, 0.45);
	box-shadow: 0 12px 30px -10px rgba(10, 26, 51, 0.08);
}

.faq-summary {
	color: var(--navy-900);
	font-size: var(--fs-md);
	font-weight: 600;
	padding: var(--space-6);
}

.faq-icon {
	color: var(--gold-700);
}

.faq-content {
	color: var(--slate-600);
	padding: 0 var(--space-6) var(--space-6);
	font-size: var(--fs-base);
	line-height: 1.65;
}

/* Consultation Form on White */
.cta-section {
	background-color: var(--white);
	position: relative;
}

.cta-form-container {
	background-color: var(--white);
	border: 1px solid rgba(212, 175, 55, 0.35);
	box-shadow: 0 25px 65px -15px rgba(10, 26, 51, 0.1), 0 0 35px rgba(212, 175, 55, 0.1);
	border-radius: var(--radius-md);
	padding: clamp(24px, 5vw, 48px);
	max-width: var(--reading-col);
	margin: 0 auto;
}

.cta-form-container .form-label {
	color: var(--navy-900);
	font-weight: 600;
}

.cta-form-container .form-input,
.cta-form-container .form-select,
.cta-form-container .form-textarea {
	background-color: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.12);
	color: var(--navy-900);
	border-radius: var(--radius-sm);
}

.cta-form-container .form-input:focus,
.cta-form-container .form-select:focus,
.cta-form-container .form-textarea:focus {
	background-color: var(--white);
	border-color: var(--gold-500);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
	outline: none;
}

/* ==========================================================
   4. Asymmetrical 3D Bento Grid Capabilities
   ========================================================== */
.services-bento-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 1024px) {
	.services-bento-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-8);
	}

	.bento-card.bento-hero {
		grid-column: span 2;
	}

	.bento-card.bento-span-1 {
		grid-column: span 1;
	}
}

.bento-card {
	position: relative;
	overflow: hidden;
	background: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-md);
	padding: clamp(24px, 3.5vw, 36px);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.bento-card:hover {
	transform: translateY(-6px);
	border-color: rgba(212, 175, 55, 0.5);
	box-shadow: 0 24px 50px -12px rgba(10, 26, 51, 0.1), 0 0 28px rgba(212, 175, 55, 0.15);
}

.card-beam-glow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bento-card:hover .card-beam-glow {
	opacity: 1;
}

.service-card-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.service-card-badges {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.service-pill-tag {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--navy-900);
	background: #F1F5F9;
	padding: 4px 8px;
	border-radius: 4px;
}

.service-pill-highlight {
	font-size: 11px;
	font-weight: 700;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.12);
	border: 1px solid rgba(212, 175, 55, 0.35);
	padding: 4px 8px;
	border-radius: 4px;
}

/* ==========================================================
   5. Agency Advantage Comparison Matrix
   ========================================================== */
.comparison-section {
	background-color: var(--white);
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.comparison-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 1024px) {
	.comparison-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

.comparison-card {
	padding: clamp(24px, 4vw, 40px);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.comparison-legacy {
	background-color: #FAFCFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
}

.comparison-digiwebfx {
	background-color: var(--white);
	border: 2px solid rgba(212, 175, 55, 0.5);
	box-shadow: 0 25px 60px -15px rgba(212, 175, 55, 0.22), 0 10px 30px rgba(10, 26, 51, 0.06);
	position: relative;
	overflow: hidden;
}

.comparison-card-header {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid rgba(15, 27, 61, 0.08);
}

.comparison-badge-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-3);
}

.comparison-badge {
	font-family: var(--font-accent);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	display: inline-block;
}

.badge-legacy {
	color: #64748B;
}

.badge-premier {
	color: var(--gold-700);
}

.comparison-badge-tag {
	font-size: 11px;
	background: rgba(212, 175, 55, 0.15);
	color: var(--gold-700);
	border: 1px solid rgba(212, 175, 55, 0.4);
	padding: 2px 8px;
	border-radius: var(--radius-full);
	font-weight: 700;
}

.comparison-col-title {
	font-size: clamp(20px, 1.6vw, 24px) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin-bottom: var(--space-2);
	color: var(--navy-900);
}

.comparison-col-desc {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--slate-600);
	margin-bottom: 20px;
}

.comparison-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
}

.comparison-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.comparison-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 14px;
	margin-top: 2px;
}

.icon-cross {
	background-color: #FEE2E2;
	color: #DC2626;
}

.icon-check {
	background-color: #ECFDF5;
	color: #059669;
	border: 1px solid rgba(5, 150, 105, 0.3);
}

.comparison-text strong {
	color: var(--navy-900);
	display: inline;
	margin-right: 4px;
}

.comparison-text span {
	color: var(--slate-600);
}

/* ==========================================================
   6. Interactive ROI & Pipeline Simulator
   ========================================================== */
.roi-section {
	background-color: var(--white);
}

.roi-simulator-card {
	background: var(--white);
	border: 1px solid rgba(212, 175, 55, 0.45);
	box-shadow: 0 30px 70px -15px rgba(10, 26, 51, 0.08), 0 0 35px rgba(212, 175, 55, 0.12);
	border-radius: var(--radius-md);
	padding: clamp(24px, 4vw, 48px);
}

.roi-simulator-header {
	text-align: center;
	max-width: var(--reading-col);
	margin: 0 auto var(--space-8);
}

.roi-header-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-accent);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.12);
	padding: 4px 12px;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-3);
}

.roi-title {
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-2);
	color: var(--navy-900);
}

.roi-desc {
	font-size: var(--fs-sm);
	color: var(--slate-600);
	margin-bottom: 0;
}

.roi-simulator-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 1024px) {
	.roi-simulator-grid {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--space-12);
		align-items: center;
	}
}

.roi-controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.roi-control-group {
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-sm);
	padding: var(--space-4) var(--space-6);
}

.roi-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-accent);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--navy-900);
	margin-bottom: var(--space-3);
}

.roi-badge-pill {
	font-size: 11px;
	font-weight: 600;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.15);
	padding: 2px 8px;
	border-radius: var(--radius-full);
}

.roi-market-buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-2);
}

.roi-market-btn {
	background: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.12);
	border-radius: var(--radius-sm);
	padding: 10px 4px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	transition: all var(--transition-fast);
}

.roi-market-btn .market-code {
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
	color: var(--navy-900);
}

.roi-market-btn .market-name {
	font-size: 10px;
	color: var(--slate-600);
}

.roi-market-btn:hover {
	border-color: var(--gold-500);
	background: rgba(212, 175, 55, 0.05);
}

.roi-market-btn.is-active {
	background: var(--navy-900);
	border-color: var(--navy-900);
	box-shadow: 0 4px 14px rgba(10, 26, 51, 0.25);
}

.roi-market-btn.is-active .market-code {
	color: var(--gold-400);
}

.roi-market-btn.is-active .market-name {
	color: #E2E8F0;
}

.roi-slider-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-2);
}

.roi-slider-value {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--gold-700);
}

.roi-slider {
	width: 100%;
	height: 8px;
	border-radius: var(--radius-full);
	background: #E2E8F0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.roi-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gold-500);
	border: 3px solid var(--white);
	box-shadow: 0 2px 8px rgba(10, 26, 51, 0.25);
	cursor: pointer;
	transition: transform var(--transition-fast);
}

.roi-slider::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

.roi-slider-range-labels {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--slate-400);
	margin-top: 6px;
}

/* Right: Results Console */
.roi-results-console {
	background: #F8FAFC;
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: var(--radius-md);
	padding: clamp(20px, 3.5vw, 32px);
	box-shadow: inset 0 2px 8px rgba(10, 26, 51, 0.02);
}

.roi-console-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgba(15, 27, 61, 0.08);
}

.roi-model-badge {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 700;
	color: var(--navy-900);
	background: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.1);
	padding: 2px 8px;
	border-radius: 4px;
}

.roi-major-metric {
	margin-bottom: var(--space-6);
}

.roi-major-label {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--slate-600);
}

.roi-major-value {
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 800;
	line-height: 1.05;
	margin: var(--space-2) 0;
}

.roi-major-sub {
	font-size: var(--fs-xs);
	color: var(--slate-600);
	margin-bottom: 0;
	line-height: 1.5;
}

.roi-breakdown-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.roi-breakdown-card {
	background: var(--white);
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.breakdown-lbl {
	font-size: 11px;
	color: var(--slate-600);
}

.breakdown-val {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--navy-900);
}

.roi-cta-wrap {
	margin-top: var(--space-4);
}

.footer-logo {
	height: 40px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
}

/* Responsive adjustments for 3D Hero */
@media (max-width: 1024px) {
	.hero-3d-scene {
		margin-top: var(--space-8);
	}
	.hero-3d-card {
		transform: none;
		animation: none;
		max-width: 100%;
	}
	.hero-float-badge {
		position: static;
		margin-bottom: var(--space-3);
		animation: none;
	}
	.hero-float-badge.float-top-right,
	.hero-float-badge.float-bottom-left {
		display: inline-flex;
	}
}

@media (max-width: 768px) {
	.hero-section {
		padding-top: var(--space-6);
		padding-bottom: var(--space-10);
	}
	.hero-status-pill {
		padding: 6px 12px;
		gap: 6px;
	}
	.pill-primary {
		font-size: 11px;
	}
	.pill-hubs {
		font-size: 10.5px;
	}
	.hero-title {
		font-size: clamp(1.85rem, 5.2vw, 2.35rem);
		line-height: 1.14;
	}
	.hero-actions {
		flex-direction: column;
		width: 100%;
	}
	.hero-actions .btn {
		width: 100%;
		justify-content: center;
	}
	.hero-guarantee-line {
		gap: var(--space-2);
	}
	.guarantee-item {
		width: 100%;
		font-size: 12px;
	}
	.partners-badges-row {
		gap: 8px;
	}
	.partner-badge {
		padding: 5px 10px;
	}
	.hero-float-badge {
		display: none;
	}
}

@media (max-width: 480px) {
	.hero-status-pill {
		flex-wrap: wrap;
		padding: 6px 10px;
		border-radius: var(--radius-sm);
	}
	.pill-sep {
		display: none;
	}
	.pill-hubs {
		display: block;
		width: 100%;
	}
	.hero-title {
		font-size: clamp(1.65rem, 6.8vw, 2rem);
	}
	.partner-badge {
		flex: 1 1 45%;
		justify-content: center;
	}
}


/* ==========================================================================
   ENTERPRISE REBUILD (MNC QUALITY & DESIGN SYSTEM STANDARDS)
   ========================================================================== */

:root {
	--navy-900: #0B1220;
	--navy-700: #16233B;
	--ink: #0B1220;
	--muted: #5B6678;
	--bg: #FFFFFF;
	--bg-soft: #F7F8FA;
	--line: #E6E9EF;
	--gold-500: #C9A227;
	--gold-700: #8A6A0A;
	--blue-600: #1456F0;
	--blue-700: #0F43BF;
	--success: #12A150;
	--radius-s: 10px;
	--radius-m: 16px;
	--radius-l: 24px;
	--shadow-1: 0 1px 2px rgba(11, 18, 32, .06), 0 8px 24px rgba(11, 18, 32, .06);
	--container: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--fs-h1: clamp(2.1rem, 4.6vw, 3.6rem);
	--fs-h2: clamp(1.6rem, 3vw, 2.4rem);
	--fs-body: 1.0625rem;
	--lh-body: 1.6;
}

/* 0. Top Bar Slim (36px) */
.site-topbar {
	height: 36px;
	min-height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	background: var(--navy-900);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.8125rem;
	color: #E2E8F0;
	overflow: hidden;
}

.topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.topbar-left,
.topbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.topbar-link {
	color: #E2E8F0;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s;
}

.topbar-link:hover,
.topbar-link:focus-visible {
	color: #E3C566;
}

@media (max-width: 768px) {
	.topbar-right {
		display: none !important;
	}
	.topbar-inner {
		justify-content: center;
	}
	.topbar-left {
		justify-content: center;
		width: 100%;
	}
	.topbar-text {
		font-size: 11px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		max-width: 100%;
	}
}

/* 1. Header (Sticky <= 72px, Fix Button Clipping, Signature Website Gold) */
.site-header {
	max-height: 72px;
}

/* Master Signature Website Gold Button (Replaces Blue "har jagah") */
.btn-gold-impact,
.btn-audit-primary.header-cta,
.btn-audit-submit,
.btn-cta-main {
	background: var(--gold-gradient) !important;
	color: #0A1A33 !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	border: 1px solid rgba(212, 175, 55, 0.5) !important;
	border-radius: var(--radius-s) !important;
	box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35) !important;
	text-shadow: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	white-space: nowrap !important;
	transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

.btn-gold-impact:hover,
.btn-audit-primary.header-cta:hover,
.btn-audit-submit:hover,
.btn-cta-main:hover {
	background: linear-gradient(135deg, #C9A227 0%, #F5D77F 45%, #E3C566 60%, #B8922B 100%) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 26px rgba(212, 175, 55, 0.55) !important;
}

.btn-audit-primary.header-cta {
	padding: 0.7rem 1.35rem !important;
	line-height: 1 !important;
}

/* WCAG AA Strict Contrast Compliance for Eyebrows & Section Headers */
.eyebrow,
.eyebrow-gold,
.section-header .eyebrow {
	color: var(--gold-700) !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
}

/* 2. Hero Enterprise Layout (Rock-Solid at 90%, 100%, 110% Zoom & Responsive) */
.hero-enterprise {
	padding: clamp(28px, 3.2vw, 44px) 0;
	background-color: #FFFFFF;
}

.hero-container-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	width: 100%;
}

@media (max-width: 1200px) and (min-width: 992px) {
	.hero-container-grid {
		grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr) !important;
		gap: 20px !important;
	}
	.hero-visual-col {
		display: block !important;
	}
	.growth-telemetry-card {
		padding: 16px 16px 14px !important;
	}
}

@media (max-width: 991px) {
	.hero-container-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.hero-visual-col {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.growth-telemetry-card {
		max-width: 440px;
		width: 100%;
	}
}

.hero-content-col {
	min-width: 0;
	max-width: 100%;
}

.hero-eyebrow-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.12);
	padding: 6px 14px;
	border-radius: 9999px;
	border: 1px solid rgba(212, 175, 55, 0.35);
	margin-bottom: 0.85rem;
}

.hero-eyebrow-badge .eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #D4AF37;
	display: inline-block;
}

/* Semantic Multi-Line H1 Heading (Prevents Awkward Wrapping at all zooms) */
.hero-h1-title {
	font-size: clamp(2rem, 3.4vw, 3.35rem);
	line-height: 1.18;
	font-weight: 800;
	color: var(--navy-900);
	letter-spacing: -0.025em;
	margin-bottom: 1.25rem;
	word-break: normal;
	overflow-wrap: break-word;
}

.hero-h1-lead {
	display: block;
}

.hero-h1-sub {
	display: block;
	margin-top: 0.35rem;
	color: var(--navy-900);
}

/* Strictly Gold Shimmer Gradient on "ChatGPT & Claude" in H1 */
.hero-h1-title .gold-shimmer-text {
	background: linear-gradient(135deg, #B8922B 0%, #D4AF37 50%, #9C7A1E 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	font-weight: 800;
}

.hero-subhead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--muted);
	max-width: 580px;
	margin-bottom: 1.75rem;
}

/* Hero Audit Box */
.hero-audit-box {
	max-width: 540px;
	width: 100%;
	margin-bottom: 1rem;
}

.audit-input-container {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border: 1.5px solid rgba(212, 175, 55, 0.4);
	border-radius: var(--radius-m);
	padding: 6px 6px 6px 16px;
	box-shadow: 0 4px 20px rgba(11, 18, 32, 0.05), 0 0 12px rgba(212, 175, 55, 0.1);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.audit-input-container:focus-within {
	border-color: #D4AF37;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

.audit-input-icon {
	color: var(--muted);
	display: flex;
	align-items: center;
	margin-right: 8px;
	flex-shrink: 0;
}

.audit-input-field {
	border: none;
	outline: none;
	flex: 1;
	font-size: 0.95rem;
	color: var(--navy-900);
	min-width: 0;
	padding: 10px 8px;
	background: transparent;
}

.btn-audit-submit {
	padding: 0.85rem 1.4rem !important;
	font-size: 0.95rem !important;
	flex-shrink: 0;
}

.audit-microcopy-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
	font-size: 0.8125rem;
	color: var(--muted);
	font-weight: 500;
}

.microcopy-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.microcopy-sep {
	color: #D1D8E6;
}

.hero-secondary-action {
	margin-top: 1rem;
}

.hero-scroll-link {
	color: var(--navy-900);
	font-weight: 600;
	font-size: 0.9375rem;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-scroll-link:hover {
	color: var(--gold-700);
	border-color: var(--gold-700);
}

/* Right Column: Multi-Engine Visibility & Authority Console */
.visibility-report-card {
	background: #FFFFFF;
	border: 1px solid rgba(212, 175, 55, 0.25);
	border-radius: var(--radius-l);
	box-shadow: 0 12px 36px rgba(11, 18, 32, 0.05), 0 0 16px rgba(212, 175, 55, 0.08);
	padding: 24px;
	position: relative;
	overflow: hidden;
}

.vcard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 16px;
}

.vcard-title {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--navy-900);
	display: block;
}

.vcard-sub {
	font-size: 0.75rem;
	color: var(--muted);
}

.vcard-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	color: #0D6832;
	background: #EBF8F1;
	padding: 4px 10px;
	border-radius: 9999px;
}

.status-pulse-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #12A150;
}

.vcard-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vcard-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-radius: var(--radius-s);
	background: var(--bg-soft);
	border: 1px solid #ECEEF3;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.vcard-row:hover {
	transform: translateX(4px);
	border-color: rgba(212, 175, 55, 0.4);
}

.vcard-logo-wrap {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	flex-shrink: 0;
}

.vcard-text {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--navy-900);
	display: block;
}

.vcard-detail {
	font-size: 0.75rem;
	color: var(--muted);
	display: block;
}

.vcard-badge {
	margin-left: auto;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.badge-seo { background: #E8F0FE; color: #1558B5; }
.badge-bing { background: #E6F4EA; color: #0F5B28; }
.badge-chatgpt { background: #E6F8F2; color: #0A6148; }
.badge-claude { background: #FDF3E7; color: #78350F; }

.vcard-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	margin-top: 14px;
}

.vcard-footer-item {
	text-align: center;
	flex: 1;
}

.vf-num {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--navy-900);
	display: block;
}

.vf-lbl {
	font-size: 0.6875rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
}

.vcard-footer-sep {
	width: 1px;
	height: 24px;
	background: var(--line);
}

/* ==========================================================================
   STATIC ACCREDITATION PARTNER BAND (~180px Static Elevation)
   ========================================================================== */
.static-partner-band {
	padding: 36px 0;
	background: #FFFFFF;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
	box-shadow: 0 4px 16px rgba(10, 26, 51, 0.02);
}

.partner-band-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}

.partner-band-label {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-700);
}

.partner-badges-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

.static-partner-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	height: 62px;
	width: 100%;
	border-radius: 12px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	box-shadow: 0 2px 10px rgba(10, 26, 51, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.static-partner-card:hover {
	transform: translateY(-2px);
	border-color: rgba(197, 160, 89, 0.45);
	box-shadow: 0 8px 24px rgba(15, 27, 61, 0.08);
}

.static-partner-img {
	height: 38px;
	max-width: 100%;
	width: auto;
	display: block;
	object-fit: contain;
}

@media (max-width: 991px) {
	.partner-badges-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.partner-badges-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.partner-badges-grid .static-partner-card:last-child {
		grid-column: span 2;
		max-width: 260px;
		margin: 0 auto;
	}
	.static-partner-card {
		height: 54px;
		padding: 8px 12px;
	}
	.static-partner-img {
		height: 32px;
	}
}

.partner-badge-custom {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 42px;
}

.crunchbase-badge .partner-badge-text {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.partner-badge-name {
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 800;
	color: #0A1A33;
	line-height: 1.1;
}

.partner-badge-sub {
	font-size: 0.625rem;
	font-weight: 800;
	color: #01579B;
	letter-spacing: 0.06em;
}

.postorie-badge {
	gap: 8px;
}

.postorie-verified-tag {
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: #0D6832;
	background: #E8F5E9;
	padding: 3px 8px;
	border-radius: 4px;
}

/* ==========================================================================
   INFINITE CONTINUOUS TOOLS & PLATFORMS SCROLLER
   ========================================================================== */
.tools-scroller-section {
	padding: 36px 0 32px;
	background: #FAFBFC;
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.scroller-header-container {
	text-align: center;
	margin-bottom: 20px;
}

.tools-scroller-label {
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin: 0;
}

.marquee-scroller-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 8px 0;
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

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

.marquee-scroller-track:hover {
	animation-play-state: paused;
}

.marquee-group {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	padding-right: clamp(20px, 3vw, 40px);
	flex-shrink: 0;
}

.marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	border-radius: 12px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.09);
	box-shadow: 0 2px 8px rgba(10, 26, 51, 0.04);
	cursor: default;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.marquee-tool-icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
	filter: none;
	opacity: 0.95;
	transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}

.marquee-tool-name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #0A1A33;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.marquee-item:hover {
	border-color: rgba(212, 175, 55, 0.6);
	box-shadow: 0 8px 24px rgba(212, 175, 55, 0.22);
	transform: translateY(-2px);
}

.marquee-item:hover .marquee-tool-icon {
	transform: scale(1.12);
}

.marquee-item:hover .marquee-tool-name {
	color: var(--gold-700);
}

@keyframes continuousMarquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee-scroller-track {
		animation: none;
		overflow-x: auto;
	}
}

.scroller-footnote-container {
	margin-top: 18px;
}

.tools-scroller-footnote {
	text-align: center;
	font-size: 0.75rem;
	color: var(--muted);
	margin: 0;
}

/* ==========================================================================
   GLASS & CLASSY SERVICES SECTION (6 CARDS, 3x2 GRID WITH HOVER GRAPHICS)
   ========================================================================== */
.services-enterprise-section {
	padding: clamp(64px, 8vw, 100px) 0;
	background: #FFFFFF;
}

.services-equal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 32px);
	align-items: stretch;
}

@media (max-width: 1024px) {
	.services-equal-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.services-equal-grid {
		grid-template-columns: 1fr;
	}
}

.card-service-glass {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(212, 175, 55, 0.2);
	border-radius: var(--radius-m);
	padding: 28px 24px;
	box-shadow: 0 4px 20px rgba(11, 18, 32, 0.04);
	overflow: hidden;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
}

.card-service-glass:hover {
	transform: translateY(-6px);
	border-color: rgba(212, 175, 55, 0.55);
	box-shadow: 0 16px 36px -6px rgba(10, 26, 51, 0.09), 0 0 24px rgba(212, 175, 55, 0.2);
}

.service-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.service-equal-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-s);
	background: rgba(212, 175, 55, 0.12);
	color: var(--gold-700);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid rgba(212, 175, 55, 0.3);
}

.service-micro-tag {
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.12);
	padding: 4px 10px;
	border-radius: 9999px;
	border: 1px solid rgba(212, 175, 55, 0.3);
}

.service-equal-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--navy-900);
	line-height: 1.35;
	margin-bottom: 10px;
}

.service-equal-desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
	margin-bottom: 16px;
	flex-grow: 1;
}

/* ==========================================================================
   INTERACTIVE HOVER GRAPHICS PER SERVICE (ILLUMINATES ON CARD HOVER)
   ========================================================================== */
.service-hover-graphic {
	height: 94px;
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.06);
	border-radius: var(--radius-s);
	margin: 14px 0 18px;
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.card-service-glass:hover .service-hover-graphic {
	background: #0B1220;
	border-color: rgba(212, 175, 55, 0.35);
}

.graphic-badge-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.6875rem;
	font-weight: 700;
}

.micro-badge-item {
	color: var(--muted);
	transition: color 0.3s ease;
}

.card-service-glass:hover .micro-badge-item {
	color: #B6C0D1;
}

.micro-badge-val {
	color: var(--gold-700);
	transition: color 0.3s ease;
}

.card-service-glass:hover .micro-badge-val {
	color: #E3C566;
}

/* Graphic 1: Marketing Growth Curve */
.graphic-chart-curve svg {
	transition: transform 0.3s ease;
}

.card-service-glass:hover .graphic-chart-curve svg {
	transform: scale(1.02);
}

/* Graphic 2: Web Dev Code Console */
.code-browser-mockup {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.code-dots {
	display: flex;
	gap: 4px;
}

.cdot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.c-red { background: #EF4444; }
.c-yellow { background: #F59E0B; }
.c-green { background: #10B981; }

.code-lines {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	line-height: 1.35;
	color: #64748B;
	transition: color 0.3s ease;
}

.card-service-glass:hover .code-lines {
	color: #E2E8F0;
}

.card-service-glass:hover .code-tag {
	color: #E3C566;
}

.card-service-glass:hover .code-prop {
	color: #34D399;
}

/* Graphic 3: Software Cloud Topology */
.cloud-topology-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 52px;
}

.topology-node {
	padding: 4px 8px;
	border-radius: 4px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--navy-900);
	transition: all 0.3s ease;
}

.card-service-glass:hover .topology-node {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(212, 175, 55, 0.4);
	color: #FFFFFF;
}

.topology-connector {
	flex: 1;
	height: 2px;
	background: #CBD5E1;
	position: relative;
}

.conn-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #D4AF37;
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
}

/* Graphic 4: Paid Ads Radar */
.radar-reticle-wrap {
	position: relative;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.radar-circle {
	border-radius: 50%;
	border: 1px dashed rgba(212, 175, 55, 0.3);
	position: absolute;
}

.radar-outer { width: 48px; height: 48px; }
.radar-inner { width: 26px; height: 26px; }

.radar-blip {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #10B981;
	position: absolute;
	box-shadow: 0 0 6px #10B981;
}

/* Graphic 5: Neural AI Citations */
.neural-graph-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 52px;
	position: relative;
}

.neural-center-node {
	padding: 4px 10px;
	border-radius: 9999px;
	background: var(--gold-gradient);
	color: #0A1A33;
	font-size: 0.6875rem;
	font-weight: 800;
}

.neural-satellite {
	padding: 3px 6px;
	border-radius: 4px;
	background: #E2E8F0;
	color: #475569;
	font-size: 0.625rem;
	font-weight: 700;
	transition: all 0.3s ease;
}

.card-service-glass:hover .neural-satellite {
	background: rgba(255, 255, 255, 0.12);
	color: #E3C566;
}

/* Graphic 6: Video Player Waveform */
.video-timeline-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vtime-header {
	display: flex;
	justify-content: space-between;
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--muted);
}

.card-service-glass:hover .vtime-header {
	color: #E2E8F0;
}

.vplay-icon { color: #D4AF37; }
.vtime-4k { color: #047857; font-weight: 800; }

.vwave-tracks {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 28px;
}

.vwave-bar {
	flex: 1;
	background: #CBD5E1;
	border-radius: 2px;
	transition: background 0.3s ease;
}

.card-service-glass:hover .vwave-bar {
	background: var(--gold-gradient);
}

.service-equal-footer {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.service-action-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--gold-700);
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

.service-action-link:hover {
	color: var(--navy-900);
	gap: 10px;
}

/* 5. Section 7: Process Steps (4 Steps) */
.process-steps-section {
	padding: clamp(64px, 8vw, 100px) 0;
	background: var(--bg-soft);
}

.process-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.process-steps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.process-steps-grid {
		grid-template-columns: 1fr;
	}
}

.process-step-item {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	padding: 28px 24px;
	box-shadow: var(--shadow-1);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.step-num-badge {
	font-family: var(--font-mono);
	font-size: 1.75rem;
	font-weight: 800;
	color: #64748B;
	line-height: 1;
	margin-bottom: 16px;
}

.step-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gold-700);
	margin-bottom: 6px;
}

.step-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--navy-900);
	margin-bottom: 12px;
}

.step-desc {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--muted);
	margin: 0;
}

/* 6. Section 8: Why DigiWebFX */
.why-digiwebfx-section {
	padding: clamp(64px, 8vw, 100px) 0;
}

/* 7. Section 9: Markets We Serve */
.markets-section {
	padding: clamp(64px, 8vw, 100px) 0;
	background: var(--bg-soft);
}

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

@media (max-width: 1024px) {
	.markets-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.markets-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.markets-grid {
		grid-template-columns: 1fr;
	}
}

.market-card {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	padding: 24px 20px;
	box-shadow: var(--shadow-1);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.market-card:hover {
	transform: translateY(-3px);
	border-color: rgba(212, 175, 55, 0.45);
}

.market-region-tag {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.12);
	padding: 3px 8px;
	border-radius: 4px;
}

.market-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--navy-900);
	margin: 12px 0 8px;
}

.market-desc {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--muted);
	margin-bottom: 16px;
	flex-grow: 1;
}

.market-link {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--gold-700);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
}

.market-link:hover {
	color: var(--navy-900);
}

/* 8. Section 11: Final CTA */
.final-cta-section {
	padding: clamp(64px, 8vw, 100px) 0;
	background: #FFFFFF;
}

.final-cta-card {
	background: linear-gradient(135deg, #0B1220 0%, #16233B 100%);
	border-radius: var(--radius-l);
	padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
	color: #FFFFFF;
	text-align: center;
	box-shadow: 0 16px 40px rgba(11, 18, 32, 0.12);
}

.final-cta-content {
	max-width: 680px;
	margin: 0 auto;
}

.final-cta-card .eyebrow {
	color: #E3C566;
}

.final-cta-card h2,
.final-cta-card .final-cta-title,
.final-cta-title {
	font-size: clamp(1.8rem, 3.5vw, 2.75rem);
	font-weight: 800;
	color: #FFFFFF !important;
	margin: 12px 0 16px;
	line-height: 1.2;
}

.final-cta-subhead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #B6C0D1;
	margin-bottom: 32px;
}

.final-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-bottom: 16px;
}

.btn-cta-main {
	padding: 0.95rem 1.85rem !important;
	border-radius: var(--radius-s);
	font-weight: 800;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.btn-cta-whatsapp {
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 0.95rem 1.75rem;
	border-radius: var(--radius-s);
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.btn-cta-whatsapp:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.4);
}

.final-cta-microcopy {
	font-size: 0.8125rem;
	color: #8FA0BA;
	margin: 0;
}

.audit-form-status {
	margin-top: 10px;
	font-size: 0.875rem;
	font-weight: 600;
	min-height: 1.25rem;
	transition: all 0.2s ease;
}

.audit-form-status.is-success {
	color: var(--success);
}

.audit-form-status.is-error {
	color: #DC2626;
}

/* ==========================================================================
   HERO DIAGNOSTIC SYNCHRONIZER & REALTIME AUDIT MODAL
   ========================================================================== */
.vcard-target-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	margin-bottom: 14px;
	background: rgba(15, 27, 61, 0.035);
	border: 1px dashed rgba(212, 175, 55, 0.45);
	border-radius: var(--radius-s);
	font-size: 0.75rem;
}

.vcard-target-left {
	display: flex;
	align-items: center;
	gap: 6px;
}

.vcard-target-tag {
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--gold-700);
}

.vcard-target-url {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--navy-900);
}

.vcard-scan-status {
	font-size: 0.6875rem;
	font-weight: 700;
	color: #047857;
	background: #E8F5E9;
	padding: 2px 8px;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.vcard-scan-status.is-ready {
	background: #DCFCE7;
	color: #15803D;
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

/* Audit Modal Backdrop */
.audit-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(10, 26, 51, 0.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: modalFadeIn 0.25s ease-out;
}

.audit-modal-backdrop[hidden] {
	display: none !important;
}

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

.audit-modal-card {
	position: relative;
	background: #FFFFFF;
	border-radius: var(--radius-l);
	box-shadow: 0 24px 64px rgba(10, 26, 51, 0.35);
	border: 1px solid rgba(212, 175, 55, 0.35);
	width: 100%;
	max-width: 680px;
	max-height: 90vh;
	overflow-y: auto;
	padding: clamp(24px, 4vw, 36px);
	animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp {
	from { opacity: 0; transform: scale(0.96) translateY(12px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.audit-modal-close {
	position: absolute;
	top: 16px;
	right: 18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #F1F5F9;
	border: 1px solid var(--line);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--navy-900);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.audit-modal-close:hover {
	background: #E2E8F0;
	color: #DC2626;
	transform: rotate(90deg);
}

/* Modal Scanner Phase */
.scanner-header {
	margin-bottom: 20px;
	text-align: left;
}

.scanner-eyebrow {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--gold-700);
}

.scanner-title {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--navy-900);
	margin: 6px 0 0;
	line-height: 1.3;
}

.scanner-domain-target {
	color: var(--gold-700);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.scanner-progress-wrap {
	width: 100%;
	height: 10px;
	background: #F1F5F9;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 8px;
}

.scanner-progress-bar {
	height: 100%;
	background: var(--gold-gradient);
	border-radius: 5px;
	transition: width 0.4s ease;
}

.scanner-progress-readout {
	display: flex;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--muted);
	margin-bottom: 20px;
}

.scanner-milestones-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.scanner-milestone {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: var(--radius-s);
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.06);
	transition: all 0.25s ease;
}

.scanner-milestone.is-active {
	background: rgba(212, 175, 55, 0.08);
	border-color: rgba(212, 175, 55, 0.4);
}

.scanner-milestone.is-completed {
	background: #F0FDF4;
	border-color: #BBF7D0;
}

.milestone-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.milestone-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(212, 175, 55, 0.25);
	border-top-color: #8A6D12;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	100% { transform: rotate(360deg); }
}

.milestone-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #94A3B8;
}

.scanner-milestone.is-completed .milestone-dot {
	background: #12A150;
}

.milestone-text {
	flex: 1;
	text-align: left;
}

.milestone-text strong {
	display: block;
	font-size: 0.875rem;
	color: var(--navy-900);
}

.milestone-text p {
	font-size: 0.75rem;
	color: var(--muted);
	margin: 0;
}

.milestone-badge {
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	background: #E2E8F0;
	color: #475569;
}

.scanner-milestone.is-active .milestone-badge {
	background: #FEF3C7;
	color: #92400E;
}

.scanner-milestone.is-completed .milestone-badge {
	background: #DCFCE7;
	color: #166534;
}

/* Modal Results Phase */
.results-header {
	text-align: left;
	margin-bottom: 20px;
}

.results-header-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.6875rem;
	font-weight: 800;
	color: #047857;
	background: #E8F5E9;
	padding: 4px 10px;
	border-radius: 20px;
	margin-bottom: 8px;
}

.results-title {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--navy-900);
	margin: 0 0 6px;
	line-height: 1.3;
}

.highlight-domain {
	color: var(--gold-700);
}

.results-sub {
	font-size: 0.875rem;
	color: var(--muted);
	margin: 0 0 20px;
	line-height: 1.5;
}

.results-scorecard-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

@media (max-width: 640px) {
	.results-scorecard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.scorecard-metric-card {
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-s);
	padding: 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.metric-score-num {
	font-family: var(--font-mono);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 4px;
}

.score-denom { font-size: 0.75rem; color: #94A3B8; }
.score-amber { color: #D97706; }
.score-red { color: #DC2626; }
.score-green { color: #047857; }
.score-gold { color: #8A6D12; }

.metric-label {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--navy-900);
	margin-bottom: 2px;
}

.metric-note {
	font-size: 0.625rem;
	color: var(--muted);
}

.results-delivery-box {
	background: #FFFFFF;
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: var(--radius-m);
	padding: 20px;
	box-shadow: 0 4px 16px rgba(10, 26, 51, 0.04);
	text-align: left;
}

.delivery-title {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--navy-900);
	margin: 0 0 4px;
}

.delivery-desc {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0 0 16px;
	line-height: 1.45;
}

.delivery-inputs-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 14px;
}

@media (max-width: 600px) {
	.delivery-inputs-row {
		grid-template-columns: 1fr;
	}
}

.delivery-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--navy-900);
	margin-bottom: 4px;
}

.delivery-field {
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--radius-s);
	border: 1px solid var(--line);
	background: #F8FAFC;
	font-size: 0.875rem;
	color: var(--navy-900);
}

.delivery-field:focus {
	outline: none;
	border-color: #8A6D12;
	background: #FFFFFF;
}

.btn-delivery-submit {
	width: 100%;
	padding: 12px 20px;
	font-size: 0.9375rem;
}

.delivery-success-alert {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: #F0FDF4;
	border: 1px solid #86EFAC;
	border-radius: var(--radius-s);
	color: #166534;
	text-align: left;
}

.delivery-success-alert p {
	font-size: 0.8125rem;
	margin: 4px 0 0;
	line-height: 1.4;
}

/* ==========================================================================
   FEATURED DELIVERABLES & CASE STUDIES FILTER SECTION
   ========================================================================== */
.case-studies-section {
	padding: clamp(64px, 8vw, 100px) 0;
	background: #FFFFFF;
	border-bottom: 1px solid var(--line);
}

.projects-filter-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 32px 0 44px;
}

.project-filter-btn {
	padding: 8px 20px;
	border-radius: 30px;
	background: #F1F5F9;
	border: 1px solid rgba(15, 27, 61, 0.08);
	color: var(--muted);
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.25s ease;
}

.project-filter-btn:hover {
	background: #E2E8F0;
	color: var(--navy-900);
}

.project-filter-btn.is-active {
	background: var(--gold-gradient);
	border-color: #B8922B;
	color: #0A1A33;
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

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

@media (max-width: 1080px) {
	.projects-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 680px) {
	.projects-cards-grid {
		grid-template-columns: 1fr;
	}
}

.project-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-m);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(10, 26, 51, 0.03);
	display: flex;
	flex-direction: column;
	transition: opacity 0.25s ease, transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.project-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 175, 55, 0.5);
	box-shadow: 0 16px 36px rgba(10, 26, 51, 0.09), 0 0 20px rgba(212, 175, 55, 0.15);
}

/* ==========================================================================
   MNC ENTERPRISE PROJECT CARDS (Clean Viewport, High-End Typography)
   ========================================================================== */
.project-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: var(--radius-m);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(10, 26, 51, 0.03);
	display: flex;
	flex-direction: column;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.project-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 175, 55, 0.45);
	box-shadow: 0 16px 36px rgba(10, 26, 51, 0.08), 0 0 20px rgba(212, 175, 55, 0.1);
}

/* 1. Minimalist Apple-Style Viewport Header */
.project-browser-frame {
	background: #F8FAFC;
	border-bottom: 1px solid rgba(15, 27, 61, 0.07);
	position: relative;
}

.browser-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 14px;
	background: #F8FAFC;
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.browser-controls {
	display: flex;
	align-items: center;
	gap: 5px;
}

.b-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	opacity: 0.85;
}

.b-dot-close { background-color: #EF4444; }
.b-dot-min { background-color: #F59E0B; }
.b-dot-expand { background-color: #10B981; }

.browser-address {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.09);
	border-radius: 12px;
	padding: 2px 10px;
}

.browser-lock {
	color: #10B981;
	flex-shrink: 0;
}

.browser-url {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	color: var(--muted);
	letter-spacing: 0.02em;
}

.browser-live-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.6875rem;
	font-weight: 700;
	color: #047857;
	background: #E8F5E9;
	padding: 2px 8px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.browser-live-badge:hover {
	background: #DCFCE7;
	color: #15803D;
	transform: translateY(-1px);
}

.browser-live-spacer {
	width: 45px;
}

/* 2. Image Viewport */
.browser-viewport {
	position: relative;
	width: 100%;
	height: 220px;
	overflow: hidden;
	background: #F1F5F9;
}

.browser-img-link {
	display: block;
	width: 100%;
	height: 100%;
}

.project-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-thumb-img {
	transform: scale(1.025);
}

/* 3. Card Body & Typography */
.project-card-body {
	padding: 22px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: left;
}

.project-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.project-discipline-tag {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.1);
	padding: 3px 8px;
	border-radius: 4px;
}

.project-location-tag {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
}

.project-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--navy-900);
	margin: 0 0 4px;
	line-height: 1.3;
}

.project-title a {
	color: var(--navy-900);
	text-decoration: none;
	transition: color 0.2s ease;
}

.project-title a:hover {
	color: var(--gold-700);
}

.project-subtitle {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gold-700);
	margin-bottom: 10px;
	line-height: 1.4;
}

.project-desc {
	font-size: 0.875rem;
	color: var(--muted);
	line-height: 1.55;
	margin: 0 0 16px;
}

/* 4. Minimalist Impact Outcomes */
.project-highlights-row {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.06);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 18px;
}

.highlight-item {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.hl-value {
	font-family: var(--font-mono);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--navy-900);
	line-height: 1.1;
}

.hl-label {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin-top: 3px;
}

.highlight-divider {
	width: 1px;
	height: 22px;
	background: rgba(15, 27, 61, 0.1);
}

/* 5. Card Footer Actions */
.project-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
}

.project-detail-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--navy-900);
	text-decoration: none;
	transition: all 0.2s ease;
}

.project-detail-link:hover {
	color: var(--gold-700);
	gap: 9px;
}

.project-ext-link {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.project-ext-link:hover {
	color: #047857;
}

/* 6. Single Centered View More Button */
.projects-view-more-wrap {
	margin-top: 40px;
	margin-bottom: 16px;
	text-align: center;
}

.btn-view-more {
	background: #D4AF37;
	border: 1px solid rgba(212, 175, 55, 0.4);
	color: #0B1220;
	padding: 13px 36px;
	border-radius: var(--radius-full);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.28);
	transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-view-more:hover,
.btn-view-more:focus-visible {
	background: #E5C158;
	color: #0B1220;
	border-color: rgba(212, 175, 55, 0.6);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(212, 175, 55, 0.42);
}

/* Empty Category Curation State */
.projects-empty-category-notice {
	margin: 36px auto;
	max-width: 680px;
	text-align: center;
	transition: opacity 0.3s ease;
}

.empty-notice-card {
	background: #FFFFFF;
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: var(--radius-m);
	padding: 44px 36px;
	box-shadow: 0 10px 30px rgba(10, 26, 51, 0.04);
}

.empty-notice-badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-700);
	background: rgba(212, 175, 55, 0.1);
	padding: 4px 12px;
	border-radius: 4px;
	margin-bottom: 14px;
}

.empty-notice-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--navy-900);
	margin-bottom: 12px;
}

.empty-notice-desc {
	font-size: 0.9375rem;
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 26px;
}

/* Related Case Studies Band */
.case-related-section {
	padding: clamp(48px, 6vw, 80px) 0;
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
}

.related-cards-grid {
	margin-top: 36px;
}

.work-hub-explore-strip {
	margin-top: 48px;
}

/* Single Case Study Styles */
.case-single-hero {
	padding: clamp(48px, 6vw, 84px) 0 36px;
	background: #FFFFFF;
}

.case-single-meta-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 0.875rem;
	font-weight: 700;
}

.case-back-breadcrumb {
	color: var(--gold-700);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.case-back-breadcrumb:hover {
	color: var(--navy-900);
}

.case-single-country-tag {
	color: var(--navy-900);
	background: #F1F5F9;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.8125rem;
}

.case-single-industry-tag {
	color: var(--muted);
	font-size: 0.8125rem;
}

.case-single-title {
	font-size: clamp(2rem, 3.8vw, 3.2rem);
	font-weight: 800;
	color: var(--navy-900);
	line-height: 1.2;
	margin-bottom: 16px;
}

.case-single-subhead {
	font-size: 1.125rem;
	color: var(--muted);
	line-height: 1.6;
	max-width: 800px;
	margin-bottom: 24px;
}

.case-single-cta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 36px;
}

.case-live-url-display {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--muted);
}

.case-single-mockup-frame {
	border-radius: var(--radius-m);
	border: 1px solid rgba(15, 27, 61, 0.12);
	box-shadow: 0 16px 48px rgba(10, 26, 51, 0.08);
	overflow: hidden;
	background: #0B1220;
	margin-bottom: 40px;
}

.mockup-browser-chrome {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: #0F172A;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chrome-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.chrome-address-bar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 4px 16px;
	margin-left: 14px;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: #94A3B8;
}

.case-single-hero-img {
	width: 100%;
	max-height: 540px;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.case-single-metrics-band {
	padding: 48px 0;
	background: #F7F8FA;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.case-metrics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

@media (max-width: 768px) {
	.case-metrics-grid {
		grid-template-columns: 1fr;
	}
}

.case-metric-tile {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	padding: 24px;
	text-align: center;
	box-shadow: 0 4px 16px rgba(10, 26, 51, 0.03);
}

.case-stat-value {
	font-family: var(--font-mono);
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--gold-700);
	line-height: 1;
	margin-bottom: 8px;
}

.case-stat-label {
	font-size: 1rem;
	font-weight: 800;
	color: var(--navy-900);
	margin-bottom: 4px;
}

.case-stat-meta {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0;
}

.case-technologies-box {
	background: #FFFFFF;
	border: 1px dashed rgba(212, 175, 55, 0.4);
	border-radius: var(--radius-m);
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

.tech-box-label {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--gold-700);
}

.tech-badges-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tech-pill-item {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--navy-900);
	background: #F1F5F9;
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid rgba(15, 27, 61, 0.06);
}

.case-narrative-section {
	padding: clamp(64px, 8vw, 96px) 0;
	background: #FFFFFF;
}

.case-narrative-article {
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #334155;
}

.case-narrative-article h2 {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--navy-900);
	margin: 36px 0 16px;
}

.case-narrative-article ul {
	padding-left: 20px;
	margin-bottom: 24px;
}

.case-narrative-article li {
	margin-bottom: 8px;
}

.case-navigation-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}

.project-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--gold-700);
	text-decoration: none;
	margin-top: auto;
	transition: all 0.2s ease;
}

.project-card:hover .project-card-link {
	color: var(--navy-900);
	gap: 10px;
}

/* ==========================================================================
   HOW WE WORK 3D GRAPHICS & TIMELINE FLOW
   ========================================================================== */
.process-timeline-bar {
	position: relative;
	width: 82%;
	max-width: 960px;
	margin: 0 auto 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media (max-width: 1024px) {
	.process-timeline-bar {
		display: none;
	}
}

.timeline-glow-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #8A6D12 0%, #D4AF37 50%, #12A150 100%);
	transform: translateY(-50%);
	z-index: 1;
	opacity: 0.45;
}

.timeline-nodes-wrap {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	z-index: 2;
}

.timeline-node {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 2px solid #8A6D12;
	color: #8A6D12;
	font-family: var(--font-mono);
	font-weight: 800;
	font-size: 0.8125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(10, 26, 51, 0.08);
}

.step-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.step-3d-graphic {
	height: 100px;
	margin-bottom: 16px;
	position: relative;
}

.graphic-canvas {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-live-chip {
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 0.625rem;
	font-weight: 800;
	color: #047857;
	background: #E8F5E9;
	padding: 2px 7px;
	border-radius: 4px;
	letter-spacing: 0.04em;
}

.process-step-item {
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.process-step-item:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 175, 55, 0.5);
	box-shadow: 0 16px 36px rgba(10, 26, 51, 0.08), 0 0 20px rgba(212, 175, 55, 0.12);
}

/* ==========================================================================
   REGIONAL HUB PAGES (Geo-Targeted International Landing Pages)
   ========================================================================== */
.regional-hero-section {
	padding: clamp(54px, 7vw, 96px) 0 44px;
	background: #FFFFFF;
	text-align: center;
}

.regional-hero-inner {
	max-width: 920px;
	margin: 0 auto;
}

.regional-badge-wrap {
	margin-bottom: 16px;
}

.regional-hero-title {
	font-size: clamp(2.2rem, 4.4vw, 3.4rem);
	font-weight: 800;
	color: var(--navy-900);
	line-height: 1.2;
	margin-bottom: 18px;
	letter-spacing: -0.02em;
}

.regional-hero-subhead {
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	color: var(--muted);
	line-height: 1.6;
	max-width: 780px;
	margin: 0 auto 32px;
}

.regional-hero-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}

.regional-metrics-band {
	padding: clamp(36px, 5vw, 56px) 0;
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.card-light .stat-number,
.card-light .stat-value {
	color: var(--navy-900);
}

.regional-kpi-grid {
	gap: 20px;
}

.regional-work-section {
	padding: clamp(48px, 6vw, 84px) 0;
}

/* ==========================================================================
   GLOBAL MNC SECTION HEADER REINFORCEMENT (PAGE LEVEL)
   ========================================================================== */
.section-header {
	text-align: center !important;
	max-width: 860px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: clamp(36px, 4.5vw, 56px) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.section-header .eyebrow,
.section-header .eyebrow-gold {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--font-accent) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--gold-700) !important;
	margin: 0 auto 14px !important;
	text-align: center !important;
}

.section-header h2 {
	font-family: var(--font-heading) !important;
	font-size: clamp(30px, 3.6vw, 42px) !important;
	font-weight: 800 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.025em !important;
	color: #0B1220 !important;
	margin: 0 auto 16px !important;
	text-align: center !important;
	max-width: 820px !important;
}

.section-header .section-intro {
	font-size: clamp(15px, 1.1vw, 17px) !important;
	line-height: 1.65 !important;
	color: #4A5568 !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

/* Ensure Work Filter Bar is centered */
.projects-filter-bar {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 auto clamp(28px, 3.5vw, 44px) !important;
}

/* Ensure Process Timeline Bar is centered */
.process-timeline-bar {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 auto 36px !important;
	max-width: 960px !important;
}

/* Ensure Why DigiWebFX Comparison wrapper is centered */
.comparison-matrix-wrapper {
	max-width: 1200px !important;
	margin: 0 auto !important;
}


/* ==========================================================================
   Executive Growth Architecture: Interactive Customer Revenue & Pipeline Modeler
   ========================================================================== */
.growth-modeler-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.1);
	border-radius: 18px;
	box-shadow: 0 20px 50px -10px rgba(15, 27, 61, 0.08), 0 0 1px rgba(15, 27, 61, 0.15);
	padding: 20px 22px 16px;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.growth-modeler-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #D4AF37 0%, #0F1B3D 50%, #D4AF37 100%);
}

.modeler-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.modeler-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8A6D2B;
	margin-bottom: 3px;
}

.modeler-eyebrow .status-pulse-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10B981;
	box-shadow: 0 0 8px #10B981;
	animation: pulse-dot 2s infinite ease-in-out;
}

.modeler-title {
	font-family: var(--font-accent);
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0 0 2px;
}

.modeler-sub {
	font-size: 11px;
	color: #64748B;
	font-weight: 500;
	line-height: 1.35;
	display: block;
}

.modeler-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 9999px;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.25);
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 800;
	color: #059669;
	white-space: nowrap;
}

/* Step 1 & 2 Section Controls */
.modeler-control-section {
	margin-bottom: 10px;
}

.modeler-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 5px;
}

.modeler-label {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 700;
	color: #0F1B3D;
}

.modeler-active-badge {
	font-size: 11px;
	font-weight: 700;
	color: #8A6D2B;
	font-family: var(--font-accent);
}

.modeler-budget-num {
	font-family: var(--font-accent);
	font-size: 12.5px;
	font-weight: 800;
	color: #0F1B3D;
}

/* Market Pills */
.modeler-market-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.market-pill {
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.1);
	border-radius: 6px;
	padding: 5px 9px;
	font-size: 11px;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.market-pill:hover {
	border-color: #C5A059;
	color: #0F1B3D;
	background: #FFFFFF;
}

.market-pill.is-active {
	background: #0F1B3D !important;
	color: #FFFFFF !important;
	border-color: #0F1B3D !important;
}

/* Budget Presets & Slider */
.modeler-budget-presets {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
}

.budget-preset-btn {
	flex: 1;
	padding: 5px 6px;
	font-size: 11.5px;
	font-weight: 700;
	text-align: center;
	border-radius: 6px;
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.1);
	color: #334155;
	cursor: pointer;
	transition: all 0.2s ease;
}

.budget-preset-btn:hover {
	background: #FFFFFF;
	border-color: #C5A059;
	color: #0F1B3D;
}

.budget-preset-btn.is-active {
	background: rgba(197, 160, 89, 0.18) !important;
	color: #8A6D2B !important;
	border-color: #C5A059 !important;
	font-weight: 800;
}

.modeler-slider-wrap {
	width: 100%;
}

.modeler-range-slider {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	accent-color: #C5A059;
	background: #E2E8F0;
	outline: none;
	cursor: pointer;
}

/* Commercial Goal Pills */
.modeler-goal-pills {
	display: flex;
	gap: 6px;
	margin: 8px 0 12px;
}

.goal-pill {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 5px 6px;
	font-size: 10.5px;
	font-weight: 600;
	border-radius: 6px;
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.09);
	color: #475569;
	cursor: pointer;
	transition: all 0.2s ease;
}

.goal-pill:hover {
	border-color: #C5A059;
	color: #0F1B3D;
	background: #FFFFFF;
}

.goal-pill.is-active {
	background: rgba(15, 27, 61, 0.06);
	border-color: #0F1B3D;
	color: #0F1B3D;
	font-weight: 700;
}

/* Results Matrix 2x2 */
.modeler-metrics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}

.m-metric-card {
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.07);
	border-radius: 10px;
	padding: 9px 11px;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.m-metric-card:hover {
	background: #FFFFFF;
	border-color: rgba(197, 160, 89, 0.35);
	transform: translateY(-1px);
}

.m-metric-val {
	font-family: var(--font-accent);
	font-size: 1.15rem;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.val-gold {
	color: #B45309 !important;
}

.val-emerald {
	color: #059669 !important;
}

.m-metric-lbl {
	font-family: var(--font-accent);
	font-size: 10.5px;
	font-weight: 700;
	color: #0F1B3D;
	margin-top: 3px;
	line-height: 1.25;
}

.m-metric-sub {
	font-size: 9px;
	color: #64748B;
	line-height: 1.3;
	margin-top: 1px;
}

/* CTA Action */
.modeler-cta-wrap {
	margin-top: 4px;
}

.modeler-btn {
	width: 100%;
	height: 46px;
	font-size: 13.5px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Trust Row */
.modeler-trust-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(15, 27, 61, 0.07);
	font-size: 9.5px;
	color: #64748B;
	font-weight: 600;
}

.m-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #475569;
	white-space: nowrap;
}

.m-trust-sep {
	color: #CBD5E1;
}

@media (max-width: 580px) {
	.modeler-metrics-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.modeler-budget-presets {
		flex-wrap: wrap;
	}
	.budget-preset-btn {
		flex: 1 1 45%;
	}
	.modeler-goal-pills {
		flex-direction: column;
	}
	.modeler-trust-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.m-trust-sep {
		display: none;
	}
}