style: image-clipped text effect on Developer hero word

themes/lucentui/views/home.blade.php

@@ -45,7 +45,7 @@
 
                     <!-- Hero Title -->
                     <h1 class="text-4xl md:text-5xl lg:text-[3.75rem] xl:text-7xl font-black text-color-base mb-6 leading-[1.05] tracking-tight hp-reveal whitespace-nowrap" data-delay="100">
-                        {{ theme('homepage_hero_title1', 'Powerful') }}
+                        <span class="hero-img-text" style="background-image: url('https://billing.virtnet.bond/storage/01K8TJ4QFZT7R9M1KCF71Y8BRT.jpg');">{{ theme('homepage_hero_title1', 'Powerful') }}</span>
                         <span class="bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">
                             {{ theme('homepage_hero_title2', 'VPS Hosting') }}
                         </span>
@@ -630,6 +630,16 @@
         --hp-blue-dark: #1E6091; --hp-blue-darkest: #184E77;
     }
 
+    /* ── Image-clipped hero text ── */
+    .hero-img-text {
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+
     /* ── Scroll-reveal base ── */
     .hp-reveal {
         opacity: 0;