package.json

@@ -1,7 +1,7 @@
 {
   "name": "embroidery-viewer",
   "private": true,
-  "version": "3.0.0",
+  "version": "3.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

src/lib/sections/MobileApp.svelte

@@ -70,8 +70,64 @@
   .app {
     position: relative;
     padding: 6rem 1.5rem;
-    background: #ffffff;
     overflow: hidden;
+
+    /* Base */
+    background-color: #ffffff;
+
+    /* Embroidery-inspired layers */
+    background-image:
+    /* soft radial "fabric tension" */
+      radial-gradient(
+        circle at 20% 30%,
+        rgba(6, 52, 95, 0.06),
+        transparent 60%
+      ),
+      radial-gradient(
+        circle at 80% 70%,
+        rgba(6, 52, 95, 0.05),
+        transparent 60%
+      ),
+      /* diagonal "thread lines" */
+      repeating-linear-gradient(
+          45deg,
+          rgba(6, 52, 95, 0.04) 0px,
+          rgba(6, 52, 95, 0.04) 1px,
+          transparent 1px,
+          transparent 12px
+        ),
+      /* opposite direction stitching */
+      repeating-linear-gradient(
+          -45deg,
+          rgba(6, 52, 95, 0.025) 0px,
+          rgba(6, 52, 95, 0.025) 1px,
+          transparent 1px,
+          transparent 14px
+        );
+  }
+
+  .app::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+
+    background-image:
+      linear-gradient(rgba(6, 52, 95, 0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(6, 52, 95, 0.03) 1px, transparent 1px);
+
+    background-size: 40px 40px;
+  }
+
+  .blob {
+    position: absolute;
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(6, 52, 95, 0.15), transparent 70%);
+    filter: blur(80px);
+    top: -100px;
+    right: -100px;
+    z-index: 0;
   }
 
   .container {