diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4e6153d..5a91d26 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,36 +16,51 @@ import {
 <Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
   <Navbar />
   
-  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
+  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16 tactile-grid-bg">
     <!-- Grid System Container (Bento architecture) -->
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-auto">
       
       <!-- ZELLE 1: HERO & HAUPTFOKUS (Span 2 cols on md, Span 2 rows) -->
-      <div class="md:col-span-2 md:row-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300">
+      <div class="md:col-span-2 md:row-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300 tactile-noise">
+        {/* Precision Blueprint Corner Markers */}
+        <span class="absolute top-3 left-3 w-2.5 h-2.5 border-t border-l border-brand-arcticBlue/30"></span>
+        <span class="absolute top-3 right-3 w-2.5 h-2.5 border-t border-r border-brand-arcticBlue/30"></span>
+        <span class="absolute bottom-3 left-3 w-2.5 h-2.5 border-b border-l border-brand-arcticBlue/30"></span>
+        <span class="absolute bottom-3 right-3 w-2.5 h-2.5 border-b border-r border-brand-arcticBlue/30"></span>
+        
         <div class="absolute inset-0 bg-gradient-to-tr from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
         <div>
           <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-6">
             <span class="w-1.5 h-1.5 rounded-full bg-brand-arcticBlue animate-ping"></span>
-            Webdesign & UI/UX Entwicklung
+            Sorglos-Websites für den Mittelstand
           </div>
           <h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight">
-            Websites, die performen.<br/>
-            <span class="text-brand-arcticBlue">Von der Idee bis zum Live-Gang.</span>
+            Digitales Sorglos-Paket.<br/>
+            <span class="text-brand-arcticBlue">Für Handwerk & Mittelstand.</span>
           </h1>
           <p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed">
-            Wir konzipieren, optimieren und hosten Ihre neue Website. Technisch perfekt. Sichtbar bei Google. Komplett betreut.
+            Wir bauen, pflegen und hosten Ihre neue Website. Absolut zuverlässig. DSGVO-konform auf deutschen Servern. Ohne Aufwand für Sie.
           </p>
         </div>
-        <div class="mt-8">
+        <div class="mt-8 flex flex-wrap gap-4 relative z-10">
           <a href="#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200">
             Projekt anfragen
             <FaArrowRight class="w-3 h-3 group-hover:translate-x-1 transition-transform" />
           </a>
+          <a href="/templates" class="inline-flex items-center gap-2 px-5 py-2.5 bg-slate-900/50 backdrop-blur border border-white/10 text-white font-semibold text-xs tracking-wider uppercase rounded hover:scale-[1.02] hover:border-brand-arcticBlue/50 hover:shadow-md transition-all duration-300">
+            Template-Katalog entdecken
+            <FaArrowRight class="w-3 h-3 text-brand-arcticBlue" />
+          </a>
         </div>
       </div>
 
       <!-- ZELLE 2: DAS VERSPRECHEN (Span 1 col) -->
-      <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+      <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
+        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
+        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
+        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
+        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
+        
         <div>
           <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Full-Service-Garantie</h2>
           <p class="text-zinc-400 text-xs leading-relaxed">
@@ -58,11 +73,16 @@ import {
       </div>
 
       <!-- ZELLE 3: PERFORMANCE-GARANTIE (Span 1 col) -->
-      <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+      <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
+        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
+        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
+        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
+        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
+        
         <div>
           <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Performance</h2>
           <p class="text-zinc-400 text-xs leading-relaxed">
-            Visualisierung des Pagespeed-Wertes. Extreme Ladegeschwindigkeit für glückliche Besucher.
+            Echte, messbare Geschwindigkeit für Ihre Kunden. Optimierter Code, der schnell lädt.
           </p>
         </div>
         <div class="mt-6">
@@ -77,81 +97,106 @@ import {
       </div>
 
       <!-- ZELLE 4: SÄULE 1 - WEBDESIGN (Span 2 cols on md) -->
-      <div id="services" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group">
+      <div id="services" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group relative tactile-noise">
+        <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
+        <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
+        <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
+        <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
+        
         <div class="max-w-md">
           <div class="p-3 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
             <FaLaptopCode class="w-6 h-6" />
           </div>
           <h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX</h3>
           <p class="text-zinc-400 text-xs leading-relaxed">
-            Individuelles UI/UX-Design & Entwicklung von Grund auf. Keine billigen WordPress-Templates. Blitzschnell im Code umgesetzt.
+            Individuelles Design & Entwicklung von Grund auf. Keine billigen Standard-Templates. Hochwertiger Code, der zu Ihrem Handwerksbetrieb passt.
           </p>
         </div>
-        <div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto">
+        <div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto relative z-10">
           <div class="flex items-center gap-2 text-zinc-300 text-xs">
-            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Figma Prototyping
+            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Individuelles Konzept
           </div>
           <div class="flex items-center gap-2 text-zinc-300 text-xs">
-            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Eigener Code
+            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Eigener, sauberer Code
           </div>
           <div class="flex items-center gap-2 text-zinc-300 text-xs">
-            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> SEO-optimiert
+            <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Optimiert für Mobilgeräte
           </div>
         </div>
       </div>
 
       <!-- ZELLE 5: SÄULE 2 - SEO & SICHTBARKEIT (Span 1 col) -->
-      <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+      <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
+        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
+        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
+        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
+        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
+        
         <div>
           <div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
             <FaSearchDollar class="w-5 h-5" />
           </div>
           <h3 class="text-lg font-bold text-white mb-2">Sichtbarkeit & SEO</h3>
           <p class="text-zinc-400 text-xs leading-relaxed">
-            Technische Suchmaschinenoptimierung, semantischer Code, schnelle Indexierung und Google-optimierte Struktur von Tag 1 an.
+            Lokale Auffindbarkeit bei Google. Wir sorgen dafür, dass Kunden in Ihrer Region Sie direkt finden.
           </p>
         </div>
       </div>
 
       <!-- ZELLE 7: TECH-STACK (Span 2 cols on md) -->
-      <div id="tech" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group">
+      <div id="tech" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
+        <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
+        <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
+        <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
+        <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
+        
         <div>
-          <h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">State-of-the-Art Tools</h3>
+          <h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">Präzise Werkzeuge</h3>
           <p class="text-zinc-400 text-xs leading-relaxed mb-6">
-            Wir setzen auf modernste Technologien für maximale Ladezeiten, Sicherheit und Skalierbarkeit.
+            Wir nutzen modernste, stabile Werkzeuge für maximale Ladegeschwindigkeiten und absolute Ausfallsicherheit.
           </p>
         </div>
-        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
-          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
-            <span class="text-brand-arcticBlue font-semibold text-xs">Astro</span>
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 relative z-10">
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
+            <span class="text-brand-arcticBlue font-semibold text-xs">Astro Framework</span>
           </div>
-          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
             <span class="text-brand-arcticBlue font-semibold text-xs">Tailwind CSS</span>
           </div>
-          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
-            <span class="text-brand-arcticBlue font-semibold text-xs">React</span>
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
+            <span class="text-brand-arcticBlue font-semibold text-xs">React UI</span>
           </div>
-          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
-            <span class="text-brand-arcticBlue font-semibold text-xs">Vercel / Netlify</span>
+          <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
+            <span class="text-brand-arcticBlue font-semibold text-xs">Deutsches Hosting</span>
           </div>
         </div>
       </div>
 
       <!-- ZELLE 6: SÄULE 3 - HOSTING & BETRIEB (Span 1 col) -->
-      <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+      <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
+        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
+        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
+        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
+        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
+        
         <div>
           <div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
             <FaServer class="w-5 h-5" />
           </div>
           <h3 class="text-lg font-bold text-white mb-2">Hosting & Betrieb</h3>
           <p class="text-zinc-400 text-xs leading-relaxed">
-            Sicheres, DSGVO-konformes Premium-Hosting auf deutschen Servern. Inklusive SSL-Zertifikaten, automatischen Backups und Wartung.
+            Sicheres, DSGVO-konformes Hosting auf deutschen Servern. Komplett gewartet inklusive Backups.
           </p>
         </div>
       </div>
 
       <!-- ZELLE 8: UNSER 3-SCHRITTE-PROZESS (Span 1 col) -->
-      <div id="concept" class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
+      <div id="concept" class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
+        <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
+        <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
+        <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
+        <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
+        
         <div>
           <h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser 3-Schritte-Prozess</h3>
           <ol class="space-y-4">
@@ -181,7 +226,11 @@ import {
       </div>
 
       <!-- ZELLE 9: KONTAKT (Span 2 cols on md) -->
-      <div id="contact" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 sm:p-10 transition-all duration-300 group">
+      <div id="contact" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 sm:p-10 transition-all duration-300 group relative tactile-noise">
+        <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
+        <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
+        <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
+        <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
         <h3 class="text-2xl font-bold text-white mb-2">Bereit für Ihr Projekt?</h3>
         <p class="text-zinc-400 text-xs mb-8">
           Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden.