Fix UI/UX issues and restore styling

- Fix dark mode toggle (use resolvedTheme, simplify icon rendering)
- Restore colored left borders on section containers
- Remove conflicting px-2 classes from section-container elements
- Fix founder signature vertical alignment (items-center)
- Reduce header nav gap for tighter spacing
- Increase section-container and glass-card padding

apps/web/src/components/about/founder-signature.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export const FounderSignature = () => {
   return (
-    <div className="grid md:grid-cols-[1fr,440px] gap-12 lg:gap-20 items-start">
+    <div className="grid md:grid-cols-[1fr,440px] gap-12 lg:gap-20 items-center">
       {/* Left Column: Bio */}
       <div className="space-y-8 text-left section-container">
         <div className="flex items-center gap-6 relative z-10">
@@ -35,7 +35,7 @@ export const FounderSignature = () => {
       </div>
 
       {/* Right Column: Cards 01, 02, 03 */}
-      <div className="space-y-6 lg:-mt-4">
+      <div className="space-y-6">
         <Card className="glass-card hover:border-purple-500/30">
           <h4 className="text-base font-bold mb-3 flex items-center gap-2">
             <span className="w-6 h-6 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-[10px]">01</span>

apps/web/src/components/landing/services-preview.tsx

@@ -3,7 +3,7 @@ import { Card } from "@repo/ui/components/card";
 export function ServicesPreview() {
   return (
     <div className="w-full max-w-6xl mx-auto px-4 mt-8 mb-16 relative z-10">
-        <div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 section-container">
+        <div className="text-left mb-8 section-container border-l-4 border-l-emerald-500">
             <h3 className="text-3xl font-bold mb-3 tracking-tight">High-Performance Webshops</h3>
             <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
                 We build commerce infrastructure that scales with you. From complex supply chains 

apps/web/src/components/theme-toggle.tsx

@@ -3,12 +3,18 @@
 import { useTheme } from "next-themes";
 import { Moon, Sun } from "lucide-react";
 import { Button } from "@repo/ui/components/button";
+import { useEffect, useState } from "react";
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const toggleTheme = (e: React.MouseEvent<HTMLButtonElement>) => {
-    const isDark = theme === "dark";
+    const isDark = resolvedTheme === "dark";
     
     // Fallback for browsers without startViewTransition
     if (!document.startViewTransition) {
@@ -46,10 +52,18 @@ export function ThemeToggle() {
   };
 
   return (
-    <Button variant="ghost" size="icon" onClick={toggleTheme} className="rounded-full">
-      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-      <span className="sr-only">Toggle theme</span>
+    <Button 
+      variant="ghost" 
+      size="icon" 
+      onClick={mounted ? toggleTheme : undefined}
+      className="rounded-full"
+      aria-label="Toggle theme"
+    >
+      {mounted && resolvedTheme === "dark" ? (
+        <Moon className="h-5 w-5" />
+      ) : (
+        <Sun className="h-5 w-5" />
+      )}
     </Button>
   );
 }