hero on mobile

components/home/Hero.tsx

@@ -11,17 +11,8 @@ export default function Hero() {
   const t = useTranslations('Home.hero');
 
   return (
-    <Section className="relative min-h-[85vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
+    <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
-      <motion.div
+      <Container className="relative z-10 text-left text-white w-full order-1">
-        className="absolute inset-0 z-0"
-        initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
-        animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
-        transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
-      >
-        <HeroIllustration />
-      </motion.div>
-      
-      <Container className="relative z-10 text-left text-white w-full">
         <motion.div
           className="max-w-5xl"
           initial="hidden"
@@ -73,6 +64,15 @@ export default function Hero() {
           </motion.div>
         </motion.div>
       </Container>
+
+      <motion.div
+        className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-2 mt-8 md:mt-0"
+        initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
+        animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+        transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
+      >
+        <HeroIllustration />
+      </motion.div>
       
       <motion.div
         className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"

components/home/HeroIllustration.tsx

@@ -163,10 +163,10 @@ const POWER_LINES = [
 
 export default function HeroIllustration() {
   return (
-    <div className="absolute inset-0 z-0 overflow-hidden bg-primary">
+    <div className="absolute md:inset-0 z-0 overflow-hidden bg-primary w-full h-full">
       <svg
         viewBox="-400 -200 1800 1100"
-        className="w-full h-full opacity-30 md:opacity-100 scale-[2] md:scale-100 translate-x-1/3 md:translate-x-0"
+        className="w-full h-full opacity-60 md:opacity-100 scale-[1.5] md:scale-100 translate-x-0"
         preserveAspectRatio="xMidYMid slice"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"