feat: neural network hero with true 3D and dynamic lines

- True 3D positioning with translate3d(x, y, z) for each node
- Larger cards (200px width) with proper spacing
- Canvas-based dynamic connection lines
- Lines connect at card borders (edge-to-edge)
- Straight solid lines (3px, yellow, 50% opacity)
- Mouse parallax with smooth easing
- 3D perspective changes card sizes dynamically
- Mobile responsive: flat column layout
- Device orientation support for touch devices

src/styles/global.css

@@ -448,44 +448,50 @@ background: rgb(255 255 255 / .10);
 color: rgb(255 255 255 / .72);
 }
 
-/* Neural Network Hero - 3D Layout */
+/* Neural Network Hero - True 3D Layout */
 .hero-neural {
   position: relative;
   width: 100%;
-  max-width: 480px;
-  height: 400px;
+  max-width: 560px;
+  height: 480px;
   margin-inline: auto;
   perspective: 1200px;
 }
 
+.neural-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 5;
+}
+
 .neural-scene {
   position: relative;
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
-  transition: transform 0.1s ease-out;
+  transition: transform 0.15s ease-out;
   will-change: transform;
 }
 
-/* Neural nodes */
+/* Neural nodes - base */
 .neural-node {
   position: absolute;
-  border-radius: 20px;
-  padding: 20px 24px;
+  border-radius: 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
-  min-width: 120px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: default;
   backface-visibility: hidden;
 }
 
 .neural-node:hover {
-  transform: scale(1.05) translateZ(20px);
-  box-shadow: 0 20px 50px rgb(0 0 0 / .15);
+  box-shadow: 0 24px 60px rgb(0 0 0 / .18);
 }
 
 /* Center node: กำไร */
@@ -493,13 +499,15 @@ color: rgb(255 255 255 / .72);
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%) translateZ(0px);
-  min-width: 160px;
-  padding: 28px 32px;
-  border: 2px solid var(--yellow);
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  padding: 32px;
+  border: 3px solid var(--yellow);
   box-shadow:
-    0 0 0 8px rgb(254 212 0 / .10),
-    0 30px 80px rgb(254 212 0 / .18),
-    0 10px 30px rgb(0 0 0 / .10);
+    0 0 0 10px rgb(254 212 0 / .12),
+    0 30px 80px rgb(254 212 0 / .20),
+    0 10px 30px rgb(0 0 0 / .12);
   z-index: 10;
 }
 
@@ -508,7 +516,7 @@ color: rgb(255 255 255 / .72);
 }
 
 .node-label {
-  font-size: clamp(2.4rem, 5vw, 3.2rem);
+  font-size: clamp(2.6rem, 5vw, 3.4rem);
   font-weight: 900;
   color: var(--ink);
   line-height: 1;
@@ -516,66 +524,132 @@ color: rgb(255 255 255 / .72);
 }
 
 .node-sub {
-  margin-top: 8px;
-  font-size: 13px;
+  margin-top: 10px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--muted);
   line-height: 1.4;
 }
 
-/* Outer nodes */
+/* Outer cards - larger and positioned in 3D */
+.neural-card {
+  width: 200px;
+  padding: 28px 24px;
+  min-height: 120px;
+}
+
+/* True 3D positions: translate3d(x, y, z) */
 .node-marketing {
-  left: 12%;
-  top: 15%;
-  transform: translateZ(-150px);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) translate3d(-280px, -160px, -180px);
 }
 
 .node-ai {
-  left: 68%;
-  top: 30%;
-  transform: translateZ(-100px);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) translate3d(240px, 80px, -120px);
 }
 
 .node-biz {
-  left: 25%;
-  top: 65%;
-  transform: translateZ(-200px);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) translate3d(-160px, 200px, -250px);
 }
 
-.node-tag {
-  font-size: 15px;
+.card-tag {
+  font-size: 16px;
   font-weight: 900;
   color: var(--ink);
   letter-spacing: .02em;
   text-transform: uppercase;
 }
 
-.node-desc {
-  margin-top: 6px;
-  font-size: 13px;
+.card-desc {
+  margin-top: 8px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--muted);
   line-height: 1.4;
 }
 
-/* Neural connections */
-.neural-connections {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 5;
-  transform-style: preserve-3d;
+/* Floating animations */
+.node-marketing {
+  animation: float-1 6s ease-in-out infinite;
 }
 
-.neural-line {
-  animation: pulse-line 3s ease-in-out infinite;
+.node-ai {
+  animation: float-2 7s ease-in-out infinite;
 }
 
-@keyframes pulse-line {
-  0%, 100% { opacity: .3; }
-  50% { opacity: .6; }
+.node-biz {
+  animation: float-3 8s ease-in-out infinite;
+}
+
+@keyframes float-1 {
+  0%, 100% { transform: translate(-50%, -50%) translate3d(-280px, -160px, -180px); }
+  50% { transform: translate(-50%, -50%) translate3d(-280px, -175px, -180px); }
+}
+
+@keyframes float-2 {
+  0%, 100% { transform: translate(-50%, -50%) translate3d(240px, 80px, -120px); }
+  50% { transform: translate(-50%, -50%) translate3d(240px, 65px, -120px); }
+}
+
+@keyframes float-3 {
+  0%, 100% { transform: translate(-50%, -50%) translate3d(-160px, 200px, -250px); }
+  50% { transform: translate(-50%, -50%) translate3d(-160px, 185px, -250px); }
+}
+
+/* Mobile responsive */
+@media (max-width: 620px) {
+  .hero-neural {
+    height: auto;
+    max-width: 340px;
+    perspective: none;
+  }
+
+  .neural-canvas {
+    display: none;
+  }
+
+  .neural-scene {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+    transform: none !important;
+    padding: 20px 0;
+  }
+
+  .neural-node {
+    position: relative;
+    left: auto !important;
+    top: auto !important;
+    transform: none !important;
+  }
+
+  .node-center {
+    width: 160px;
+    height: 160px;
+  }
+
+  .neural-card {
+    width: 100%;
+    max-width: 280px;
+    min-height: auto;
+  }
+
+  .neural-node:hover {
+    transform: translateY(-4px);
+  }
+
+  @keyframes float-1,
+  @keyframes float-2,
+  @keyframes float-3 {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+  }
 }
 
 /* Floating animation for nodes */