diff --git a/src/lib/components/hero.svelte b/src/lib/components/hero.svelte
index f4caa89..66f7a95 100644
--- a/src/lib/components/hero.svelte
+++ b/src/lib/components/hero.svelte
@@ -25,8 +25,9 @@
 	id="home"
 	class="hero-gradient relative flex min-h-screen items-center overflow-hidden pt-24"
 >
+	<!-- Subtle Ambient Light -->
 	<div
-		class="absolute top-[-10%] right-[-10%] h-125 w-125 rounded-full bg-cyan-900/10 blur-[120px]"
+		class="absolute top-[-10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-cyan-900/10 blur-[120px]"
 	></div>
 
 	<div class="relative z-10 container mx-auto px-8">
@@ -36,22 +37,22 @@
 			>
 				<span class="h-1.5 w-1.5 rounded-full bg-cyan-500 shadow-[0_0_10px_rgba(34,211,238,0.8)]"
 				></span>
-				<span class="text-[10px] font-bold tracking-[0.3em] text-white/60 uppercase"
-					>Advanced DevSecOps & Cloud Architecture</span
-				>
+				<span class="text-[10px] font-bold tracking-[0.3em] text-white/60 uppercase">
+					Advanced DevSecOps & Cloud Architecture
+				</span>
 			</div>
 
 			<h1 class="mb-8 text-6xl leading-[1.05] font-black tracking-tighter text-white md:text-8xl">
 				ENGINEERED FOR <br />
+
 				<span class="inline-grid grid-cols-1 grid-rows-1">
-					{#each PHRASES as phrase, i (i)}
+					{#each PHRASES as phrase, i (phrase)}
 						<span
-							style="gridArea: '1 / 1' "
-							class={`transform bg-linear-to-r from-white via-white to-slate-500 bg-clip-text text-transparent transition-all duration-700 ease-in-out ${
-								i === index
-									? 'translate-y-0 opacity-100'
-									: 'pointer-events-none -translate-y-4 opacity-0'
-							}`}
+							style="grid-area: 1 / 1"
+							class="transform bg-gradient-to-r from-white via-white to-slate-500 bg-clip-text text-transparent transition-all duration-700 ease-in-out
+              {i === index
+								? 'translate-y-0 opacity-100'
+								: 'pointer-events-none -translate-y-4 opacity-0'}"
 						>
 							{phrase}
 						</span>
@@ -80,18 +81,21 @@
 						Critical Breaches Reported
 					</p>
 				</div>
+
 				<div>
 					<p class="text-2xl font-black tracking-tighter text-white">99.999%</p>
 					<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
 						Availability Target
 					</p>
 				</div>
+
 				<div>
 					<p class="text-2xl font-black tracking-tighter text-white">1200+</p>
 					<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
 						Hardened Deployments
 					</p>
 				</div>
+
 				<div>
 					<p class="text-2xl font-black tracking-tighter text-white">ISO/SOC2</p>
 					<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
@@ -102,6 +106,7 @@
 		</div>
 	</div>
 
+	<!-- Background visual element -->
 	<div
 		class="pointer-events-none absolute top-1/2 right-[-5%] hidden w-1/3 -translate-y-1/2 opacity-20 lg:block"
 	>