/**
 * DigiWebFX - Single Service Stylesheet (SEO & GEO Focus)
 * Elite MNC Architecture & CRO Standards
 *
 * @package DigiWebFX
 * @version 1.5.0
 */

/* ==========================================================================
   GLOBAL UTILITIES & BUTTONS
   ========================================================================== */
.btn-gold-gradient {
	background: linear-gradient(135deg, #D4AF37 0%, #C5A059 50%, #AA8239 100%);
	color: #0F1B3D !important;
	font-family: var(--font-accent);
	font-weight: 800;
	letter-spacing: 0.02em;
	border: none;
	border-radius: 8px;
	padding: 12px 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-gold-gradient:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(212, 175, 55, 0.4);
}

.gold-gradient-text {
	background: linear-gradient(135deg, #B8860B 0%, #D4AF37 50%, #996515 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline;
}

.section-cream {
	background-color: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

/* ==========================================================================
   SECTION 1: HERO SECTION (55% / 45% SPLIT & HEADER FIX - WHITE BG LUXURY THEME)
   ========================================================================== */
.seo-hero-section {
	/* Fortune 500 Balanced Padding: Equal top and bottom spacing */
	padding-top: 56px;
	padding-bottom: 56px;
	background: #FFFFFF;
	border-bottom: 1px solid rgba(15, 27, 61, 0.08);
	color: #0F1B3D;
	position: relative;
	overflow: hidden;
}

.seo-breadcrumbs {
	margin-bottom: 22px;
}

.seo-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.95fr);
	gap: 36px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
}

/* LEFT COLUMN VALUE PROPOSITION */
.seo-hero-content {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.seo-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 9999px;
	background: rgba(197, 160, 89, 0.12);
	border: 1px solid rgba(197, 160, 89, 0.4);
	color: #8A6D2B;
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	width: fit-content;
}

.seo-hero-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;
}

.seo-hero-h1 {
	font-family: var(--font-accent);
	font-size: clamp(2.2rem, 3.4vw, 3.25rem);
	font-weight: 800;
	color: #0F1B3D !important;
	line-height: 1.18;
	letter-spacing: -0.02em;
	margin: 4px 0 6px;
}

.seo-hero-lead {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #334155 !important;
	margin-bottom: 8px;
}

/* 3 Value Checkmarks */
.seo-hero-checklist {
	list-style: none;
	padding: 0;
	margin: 6px 0 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.seo-check-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.seo-check-icon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(197, 160, 89, 0.15);
	border: 1px solid rgba(197, 160, 89, 0.45);
	color: #8A6D2B;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.seo-check-text {
	font-size: 14.5px;
	font-weight: 600;
	color: #0F1B3D !important;
	line-height: 1.45;
}

/* Dual CTA Buttons */
.seo-hero-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.btn-hero-cta {
	height: 48px;
	padding: 0 24px;
	font-size: 14.5px;
}

.btn-hero-secondary {
	height: 48px;
	padding: 0 22px;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1.5px solid #0F1B3D !important;
	background: #FFFFFF !important;
	color: #0F1B3D !important;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.25s ease;
}

.btn-hero-secondary:hover {
	background: #0F1B3D !important;
	border-color: #0F1B3D !important;
	color: #FFFFFF !important;
}

/* Mini Trust Strip */
.seo-mini-trust-strip {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	font-size: 12.5px;
	color: #64748B !important;
}

.trust-stars-svg {
	display: inline-flex !important;
	align-items: center !important;
	gap: 3px !important;
	vertical-align: middle !important;
	line-height: 1 !important;
}

.trust-stars-svg svg {
	display: block !important;
	flex-shrink: 0 !important;
}

.trust-stars {
	color: #F59E0B;
}

/* RIGHT COLUMN: HIGH-CONVERTING COMPACT LEAD FORM CARD */
.seo-hero-form-col {
	width: 100%;
}

.seo-lead-form-card {
	background: #0F1B3D;
	border: 1px solid rgba(197, 160, 89, 0.45);
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 16px rgba(197, 160, 89, 0.1);
	padding: 22px 24px 18px;
	position: relative;
}

.seo-lead-form-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 20px;
	right: 20px;
	height: 3px;
	background: linear-gradient(90deg, #D4AF37 0%, #C5A059 50%, #D4AF37 100%);
	border-radius: 3px;
}

.form-header-block {
	margin-bottom: 12px;
}

.form-eyebrow-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 800;
	color: #D4AF37;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 3px;
}

.form-card-title {
	font-family: var(--font-accent);
	font-size: 1.22rem;
	font-weight: 800;
	color: #FFFFFF !important;
	line-height: 1.25;
	margin: 0 0 3px;
}

.form-card-sub {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.4;
	margin: 0;
}

.seo-capture-form {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.form-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.form-group-seo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.seo-form-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-accent);
}

.seo-form-input,
.seo-form-select {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	font-size: 14px;
	font-family: var(--font-primary);
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.seo-form-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.seo-form-input:focus,
.seo-form-select:focus,
.seo-country-select:focus {
	outline: none;
	border-color: #C5A059;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25);
}

/* Phone Number with Country Code Dropdown (MNC Standard) */
.seo-phone-flex {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
}

.seo-country-select {
	width: 110px;
	flex-shrink: 0;
	height: 44px;
	padding: 0 8px;
	border-radius: 8px;
	background: #0A122A;
	border: 1px solid rgba(197, 160, 89, 0.45);
	color: #E3C566;
	font-weight: 700;
	font-size: 12.5px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.seo-phone-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	font-size: 14px;
}

.seo-phone-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.seo-phone-input:focus {
	outline: none;
	border-color: #C5A059;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25);
}

/* WhatsApp Checkbox Option */
.form-check-seo {
	margin: 2px 0 3px;
}

.whatsapp-check-label {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
}

.whatsapp-check-input {
	width: 15px;
	height: 15px;
	accent-color: #25D366;
	cursor: pointer;
	flex-shrink: 0;
}

.whatsapp-check-text {
	font-size: 11px;
	color: #A7F3D0;
	line-height: 1.35;
	font-weight: 500;
}

.seo-form-select {
	background: #0A122A;
	color: #FFFFFF;
}

.seo-form-select option {
	background: #0F1B3D;
	color: #FFFFFF;
}

.btn-submit-fullwidth {
	width: 100%;
	height: 44px;
	font-size: 13.5px;
	margin-top: 2px;
}

.form-privacy-note,
.form-trust-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.78) !important;
	margin: 8px 0 0;
	text-align: center;
	line-height: 1.4;
}

.form-privacy-note svg,
.form-trust-note svg {
	color: #D4AF37;
	stroke: #D4AF37;
	flex-shrink: 0;
}

.hp-field {
	display: none !important;
}

/* ==========================================================================
   SECTION 2: THE MARKET CHALLENGE VS. THE DIGIWEBFX SOLUTION
   ========================================================================== */
.comparison-cards-section {
	padding: clamp(60px, 7vw, 90px) 0;
}

.challenge-solution-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	max-width: 1240px;
	margin: 0 auto;
}

.challenge-card {
	border-radius: 18px;
	padding: 32px 30px;
	background: #FFFFFF;
	box-shadow: 0 10px 30px rgba(15, 27, 61, 0.04);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.challenge-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 45px rgba(15, 27, 61, 0.08);
}

.card-challenge {
	border: 1px solid rgba(239, 68, 68, 0.2);
}

.card-solution {
	border: 1px solid rgba(197, 160, 89, 0.35);
	background: #FFFFFF;
}

.comparison-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	width: fit-content;
	margin-bottom: 14px;
}

.badge-danger {
	background: rgba(239, 68, 68, 0.1);
	color: #DC2626;
	border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-success {
	background: rgba(16, 185, 129, 0.12);
	color: #065F46;
	border: 1px solid rgba(16, 185, 129, 0.25);
}

.comparison-card-h3 {
	font-family: var(--font-accent);
	font-size: 1.35rem;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.25;
	margin: 0 0 18px;
}

.comparison-points-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.comparison-point-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.point-num {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 800;
	color: #94A3B8;
	padding: 3px 6px;
	background: #F1F5F9;
	border-radius: 4px;
	flex-shrink: 0;
	margin-top: 2px;
}

.gold-num {
	background: rgba(212, 175, 55, 0.15);
	color: #B45309;
}

.point-content {
	font-size: 14px;
	color: #334155;
	line-height: 1.55;
}

.point-content strong {
	color: #0F1B3D;
	display: inline;
	margin-right: 4px;
}

/* ==========================================================================
   SECTION 3: OUR 6 CORE SEO & GEO SERVICES (3x2 Bento Grid)
   ========================================================================== */
.bento-services-section {
	padding: clamp(60px, 7vw, 96px) 0;
	background: #FFFFFF;
}

.bento-grid-3x2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1240px;
	margin: 0 auto;
}

.bento-service-card {
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	padding: 30px 26px 26px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
	display: flex;
	flex-direction: column;
}

.bento-service-card:hover {
	transform: translateY(-5px);
	background: #FFFFFF;
	border-color: rgba(212, 175, 55, 0.5);
	box-shadow: 0 20px 40px rgba(15, 27, 61, 0.08);
}

.bento-icon-wrap {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #0F1B3D;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	border: 1px solid rgba(212, 175, 55, 0.3);
	box-shadow: 0 6px 16px rgba(15, 27, 61, 0.15);
}

.bento-card-title {
	font-family: var(--font-accent);
	font-size: 1.2rem;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.3;
	margin: 0 0 10px;
}

.bento-card-copy {
	font-size: 14px;
	color: #475569;
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   SECTION 4: TRAFFIC KEYWORDS VS. REVENUE KEYWORDS
   ========================================================================== */
.keyword-comparison-section {
	padding: clamp(60px, 7vw, 90px) 0;
}

.keyword-matrix-wrapper {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 20px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.keyword-matrix-divider {
	display: flex;
	align-items: center;
	justify-content: center;
}

.keyword-matrix-divider span {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #0F1B3D;
	color: #D4AF37;
	font-family: var(--font-accent);
	font-weight: 800;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(15, 27, 61, 0.2);
}

.keyword-matrix-card {
	background: #FFFFFF;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(15, 27, 61, 0.04);
}

.card-low-intent {
	border: 1px dashed rgba(239, 68, 68, 0.35);
}

.card-high-intent {
	border: 2px solid #C5A059;
	box-shadow: 0 16px 45px rgba(212, 175, 55, 0.15);
}

.km-header {
	padding: 20px 24px;
}

.km-header-low {
	background: #FEF2F2;
	border-bottom: 1px solid rgba(239, 68, 68, 0.15);
}

.km-header-high {
	background: #0F1B3D;
	color: #FFFFFF;
	border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}

.km-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 2px 7px;
	border-radius: 4px;
	margin-bottom: 4px;
}

.tag-waste {
	background: rgba(239, 68, 68, 0.15);
	color: #DC2626;
}

.tag-winner {
	background: rgba(212, 175, 55, 0.25);
	color: #FBBF24;
}

.km-title {
	font-family: var(--font-accent);
	font-size: 1.18rem;
	font-weight: 800;
	margin: 2px 0 0;
	line-height: 1.25;
}

.km-header-low .km-title {
	color: #991B1B;
}

.km-header-high .km-title {
	color: #FFFFFF;
}

.km-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.km-lbl {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #64748B;
	margin-bottom: 4px;
}

.km-query-text {
	font-family: var(--font-mono);
	font-size: 13px;
	background: #F1F5F9;
	padding: 10px 14px;
	border-radius: 8px;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.5;
}

.highlight-gold {
	background: #FEF9C3;
	color: #713F12;
	border: 1px solid rgba(202, 138, 4, 0.3);
	font-weight: 600;
}

.km-desc {
	font-size: 13.5px;
	color: #475569;
	margin: 0;
	line-height: 1.5;
}

.km-result-row {
	padding-top: 12px;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
}

.km-result {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	margin: 0;
	line-height: 1.45;
}

.result-negative {
	color: #DC2626;
}

.result-positive {
	color: #059669;
}

/* ==========================================================================
   SECTION 5: OUR 90-DAY RANKING & LEAD GENERATION PROCESS (4 Steps)
   ========================================================================== */
.timeline-section {
	padding: clamp(60px, 7vw, 96px) 0;
	background: #FFFFFF;
}

.process-timeline-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	max-width: 1240px;
	margin: 0 auto;
}

.timeline-step-card {
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.timeline-step-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 175, 55, 0.45);
	background: #FFFFFF;
	box-shadow: 0 16px 36px rgba(15, 27, 61, 0.06);
}

.step-badge-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.step-num-pill {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #0F1B3D;
	color: #D4AF37;
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-days {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	color: #059669;
	background: rgba(16, 185, 129, 0.1);
	padding: 3px 8px;
	border-radius: 4px;
}

.step-title {
	font-family: var(--font-accent);
	font-size: 1.15rem;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.3;
	margin: 0 0 10px;
}

.step-desc {
	font-size: 13.5px;
	color: #475569;
	line-height: 1.55;
	margin: 0 0 14px;
}

.step-deliverables-mini {
	list-style: none;
	padding: 0;
	margin: auto 0 0;
	font-size: 12px;
	color: #0F1B3D;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ==========================================================================
   SECTION 6: PROVEN RESULTS & METRICS STRIP
   ========================================================================== */
.seo-metrics-strip {
	padding: clamp(60px, 7vw, 84px) 0;
	background: radial-gradient(100% 120% at 50% 0%, #15224A 0%, #0A122A 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
}

.seo-gold-eyebrow {
	color: var(--gold-400);
}

.metrics-main-title,
.seo-metrics-strip h2 {
	font-family: var(--font-accent);
	font-size: clamp(1.8rem, 2.8vw, 2.4rem);
	font-weight: 800;
	color: #FFFFFF !important;
	margin: 4px 0 0;
}

.seo-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1240px;
	margin: 36px auto 0;
}

.seo-stat-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 28px 20px;
	text-align: center;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.seo-stat-card:hover {
	transform: translateY(-3px);
	border-color: rgba(212, 175, 55, 0.5);
	background: rgba(255, 255, 255, 0.07);
}

.stat-number-gold {
	font-family: var(--font-accent);
	font-size: clamp(2.4rem, 3.6vw, 3.2rem);
	font-weight: 800;
	color: #D4AF37;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.stat-label-white {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	line-height: 1.4;
}

/* ==========================================================================
   SECTION 7: 2-COLUMN ENTERPRISE FAQ ARCHITECTURE
   ========================================================================== */
.seo-faq-section {
	padding: clamp(60px, 7vw, 96px) 0;
	background: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.faq-enterprise-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
	gap: 48px;
	align-items: start;
	max-width: 1240px;
	margin: 0 auto;
}

.faq-sidebar-col {
	position: sticky;
	top: 130px;
}

.faq-sidebar-h2 {
	font-family: var(--font-accent);
	font-size: clamp(2rem, 3vw, 2.5rem);
	font-weight: 800;
	color: #0F1B3D !important;
	line-height: 1.2;
	margin: 6px 0 12px;
	letter-spacing: -0.02em;
}

.faq-sidebar-desc {
	font-size: 15px;
	color: #64748B;
	line-height: 1.6;
	margin-bottom: 24px;
}

.faq-direct-card {
	background: #0F1B3D;
	border: 1px solid rgba(197, 160, 89, 0.35);
	border-radius: 14px;
	padding: 22px 20px;
	box-shadow: 0 16px 36px rgba(15, 27, 61, 0.15);
	color: #FFFFFF;
}

.direct-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 800;
	color: #D4AF37;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 6px;
}

.direct-card-title {
	font-family: var(--font-accent);
	font-size: 14.5px;
	font-weight: 800;
	color: #FFFFFF !important;
	margin: 0 0 6px;
	line-height: 1.35;
}

.direct-card-desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.45;
	margin-bottom: 14px;
}

.direct-card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.btn-direct-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	background: #25D366;
	color: #FFFFFF !important;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-direct-wa:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.btn-direct-phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #FFFFFF !important;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-direct-phone:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #C5A059;
}

.direct-card-sla {
	font-size: 10.5px;
	color: #A7F3D0;
	font-weight: 600;
	margin-top: 10px;
	text-align: center;
}

.faq-accordion-seo {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item-seo {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.09);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(10, 26, 51, 0.03);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item-seo:hover {
	border-color: rgba(212, 175, 55, 0.4);
	box-shadow: 0 8px 24px rgba(10, 26, 51, 0.06);
}

.faq-summary-seo {
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	user-select: none;
}

.faq-summary-seo::-webkit-details-marker {
	display: none;
}

.faq-question-seo {
	font-family: var(--font-accent);
	font-size: 1.1rem;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.35;
}

.faq-icon-arrow {
	color: #D4AF37;
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

.faq-item-seo[open] .faq-icon-arrow {
	transform: rotate(180deg);
}

.faq-answer-seo {
	padding: 0 24px 22px;
	font-size: 14.5px;
	color: #475569;
	line-height: 1.65;
}

.faq-answer-seo p {
	margin: 0;
}

/* ==========================================================================
   SECTION 8: BOTTOM FINAL CTA BANNER
   ========================================================================== */
.seo-bottom-cta-banner {
	padding: clamp(60px, 7vw, 90px) 0;
	background: radial-gradient(100% 120% at 50% 0%, #15224A 0%, #0A122A 100%);
	color: #FFFFFF;
	text-align: center;
}

.bottom-cta-content {
	max-width: 820px;
	margin: 0 auto;
}

.bottom-cta-h2,
.seo-bottom-cta-banner h2 {
	font-family: var(--font-accent);
	font-size: clamp(2rem, 3.2vw, 2.8rem);
	font-weight: 800;
	color: #FFFFFF !important;
	line-height: 1.25;
	margin: 8px 0 14px;
}

.bottom-cta-sub {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 28px;
}

.btn-cta-bottom {
	height: 52px;
	padding: 0 32px;
	font-size: 15px;
}

/* ==========================================================================
   ENTERPRISE CASE STUDIES & VERIFIED RESULTS SECTION
   ========================================================================== */
.service-case-studies-section {
	padding: clamp(60px, 7vw, 90px) 0;
	background: #FFFFFF;
}

.case-studies-3col-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1240px;
	margin: 36px auto 0;
}

.service-cs-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.09);
	border-radius: 16px;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	position: relative;
}

.service-cs-card:hover {
	transform: translateY(-4px);
	border-color: rgba(197, 160, 89, 0.4);
	box-shadow: 0 20px 45px rgba(15, 27, 61, 0.08);
}

.cs-market-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 800;
	color: #8A6D2B;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

.cs-card-title {
	font-family: var(--font-accent);
	font-size: 1.15rem;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.35;
	margin: 0 0 14px;
}

.cs-metrics-pill-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.cs-metric-badge {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.25);
	color: #059669;
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 800;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
}

.cs-card-summary {
	font-size: 13.5px;
	color: #475569;
	line-height: 1.55;
	margin: 0 0 16px;
	flex: 1;
}

.cs-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.cs-tag-item {
	font-size: 10.5px;
	color: #64748B;
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.06);
	padding: 3px 7px;
	border-radius: 4px;
	font-weight: 600;
}

.cs-card-action-link {
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
	color: #0F1B3D;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s ease, gap 0.2s ease;
}

.cs-card-action-link:hover {
	color: #C5A059;
	gap: 10px;
}

.cs-bottom-cta-wrap {
	text-align: center;
	margin-top: 36px;
}

.btn-view-all-work {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 800;
	color: #0F1B3D;
	padding: 10px 24px;
	border-radius: 8px;
	border: 1.5px solid #0F1B3D;
	text-decoration: none;
	transition: all 0.25s ease;
}

.btn-view-all-work:hover {
	background: #0F1B3D;
	color: #FFFFFF;
}

/* ==========================================================================
   REGIONAL GEO-HUBS & INTERNAL ECOSYSTEM STRIP (FORTUNE 500 STANDARD)
   ========================================================================== */
.regional-hubs-section {
	padding: clamp(60px, 7vw, 96px) 0;
	background: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.regional-hubs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px;
	max-width: 1240px;
	margin: 36px auto 0;
}

/* Unified Hub Card Styles */
.regional-hub-card,
.region-hub-card,
.hub-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 4px 16px rgba(15, 27, 61, 0.03);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
	position: relative;
	box-sizing: border-box;
}

.regional-hub-card:hover,
.region-hub-card:hover,
.hub-card:hover {
	transform: translateY(-4px);
	border-color: rgba(197, 160, 89, 0.45);
	box-shadow: 0 16px 36px rgba(15, 27, 61, 0.08);
}

.regional-hub-card.highlight-hub,
.region-hub-card.highlight-hub,
.hub-card.highlight-hub {
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%);
	border: 1.5px solid rgba(197, 160, 89, 0.5);
	box-shadow: 0 8px 24px rgba(197, 160, 89, 0.12);
}

.hub-header,
.hub-flag-title-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hub-country-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(15, 27, 61, 0.06);
	border: 1px solid rgba(15, 27, 61, 0.12);
	color: #0F1B3D;
	font-family: var(--font-accent);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

.hub-country-pill.gold {
	background: rgba(197, 160, 89, 0.15);
	border-color: rgba(197, 160, 89, 0.4);
	color: #8A6D2B;
}

.hub-flag,
.hub-flag-icon {
	font-size: 26px;
	line-height: 1;
	flex-shrink: 0;
}

.hub-title,
.hub-card-title {
	font-family: var(--font-accent);
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.25;
}

.hub-sub,
.hub-location {
	font-size: 12px;
	font-weight: 600;
	color: #64748B;
	margin-top: 2px;
	display: block;
}

.hub-desc,
.hub-card-desc {
	font-size: 13px;
	line-height: 1.55;
	color: #475569;
	margin: 2px 0 14px;
	flex: 1;
}

.hub-features {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	padding-top: 10px;
}

.hub-features li {
	font-size: 12px;
	color: #334155;
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}

.hub-features li::before {
	content: '✓';
	color: #10B981;
	font-weight: 800;
	font-size: 11px;
}

.hub-link,
.hub-link-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #8A6D2B;
	text-decoration: none;
	margin-top: auto;
	transition: color 0.2s ease, transform 0.2s ease;
}

.hub-link:hover,
.hub-link-item:hover {
	color: #0F1B3D;
	transform: translateX(3px);
}

.hub-links-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
}

/* ==========================================================================
   RELATED SERVICES & INTERNAL ECOSYSTEM STRIP (FORTUNE 500 STANDARD)
   ========================================================================== */
.related-services-strip {
	margin-top: 48px;
	padding: 22px 28px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(15, 27, 61, 0.04);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.strip-label {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8A6D2B;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.strip-label::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #D4AF37;
	box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
}

.strip-links {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex: 1;
	justify-content: flex-end;
}

.service-pill-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.1);
	border-radius: 9999px;
	font-size: 12.5px;
	font-weight: 700;
	color: #0F1B3D;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 1px 3px rgba(15, 27, 61, 0.03);
	white-space: nowrap;
}

.service-pill-link:hover {
	background: #0F1B3D;
	color: #FFFFFF;
	border-color: #C5A059;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(15, 27, 61, 0.12);
}

@media (max-width: 1024px) {
	.regional-hubs-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px;
	}
	.related-services-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 20px;
	}
	.strip-links {
		justify-content: flex-start;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.regional-hubs-grid {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}
	.service-pill-link {
		padding: 6px 12px;
		font-size: 12px;
	}
}

/* ==========================================================================
   INTERACTIVE 4-STAGE REVENUE FUNNEL COMPONENT
   ========================================================================== */
.funnel-section {
	padding: clamp(60px, 7vw, 90px) 0;
	background: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.funnel-tabs-nav {
	display: flex;
	gap: 8px;
	background: #FFFFFF;
	padding: 6px;
	border-radius: 14px;
	border: 1px solid rgba(15, 27, 61, 0.08);
	box-shadow: 0 4px 14px rgba(15, 27, 61, 0.03);
	max-width: 1240px;
	margin: 32px auto 24px;
	overflow-x: auto;
}

.funnel-tab-btn {
	flex: 1;
	min-width: 200px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: none;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	text-align: left;
	transition: all 0.25s ease;
}

.funnel-tab-btn:hover {
	background: rgba(15, 27, 61, 0.04);
}

.funnel-tab-btn.is-active {
	background: #0F1B3D;
	box-shadow: 0 6px 18px rgba(15, 27, 61, 0.18);
}

.ft-num {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 800;
	color: #D4AF37;
	padding: 3px 6px;
	border-radius: 5px;
	background: rgba(212, 175, 55, 0.12);
}

.funnel-tab-btn.is-active .ft-num {
	background: rgba(212, 175, 55, 0.22);
}

.ft-text-wrap {
	display: flex;
	flex-direction: column;
}

.ft-title {
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.25;
}

.funnel-tab-btn.is-active .ft-title {
	color: #FFFFFF;
}

.ft-sub {
	font-size: 10.5px;
	color: #64748B;
	line-height: 1.3;
}

.funnel-tab-btn.is-active .ft-sub {
	color: rgba(255, 255, 255, 0.7);
}

.funnel-panel-wrap {
	max-width: 1240px;
	margin: 0 auto;
}

.funnel-panel {
	display: none;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.09);
	border-radius: 18px;
	padding: 32px 30px;
	box-shadow: 0 12px 36px rgba(15, 27, 61, 0.05);
	animation: fadeInPanel 0.3s ease;
}

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

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

.funnel-grid-2col {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr);
	gap: 36px;
	align-items: center;
}

.funnel-stage-eyebrow {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 800;
	color: #8A6D2B;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	display: block;
	margin-bottom: 4px;
}

.funnel-stage-h3 {
	font-family: var(--font-accent);
	font-size: 1.5rem;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0 0 10px;
	line-height: 1.25;
}

.funnel-stage-desc {
	font-size: 14.5px;
	color: #475569;
	line-height: 1.6;
	margin-bottom: 16px;
}

.funnel-channel-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.f-channel-pill {
	background: #F8FAFC;
	border: 1px solid rgba(15, 27, 61, 0.08);
	color: #0F1B3D;
	font-family: var(--font-accent);
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 6px;
}

.funnel-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.funnel-check-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	color: #1E293B;
	font-weight: 500;
}

.funnel-check-item svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: #10B981;
}

.funnel-sla-card {
	background: #0F1B3D;
	border: 1px solid rgba(197, 160, 89, 0.35);
	border-radius: 14px;
	padding: 24px 22px;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sla-tag {
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 800;
	color: #D4AF37;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.sla-val-big {
	font-family: var(--font-accent);
	font-size: 1.8rem;
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1.15;
}

.sla-desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.45;
}

/* ==========================================================================
   CHANNEL MIX CALCULATOR TEASER COMPONENT
   ========================================================================== */
.channel-calculator-section {
	padding: clamp(60px, 7vw, 90px) 0;
	background: #FFFFFF;
}

.calc-wrapper-card {
	background: #0F1B3D;
	border: 1px solid rgba(197, 160, 89, 0.45);
	border-radius: 20px;
	padding: 36px 32px;
	color: #FFFFFF;
	max-width: 1240px;
	margin: 36px auto 0;
	box-shadow: 0 24px 60px rgba(15, 27, 61, 0.25);
	position: relative;
	overflow: hidden;
}

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

.calc-controls-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 28px;
	margin-bottom: 24px;
}

.calc-ctrl-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.calc-ctrl-label {
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	display: flex;
	justify-content: space-between;
}

.calc-budget-display {
	color: #D4AF37;
	font-family: var(--font-accent);
	font-weight: 800;
	font-size: 15px;
}

.calc-budget-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.calc-budget-pill {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #FFFFFF;
	padding: 6px 12px;
	border-radius: 7px;
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
}

.calc-budget-pill:hover {
	border-color: #C5A059;
}

.calc-budget-pill.is-active {
	background: linear-gradient(135deg, #D4AF37 0%, #C5A059 100%);
	color: #0F1B3D;
	border-color: #C5A059;
	font-weight: 800;
}

.calc-slider-input {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	accent-color: #C5A059;
	background: rgba(255, 255, 255, 0.2);
	outline: none;
	cursor: pointer;
}

.calc-industry-select {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border-radius: 8px;
	background: #0A122A;
	border: 1px solid rgba(197, 160, 89, 0.4);
	color: #FFFFFF;
	font-size: 13.5px;
	cursor: pointer;
}

.calc-industry-select option {
	background: #0F1B3D;
	color: #FFFFFF;
}

/* Stacked Visual Allocation Bar */
.calc-stacked-bar {
	width: 100%;
	height: 16px;
	border-radius: 8px;
	display: flex;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	margin: 18px 0 24px;
}

.bar-seg-seo { background: #10B981; transition: width 0.3s ease; }
.bar-seg-ppc { background: #0284C7; transition: width 0.3s ease; }
.bar-seg-cro { background: #D4AF37; transition: width 0.3s ease; }
.bar-seg-crm { background: #A855F7; transition: width 0.3s ease; }

/* 4 Breakdown Cards */
.calc-breakdown-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.calc-channel-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ccc-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ccc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.dot-seo { background: #10B981; }
.dot-ppc { background: #0284C7; }
.dot-cro { background: #D4AF37; }
.dot-crm { background: #A855F7; }

.ccc-pct {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 800;
	color: #D4AF37;
}

.ccc-title {
	font-family: var(--font-accent);
	font-size: 12.5px;
	font-weight: 700;
	color: #FFFFFF;
}

.ccc-amount {
	font-family: var(--font-accent);
	font-size: 1.15rem;
	font-weight: 800;
	color: #FFFFFF;
}

.calc-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	flex-wrap: wrap;
}

.calc-cta-note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   8 UNIFIED GROWTH CHANNELS GRID
   ========================================================================== */
.channels-8grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1240px;
	margin: 36px auto 0;
}

.channel-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.channel-card:hover {
	transform: translateY(-4px);
	border-color: rgba(197, 160, 89, 0.4);
	box-shadow: 0 18px 45px rgba(15, 27, 61, 0.07);
}

.channel-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(197, 160, 89, 0.12);
	border: 1px solid rgba(197, 160, 89, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	color: #AA8239;
}

.channel-card-title {
	font-family: var(--font-accent);
	font-size: 1.1rem;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.3;
	margin: 0 0 8px;
}

.channel-card-desc {
	font-size: 13px;
	color: #475569;
	line-height: 1.5;
	margin: 0 0 16px;
	flex: 1;
}

.channel-card-link {
	font-family: var(--font-accent);
	font-size: 12.5px;
	font-weight: 700;
	color: #0F1B3D;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: color 0.2s ease, gap 0.2s ease;
}

.channel-card-link:hover {
	color: #C5A059;
	gap: 8px;
}

/* ==========================================================================
   REPORTING DASHBOARD PREVIEW MOCK COMPONENT
   ========================================================================== */
.dashboard-preview-section {
	padding: clamp(60px, 7vw, 90px) 0;
	background: #FAF8F5;
}

.dashboard-preview-card {
	background: #0A122A;
	border: 1px solid rgba(197, 160, 89, 0.35);
	border-radius: 18px;
	padding: 28px 28px 24px;
	color: #FFFFFF;
	max-width: 1240px;
	margin: 36px auto 0;
	box-shadow: 0 25px 60px rgba(10, 18, 42, 0.3);
}

.dash-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding-bottom: 16px;
	margin-bottom: 22px;
	flex-wrap: wrap;
	gap: 12px;
}

.dash-brand-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dash-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 9999px;
	background: rgba(16, 185, 129, 0.12);
	border: 1px solid rgba(16, 185, 129, 0.3);
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 800;
	color: #10B981;
}

.dash-client-tag {
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
}

.dash-date-badge {
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.65);
}

.dash-metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 22px;
}

.dash-metric-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 16px 18px;
}

.dm-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 4px;
}

.dm-val {
	font-family: var(--font-accent);
	font-size: 1.55rem;
	font-weight: 800;
	color: #FFFFFF;
}

.dm-delta-green {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 800;
	color: #10B981;
	background: rgba(16, 185, 129, 0.12);
	padding: 2px 5px;
	border-radius: 4px;
}

.dm-lbl {
	font-family: var(--font-accent);
	font-size: 11.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
}

.dm-sub {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 2px;
}

.dash-stream-wrapper {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 16px 20px;
}

.dash-stream-title {
	font-family: var(--font-accent);
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #D4AF37;
	margin-bottom: 12px;
}

.dash-channels-stream {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.stream-row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) 90px;
	gap: 14px;
	align-items: center;
	font-size: 11.5px;
}

.stream-name {
	font-weight: 600;
	color: #FFFFFF;
}

.stream-progress-track {
	height: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	overflow: hidden;
}

.stream-progress-bar {
	height: 100%;
	border-radius: 3px;
}

.stream-val {
	font-family: var(--font-mono);
	font-weight: 700;
	text-align: right;
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS (1440px -> 360px)
   ========================================================================== */
@media (max-width: 991px) {
	.seo-hero-section {
		padding-top: 44px;
		padding-bottom: 44px;
	}
	.seo-hero-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.challenge-solution-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.bento-grid-3x2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.keyword-matrix-wrapper {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.keyword-matrix-divider {
		margin: 8px 0;
	}
	.process-timeline-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.seo-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.faq-enterprise-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.faq-sidebar-col {
		position: static;
	}
	.case-studies-3col-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
	.regional-hubs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.funnel-grid-2col {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.calc-controls-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.calc-breakdown-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.channels-8grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.dash-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media (max-width: 600px) {
	.seo-hero-section {
		padding-top: 36px;
		padding-bottom: 36px;
	}
	.bento-grid-3x2 {
		grid-template-columns: 1fr;
	}
	.process-timeline-grid {
		grid-template-columns: 1fr;
	}
	.seo-stats-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.case-studies-3col-grid {
		grid-template-columns: 1fr;
	}
	.regional-hubs-grid {
		grid-template-columns: 1fr;
	}
	.form-row-2col {
		grid-template-columns: 1fr;
	}
	.seo-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.btn-hero-cta,
	.btn-hero-secondary {
		width: 100%;
		justify-content: center;
	}
	.seo-lead-form-card {
		padding: 20px 16px 16px;
	}
	.seo-phone-flex {
		flex-direction: row !important;
		display: flex !important;
		align-items: stretch !important;
		gap: 8px !important;
		width: 100% !important;
	}
	.seo-country-select,
	.mnc-country-picker-wrap {
		width: 106px !important;
		min-width: 106px !important;
		flex-shrink: 0 !important;
	}
	.seo-phone-input {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	.funnel-tabs-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}
	.funnel-tab-btn {
		min-width: 170px;
		padding: 10px 12px;
	}
	.funnel-panel {
		padding: 22px 18px;
	}
	.calc-wrapper-card {
		padding: 24px 18px;
	}
	.calc-breakdown-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.channels-8grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.dashboard-preview-card {
		padding: 20px 16px;
	}
	.dash-metrics-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.stream-row {
		grid-template-columns: 110px minmax(0, 1fr) 70px;
		gap: 8px;
		font-size: 10.5px;
	}
}

/* ==========================================================================
   WEBSITE DEVELOPMENT PLATFORM HUB STYLES (ELITE MNC STANDARD)
   ========================================================================== */

/* 1. Performance Proof & Lighthouse Scorecards */
.webdev-perf-section {
	padding: clamp(64px, 7vw, 96px) 0;
	background: #FAF8F5;
}

.perf-scorecards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.scorecard-item {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	padding: 32px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4px 20px -2px rgba(15, 27, 61, 0.03);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.scorecard-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px -4px rgba(15, 27, 61, 0.08);
	border-color: rgba(197, 160, 89, 0.4);
}

.scorecard-circle {
	width: 100px;
	height: 100px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.scorecard-ring {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.ring-bg {
	fill: none;
	stroke: #E2E8F0;
	stroke-width: 8;
}

.ring-fill {
	fill: none;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 326.7;
	stroke-dashoffset: 6.5; /* 98-100% */
}

.ring-perf { stroke: #00875A; }
.ring-a11y { stroke: #00875A; }
.ring-bp   { stroke: #00875A; }
.ring-seo  { stroke: #00875A; }

.score-number {
	position: absolute;
	font-family: var(--font-accent);
	font-size: 32px;
	font-weight: 800;
	color: #00875A;
}

.scorecard-title {
	font-family: var(--font-accent);
	font-size: 19px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0 0 6px 0;
}

.scorecard-sub {
	font-size: 13.5px;
	color: #64748B;
	margin: 0;
	line-height: 1.45;
}

/* Core Web Vitals Key Metrics Bar */
.cwv-metrics-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 32px;
}

.cwv-metric-cell {
	background: #0F1B3D;
	color: #FFFFFF;
	border: 1px solid rgba(197, 160, 89, 0.25);
	border-radius: 14px;
	padding: 22px 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cwv-metric-cell::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #10B981, #C5A059);
}

.cwv-badge-good {
	display: inline-block;
	background: rgba(16, 185, 129, 0.2);
	border: 1px solid rgba(16, 185, 129, 0.5);
	color: #34D399;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: 9999px;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.cwv-val {
	font-family: var(--font-accent);
	font-size: 28px;
	font-weight: 800;
	color: #F8FAFC;
	line-height: 1.1;
	margin-bottom: 4px;
}

.cwv-lbl {
	font-size: 12.5px;
	font-weight: 600;
	color: #E2E8F0;
	margin-bottom: 4px;
}

.cwv-thresh {
	font-size: 11px;
	color: #94A3B8;
}

/* Comparison Callout: Builders vs Custom */
.perf-vs-builder-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 40px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 4px 20px -2px rgba(15, 27, 61, 0.04);
}

.vs-col {
	padding: 16px;
	border-radius: 12px;
}

.vs-bad {
	background: rgba(239, 68, 68, 0.04);
	border: 1px solid rgba(239, 68, 68, 0.15);
}

.vs-good {
	background: rgba(16, 185, 129, 0.04);
	border: 1px solid rgba(16, 185, 129, 0.25);
}

.vs-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.vs-header h4 {
	font-family: var(--font-accent);
	font-size: 17px;
	font-weight: 800;
	margin: 0;
}

.vs-bad .vs-header h4 { color: #DC2626; }
.vs-good .vs-header h4 { color: #047857; }

.vs-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13.5px;
	color: #334155;
	line-height: 1.5;
}

.vs-bad .vs-list li {
	position: relative;
	padding-left: 20px;
}

.vs-bad .vs-list li::before {
	content: '✕';
	position: absolute;
	left: 0;
	color: #EF4444;
	font-weight: 800;
}

.vs-good .vs-list li {
	position: relative;
	padding-left: 20px;
}

.vs-good .vs-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #10B981;
	font-weight: 800;
}

/* 2. "Built For SEO" 8-Pillars Grid */
.webdev-seo-checklist-section {
	padding: clamp(64px, 7vw, 96px) 0;
	background: #FFFFFF;
}

.seo-pillars-8grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 48px;
}

.seo-pillar-card {
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 14px;
	padding: 26px 20px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.25s ease;
}

.seo-pillar-card:hover {
	transform: translateY(-3px);
	border-color: rgba(197, 160, 89, 0.5);
	background: #FFFFFF;
	box-shadow: 0 10px 24px -4px rgba(15, 27, 61, 0.06);
}

.pillar-num-badge {
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
	color: #8A6D12;
	background: rgba(197, 160, 89, 0.15);
	border: 1px solid rgba(197, 160, 89, 0.35);
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.pillar-card-title {
	font-family: var(--font-accent);
	font-size: 16.5px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0 0 10px 0;
	line-height: 1.35;
}

.pillar-card-desc {
	font-size: 13.5px;
	color: #475569;
	margin: 0 0 16px 0;
	line-height: 1.55;
	flex-grow: 1;
}

.pillar-tag {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	color: #0F1B3D;
	background: rgba(15, 27, 61, 0.05);
	border-radius: 6px;
	padding: 3px 8px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* 3. Technology Options Matrix Table */
.webdev-tech-matrix-section {
	padding: clamp(64px, 7vw, 96px) 0;
	background: #FAF8F5;
}

.tech-matrix-table-wrap {
	margin-top: 48px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	overflow-x: auto;
	box-shadow: 0 4px 24px -2px rgba(15, 27, 61, 0.04);
}

.tech-matrix-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 14px;
	min-width: 880px;
}

.tech-matrix-table thead th {
	background: #0F1B3D;
	color: #FFFFFF;
	padding: 16px 20px;
	font-family: var(--font-accent);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}

.tech-matrix-table tbody tr {
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
	transition: background 0.2s ease;
}

.tech-matrix-table tbody tr:hover {
	background: rgba(197, 160, 89, 0.04);
}

.tech-matrix-table td {
	padding: 20px;
	vertical-align: middle;
	color: #334155;
	line-height: 1.5;
}

.tech-name-cell {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tech-icon-circle {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
	flex-shrink: 0;
}

.wp-icon      { background: #0073AA; color: #FFFFFF; }
.next-icon    { background: #000000; color: #FFFFFF; }
.shopify-icon { background: #96BF48; color: #FFFFFF; }
.custom-icon  { background: #4F46E5; color: #FFFFFF; }

.tech-subtag {
	display: block;
	font-size: 11.5px;
	color: #64748B;
	margin-top: 2px;
}

.speed-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 11.5px;
	font-weight: 700;
}

.speed-hyper {
	background: rgba(16, 185, 129, 0.15);
	color: #065F46;
	border: 1px solid rgba(16, 185, 129, 0.4);
}

.speed-fast {
	background: rgba(16, 185, 129, 0.1);
	color: #047857;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

/* 4. Process Timeline (7 Stages) */
.webdev-process-section {
	padding: clamp(64px, 7vw, 96px) 0;
	background: #FFFFFF;
}

.process-timeline-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 48px;
}

.timeline-card {
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 14px;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	transition: all 0.25s ease;
}

.timeline-card:hover {
	transform: translateY(-3px);
	border-color: rgba(197, 160, 89, 0.5);
	box-shadow: 0 10px 24px -4px rgba(15, 27, 61, 0.06);
	background: #FFFFFF;
}

.timeline-card.highlight-card {
	background: #0F1B3D;
	color: #FFFFFF;
	border: 1px solid rgba(197, 160, 89, 0.45);
	grid-column: span 2;
}

.timeline-card.highlight-card .step-title {
	color: #FFFFFF;
}

.timeline-card.highlight-card .step-desc {
	color: rgba(255, 255, 255, 0.8);
}

.timeline-card.highlight-card .step-deliverables li {
	color: #E2E8F0;
}

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

.step-num {
	font-family: var(--font-accent);
	font-size: 15px;
	font-weight: 800;
	color: #8A6D12;
}

.timeline-card.highlight-card .step-num {
	color: #D4AF37;
}

.step-duration {
	font-size: 11.5px;
	font-weight: 700;
	color: #0F1B3D;
	background: rgba(15, 27, 61, 0.06);
	padding: 2px 8px;
	border-radius: 9999px;
}

.timeline-card.highlight-card .step-duration {
	background: rgba(212, 175, 55, 0.2);
	color: #D4AF37;
}

.step-title {
	font-family: var(--font-accent);
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0 0 8px 0;
	line-height: 1.35;
}

.step-desc {
	font-size: 13px;
	color: #475569;
	margin: 0 0 14px 0;
	line-height: 1.5;
	flex-grow: 1;
}

.step-deliverables {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #334155;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	padding-top: 12px;
}

/* 5. Zero-Loss SEO Migration Framework */
.webdev-migration-section {
	padding: clamp(64px, 7vw, 96px) 0;
	background: #FAF8F5;
}

.migration-grid {
	align-items: center;
	gap: 48px;
}

.migration-steps-list {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mig-step-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.mig-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #0F1B3D;
	color: #D4AF37;
	font-family: var(--font-accent);
	font-weight: 800;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}

.mig-step-row h4 {
	font-family: var(--font-accent);
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0 0 4px 0;
}

.mig-step-row p {
	font-size: 13.5px;
	color: #475569;
	margin: 0;
	line-height: 1.5;
}

.migration-guarantee-card {
	background: #0F1B3D;
	border: 1px solid rgba(197, 160, 89, 0.45);
	border-radius: 18px;
	padding: 36px 30px;
	color: #FFFFFF;
	box-shadow: 0 16px 40px -10px rgba(10, 26, 51, 0.35);
}

.guarantee-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(197, 160, 89, 0.15);
	border: 1px solid rgba(197, 160, 89, 0.4);
	color: #D4AF37;
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	padding: 5px 12px;
	border-radius: 9999px;
	margin-bottom: 16px;
}

.migration-guarantee-card h3 {
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 800;
	color: #FFFFFF;
	margin: 0 0 10px 0;
	line-height: 1.3;
}

.migration-guarantee-card p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 24px 0;
}

.guarantee-metrics-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 24px;
}

.g-metric {
	text-align: center;
}

.g-val {
	display: block;
	font-family: var(--font-accent);
	font-size: 24px;
	font-weight: 800;
	color: #D4AF37;
	line-height: 1.1;
}

.g-lbl {
	display: block;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 4px;
}

/* 6. Enterprise Security & Maintenance (Navy 900) */
.webdev-security-section {
	padding: clamp(64px, 7vw, 96px) 0;
	background: #0F1B3D;
	color: #FFFFFF;
}

.security-grid-4col {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 48px;
}

.sec-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	transition: all 0.25s ease;
}

.sec-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(197, 160, 89, 0.4);
	transform: translateY(-3px);
}

.sec-icon-wrap {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(197, 160, 89, 0.15);
	border: 1px solid rgba(197, 160, 89, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.sec-card h3 {
	font-family: var(--font-accent);
	font-size: 17px;
	font-weight: 800;
	color: #FFFFFF;
	margin: 0 0 10px 0;
	line-height: 1.35;
}

.sec-card p {
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

/* 7. Bottom CTA Banner for Web Dev */
.webdev-cta-section {
	padding: clamp(64px, 7vw, 96px) 0;
	background: #0A142F;
	color: #FFFFFF;
	position: relative;
	overflow: hidden;
}

.webdev-cta-card {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.webdev-cta-h2 {
	font-family: var(--font-accent);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 800;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.webdev-cta-subhead {
	font-size: clamp(15.5px, 1.2vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	max-width: 680px;
}

.webdev-cta-channels {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 10px;
}

.cta-channel-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.cta-channel-item:hover {
	color: #D4AF37;
}

.cta-dot {
	color: rgba(197, 160, 89, 0.6);
}

.cta-sla {
	color: #34D399;
	font-weight: 600;
}

/* Responsive Media Queries for Web Dev Platform */
@media (max-width: 1024px) {
	.perf-scorecards-grid,
	.cwv-metrics-bar,
	.seo-pillars-8grid,
	.process-timeline-grid,
	.security-grid-4col {
		grid-template-columns: repeat(2, 1fr);
	}
	.timeline-card.highlight-card {
		grid-column: span 2;
	}
	.migration-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.perf-scorecards-grid,
	.cwv-metrics-bar,
	.seo-pillars-8grid,
	.process-timeline-grid,
	.security-grid-4col {
		grid-template-columns: 1fr;
	}
	.timeline-card.highlight-card {
		grid-column: span 1;
	}
	.perf-vs-builder-card {
		grid-template-columns: 1fr;
		padding: 20px;
	}
	.guarantee-metrics-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ==========================================================================
   SHOPIFY & ECOMMERCE PRACTICE HUB STYLES (v1.5.4)
   ========================================================================== */

/* --- Section 2: Store Conversion Anatomy (Interactive Product Mock) --- */
.store-anatomy-section {
	background-color: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
	padding: 80px 0;
}

.store-anatomy-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.95fr);
	gap: 36px;
	align-items: start;
	margin-top: 48px;
}

/* Browser Mockup Chrome */
.mock-product-preview-container {
	background: #FFFFFF;
	border-radius: 16px;
	border: 1px solid rgba(15, 27, 61, 0.12);
	box-shadow: 0 16px 40px rgba(15, 27, 61, 0.08);
	overflow: hidden;
	position: relative;
}

.mock-browser-header {
	background: #0F1B3D;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mock-browser-dots {
	display: flex;
	gap: 6px;
}

.mock-browser-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.mock-browser-dots span:nth-child(1) { background: #FF5F56; }
.mock-browser-dots span:nth-child(2) { background: #FFBD2E; }
.mock-browser-dots span:nth-child(3) { background: #27C93F; }

.mock-browser-url {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	max-width: 360px;
}

.mock-browser-url code {
	color: #D4AF37;
	font-family: monospace;
}

.mock-browser-tag {
	font-size: 10.5px;
	font-weight: 700;
	color: #34D399;
	background: rgba(52, 211, 153, 0.15);
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

/* Mock Product Body */
.mock-product-body {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 24px;
	padding: 24px;
}

.mock-gallery-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mock-main-image-wrap {
	background: linear-gradient(145deg, #F8F9FA 0%, #EEF2F6 100%);
	border-radius: 12px;
	border: 1px solid rgba(15, 27, 61, 0.08);
	position: relative;
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mock-discount-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #0F1B3D;
	color: #D4AF37;
	font-size: 10.5px;
	font-weight: 800;
	padding: 4px 8px;
	border-radius: 4px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	z-index: 2;
}

.mock-image-placeholder {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.product-illustration {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.product-render-label {
	font-size: 11px;
	font-weight: 700;
	color: #0F1B3D;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mock-thumbs-row {
	display: flex;
	gap: 8px;
}

.mock-thumb {
	flex: 1;
	height: 48px;
	background: #F1F4F8;
	border-radius: 6px;
	border: 1px solid rgba(15, 27, 61, 0.08);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.mock-thumb.active {
	border-color: #C5A059;
	background: #FAF8F5;
}

/* Details Column */
.mock-details-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mock-rating-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #4A5568;
	position: relative;
	padding: 4px 6px;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.mock-stars {
	color: #D4AF37;
	font-size: 13px;
	letter-spacing: 1px;
}

.mock-product-title {
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.3;
}

.mock-price-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mock-current-price {
	font-size: 20px;
	font-weight: 800;
	color: #0F1B3D;
}

.mock-compare-price {
	font-size: 14px;
	color: #94A3B8;
	text-decoration: line-through;
}

.mock-save-pill {
	background: rgba(34, 197, 94, 0.12);
	color: #16A34A;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 9999px;
}

/* Hotspots & Pins */
.mock-hotspot-pin {
	position: absolute;
	width: 24px;
	height: 24px;
	background: #0F1B3D;
	border: 2px solid #C5A059;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
	z-index: 10;
	transition: transform 0.2s ease, background 0.2s ease;
}

.mock-hotspot-pin.pin-1 {
	top: 14px;
	right: 14px;
}

.mock-hotspot-pin.pin-inline {
	position: absolute;
	top: -6px;
	right: -6px;
}

.mock-hotspot-pin:hover,
.mock-hotspot-pin.active {
	background: #C5A059;
	color: #0F1B3D;
	transform: scale(1.15);
	box-shadow: 0 0 12px rgba(197, 160, 89, 0.8);
}

.pin-pulse {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid #C5A059;
	animation: pinPulse 2s infinite ease-out;
	pointer-events: none;
}

@keyframes pinPulse {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.6); opacity: 0; }
}

.highlight-hotspot-target {
	background: rgba(197, 160, 89, 0.12) !important;
	outline: 1.5px solid #C5A059;
}

/* Urgency Box */
.mock-urgency-box {
	background: #FFFBEB;
	border: 1px solid #FDE68A;
	border-radius: 8px;
	padding: 8px 10px;
	position: relative;
	transition: background-color 0.2s ease;
}

.urgency-content {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: #92400E;
}

.urgency-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.urgency-progress-bar {
	height: 4px;
	background: #FEE2E2;
	border-radius: 2px;
	margin-top: 6px;
	overflow: hidden;
}

.urgency-fill {
	height: 100%;
	background: #EF4444;
	border-radius: 2px;
}

/* Swatches */
.mock-variant-box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.variant-label {
	font-size: 11px;
	font-weight: 700;
	color: #0F1B3D;
}

.color-swatches {
	display: flex;
	gap: 8px;
}

.swatch-btn {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid #FFFFFF;
	box-shadow: 0 0 0 1px #CBD5E1;
	transition: box-shadow 0.2s ease;
}

.swatch-btn.active {
	box-shadow: 0 0 0 2px #0F1B3D;
}

.swatch-gray { background: #475569; }
.swatch-gold { background: #D4AF37; }
.swatch-black { background: #0F172A; }

/* Add to Cart */
.mock-atc-box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.mock-qty-row {
	display: flex;
	gap: 8px;
}

.qty-stepper {
	display: flex;
	align-items: center;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	background: #F8FAFC;
	padding: 0 6px;
}

.qty-stepper button {
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 6px;
	color: #0F1B3D;
}

.qty-stepper span {
	font-size: 12px;
	font-weight: 700;
	padding: 0 6px;
}

.mock-atc-button {
	flex: 1;
	background: #0F1B3D;
	color: #FFFFFF;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 14px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mock-atc-button:hover {
	background: #1E2D5A;
}

.mock-shoppay-btn {
	width: 100%;
	background: #5A31F4;
	color: #FFFFFF;
	border: none;
	border-radius: 6px;
	font-size: 12px;
	padding: 8px;
	cursor: pointer;
}

/* Upsell Box */
.mock-upsell-module {
	background: #F8FAFC;
	border: 1px dashed #CBD5E1;
	border-radius: 8px;
	padding: 10px;
	position: relative;
	transition: background-color 0.2s ease;
}

.upsell-badge {
	font-size: 10px;
	font-weight: 800;
	color: #8A6D2B;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}

.upsell-item-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.upsell-thumb {
	font-size: 18px;
	background: #FFFFFF;
	padding: 4px 6px;
	border-radius: 4px;
	border: 1px solid #E2E8F0;
}

.upsell-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	font-size: 11px;
	color: #0F1B3D;
}

.upsell-price {
	font-size: 10.5px;
	color: #16A34A;
	font-weight: 700;
}

.upsell-price del {
	color: #94A3B8;
	font-weight: normal;
}

.upsell-add-btn {
	background: #FFFFFF;
	border: 1px solid #C5A059;
	color: #0F1B3D;
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
	cursor: pointer;
}

.upsell-add-btn:hover {
	background: #C5A059;
}

/* Trust Badges Row */
.mock-trust-badges-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding-top: 6px;
	border-top: 1px solid #E2E8F0;
	position: relative;
}

.trust-badge-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 9.5px;
	color: #475569;
	line-height: 1.2;
}

/* Right Explanation Pane */
.anatomy-explanation-pane {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.explanation-pane-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pane-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #8A6D2B;
	text-transform: uppercase;
}

.pane-title {
	font-size: 24px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	letter-spacing: -0.01em;
}

.pane-sub {
	font-size: 14px;
	color: #4A5568;
	margin: 0;
	line-height: 1.5;
}

.anatomy-pillar-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.anatomy-pillar-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 10px;
	padding: 14px 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.anatomy-pillar-card:hover,
.anatomy-pillar-card.active {
	border-color: #C5A059;
	box-shadow: 0 6px 18px rgba(15, 27, 61, 0.06);
	background: #FAF8F5;
	transform: translateX(4px);
}

.pillar-card-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.pillar-num {
	font-size: 12px;
	font-weight: 800;
	color: #C5A059;
	background: rgba(197, 160, 89, 0.15);
	padding: 2px 7px;
	border-radius: 4px;
}

.pillar-title {
	font-size: 15px;
	font-weight: 700;
	color: #0F1B3D;
	margin: 0;
}

.pillar-desc {
	font-size: 13px;
	color: #4A5568;
	margin: 0 0 8px 0;
	line-height: 1.5;
}

.pillar-impact-pill {
	display: inline-block;
	background: rgba(15, 27, 61, 0.05);
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 4px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	color: #0F1B3D;
}

/* --- Section 3: 8 Service Cards Grid --- */
.shopify-services-section {
	padding: 80px 0;
	background: #FFFFFF;
}

.shopify-services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.shopify-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	position: relative;
}

.shopify-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(15, 27, 61, 0.07);
	border-color: rgba(197, 160, 89, 0.5);
}

.shopify-card-icon {
	width: 52px;
	height: 52px;
	background: rgba(197, 160, 89, 0.1);
	border: 1px solid rgba(197, 160, 89, 0.25);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.shopify-card-title {
	font-size: 17px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.35;
}

.shopify-card-desc {
	font-size: 13.5px;
	color: #4A5568;
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

.shopify-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	padding-top: 12px;
}

.shopify-feature-list li {
	font-size: 12px;
	color: #2D3748;
	display: flex;
	align-items: center;
	gap: 6px;
}

.shopify-feature-list li::before {
	content: "•";
	color: #C5A059;
	font-size: 14px;
	font-weight: bold;
}

.shopify-card-footer {
	margin-top: auto;
}

.deliverable-badge {
	display: inline-block;
	background: #0F1B3D;
	color: #D4AF37;
	font-size: 10.5px;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 4px;
	letter-spacing: 0.03em;
}

/* --- Section 4: Platform Comparison Matrix --- */
.platform-matrix-section {
	padding: 80px 0;
}

.matrix-table-wrap {
	margin-top: 48px;
	background: #FFFFFF;
	border-radius: 16px;
	border: 1px solid rgba(15, 27, 61, 0.08);
	box-shadow: 0 10px 30px rgba(15, 27, 61, 0.04);
	overflow-x: auto;
}

.platform-matrix-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	min-width: 820px;
}

.platform-matrix-table th,
.platform-matrix-table td {
	padding: 18px 22px;
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
	vertical-align: top;
}

.platform-matrix-table thead th {
	background: #FAF8F5;
	border-bottom: 2px solid rgba(15, 27, 61, 0.1);
	font-size: 15px;
	font-weight: 800;
	color: #0F1B3D;
}

.platform-matrix-table th.highlight-col,
.platform-matrix-table td.highlight-col {
	background: rgba(197, 160, 89, 0.05);
	border-left: 2px solid #C5A059;
	border-right: 2px solid #C5A059;
}

.platform-matrix-table thead th.highlight-col {
	background: #0F1B3D;
	color: #FFFFFF;
	border-top: 3px solid #C5A059;
}

.table-badge {
	display: block;
	font-size: 10px;
	font-weight: 800;
	color: #D4AF37;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.table-col-title {
	font-size: 16px;
	font-weight: 800;
}

.td-feature {
	width: 220px;
}

.td-feature strong {
	display: block;
	font-size: 14px;
	color: #0F1B3D;
	margin-bottom: 3px;
}

.td-feature span {
	font-size: 12px;
	color: #64748B;
	font-weight: normal;
}

.score-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 9999px;
	font-size: 11.5px;
	font-weight: 700;
	margin-bottom: 6px;
}

.score-elite { background: #E8F5E9; color: #1B5E20; border: 1px solid rgba(27, 94, 32, 0.2); }
.score-high { background: #E3F2FD; color: #0D47A1; border: 1px solid rgba(13, 71, 161, 0.2); }
.score-med { background: #FFF8E1; color: #8D5B00; border: 1px solid rgba(141, 91, 0, 0.25); }
.score-warning { background: #FFEBEE; color: #B71C1C; border: 1px solid rgba(183, 28, 28, 0.2); }

.td-note {
	font-size: 12.5px;
	color: #4A5568;
	margin: 0;
	line-height: 1.45;
}

.tr-verdict th,
.tr-verdict td {
	border-bottom: none;
	background: #FAF8F5;
	padding-top: 24px;
	padding-bottom: 24px;
}

.verdict-cell strong {
	display: block;
	font-size: 13.5px;
	color: #0F1B3D;
	margin-bottom: 4px;
}

.verdict-cell p {
	font-size: 12px;
	color: #64748B;
	margin: 0;
	line-height: 1.4;
}

/* --- Section 5: Technical Product Schema Code Window --- */
.shopify-seo-tech-section {
	padding: 80px 0;
	background: #FFFFFF;
}

.schema-tech-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.95fr);
	gap: 36px;
	align-items: start;
	margin-top: 48px;
}

.code-window-card {
	background: #0B132B;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 16px 40px rgba(11, 19, 43, 0.3);
	overflow: hidden;
}

.code-window-header {
	background: #060B18;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.code-window-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.code-window-dots span:nth-child(1) { background: #FF5F56; }
.code-window-dots span:nth-child(2) { background: #FFBD2E; }
.code-window-dots span:nth-child(3) { background: #27C93F; }

.code-window-title {
	font-size: 12px;
	font-family: monospace;
	color: rgba(255, 255, 255, 0.7);
}

.code-badge {
	font-size: 10px;
	font-weight: 700;
	color: #34D399;
	background: rgba(52, 211, 153, 0.15);
	padding: 2px 7px;
	border-radius: 4px;
}

.code-window-content {
	padding: 18px;
	max-height: 480px;
	overflow-y: auto;
}

.code-block {
	margin: 0;
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 12px;
	line-height: 1.6;
	color: #E2E8F0;
}

.code-tag { color: #F472B6; }
.code-attr { color: #93C5FD; }
.code-val { color: #A7F3D0; }
.code-key { color: #FDE047; }
.code-num { color: #F87171; }

.code-window-footer {
	background: #060B18;
	padding: 10px 16px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.65);
	display: flex;
	align-items: center;
	gap: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.schema-status-bullet {
	width: 7px;
	height: 7px;
	background: #34D399;
	border-radius: 50%;
	display: inline-block;
}

/* Checklist Col */
.schema-checklist-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.checklist-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.checklist-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #8A6D2B;
	text-transform: uppercase;
}

.checklist-title {
	font-size: 24px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	letter-spacing: -0.01em;
}

.checklist-sub {
	font-size: 14px;
	color: #4A5568;
	margin: 0;
	line-height: 1.5;
}

.seo-practice-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.seo-practice-item {
	display: flex;
	gap: 12px;
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 10px;
	padding: 14px 16px;
	align-items: flex-start;
}

.practice-icon {
	font-size: 20px;
	line-height: 1;
}

.practice-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.practice-heading {
	font-size: 14px;
	font-weight: 700;
	color: #0F1B3D;
	margin: 0;
}

.practice-text {
	font-size: 12.5px;
	color: #4A5568;
	margin: 0;
	line-height: 1.5;
}

/* --- Section 6: Growth Stack Bento --- */
.growth-stack-section {
	padding: 80px 0;
	background: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.growth-stack-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.growth-stack-bento .stack-card:nth-child(4),
.growth-stack-bento .stack-card:nth-child(5) {
	grid-column: span 1;
}

.stack-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stack-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(15, 27, 61, 0.06);
	border-color: rgba(197, 160, 89, 0.45);
}

.stack-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.stack-logo-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.stack-icon-symbol {
	font-size: 20px;
}

.stack-tool-name {
	font-size: 14.5px;
	font-weight: 800;
	color: #0F1B3D;
}

.stack-category-tag {
	font-size: 10px;
	font-weight: 700;
	color: #8A6D2B;
	background: rgba(197, 160, 89, 0.12);
	padding: 3px 8px;
	border-radius: 4px;
}

.stack-title {
	font-size: 16px;
	font-weight: 700;
	color: #0F1B3D;
	margin: 0;
}

.stack-desc {
	font-size: 13px;
	color: #4A5568;
	margin: 0;
	line-height: 1.5;
	flex: 1;
}

.stack-metric-pill {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 6px;
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.metric-label {
	font-size: 10.5px;
	color: #64748B;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.metric-value {
	font-size: 13px;
	font-weight: 800;
	color: #059669;
}

/* --- Section 7: Regional Hubs --- */
.regional-hubs-section {
	padding: 80px 0;
	background: #FFFFFF;
}

.regional-hubs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	margin-top: 48px;
}

.hub-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 12px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: all 0.25s ease;
}

.hub-card:hover {
	border-color: #C5A059;
	box-shadow: 0 10px 24px rgba(15, 27, 61, 0.06);
	transform: translateY(-3px);
}

.hub-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hub-flag {
	font-size: 26px;
	line-height: 1;
}

.hub-title-block {
	display: flex;
	flex-direction: column;
}

.hub-title {
	font-size: 14.5px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
}

.hub-location {
	font-size: 11px;
	color: #8A6D2B;
	font-weight: 600;
}

.hub-desc {
	font-size: 12px;
	color: #4A5568;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

.hub-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	padding-top: 10px;
}

.hub-features li {
	font-size: 11px;
	color: #2D3748;
	display: flex;
	align-items: center;
	gap: 5px;
}

.hub-features li::before {
	content: "✓";
	color: #C5A059;
	font-weight: bold;
}

.hub-link {
	font-size: 11.5px;
	font-weight: 700;
	color: #0F1B3D;
	text-decoration: none;
	transition: color 0.2s ease;
	margin-top: auto;
}

.hub-link:hover {
	color: #C5A059;
}

/* --- Section 8: FAQ Accordion --- */
.shopify-faq-section {
	padding: 80px 0;
	background: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
}

/* --- Section 9: Bottom CTA Banner --- */
.shopify-cta-section {
	padding: 80px 0;
	background: #0F1B3D;
	color: #FFFFFF;
	position: relative;
	overflow: hidden;
}

.shopify-cta-box {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.shopify-cta-title {
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 800;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.shopify-cta-subhead {
	font-size: clamp(15.5px, 1.2vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	max-width: 680px;
}

.shopify-cta-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
}

.shopify-cta-channels {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 12px;
}

.shopify-internal-links-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	width: 100%;
}

.shopify-internal-links-strip a {
	color: #D4AF37;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.shopify-internal-links-strip a:hover {
	color: #FFFFFF;
}

.pipe-divider {
	color: rgba(255, 255, 255, 0.2);
}

/* Responsive Media Queries for Shopify & eCommerce Hub */
@media (max-width: 1200px) {
	.regional-hubs-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.shopify-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.store-anatomy-grid,
	.schema-tech-grid {
		grid-template-columns: 1fr;
	}
	.growth-stack-bento {
		grid-template-columns: repeat(2, 1fr);
	}
	.regional-hubs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.mock-product-body {
		grid-template-columns: 1fr;
	}
	.shopify-services-grid,
	.growth-stack-bento,
	.regional-hubs-grid {
		grid-template-columns: 1fr;
	}
	.shopify-cta-actions {
		flex-direction: column;
		width: 100%;
	}
	.shopify-cta-actions .btn {
		width: 100%;
	}
}

/* ==========================================================================
   WORDPRESS WEBSITE DEVELOPMENT & ENGINEERING STYLES (v1.5.5)
   ========================================================================== */

/* --- Section 2: Custom Gutenberg vs Page Builders Table --- */
.custom-vs-builder-section {
	padding: 80px 0;
	background-color: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.wp-builder-table thead th.th-shopify.highlight-col {
	background: #0F1B3D;
	color: #FFFFFF;
	border-top: 3px solid #C5A059;
}

/* --- Section 3: Enterprise Architecture Flow Diagram --- */
.wp-architecture-section {
	padding: 80px 0;
	background: #FFFFFF;
}

.arch-diagram-wrap {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.arch-pipeline-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}

.arch-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.09);
	border-radius: 14px;
	padding: 22px 18px;
	box-shadow: 0 8px 24px rgba(15, 27, 61, 0.04);
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	position: relative;
	height: 100%;
}

.arch-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(15, 27, 61, 0.08);
	border-color: #C5A059;
}

.arch-card-badge {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #8A6D2B;
	background: rgba(197, 160, 89, 0.12);
	padding: 3px 8px;
	border-radius: 4px;
	width: fit-content;
}

.arch-icon-box {
	width: 44px;
	height: 44px;
	background: rgba(15, 27, 61, 0.04);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(197, 160, 89, 0.25);
}

.arch-card-title {
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.3;
}

.arch-card-desc {
	font-size: 12.5px;
	color: #4A5568;
	margin: 0;
	line-height: 1.5;
}

.arch-tech-tags {
	list-style: none;
	padding: 0;
	margin: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	padding-top: 10px;
}

.arch-tech-tags li {
	font-size: 11px;
	font-weight: 600;
	color: #1E293B;
	display: flex;
	align-items: center;
	gap: 6px;
}

.arch-tech-tags li::before {
	content: "•";
	color: #C5A059;
	font-weight: bold;
}

/* Connectors */
.arch-connector {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 4px;
}

.connector-arrow {
	font-size: 18px;
	color: #C5A059;
	line-height: 1;
}

.connector-label {
	font-size: 10px;
	font-weight: 700;
	color: #64748B;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Architecture SLA Bar */
.arch-sla-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	background: #0F1B3D;
	border-radius: 12px;
	padding: 18px 24px;
	border: 1px solid rgba(197, 160, 89, 0.3);
}

.arch-sla-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.arch-sla-item:last-child {
	border-right: none;
}

.sla-num {
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 800;
	color: #D4AF37;
	line-height: 1.1;
}

.sla-text {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

/* --- Section 5: Enterprise Security Protocol Grid --- */
.wp-security-section {
	padding: 80px 0;
	background: #FFFFFF;
}

.security-protocol-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.security-protocol-card {
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.security-protocol-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(15, 27, 61, 0.06);
	border-color: rgba(197, 160, 89, 0.5);
}

.security-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.security-step-badge {
	font-size: 12px;
	font-weight: 800;
	color: #C5A059;
	background: rgba(197, 160, 89, 0.15);
	padding: 3px 8px;
	border-radius: 4px;
}

.security-status-tag {
	font-size: 10.5px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
}

.security-status-tag.tag-active {
	background: rgba(34, 197, 94, 0.12);
	color: #16A34A;
}

.security-card-title {
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.35;
}

.security-card-desc {
	font-size: 13px;
	color: #4A5568;
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

.security-subcheck {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	padding-top: 12px;
}

.security-subcheck li {
	font-size: 12px;
	color: #2D3748;
	display: flex;
	align-items: center;
	gap: 6px;
}

.security-subcheck li::before {
	content: "✓";
	color: #16A34A;
	font-weight: bold;
}

/* --- Section 6: Maintenance & SLA Plans Table --- */
.wp-maintenance-section {
	padding: 80px 0;
	background: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.maintenance-plans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
	align-items: stretch;
}

.maint-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.09);
	border-radius: 14px;
	padding: 32px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: 0 8px 24px rgba(15, 27, 61, 0.04);
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.maint-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(15, 27, 61, 0.08);
}

.maint-card.highlight-card {
	border: 2px solid #C5A059;
	box-shadow: 0 16px 40px rgba(197, 160, 89, 0.15);
	background: #FFFFFF;
}

.popular-ribbon {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: #0F1B3D;
	color: #D4AF37;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 4px 14px;
	border-radius: 9999px;
	border: 1px solid rgba(197, 160, 89, 0.5);
	white-space: nowrap;
}

.maint-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.maint-tier-tag {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #64748B;
	text-transform: uppercase;
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(15, 27, 61, 0.05);
	line-height: 1.2;
}

.maint-tier-tag.maint-tag-gold {
	color: #8A6D2B;
	background: rgba(197, 160, 89, 0.15);
	border: 1px solid rgba(197, 160, 89, 0.35);
}

.maint-tier-title {
	font-size: 22px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	letter-spacing: -0.01em;
}

.maint-tier-desc {
	font-size: 13px;
	color: #4A5568;
	margin: 0;
	line-height: 1.5;
}

.maint-features-list {
	flex: 1;
}

.maint-features-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.maint-features-list li {
	font-size: 12.5px;
	color: #4A5568;
	line-height: 1.45;
	position: relative;
	padding-left: 18px;
}

.maint-features-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #C5A059;
	font-weight: bold;
}

.maint-features-list li strong {
	color: #0F1B3D;
}

.maint-footer {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
}

/* Responsive Rules for WordPress Platform */
@media (max-width: 1024px) {
	.arch-pipeline-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.arch-connector {
		transform: rotate(90deg);
		margin: 6px 0;
	}
	.arch-sla-bar {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.arch-sla-item:nth-child(2) {
		border-right: none;
	}
	.security-protocol-grid,
	.maintenance-plans-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.arch-sla-bar {
		grid-template-columns: 1fr;
	}
	.arch-sla-item {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		padding-bottom: 12px;
	}
	.arch-sla-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
}

/* ==========================================================================
   UI/UX & DESIGN SYSTEMS PRACTICE HUB STYLES (v1.5.6)
   ========================================================================== */

/* --- Section 2: 7-Stage Process Visual --- */
.uiux-process-section {
	padding: 80px 0;
	background-color: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.uiux-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 48px;
}

.uiux-process-grid .process-step-card:nth-child(5),
.uiux-process-grid .process-step-card:nth-child(6),
.uiux-process-grid .process-step-card:nth-child(7) {
	grid-column: span 1;
}

.process-step-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 12px;
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 6px 18px rgba(15, 27, 61, 0.03);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	position: relative;
}

.process-step-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 27, 61, 0.07);
	border-color: #C5A059;
}

.process-step-card.highlight-step {
	border: 2px solid #C5A059;
	background: #FFFFFF;
}

.step-card-num {
	font-size: 14px;
	font-weight: 800;
	color: #C5A059;
	background: rgba(197, 160, 89, 0.12);
	width: fit-content;
	padding: 3px 10px;
	border-radius: 4px;
}

.step-card-title {
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.35;
}

.step-card-desc {
	font-size: 12.5px;
	color: #4A5568;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

.step-deliverable {
	font-size: 11px;
	font-weight: 700;
	color: #8A6D2B;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	padding-top: 10px;
	margin-top: auto;
}

/* --- Section 3: Design System Showcase (Tokens & States) --- */
.design-system-section {
	padding: 80px 0;
	background: #FFFFFF;
}

.ds-showcase-wrap {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-top: 48px;
}

.ds-module-card {
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 8px 24px rgba(15, 27, 61, 0.03);
}

.ds-module-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 24px;
}

.ds-module-tag {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #0F1B3D;
	text-transform: uppercase;
	background: rgba(15, 27, 61, 0.06);
	padding: 3px 8px;
	border-radius: 4px;
	width: fit-content;
}

.ds-module-tag.tag-gold {
	color: #8A6D2B;
	background: rgba(197, 160, 89, 0.15);
	border: 1px solid rgba(197, 160, 89, 0.35);
}

.ds-module-title {
	font-size: 20px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
}

.ds-module-sub {
	font-size: 13.5px;
	color: #4A5568;
	margin: 0;
}

/* Tokens Grid */
.tokens-display-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.token-group {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.07);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.token-group-label {
	font-size: 13px;
	font-weight: 800;
	color: #0F1B3D;
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
	padding-bottom: 8px;
}

.color-token-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.color-swatch-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.swatch-block {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: inline-block;
}

.swatch-meta {
	display: flex;
	flex-direction: column;
	font-size: 11.5px;
}

.swatch-meta strong {
	color: #0F1B3D;
}

.swatch-meta code {
	color: #64748B;
	font-size: 10.5px;
}

.type-token-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.type-token-row {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.type-sample {
	font-weight: 800;
	color: #0F1B3D;
}

.sample-h1 { font-size: 18px; }
.sample-h2 { font-size: 15px; }
.sample-body { font-size: 13px; font-weight: normal; }

.type-token-row code {
	font-size: 10px;
	color: #64748B;
	background: #F8FAFC;
	padding: 2px 6px;
	border-radius: 4px;
}

.spacing-token-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.spacing-pill {
	font-size: 11px;
	font-weight: 700;
	color: #0F1B3D;
	background: #F1F5F9;
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid #E2E8F0;
}

.border-spec-note {
	margin-top: auto;
}

.border-spec-note code {
	font-size: 10.5px;
	color: #64748B;
	background: #F8FAFC;
	padding: 4px 8px;
	border-radius: 4px;
	display: block;
}

/* 5 States Grid */
.states-demo-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.state-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 10px;
	padding: 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-align: center;
}

.state-label {
	font-size: 11.5px;
	font-weight: 800;
	color: #0F1B3D;
}

.state-component-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.btn-state-preview {
	font-size: 12px;
	padding: 8px 12px;
	width: 100%;
}

.input-state-preview {
	font-size: 11.5px;
	padding: 8px 10px;
	width: 100%;
	text-align: center;
}

/* Forced Simulation Styles */
.state-force-hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

.state-force-active {
	transform: scale(0.97);
	filter: brightness(0.95);
}

.state-force-focus {
	outline: 2px solid #0F1B3D;
	outline-offset: 2px;
}

.state-force-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.state-spec {
	font-size: 10px;
	color: #64748B;
	margin-top: auto;
}

/* --- Section 4: Before / After Redesign Comparison Slider --- */
.redesign-slider-section {
	padding: 80px 0;
	background: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

.comparison-slider-container {
	position: relative;
	width: 100%;
	max-width: 980px;
	margin: 48px auto 0;
	height: 480px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(15, 27, 61, 0.1);
	border: 1px solid rgba(15, 27, 61, 0.12);
	background: #FFFFFF;
	user-select: none;
}

.slider-pane {
	position: absolute;
	top: 0;
	height: 100%;
	overflow: hidden;
}

.pane-after {
	left: 0;
	width: 100%;
	background: #FFFFFF;
}

.pane-before {
	left: 0;
	width: 50%;
	background: #F1F5F9;
	z-index: 2;
	border-right: 2px solid #C5A059;
}

.pane-content-mock {
	width: 980px;
	height: 480px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
}

.mock-tag {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 4px 12px;
	border-radius: 9999px;
	margin-bottom: 20px;
}

.tag-after {
	background: rgba(34, 197, 94, 0.12);
	color: #16A34A;
	border: 1px solid rgba(34, 197, 94, 0.3);
}

.tag-before {
	background: rgba(239, 68, 68, 0.12);
	color: #DC2626;
	border: 1px solid rgba(239, 68, 68, 0.3);
}

.mock-ui-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.1);
	border-radius: 12px;
	padding: 24px;
	width: 440px;
	box-shadow: 0 12px 30px rgba(15, 27, 61, 0.06);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mock-ui-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mock-badge-success {
	font-size: 10.5px;
	font-weight: 700;
	color: #16A34A;
	background: rgba(34, 197, 94, 0.1);
	padding: 2px 8px;
	border-radius: 4px;
	width: fit-content;
}

.mock-ui-title {
	font-size: 18px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
}

.mock-ui-price {
	font-size: 22px;
	font-weight: 800;
	color: #0F1B3D;
}

.mock-ui-price sub {
	font-size: 12px;
	color: #64748B;
	font-weight: normal;
}

.mock-ui-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mock-input-field label,
.mock-field-label {
	font-size: 11px;
	font-weight: 700;
	color: #0F1B3D;
	display: block;
	margin-bottom: 3px;
}

.mock-field-val {
	background: #F8FAFC;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 12px;
	color: #0F1B3D;
	display: flex;
	justify-content: space-between;
}

.check-mark {
	color: #16A34A;
	font-weight: bold;
}

.mock-payment-row {
	display: flex;
	gap: 6px;
}

.mock-pay-pill {
	flex: 1;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	padding: 6px;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	background: #FFFFFF;
	cursor: pointer;
}

.mock-pay-pill.active {
	border-color: #0F1B3D;
	background: #0F1B3D;
	color: #FFFFFF;
}

.mock-submit-btn {
	background: linear-gradient(135deg, #D4AF37 0%, #C5A059 100%);
	color: #0F1B3D;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 800;
	padding: 10px;
	cursor: pointer;
}

.mock-trust-notes {
	display: flex;
	justify-content: space-between;
	font-size: 10.5px;
	color: #64748B;
}

/* Legacy Card */
.legacy-card {
	background: #F8FAFC;
	border: 1px dashed #94A3B8;
	font-family: Arial, sans-serif;
}

.legacy-field {
	font-size: 11px;
	color: #475569;
	background: #E2E8F0;
	padding: 6px;
	border-radius: 2px;
}

.legacy-btn {
	background: #64748B;
	color: #FFFFFF;
	border: none;
	padding: 8px;
	font-size: 12px;
}

.legacy-err {
	font-size: 10.5px;
	color: #DC2626;
	margin: 0;
}

/* Slider Handle */
.slider-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	z-index: 10;
	cursor: ew-resize;
	transform: translateX(-50%);
}

.handle-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: #C5A059;
	transform: translateX(-50%);
}

.handle-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #0F1B3D;
	border: 2px solid #C5A059;
	color: #D4AF37;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	box-shadow: 0 4px 12px rgba(15, 27, 61, 0.3);
}

/* --- Section 5: 10 Usability Checks Grid --- */
.ux-audit-section {
	padding: 80px 0;
	background: #FFFFFF;
}

.ux-checks-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	margin-top: 48px;
}

.ux-check-card {
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 12px;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: all 0.2s ease;
}

.ux-check-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(15, 27, 61, 0.05);
	border-color: #C5A059;
}

.check-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.check-num {
	font-size: 11px;
	font-weight: 800;
	color: #C5A059;
	background: rgba(197, 160, 89, 0.15);
	padding: 2px 6px;
	border-radius: 4px;
}

.check-icon-symbol {
	font-size: 16px;
}

.check-card-title {
	font-size: 13.5px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.35;
}

.check-card-desc {
	font-size: 11.5px;
	color: #4A5568;
	line-height: 1.5;
	margin: 0;
}

/* UX Audit CTA Card */
.ux-audit-cta-card {
	margin-top: 48px;
	background: #0F1B3D;
	border-radius: 14px;
	padding: 32px 36px;
	border: 1px solid rgba(197, 160, 89, 0.35);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.audit-cta-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 680px;
}

.audit-eyebrow {
	font-size: 11px;
	font-weight: 800;
	color: #D4AF37;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.audit-cta-title {
	font-size: 22px;
	font-weight: 800;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.3;
}

.audit-cta-text {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	line-height: 1.5;
}

.btn-cta-audit {
	white-space: nowrap;
	padding: 14px 26px;
}

/* --- Section 6: Accessibility (WCAG 2.2 AA) Grid --- */
.a11y-section {
	padding: 80px 0;
	background: #FAF8F5;
	border-top: 1px solid rgba(15, 27, 61, 0.06);
	border-bottom: 1px solid rgba(15, 27, 61, 0.06);
}

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

.a11y-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 6px 18px rgba(15, 27, 61, 0.03);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.a11y-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 27, 61, 0.06);
	border-color: #C5A059;
}

.a11y-icon-box {
	font-size: 24px;
	line-height: 1;
}

.a11y-card-title {
	font-size: 15.5px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
	line-height: 1.35;
}

.a11y-card-desc {
	font-size: 12.5px;
	color: #4A5568;
	line-height: 1.55;
	margin: 0;
}

/* --- Section 7: Deliverables Bento Grid --- */
.deliverables-section {
	padding: 80px 0;
	background: #FFFFFF;
}

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

.deliverables-grid .deliv-card:nth-child(4),
.deliverables-grid .deliv-card:nth-child(5) {
	grid-column: span 1;
}

.deliv-card {
	background: #FAF8F5;
	border: 1px solid rgba(15, 27, 61, 0.08);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.deliv-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 27, 61, 0.06);
	border-color: #C5A059;
}

.deliv-badge {
	font-size: 11px;
	font-weight: 800;
	color: #C5A059;
	background: rgba(197, 160, 89, 0.15);
	padding: 3px 8px;
	border-radius: 4px;
	width: fit-content;
}

.deliv-title {
	font-size: 16px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0;
}

.deliv-desc {
	font-size: 13px;
	color: #4A5568;
	line-height: 1.5;
	margin: 0;
}

/* Responsive Rules for UI/UX Practice Hub */
@media (max-width: 1200px) {
	.uiux-process-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.ux-checks-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.tokens-display-grid,
	.a11y-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.states-demo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1024px) {
	.uiux-process-grid,
	.ux-checks-grid,
	.deliverables-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.ux-audit-cta-card {
		flex-direction: column;
		text-align: center;
		padding: 24px;
	}
	.audit-cta-btn-wrap,
	.audit-cta-btn-wrap .btn {
		width: 100%;
	}
	.comparison-slider-container {
		height: 520px;
	}
	.pane-content-mock {
		width: 100%;
		padding: 20px;
	}
	.mock-ui-card {
		width: 100%;
		max-width: 380px;
	}
}

@media (max-width: 768px) {
	.uiux-process-grid,
	.tokens-display-grid,
	.states-demo-grid,
	.ux-checks-grid,
	.a11y-grid,
	.deliverables-grid {
		grid-template-columns: 1fr;
	}
	.comparison-slider-container {
		height: 540px;
	}
}

/* ==========================================================================
   EXECUTIVE WEBSITE PERFORMANCE COMPARISON COMPONENT (FORTUNE 500 STANDARD)
   ========================================================================== */

.website-fixer-section {
	padding: 96px 0;
	background: #FAF8F5;
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(15, 27, 61, 0.08);
	border-bottom: 1px solid rgba(15, 27, 61, 0.08);
}

/* Controls Bar: 3 Executive Lenses + Device Toggle */
.fixer-controls-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.fixer-lenses-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.fixer-lens-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 20px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.12);
	border-radius: 9999px;
	color: #334155;
	font-size: 13.5px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 8px rgba(15, 27, 61, 0.04);
	outline: none;
}

.fixer-lens-btn:hover {
	color: #0F1B3D;
	border-color: rgba(197, 160, 89, 0.6);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 27, 61, 0.08);
}

.fixer-lens-btn.is-active {
	background: #0F1B3D;
	color: #FFFFFF;
	border-color: #C5A059;
	box-shadow: 0 4px 16px rgba(15, 27, 61, 0.18), 0 0 0 1px #C5A059;
}

.fixer-lens-btn .lens-icon {
	color: #64748B;
	transition: color 0.2s ease;
}

.fixer-lens-btn.is-active .lens-icon {
	color: #D4AF37;
}

/* Device Viewport Toggle */
.fixer-device-toggle {
	display: inline-flex;
	align-items: center;
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.12);
	border-radius: 9999px;
	padding: 4px;
	box-shadow: 0 2px 8px rgba(15, 27, 61, 0.04);
}

.device-toggle-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	border: none;
	background: transparent;
	border-radius: 9999px;
	color: #64748B;
	cursor: pointer;
	transition: all 0.2s ease;
	outline: none;
}

.device-toggle-btn:hover {
	color: #0F1B3D;
}

.device-toggle-btn.is-active {
	background: #0F1B3D;
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(15, 27, 61, 0.15);
}

/* Executive Summary Banner */
.fixer-executive-summary {
	background: #FFFFFF;
	border: 1px solid rgba(15, 27, 61, 0.1);
	border-radius: 16px;
	padding: 22px 28px;
	margin-bottom: 36px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	box-shadow: 0 4px 20px rgba(15, 27, 61, 0.04);
	position: relative;
	transition: all 0.3s ease;
}

.summary-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.summary-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 9999px;
	width: fit-content;
}

.badge-warning {
	background: rgba(220, 38, 38, 0.08);
	color: #B91C1C;
	border: 1px solid rgba(220, 38, 38, 0.22);
}

.badge-success {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
	border: 1px solid rgba(16, 185, 129, 0.25);
}

.summary-title {
	font-size: 15px;
	font-weight: 800;
	color: #0F1B3D;
	line-height: 1.35;
	margin-top: 4px;
}

.summary-desc {
	font-size: 12.5px;
	line-height: 1.5;
	color: #475569;
	margin: 0;
}

.summary-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(197, 160, 89, 0.12);
	border: 1px solid rgba(197, 160, 89, 0.35);
	flex-shrink: 0;
}

/* Comparative Grid */
.website-fixer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	transition: all 0.35s ease;
}

.fixer-column {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fixer-col-header {
	padding: 0 4px;
}

.status-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 4px 12px;
	border-radius: 9999px;
	margin-bottom: 8px;
}

.pill-warning {
	background: rgba(220, 38, 38, 0.08);
	color: #B91C1C;
	border: 1px solid rgba(220, 38, 38, 0.2);
}

.pill-gold {
	background: rgba(197, 160, 89, 0.14);
	color: #8A6D2B;
	border: 1px solid rgba(197, 160, 89, 0.4);
}

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

.status-dot.red { background: #DC2626; box-shadow: 0 0 6px rgba(220, 38, 38, 0.5); }
.status-dot.green { background: #10B981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }

.fixer-col-title {
	font-size: 21px;
	font-weight: 800;
	color: #0F1B3D;
	margin: 0 0 4px 0;
	line-height: 1.3;
}

.fixer-col-sub {
	font-size: 13.5px;
	line-height: 1.5;
	color: #4A5568;
	margin: 0;
}

/* Device Frames */
.fixer-device-frame {
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.frame-problem {
	background: #FFFFFF;
	border: 1px solid #CBD5E1;
	box-shadow: 0 10px 30px rgba(15, 27, 61, 0.06);
}

.frame-solution {
	background: #0F1B3D;
	border: 1.5px solid rgba(197, 160, 89, 0.45);
	box-shadow: 0 18px 48px rgba(15, 27, 61, 0.25), 0 0 0 1px rgba(197, 160, 89, 0.15);
}

.device-notch {
	display: none;
}

/* Browser Bar */
.browser-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: #F1F5F9;
	border-bottom: 1px solid #E2E8F0;
}

.browser-bar.bar-solution {
	background: #14234B;
	border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}

.browser-dots {
	display: flex;
	gap: 6px;
}

.browser-dots .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

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

.browser-url-input {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	padding: 5px 12px;
	border-radius: 6px;
	font-size: 11px;
	font-family: monospace;
	border: 1px solid #CBD5E1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.browser-url-input.url-solution {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(197, 160, 89, 0.28);
	color: #FAF8F5;
}

.url-protocol {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
}

.url-protocol.insecure { color: #DC2626; }
.url-protocol.secure { color: #10B981; }

.url-text {
	color: #64748B;
	overflow: hidden;
	text-overflow: ellipsis;
}

.url-solution .url-text {
	color: #94A3B8;
}

.browser-perf-tag {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

.tag-poor {
	background: rgba(239, 68, 68, 0.12);
	color: #DC2626;
	border: 1px solid rgba(239, 68, 68, 0.3);
}

.tag-good {
	background: rgba(16, 185, 129, 0.15);
	color: #10B981;
	border: 1px solid rgba(16, 185, 129, 0.3);
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.tag-good .lh-score {
	background: #10B981;
	color: #FFFFFF;
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 10px;
}

/* Canvas Screens */
.device-screen-canvas {
	position: relative;
	min-height: 460px;
	padding: 16px;
	box-sizing: border-box;
}

/* Screen Legacy (Problem) */
.screen-legacy {
	background: #F8FAFC;
	color: #334155;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.legacy-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background: #1E3A8A;
	color: #FFFFFF;
	border-radius: 4px;
	margin-bottom: 12px;
}

.legacy-logo-text {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.legacy-nav-links {
	display: flex;
	gap: 10px;
	font-size: 11px;
}

.legacy-nav-item {
	color: #93C5FD;
	text-decoration: underline;
}

.legacy-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 12px;
	padding: 12px;
	background: #E2E8F0;
	border-radius: 4px;
	margin-bottom: 12px;
	align-items: center;
}

.legacy-h1 {
	font-size: 14px;
	font-weight: 700;
	color: #0F172A;
	line-height: 1.3;
	margin-bottom: 6px;
}

.legacy-p {
	font-size: 10.5px;
	color: #475569;
	line-height: 1.45;
	margin-bottom: 8px;
}

.legacy-link-btn {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	color: #1D4ED8;
	text-decoration: underline;
}

.legacy-fake-img {
	background: #CBD5E1;
	height: 100px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 9px;
	color: #64748B;
	border: 1px dashed #94A3B8;
	text-align: center;
	padding: 6px;
}

.legacy-content-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.legacy-box {
	background: #FFFFFF;
	padding: 10px;
	border-radius: 4px;
	border: 1px solid #CBD5E1;
	font-size: 10px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.legacy-box-title {
	color: #1E293B;
	font-size: 10.5px;
}

.legacy-box-meta {
	color: #64748B;
	font-size: 9px;
}

/* Canvas Callout Badges */
.canvas-callout-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 10px;
	transition: all 0.25s ease;
}

.badge-flaw-speed {
	background: #FEF2F2;
	color: #991B1B;
	border: 1px solid #FECACA;
}

.badge-flaw-mobile {
	background: #FFFBEB;
	color: #92400E;
	border: 1px solid #FDE68A;
}

.badge-solution-speed {
	background: rgba(16, 185, 129, 0.15);
	color: #A7F3D0;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Screen Modern (Solution Canvas) */
.screen-modern {
	background: #0F1B3D;
	color: #FAF8F5;
	position: relative;
}

.modern-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 14px;
}

.modern-logo {
	display: flex;
	align-items: center;
	gap: 6px;
}

.logo-mark {
	color: #C5A059;
}

.logo-text {
	font-weight: 800;
	font-size: 12.5px;
	color: #FFFFFF;
	letter-spacing: -0.01em;
}

.modern-nav-links {
	display: flex;
	gap: 12px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
}

.cta-pill-gold {
	background: linear-gradient(135deg, #C5A059 0%, #DFBA73 100%);
	color: #0F1B3D;
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 10.5px;
	font-weight: 800;
}

.modern-hero-wrap {
	margin-bottom: 14px;
}

.modern-h1 {
	font-size: 17px;
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1.25;
	margin: 0 0 6px 0;
}

.modern-lead {
	font-size: 11.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 10px 0;
}

.modern-proof-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.proof-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 3px 8px;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 700;
	color: #E2E8F0;
}

/* Embedded Interactive Consultation Card */
.modern-interactive-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(197, 160, 89, 0.3);
	border-radius: 10px;
	padding: 12px;
	backdrop-filter: blur(10px);
	margin-bottom: 8px;
}

.card-caption {
	font-size: 10.5px;
	font-weight: 800;
	color: #C5A059;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.demo-form-row {
	display: flex;
	gap: 6px;
}

.demo-input-group {
	flex: 1.2;
}

.demo-select-group {
	flex: 1;
}

.demo-input {
	width: 100%;
	background: #FFFFFF;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	padding: 7px 10px;
	font-size: 11px;
	color: #0F1B3D;
	outline: none;
	box-sizing: border-box;
}

.demo-input:focus {
	border-color: #C5A059;
	box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.25);
}

.demo-select {
	width: 100%;
	background: #FFFFFF;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	padding: 7px 6px;
	font-size: 11px;
	color: #0F1B3D;
	outline: none;
	box-sizing: border-box;
}

.demo-submit-btn {
	background: linear-gradient(135deg, #C5A059 0%, #DFBA73 100%);
	border: none;
	border-radius: 6px;
	padding: 7px 12px;
	font-size: 11px;
	font-weight: 800;
	color: #0F1B3D;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.2s, box-shadow 0.2s;
}

.demo-submit-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(197, 160, 89, 0.4);
}

.demo-form-feedback {
	margin-top: 6px;
	font-size: 11px;
}

.feedback-success {
	display: block;
	background: rgba(16, 185, 129, 0.15);
	border: 1px solid rgba(16, 185, 129, 0.3);
	color: #A7F3D0;
	padding: 6px 10px;
	border-radius: 6px;
	line-height: 1.4;
}

.demo-trust-line {
	display: flex;
	justify-content: space-between;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 8px;
}

/* Footer Metrics Strips */
.frame-metrics-strip {
	display: flex;
	justify-content: space-around;
	padding: 10px 14px;
	font-size: 11px;
	border-top: 1px solid #E2E8F0;
}

.strip-danger {
	background: #FFF5F5;
	color: #7F1D1D;
	border-top: 1px solid #FED7D7;
}

.strip-danger .metric-val {
	color: #DC2626;
	font-weight: 800;
}

.strip-success {
	background: #0C1633;
	color: rgba(255, 255, 255, 0.85);
	border-top: 1px solid rgba(197, 160, 89, 0.2);
}

.strip-success .metric-val {
	color: #10B981;
	font-weight: 800;
}

/* ==========================================================================
   MOBILE VIEWPORT MORPHING MODE (.view-mobile)
   ========================================================================== */

.website-fixer-grid.view-mobile .fixer-device-frame {
	max-width: 320px;
	margin: 0 auto;
	border-radius: 36px;
	border: 10px solid #1E293B;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.website-fixer-grid.view-mobile .frame-problem {
	border-color: #381212;
}

.website-fixer-grid.view-mobile .frame-solution {
	border-color: #0B142D;
	box-shadow: 0 20px 50px rgba(15, 27, 61, 0.4), 0 0 0 2px #C5A059;
}

.website-fixer-grid.view-mobile .device-notch {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: 90px;
	height: 16px;
	background: #000000;
	border-radius: 0 0 10px 10px;
	margin: 0 auto 4px auto;
}

.notch-speaker {
	width: 36px;
	height: 3px;
	background: #334155;
	border-radius: 9999px;
}

.notch-lens {
	width: 5px;
	height: 5px;
	background: #1E293B;
	border-radius: 50%;
}

.website-fixer-grid.view-mobile .legacy-hero {
	grid-template-columns: 1fr;
}

.website-fixer-grid.view-mobile .legacy-nav-links,
.website-fixer-grid.view-mobile .modern-nav-links {
	display: none;
}

.website-fixer-grid.view-mobile .legacy-content-strip {
	grid-template-columns: 1fr;
}

.website-fixer-grid.view-mobile .demo-form-row {
	flex-direction: column;
}

/* ==========================================================================
   EXECUTIVE WEBSITE AUDIT REQUEST CARD
   ========================================================================== */

.fixer-url-benchmark-card {
	margin-top: 48px;
	background: linear-gradient(135deg, #0A122A 0%, #0F1B3D 100%);
	border: 1.5px solid rgba(197, 160, 89, 0.45);
	border-radius: 18px;
	padding: 38px 44px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	position: relative;
	overflow: hidden;
}

.fixer-url-benchmark-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 40px;
	right: 40px;
	height: 3px;
	background: linear-gradient(90deg, #D4AF37 0%, #C5A059 50%, #D4AF37 100%);
	border-radius: 3px;
}

.benchmark-header {
	text-align: center;
	margin-bottom: 24px;
}

.benchmark-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #D4AF37;
	text-transform: uppercase;
	padding: 5px 14px;
	background: rgba(197, 160, 89, 0.1);
	border: 1px solid rgba(197, 160, 89, 0.3);
	border-radius: 9999px;
	margin-bottom: 12px;
}

.benchmark-title {
	font-size: 26px;
	font-weight: 800;
	color: #FFFFFF;
	margin: 0 0 8px 0;
	line-height: 1.25;
}

.benchmark-sub {
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.78);
	max-width: 680px;
	margin: 0 auto;
	line-height: 1.5;
}

.benchmark-form {
	max-width: 660px;
	margin: 0 auto;
}

.benchmark-input-group {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1.5px solid rgba(197, 160, 89, 0.4);
	border-radius: 12px;
	padding: 6px 8px 6px 16px;
	transition: all 0.25s ease;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.benchmark-input-group:focus-within {
	border-color: #D4AF37;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.25);
}

.benchmark-protocol {
	font-family: monospace;
	font-size: 14px;
	font-weight: 700;
	color: #D4AF37;
	user-select: none;
}

.benchmark-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	color: #FFFFFF;
}

.benchmark-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.btn-benchmark-submit {
	flex-shrink: 0;
	height: 44px;
	padding: 0 24px;
	font-size: 13.5px;
	border-radius: 8px;
}

.benchmark-status-box {
	margin-top: 18px;
	border-radius: 10px;
	padding: 16px 20px;
	font-size: 13.5px;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 6px;
	animation: fadeInStatus 0.3s ease;
}

.benchmark-status-box.is-success {
	background: rgba(16, 185, 129, 0.15);
	border: 1px solid #10B981;
	color: #FFFFFF;
}

.benchmark-status-box.is-error {
	background: rgba(220, 38, 38, 0.15);
	border: 1px solid #EF4444;
	color: #FFFFFF;
}

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

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (MNC 1440px -> 375px STANDARD)
   ========================================================================== */

@media (max-width: 991px) {
	.fixer-controls-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.fixer-lenses-nav {
		justify-content: center;
	}
	.fixer-device-toggle {
		align-self: center;
	}
	.fixer-executive-summary {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 16px;
	}
	.summary-col {
		align-items: center;
	}
	.summary-divider {
		margin: 0 auto;
		transform: rotate(90deg);
	}
	.website-fixer-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.fixer-url-benchmark-card {
		padding: 28px 20px;
	}
	.benchmark-input-group {
		flex-direction: column;
		gap: 10px;
		padding: 12px;
	}
	.btn-benchmark-submit {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.website-fixer-section {
		padding: 60px 0;
	}
	.fixer-lens-btn {
		padding: 8px 14px;
		font-size: 12px;
	}
	.device-screen-canvas {
		min-height: auto;
		padding: 12px;
	}
	.fixer-col-title {
		font-size: 18px;
	}
	.frame-metrics-strip {
		flex-direction: column;
		gap: 6px;
		text-align: center;
	}
}