From 689a8924e6ed3f62669c9b6ebf40f16e4579b90f Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Wed, 24 Jun 2026 14:20:57 +0700
Subject: [PATCH] fix: Business Knowledge card visibility, spread neural cards,
 adjust layout

- Add position:absolute to neural-node.liquid-glass override to fix
  3D positioning (liquid-glass was overriding to position:relative)
- Spread outer cards further apart for better visual separation
- Increase container size to 600x520px to accommodate spread
- Enlarge neural cards (220px width, 130px min-height)
- Update float animations to match new positions
---
 src/scripts/home.js   |  11 +-
 src/styles/global.css | 823 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 699 insertions(+), 135 deletions(-)

diff --git a/src/scripts/home.js b/src/scripts/home.js
index bfc6ab1..a9f1013 100644
--- a/src/scripts/home.js
+++ b/src/scripts/home.js
@@ -276,14 +276,13 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
     });
   }
   
-  // Mouse move handler
+  // Mouse move handler - track entire page
   document.addEventListener('mousemove', (e) => {
-    const rect = heroNeural.getBoundingClientRect();
-    const x = (e.clientX - rect.left) / rect.width;
-    const y = (e.clientY - rect.top) / rect.height;
+    const x = e.clientX / window.innerWidth;
+    const y = e.clientY / window.innerHeight;
     
-    targetRotateY = (x - 0.5) * 30;
-    targetRotateX = (y - 0.5) * -30;
+    targetRotateY = (x - 0.5) * 10;
+    targetRotateX = (y - 0.5) * -10;
   });
   
   document.addEventListener('mouseleave', () => {
diff --git a/src/styles/global.css b/src/styles/global.css
index 824f96f..6e1965e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -344,6 +344,11 @@ box-shadow: inset 1px 1px 0 rgb(255 255 255 / .72);
   overflow: clip;
 }
 
+.hero.scene {
+  overflow: visible;
+  isolation: auto;
+}
+
 .hero {
 min-height: 100svh;
 padding: 150px 0 88px;
@@ -361,6 +366,10 @@ overflow: visible;
   margin-inline: auto;
 }
 
+.mobile-title {
+  display: none;
+}
+
 .hero-grid {
 min-height: calc(100svh - 238px);
 display: grid;
@@ -447,12 +456,295 @@ background: rgb(255 255 255 / .10);
 color: rgb(255 255 255 / .72);
 }
 
+/* Links inside inverted page sections */
+.page-section a,
+.page-section-tight a,
+.page-section button,
+.page-section-tight button,
+.page-section .text-link,
+.page-section-tight .text-link {
+  color: white;
+}
+.page-section a:hover,
+.page-section-tight a:hover,
+.page-section button:hover,
+.page-section-tight button:hover,
+.page-section .text-link:hover,
+.page-section-tight .text-link:hover {
+  color: var(--yellow);
+}
+.page-section li,
+.page-section-tight li {
+  color: rgb(255 255 255 / .72);
+}
+
+.service-detail-grid,
+.about-grid,
+.contact-layout,
+.faq-list,
+.blog-grid {
+display: grid;
+grid-template-columns: repeat(2, minmax(0, 1fr));
+gap: 18px;
+}
+
+.detail-card,
+.about-grid .glass-panel,
+.contact-card,
+.faq-item,
+.blog-card {
+padding: clamp(22px, 4vw, 34px);
+border: 1px solid rgb(255 255 255 / .56);
+border-radius: 26px;
+}
+
+.detail-card {
+min-height: 360px;
+display: flex;
+flex-direction: column;
+justify-content: flex-end;
+}
+
+.detail-card span,
+.detail-objective,
+.faq-item span,
+.blog-card span {
+color: var(--muted);
+font-size: 13px;
+font-weight: 800;
+}
+
+.detail-card h2,
+.about-grid h2,
+.contact-card h2,
+.contact-info h2,
+.faq-item h2,
+.blog-card h2 {
+margin-top: 10px;
+font-size: clamp(1.8rem, 3vw, 3rem);
+}
+
+.detail-card h3 {
+margin-top: 14px;
+font-size: clamp(1.25rem, 2vw, 1.8rem);
+}
+
+.detail-card p,
+.about-grid p,
+.contact-info p,
+.faq-item p,
+.blog-card p {
+margin-top: 14px;
+color: var(--muted);
+}
+
+/* Override muted colors inside inverted sections */
+.page-section .detail-card p,
+.page-section .about-grid p,
+.page-section .contact-info p,
+.page-section .faq-item p,
+.page-section .blog-card p,
+.page-section-tight .detail-card p,
+.page-section-tight .about-grid p,
+.page-section-tight .faq-item p,
+.page-section-tight .blog-card p,
+.page-section .related-service-card p,
+.page-section-tight .related-service-card p {
+  color: rgb(255 255 255 / .72);
+}
+
+.page-section .detail-card span,
+.page-section .faq-item span,
+.page-section .blog-card span,
+.page-section .related-service-card span,
+.page-section-tight .detail-card span,
+.page-section-tight .faq-item span,
+.page-section-tight .blog-card span,
+.page-section-tight .related-service-card span {
+  color: rgb(255 255 255 / .60);
+}
+
+.page-section .detail-objective,
+.page-section-tight .detail-objective {
+  color: rgb(255 255 255 / .72);
+}
+
+.faq-list {
+grid-template-columns: 1fr;
+}
+
+.faq-item h2 {
+font-size: clamp(1.35rem, 2vw, 2.1rem);
+}
+
+.blog-card {
+min-height: 300px;
+display: flex;
+flex-direction: column;
+justify-content: flex-end;
+}
+
+.detail-card .text-link {
+width: fit-content;
+}
+
+.detail-actions {
+display: flex;
+flex-wrap: wrap;
+gap: 14px;
+margin-top: 20px;
+}
+
+.contact-layout {
+align-items: start;
+}
+
+.contact-problem-list {
+display: grid;
+gap: 10px;
+margin: 22px 0;
+}
+
+.contact-problem-list span {
+border: 1px solid var(--line);
+border-radius: 999px;
+background: rgb(255 255 255 / .28);
+padding: 10px 13px;
+color: var(--muted);
+font-size: 14px;
+font-weight: 700;
+}
+
+/* Override for dark sections */
+.page-section .contact-problem-list span,
+.page-section-tight .contact-problem-list span {
+  color: rgb(255 255 255 / .72);
+}
+
+.contact-info {
+padding: clamp(12px, 3vw, 28px);
+}
+
+.contact-info dl {
+display: grid;
+gap: 14px;
+margin: 24px 0;
+}
+
+.contact-info dt {
+  color: rgb(255 255 255 / .60);
+font-size: 13px;
+font-weight: 800;
+}
+
+.contact-info dd {
+  color: white;
+margin: 4px 0 0;
+font-size: clamp(1.3rem, 2.4vw, 2rem);
+font-weight: 900;
+}
+
+.service-hero-panel {
+align-self: stretch;
+display: flex;
+min-height: 320px;
+flex-direction: column;
+justify-content: flex-end;
+border: 1px solid rgb(255 255 255 / .58);
+border-radius: 28px;
+padding: clamp(22px, 4vw, 34px);
+box-shadow: var(--shadow);
+}
+
+.service-hero-panel span,
+.service-story-grid h3,
+.related-service-card span {
+color: var(--muted);
+font-size: 13px;
+font-weight: 900;
+}
+
+/* Override for dark sections */
+.page-section .service-story-grid h3,
+.page-section-tight .service-story-grid h3 {
+  color: rgb(255 255 255 / .60);
+}
+
+.service-hero-panel p {
+margin: 12px 0 24px;
+color: var(--muted);
+font-size: clamp(1.1rem, 1vw + 1rem, 1.45rem);
+}
+
+.service-story-grid,
+.service-proof-grid,
+.related-service-grid {
+display: grid;
+gap: 18px;
+}
+
+.service-story-grid {
+grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.service-story-grid article,
+.related-service-card {
+border: 1px solid var(--line);
+border-radius: 24px;
+background: rgb(255 255 255 / .24);
+padding: clamp(20px, 3vw, 28px);
+}
+
+.service-story-grid ul {
+display: grid;
+gap: 10px;
+margin: 16px 0 0;
+padding-left: 1.1em;
+color: var(--muted);
+}
+
+.service-proof-grid {
+grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
+align-items: stretch;
+}
+
+.service-proof-grid .process-grid {
+grid-template-columns: repeat(2, minmax(0, 1fr));
+color: white;
+}
+
+.service-proof-grid .process-grid article {
+border-color: var(--dark-line);
+}
+
+.related-service-grid {
+grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.related-service-card {
+  color: white;
+}
+
+.related-service-card h3 {
+margin-top: 10px;
+font-size: clamp(1.4rem, 2vw, 2rem);
+}
+
+.related-service-card p {
+margin-top: 10px;
+color: var(--muted);
+}
+
+.hero-copy {
+  max-width: 760px;
+  min-width: 0;
+}
 /* Neural Network Hero - True 3D Layout */
 .hero-neural {
   position: relative;
   width: 100%;
-  max-width: 560px;
-  height: 480px;
+  max-width: 600px;
+  height: 520px;
   margin-inline: auto;
   perspective: 1200px;
 }
@@ -475,7 +767,6 @@ color: rgb(255 255 255 / .72);
   will-change: transform;
 }
 
-/* Neural nodes - base */
 .neural-node {
   position: absolute;
   border-radius: 24px;
@@ -484,7 +775,6 @@ color: rgb(255 255 255 / .72);
   align-items: center;
   justify-content: center;
   text-align: center;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: default;
   backface-visibility: hidden;
 }
@@ -493,7 +783,6 @@ color: rgb(255 255 255 / .72);
   box-shadow: 0 30px 80px rgb(254 212 0 / .25);
 }
 
-/* Center node: กำไร */
 .node-center {
   left: 50%;
   top: 50%;
@@ -530,30 +819,34 @@ color: rgb(255 255 255 / .72);
   line-height: 1.4;
 }
 
-/* Outer cards - larger and positioned in 3D */
 .neural-card {
-  width: 200px;
-  padding: 28px 24px;
-  min-height: 120px;
+  width: 220px;
+  padding: 30px 26px;
+  min-height: 130px;
 }
 
-/* True 3D positions: translate3d(x, y, z) */
+/* Marketing: top-left, clearly separated */
 .node-marketing {
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%) translate3d(-280px, -160px, -180px);
+  transform: translate(-50%, -50%) translate3d(-280px, -170px, -100px);
+  animation: float-1 6s ease-in-out infinite;
 }
 
+/* AI: right side, below center */
 .node-ai {
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%) translate3d(240px, 80px, -120px);
+  transform: translate(-50%, -50%) translate3d(280px, -40px, -80px);
+  animation: float-2 7s ease-in-out infinite;
 }
 
+/* Business: bottom-left */
 .node-biz {
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%) translate3d(-160px, 200px, -250px);
+  transform: translate(-50%, -50%) translate3d(-100px, 190px, -130px);
+  animation: float-3 8s ease-in-out infinite;
 }
 
 .card-tag {
@@ -572,135 +865,340 @@ color: rgb(255 255 255 / .72);
   line-height: 1.4;
 }
 
-/* Floating animations */
-.node-marketing {
-  animation: float-1 6s ease-in-out infinite;
-}
-
-.node-ai {
-  animation: float-2 7s ease-in-out infinite;
-}
-
-.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); }
+  0%, 100% { transform: translate(-50%, -50%) translate3d(-280px, -170px, -100px); }
+  50% { transform: translate(-50%, -50%) translate3d(-310px, -200px, -150px); }
 }
 
 @keyframes float-2 {
-  0%, 100% { transform: translate(-50%, -50%) translate3d(240px, 80px, -120px); }
-  50% { transform: translate(-50%, -50%) translate3d(240px, 65px, -120px); }
+  0%, 100% { transform: translate(-50%, -50%) translate3d(280px, -40px, -80px); }
+  50% { transform: translate(-50%, -50%) translate3d(310px, -70px, -120px); }
 }
 
 @keyframes float-3 {
-  0%, 100% { transform: translate(-50%, -50%) translate3d(-160px, 200px, -250px); }
-  50% { transform: translate(-50%, -50%) translate3d(-160px, 185px, -250px); }
+  0%, 100% { transform: translate(-50%, -50%) translate3d(-100px, 190px, -130px); }
+  50% { transform: translate(-50%, -50%) translate3d(-140px, 220px, -200px); }
 }
 
-/* Mobile responsive */
-@media (max-width: 620px) {
-  .hero {
-    overflow: clip;
-    contain: paint;
-  }
-
-  .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); }
-  }
+.eyebrow {
+  display: inline-flex;
+  width: fit-content;
+  margin-bottom: 16px;
+  border: 1px solid rgb(19 18 13 / .10);
+  border-radius: 999px;
+  background: rgb(255 255 255 / .52);
+  color: var(--muted);
+  padding: 7px 11px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .02em;
 }
 
-/* Mobile responsive */
-@media (max-width: 620px) {
-  .hero-neural {
-    height: auto;
-    max-width: 320px;
-    perspective: none;
-  }
-
-  .neural-scene {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-    transform: none !important;
-  }
-
-  .neural-node {
-    position: relative;
-    left: auto !important;
-    top: auto !important;
-    transform: none !important;
-    min-width: 200px;
-  }
-
-  .node-center {
-    min-width: 180px;
-  }
-
-  .neural-connections {
-    display: none;
-  }
-
-  .neural-node:hover {
-    transform: translateY(-4px);
-  }
-
-  @keyframes float-1,
-  @keyframes float-2,
-  @keyframes float-3 {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-8px); }
-  }
+.hero h1 {
+  max-width: 15ch;
+  font-size: clamp(2.55rem, 4.6vw, 4.63rem);
+  font-weight: 900;
 }
 
+.hero h1 span {
+  display: block;
+}
 
+.desktop-title span {
+  white-space: nowrap;
+}
+
+.mobile-title {
+  display: none;
+}
+
+.hero-result-metrics {
+display: flex;
+gap: 16px;
+margin: 20px 0;
+}
+
+.hero-metric {
+text-align: center;
+}
+
+.hero-metric strong {
+display: block;
+font-size: 1.6rem;
+font-weight: 900;
+color: var(--ink);
+}
+
+.hero-metric span {
+font-size: 0.82rem;
+color: var(--muted);
+text-transform: uppercase;
+letter-spacing: 0.04em;
+}
+
+.hero-lead {
+  max-width: 62ch;
+  margin-top: 24px;
+  color: var(--muted);
+  font-size: clamp(1.1rem, .7vw + 1rem, 1.35rem);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.glass-panel {
+border: 0;
+border-radius: var(--radius);
+background: transparent;
+box-shadow: var(--shadow);
+}
+
+.glass-filter {
+position: absolute;
+width: 0;
+height: 0;
+overflow: hidden;
+}
+
+.liquid-glass,
+.liquidGlass-wrapper {
+position: relative;
+overflow: hidden;
+isolation: isolate;
+color: var(--ink);
+box-shadow: 0 6px 6px rgb(0 0 0 / .14), 0 0 20px rgb(0 0 0 / .08);
+transition: all .4s cubic-bezier(.175, .885, .32, 2.2);
+}
+
+.liquid-glass::before,
+.liquid-glass::after {
+display: none;
+}
+
+/* Override liquid-glass on neural nodes to preserve 3D rendering */
+.neural-node.liquid-glass,
+.neural-node.liquidGlass-wrapper {
+  position: absolute !important;
+  overflow: visible;
+  isolation: auto;
+  z-index: 5;
+}
+
+/* Restore process-grid arrows (override liquid-glass ::after) */
+.process-grid.liquid-glass article::after,
+.process-grid article.liquid-glass::after {
+display: grid;
+}
+
+.liquidGlass-effect,
+.liquidGlass-tint,
+.liquidGlass-shine {
+position: absolute;
+inset: 0;
+pointer-events: none;
+border-radius: inherit;
+}
+
+.liquidGlass-effect {
+z-index: 0;
+overflow: hidden;
+isolation: isolate;
+backdrop-filter: blur(3px);
+filter: url(#glass-distortion);
+transition: backdrop-filter .42s var(--ease), filter .42s var(--ease);
+}
+
+.liquidGlass-tint {
+z-index: 1;
+background: rgb(255 255 255 / .14);
+transition: background-color .42s var(--ease), opacity .42s var(--ease);
+}
+
+.liquidGlass-shine {
+z-index: 2;
+border-radius: inherit;
+overflow: hidden;
+box-shadow:
+inset 2px 2px 1px 0 rgb(255 255 255 / .50),
+inset -1px -1px 1px 1px rgb(255 255 255 / .50);
+transition: box-shadow .42s var(--ease), opacity .42s var(--ease);
+}
+
+.liquid-glass > :not(.liquidGlass-effect, .liquidGlass-tint, .liquidGlass-shine),
+.liquidGlass-text {
+position: relative;
+z-index: 3;
+}
+
+.site-nav.liquid-glass {
+position: fixed;
+}
+
+.site-nav.liquidGlass-wrapper {
+overflow: visible;
+border-color: var(--nav-border);
+box-shadow: var(--nav-shadow);
+transform: translateX(-50%) translateY(var(--nav-y));
+transition:
+  background-color .36s var(--ease),
+  border-color .36s var(--ease),
+  box-shadow .58s var(--ease),
+  filter .36s var(--ease),
+  transform .58s var(--ease);
+}
+
+.site-nav .liquidGlass-tint {
+background: var(--nav-tint);
+}
+
+.site-nav .liquidGlass-effect {
+backdrop-filter: blur(var(--nav-blur));
+}
+
+.site-nav .liquidGlass-shine {
+box-shadow:
+inset 2px 2px 1px 0 var(--nav-shine-a),
+inset -1px -1px 1px 1px var(--nav-shine-b);
+}
+
+.hero-panel {
+  padding: clamp(22px, 4vw, 34px);
+  min-width: 0;
+  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 8px), 0);
+}
+
+.panel-kicker {
+  color: var(--muted);
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.hero-panel h2 {
+  margin-top: 10px;
+  font-size: clamp(1.7rem, 3vw, 2.8rem);
+}
+
+/* ── Hero Profit Cluster ── */
+.hero-profit-cluster {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 14px;
+  width: 100%;
+  max-width: 420px;
+  aspect-ratio: 1;
+  margin-inline: auto;
+}
+
+/* Center card spans the middle */
+.profit-center {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  align-self: center;
+  justify-self: center;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  border: 2px solid var(--yellow);
+  box-shadow:
+    0 0 0 6px rgb(254 212 0 / .12),
+    0 20px 60px rgb(254 212 0 / .18),
+    0 4px 16px rgb(0 0 0 / .06);
+}
+
+.profit-label {
+  font-size: clamp(2rem, 4vw, 2.8rem);
+  font-weight: 900;
+  color: var(--ink);
+  line-height: 1;
+}
+
+.profit-sub {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+  line-height: 1.3;
+}
+
+/* Outer cards */
+.profit-card {
+  border-radius: 20px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
+}
+
+.profit-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 40px rgb(0 0 0 / .10);
+}
+
+.profit-tag {
+  font-size: 14px;
+  font-weight: 900;
+  color: var(--ink);
+  letter-spacing: .02em;
+  text-transform: uppercase;
+}
+
+.profit-desc {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+/* Position outer cards in the grid */
+.profit-marketing {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  justify-self: center;
+  width: 160px;
+  z-index: 1;
+}
+
+.profit-ai {
+  grid-column: 1;
+  grid-row: 2;
+  justify-self: end;
+  width: 150px;
+  z-index: 1;
+}
+
+.profit-biz {
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: start;
+  width: 150px;
+  z-index: 1;
+}
+
+/* Connector SVG */
+.profit-connectors {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
 
 .problem-preview,
 .decision-preview {
@@ -1554,7 +2052,30 @@ max-width: calc(100% - 32px);
     max-width: 9ch;
   }
 
-
+  /* Profit cluster mobile */
+  .hero-profit-cluster {
+    max-width: 340px;
+    gap: 10px;
+  }
+  .profit-center {
+    width: 140px;
+    height: 140px;
+  }
+  .profit-label {
+    font-size: 1.8rem;
+  }
+  .profit-marketing,
+  .profit-ai,
+  .profit-biz {
+    width: 130px;
+    padding: 14px;
+  }
+  .profit-tag {
+    font-size: 12px;
+  }
+  .profit-desc {
+    font-size: 11px;
+  }
 
 .problem-strip h2,
 .section-heading h2,
@@ -1622,6 +2143,49 @@ border-radius: 18px;
     right: 16px;
     bottom: 14px;
   }
+
+  /* Neural network mobile */
+  .hero {
+    overflow: clip;
+    contain: paint;
+  }
+  .hero-neural {
+    height: auto;
+    max-width: 320px;
+    perspective: none;
+  }
+  .neural-canvas {
+    display: none;
+  }
+  .neural-scene {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    transform: none !important;
+  }
+  .neural-node {
+    position: relative;
+    left: auto !important;
+    top: auto !important;
+    transform: none !important;
+    min-width: 200px;
+  }
+  .node-center {
+    min-width: 180px;
+  }
+  .neural-card {
+    width: 100%;
+    max-width: 280px;
+    min-height: auto;
+  }
+  @keyframes float-1,
+  @keyframes float-2,
+  @keyframes float-3 {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+  }
+
 }
 
 .blog-card .text-link {
@@ -1720,4 +2284,5 @@ animation-play-state: paused !important;
 .liquid-glass::before {
 filter: none;
 }
+
 }