updated site ( crazy )

src/styles/sections/hero-content.css

@@ -19,6 +19,32 @@
     object-fit: contain;
 }
 
+.hero-title-warp {
+    position: relative;
+    width: 100%;
+    max-width: 900px;
+    height: clamp(80px, 14vw, 150px);
+    margin: 0.5rem auto 1rem;
+    overflow: hidden;
+    isolation: isolate;
+}
+
+.warp-text {
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    isolation: isolate;
+}
+
+.warp-text canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
 .hero-title {
     font-size: 2.3rem;
     letter-spacing: -.03em;
@@ -92,24 +118,31 @@
 
 .platform-pill {
     display: inline-flex;
+    flex-direction: row;
     align-items: center;
+    justify-content: center;
     gap: 0.5rem;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(15px) saturate(140%);
-    -webkit-backdrop-filter: blur(15px) saturate(140%);
-    border: none;
-    padding: 0.35rem 0.85rem;
-    border-radius: var(--radius-pill);
+    padding: 0.45rem 1.1rem;
+    border-radius: 50px;
     font-size: 0.75rem;
     font-weight: 500;
-    color: var(--color-fg-dim);
+    color: #ffffff;
     margin-bottom: 1.25rem;
-    position: relative;
-    z-index: 10;
+    white-space: nowrap;
+    width: auto;
+    max-width: max-content;
 }
 
 .platform-pill svg {
-    color: var(--color-fg);
+    width: 13px;
+    height: 13px;
+    color: #ffffff;
+    fill: currentColor;
+    flex-shrink: 0;
+}
+
+.platform-pill span {
+    white-space: nowrap;
 }
 
 .hero-screen-mockup {