Mobile: center text/headings, tighten hero padding, fix utility bar overflow

src/routes/+page.svelte

@@ -119,24 +119,23 @@
 </script>
 
 <!-- ═══════════════════════════════════════════════════ UTILITY BAR -->
-<div style="background: var(--color-navy); color: var(--color-dim); border-bottom: 1px solid var(--color-navy-mid);">
+<div style="background: var(--color-navy); border-bottom: 1px solid var(--color-navy-mid);">
 	<div class="max-w-7xl mx-auto px-6 h-9 flex items-center justify-between">
-		<span class="text-xs tracking-wide hidden sm:block" style="color: rgba(255,255,255,0.4);">
+		<span class="text-xs tracking-wide hidden sm:block" style="color: rgba(255,255,255,0.35);">
 			Premier Data Intelligence &amp; Signal Brokerage
 		</span>
-		<div class="flex items-center gap-6 ml-auto">
+		<div class="flex items-center gap-5 sm:ml-auto">
 			<a
 				href="mailto:inquiries@keystoneintel.io"
-				class="text-xs no-underline transition-colors hover:text-white"
+				class="text-xs no-underline transition-colors hover:text-white hidden sm:block"
 				style="color: rgba(255,255,255,0.45);"
 				>inquiries@keystoneintel.io</a
 			>
-			<span class="text-xs" style="color: rgba(255,255,255,0.2);">|</span>
 			<a
 				href="#contact"
 				class="text-xs no-underline transition-colors hover:text-white"
-				style="color: rgba(255,255,255,0.45);"
-				>Secure Inquiry</a
+				style="color: rgba(255,255,255,0.55); font-weight: 600;"
+				>Secure Inquiry →</a
 			>
 		</div>
 	</div>
@@ -231,38 +230,38 @@
 		aria-hidden="true"
 	>K</div>
 
-	<div class="relative z-10 max-w-7xl mx-auto px-8 sm:px-12 py-20 w-full">
-		<div class="max-w-3xl">
-			<div class="overline mb-5 reveal" style="color: var(--color-gold);">
+	<div class="relative z-10 max-w-7xl mx-auto px-6 sm:px-12 py-14 sm:py-20 w-full">
+		<div class="max-w-3xl mx-auto sm:mx-0 text-center sm:text-left">
+			<div class="overline mb-4 sm:mb-5 reveal" style="color: var(--color-gold);">
 				Premier Data Intelligence Firm
 			</div>
 
 			<h1
-				class="font-heading font-700 leading-[1.05] mb-6 reveal delay-1"
-				style="font-size: clamp(2.4rem, 5.5vw, 4.2rem); color: var(--color-white);"
+				class="font-heading font-700 leading-[1.05] mb-5 reveal delay-1"
+				style="font-size: clamp(2rem, 5.5vw, 4.2rem); color: var(--color-white);"
 			>
 				Intelligence That Moves<br />
 				<em style="font-style: italic; color: var(--color-gold-light);">Before the Market Does.</em>
 			</h1>
 
 			<p
-				class="leading-relaxed mb-10 max-w-xl reveal delay-2"
-				style="font-size: 1.1rem; color: rgba(255,255,255,0.65); font-weight: 300;"
+				class="leading-relaxed mb-8 max-w-xl mx-auto sm:mx-0 reveal delay-2"
+				style="font-size: 1rem; color: rgba(255,255,255,0.65); font-weight: 300;"
 			>
 				KeystoneIntel bridges the gap between massive data lakes and executive action — delivering
 				the high-fidelity signals that redefine competitive advantage.
 			</p>
 
-			<div class="flex flex-col sm:flex-row gap-4 reveal delay-3">
-				<a href="#contact" class="btn-gold">Request Intelligence →</a>
-				<a href="#about" class="btn-outline">Our Approach</a>
+			<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 items-center sm:items-start reveal delay-3">
+				<a href="#contact" class="btn-gold w-full sm:w-auto justify-center">Request Intelligence →</a>
+				<a href="#about" class="btn-outline w-full sm:w-auto justify-center">Our Approach</a>
 			</div>
 
 			<!-- Credibility markers -->
-			<div class="flex flex-wrap gap-x-8 gap-y-3 mt-14 reveal delay-4">
+			<div class="flex flex-wrap justify-center sm:justify-start gap-x-6 gap-y-2.5 mt-8 sm:mt-12 reveal delay-4">
 				{#each ['Institutional Grade', 'Compliance Certified', 'Absolute Discretion'] as badge}
 					<div class="flex items-center gap-2">
-						<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="color: var(--color-gold)">
+						<svg width="11" height="11" viewBox="0 0 12 12" fill="none" style="color: var(--color-gold)">
 							<path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 						</svg>
 						<span class="text-xs tracking-wide" style="color: rgba(255,255,255,0.45); font-weight: 600;">{badge}</span>
@@ -276,14 +275,14 @@
 <!-- ═══════════════════════════════════════════════════ STATS BAR -->
 <div style="background: var(--color-navy-mid);">
 	<div class="max-w-7xl mx-auto px-6">
-		<div class="grid grid-cols-1 sm:grid-cols-3 divide-y sm:divide-y-0 sm:divide-x" style="divide-color: rgba(255,255,255,0.1);">
+		<div class="grid grid-cols-3 divide-x" style="divide-color: rgba(255,255,255,0.1);">
 			{#each stats as stat}
-				<div class="py-8 px-8 text-center reveal">
+				<div class="py-5 sm:py-8 px-3 sm:px-8 text-center reveal">
 					<div
-						class="font-heading font-700 mb-1"
-						style="font-size: 2.25rem; color: var(--color-gold-light);"
+						class="font-heading font-700 mb-0.5"
+						style="font-size: clamp(1.4rem, 4vw, 2.25rem); color: var(--color-gold-light);"
 					>{stat.value}</div>
-					<div class="text-xs tracking-[0.12em] uppercase font-600" style="color: rgba(255,255,255,0.45);">{stat.label}</div>
+					<div class="text-[0.6rem] sm:text-xs tracking-[0.08em] sm:tracking-[0.12em] uppercase font-600 leading-tight" style="color: rgba(255,255,255,0.45);">{stat.label}</div>
 				</div>
 			{/each}
 		</div>
@@ -296,9 +295,9 @@
 		<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">
 
 			<!-- Left column -->
-			<div class="lg:col-span-5">
+			<div class="lg:col-span-5 text-center lg:text-left">
 				<div class="overline reveal">About KeystoneIntel</div>
-				<div class="rule-gold reveal delay-1"></div>
+				<div class="rule-gold mx-auto lg:mx-0 reveal delay-1"></div>
 				<h2
 					class="font-heading font-700 leading-[1.1] mb-6 reveal delay-1"
 					style="font-size: clamp(2rem, 3.5vw, 2.8rem); color: var(--color-navy);"
@@ -355,11 +354,11 @@
 	<div class="max-w-7xl mx-auto px-6 sm:px-8">
 
 		<!-- Section header -->
-		<div class="py-14 sm:py-20 border-b" style="border-color: var(--color-border);">
+		<div class="py-14 sm:py-20 border-b text-center lg:text-left" style="border-color: var(--color-border);">
 			<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-end">
 				<div>
 					<div class="overline reveal">Industries We Serve</div>
-					<div class="rule-gold reveal delay-1"></div>
+					<div class="rule-gold mx-auto lg:mx-0 reveal delay-1"></div>
 					<h2
 						class="font-heading font-700 leading-[1.1] reveal delay-1"
 						style="font-size: clamp(2rem, 3.5vw, 2.8rem); color: var(--color-navy);"
@@ -367,7 +366,7 @@
 						Vertical Expertise.<br />Global Impact.
 					</h2>
 				</div>
-				<p class="leading-relaxed font-300 reveal delay-2" style="color: var(--color-muted);">
+				<p class="leading-relaxed font-300 text-center lg:text-left reveal delay-2" style="color: var(--color-muted);">
 					Bespoke data solutions engineered for the world's most demanding decision environments.
 					Each practice is staffed by domain specialists with institutional-grade sourcing relationships.
 				</p>
@@ -394,7 +393,7 @@
 			{#if activeIndustry === i}
 				<div class="py-14">
 					<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16">
-						<div class="lg:col-span-5">
+						<div class="lg:col-span-5 text-center lg:text-left">
 							<div class="text-xs font-600 tracking-widest uppercase mb-2" style="color: var(--color-gold);">
 								{ind.code}
 							</div>
@@ -404,7 +403,7 @@
 							<p class="font-heading italic mb-6" style="color: var(--color-muted); font-size: 1.05rem;">
 								{ind.sub}
 							</p>
-							<ul class="space-y-2.5">
+							<ul class="space-y-2.5 text-left">
 								{#each ind.points as pt}
 									<li class="flex items-start gap-3 text-sm" style="color: var(--color-muted);">
 										<span
@@ -416,11 +415,11 @@
 								{/each}
 							</ul>
 						</div>
-						<div class="lg:col-span-7">
-							<p class="leading-relaxed font-300" style="color: var(--color-muted); font-size: 1.05rem; line-height: 1.85;">
+						<div class="lg:col-span-7 text-center lg:text-left">
+							<p class="leading-relaxed font-300 text-left" style="color: var(--color-muted); font-size: 1.05rem; line-height: 1.85;">
 								{ind.body}
 							</p>
-							<div class="mt-8">
+							<div class="mt-8 flex justify-center lg:justify-start">
 								<a href="#contact" class="btn-navy">Inquire About This Vertical →</a>
 							</div>
 						</div>
@@ -445,9 +444,9 @@
 		<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
 
 			<!-- Left: editorial content -->
-			<div>
+			<div class="text-center lg:text-left">
 				<div class="overline reveal" style="color: var(--color-gold);">Proprietary Intelligence</div>
-				<div class="rule-gold reveal delay-1"></div>
+				<div class="rule-gold mx-auto lg:mx-0 reveal delay-1"></div>
 
 				<h2
 					class="font-heading font-700 leading-[1.1] mb-6 reveal delay-1"
@@ -456,14 +455,16 @@
 					The Signal<br />Over the Noise.
 				</h2>
 
-				<p class="leading-relaxed mb-8 font-300 reveal delay-2" style="color: rgba(255,255,255,0.6);">
+				<p class="leading-relaxed mb-8 font-300 text-left reveal delay-2" style="color: rgba(255,255,255,0.6);">
 					Our custom-built extraction engines harvest alternative data from disparate global sources,
 					transforming unstructured raw information into high-fidelity intelligence. The result:
 					actionable signals that predict market shifts, mitigate risk, and front-run economic trends
 					before they are visible to conventional analysis.
 				</p>
 
-				<a href="#contact" class="btn-gold reveal delay-3">Discuss Your Signal Requirements →</a>
+				<div class="flex justify-center lg:justify-start">
+					<a href="#contact" class="btn-gold reveal delay-3">Discuss Your Signal Requirements →</a>
+				</div>
 			</div>
 
 			<!-- Right: source list -->
@@ -514,9 +515,9 @@
 <section id="advantage" class="py-20 sm:py-28" style="background: var(--color-bg);">
 	<div class="max-w-7xl mx-auto px-6 sm:px-8">
 		<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start mb-16">
-			<div class="lg:col-span-5">
+			<div class="lg:col-span-5 text-center lg:text-left">
 				<div class="overline reveal">Why KeystoneIntel</div>
-				<div class="rule-gold reveal delay-1"></div>
+				<div class="rule-gold mx-auto lg:mx-0 reveal delay-1"></div>
 				<h2
 					class="font-heading font-700 leading-[1.1] reveal delay-1"
 					style="font-size: clamp(2rem, 3.5vw, 2.8rem); color: var(--color-navy);"
@@ -525,7 +526,7 @@
 				</h2>
 			</div>
 			<div class="lg:col-span-7 flex items-end">
-				<p class="leading-relaxed font-300 reveal delay-2" style="color: var(--color-muted);">
+				<p class="leading-relaxed font-300 text-center lg:text-left reveal delay-2" style="color: var(--color-muted);">
 					Four institutional commitments that define every engagement — from initial inquiry
 					through final delivery and beyond.
 				</p>
@@ -535,7 +536,7 @@
 		<div class="grid grid-cols-1 sm:grid-cols-2 gap-0 border-t border-l" style="border-color: var(--color-border);">
 			{#each advantages as adv, i}
 				<div
-					class="p-8 sm:p-10 border-b border-r reveal delay-{i + 1}"
+					class="p-8 sm:p-10 border-b border-r text-center sm:text-left reveal delay-{i + 1}"
 					style="border-color: var(--color-border);"
 				>
 					<div
@@ -546,7 +547,7 @@
 						class="font-heading font-700 text-xl mb-3"
 						style="color: var(--color-navy);"
 					>{adv.title}</h3>
-					<p class="text-sm leading-relaxed font-300" style="color: var(--color-muted);">{adv.body}</p>
+					<p class="text-sm leading-relaxed font-300 text-left" style="color: var(--color-muted);">{adv.body}</p>
 				</div>
 			{/each}
 		</div>
@@ -563,11 +564,11 @@
 
 			<!-- Left: info panel -->
 			<div
-				class="lg:col-span-5 py-16 sm:py-24 pr-0 lg:pr-16 border-b lg:border-b-0 lg:border-r"
+				class="lg:col-span-5 py-16 sm:py-24 pr-0 lg:pr-16 border-b lg:border-b-0 lg:border-r text-center lg:text-left"
 				style="border-color: var(--color-border);"
 			>
 				<div class="overline reveal">Contact</div>
-				<div class="rule-gold reveal delay-1"></div>
+				<div class="rule-gold mx-auto lg:mx-0 reveal delay-1"></div>
 				<h2
 					class="font-heading font-700 leading-[1.1] mb-6 reveal delay-1"
 					style="font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--color-navy);"