diff.patch

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7c3415e..fd723d9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,10 +8,15 @@ import SpecularButton from '@/components/SpecularButton';
 import PoweredByStellar from '@/components/PoweredByStellar';
 import ScrollExpand from '@/components/ScrollExpand';
 import { Reveal } from '@/components/Reveal';
+import Velaris from '@/components/ui/velaris';
+import AuroraBackground from '@/components/ui/aurora-background';
 
 export default function LandingPage() {
   return (
-    <div className="min-h-screen bg-gray-50 text-gray-900 font-sans selection:bg-blue-100">
+    <div className="min-h-screen text-gray-900 font-sans selection:bg-blue-100 relative">
+      <div className="fixed inset-0 z-[-2]">
+        <AuroraBackground variant="default" className="w-full h-full" />
+      </div>
       {/* Navbar */}
       <nav className="border-b border-gray-200 bg-white sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
@@ -36,18 +41,14 @@ export default function LandingPage() {
       </nav>
 
       <main>
-        <section className="relative bg-[#f9fafb]">
+        <section className="relative bg-transparent">
           <ScrollExpand
             useWindowScroll
             scrollHint="Scroll to explore"
             startWidth={75}
             startHeight={60}
-            mediaZoom={1.05}
-            childrenMedia={
-              <div className="w-full h-full bg-white relative overflow-hidden border border-gray-200">
-                {/* Clean white background, no strands */}
-              </div>
-            }
+            mediaZoom={1.0}
+            childrenMedia={<Velaris />}
             title={
               <div className="flex flex-col items-center mt-[-5vh]">
                  <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-gray-900 mb-4 leading-tight drop-shadow-sm">
@@ -81,7 +82,7 @@ export default function LandingPage() {
         </section>
 
         {/* Phase 2: Core Messaging & Mechanism */}
-        <section className="py-24 bg-gray-50 border-b border-gray-200">
+        <section className="py-24 bg-transparent border-b border-white/20">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="grid md:grid-cols-2 gap-16 items-center">
               <div>
@@ -154,7 +155,7 @@ export default function LandingPage() {
         </section>
 
         {/* Phase 2: How It Works */}
-        <section id="how-it-works" className="py-24 bg-white border-b border-gray-200">
+        <section id="how-it-works" className="py-24 bg-transparent border-b border-white/20">
           <Reveal>
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
               <div className="text-center mb-16">
@@ -168,7 +169,7 @@ export default function LandingPage() {
 
             <div className="w-full mx-auto relative mt-12 mb-32">
               <ScrollStack useWindowScroll={true}>
-                <ScrollStackItem itemClassName="flex flex-col justify-center bg-white border border-gray-200 shadow-xl shadow-gray-200/40 rounded-[2.5rem] p-10 lg:p-16">
+                <ScrollStackItem itemClassName="flex flex-col justify-center bg-white/80 backdrop-blur-xl border border-white/40 shadow-xl shadow-blue-900/5 rounded-[2.5rem] p-10 lg:p-16">
                   <ProcessStep 
                     num="1" 
                     icon={<FileCheck className="w-10 h-10" />}
@@ -176,7 +177,7 @@ export default function LandingPage() {
                     desc="Merchants with valid government ID submit docs via halopay-api. Securely routed for standard 1ΓÇô3 day SEP-12 KYC verification via MoneyGram."
                   />
                 </ScrollStackItem>
-                <ScrollStackItem itemClassName="flex flex-col justify-center bg-white border border-gray-200 shadow-xl shadow-gray-200/40 rounded-[2.5rem] p-10 lg:p-16">
+                <ScrollStackItem itemClassName="flex flex-col justify-center bg-white/80 backdrop-blur-xl border border-white/40 shadow-xl shadow-blue-900/5 rounded-[2.5rem] p-10 lg:p-16">
                   <ProcessStep 
                     num="2"
                     icon={<Smartphone className="w-10 h-10" />}
@@ -184,7 +185,7 @@ export default function LandingPage() {
                     desc="The PWA POS generates standard Stellar payment QR codes. Recipients pay instantly from their USDC Aid Assist balance."
                   />
                 </ScrollStackItem>
-                <ScrollStackItem itemClassName="flex flex-col justify-center bg-white border border-gray-200 shadow-xl shadow-gray-200/40 rounded-[2.5rem] p-10 lg:p-16">
+                <ScrollStackItem itemClassName="flex flex-col justify-center bg-white/80 backdrop-blur-xl border border-white/40 shadow-xl shadow-blue-900/5 rounded-[2.5rem] p-10 lg:p-16">
                   <ProcessStep 
                     num="3"
                     icon={<WifiOff className="w-10 h-10" />}
@@ -192,7 +193,7 @@ export default function LandingPage() {
                     desc="Generate QR codes even offline using securely cached exchange rates. The UI surfaces a clear staleness indicator when connectivity is low."
                   />
                 </ScrollStackItem>
-                <ScrollStackItem itemClassName="flex flex-col justify-center bg-white border border-gray-200 shadow-xl shadow-gray-200/40 rounded-[2.5rem] p-10 lg:p-16">
+                <ScrollStackItem itemClassName="flex flex-col justify-center bg-white/80 backdrop-blur-xl border border-white/40 shadow-xl shadow-blue-900/5 rounded-[2.5rem] p-10 lg:p-16">
                   <ProcessStep 
                     num="4"
                     icon={<Landmark className="w-10 h-10" />}
@@ -206,7 +207,7 @@ export default function LandingPage() {
         </section>
 
         {/* Phase 3: Technical Integrity */}
-        <section className="py-24 bg-gray-50 border-b border-gray-200">
+        <section className="py-24 bg-transparent border-b border-white/20">
           <Reveal>
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
               <div className="text-center mb-16">
@@ -220,7 +221,7 @@ export default function LandingPage() {
 
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
-            <div className="bg-white p-8 md:p-12 rounded-3xl shadow-sm border border-gray-200 max-w-5xl mx-auto hidden md:block">
+            <div className="bg-white/80 backdrop-blur-xl p-8 md:p-12 rounded-3xl shadow-lg border border-white/50 max-w-5xl mx-auto hidden md:block">
               {/* Technical Diagram SVG */}
               <div className="overflow-x-auto">
                 <svg className="w-full min-w-[700px] text-gray-900" viewBox="0 0 900 400" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/components/CtaSection.tsx b/src/components/CtaSection.tsx
index 90116d1..4d2568d 100644
--- a/src/components/CtaSection.tsx
+++ b/src/components/CtaSection.tsx
@@ -4,10 +4,10 @@ import SpecularButton from './SpecularButton';
 
 export default function CtaSection() {
   return (
-    <section className="py-24 bg-white border-b border-gray-200">
+    <section className="py-24 bg-transparent border-b border-white/20">
       <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
         <div>
-          <div className="bg-gray-50 overflow-hidden border border-gray-200 rounded-3xl py-12 lg:py-16 shadow-sm">
+          <div className="bg-white/60 backdrop-blur-lg overflow-hidden border border-white/40 rounded-3xl py-12 lg:py-16 shadow-lg">
             <div className="gap-0 px-6 lg:px-12">
               <div className="grid gap-12 lg:grid-cols-2">
                 {/* Left Content */}
@@ -55,7 +55,7 @@ export default function CtaSection() {
 
                 {/* Right Content */}
                 <div className="flex flex-col gap-6">
-                  <a href="https://github.com/HaloPaye/halopay-pos" target="_blank" rel="noreferrer" className="group block bg-white border border-gray-200 rounded-2xl p-6 transition-colors hover:border-blue-300 shadow-sm hover:shadow-md">
+                  <a href="https://github.com/HaloPaye/halopay-pos" target="_blank" rel="noreferrer" className="group block bg-white/80 backdrop-blur-md border border-white/50 rounded-2xl p-6 transition-colors hover:border-blue-300 shadow-sm hover:shadow-md">
                     <div className="flex flex-col gap-4">
                       <div className="flex items-center justify-between">
                         <div className="flex items-center gap-4">
@@ -72,7 +72,7 @@ export default function CtaSection() {
                     </div>
                   </a>
 
-                  <a href="https://github.com/HaloPaye/halopay-api" target="_blank" rel="noreferrer" className="group block bg-white border border-gray-200 rounded-2xl p-6 transition-colors hover:border-blue-300 shadow-sm hover:shadow-md">
+                  <a href="https://github.com/HaloPaye/halopay-api" target="_blank" rel="noreferrer" className="group block bg-white/80 backdrop-blur-md border border-white/50 rounded-2xl p-6 transition-colors hover:border-blue-300 shadow-sm hover:shadow-md">
                     <div className="flex flex-col gap-4">
                       <div className="flex items-center justify-between">
                         <div className="flex items-center gap-4">
diff --git a/src/components/FAQ.tsx b/src/components/FAQ.tsx
index 0d13b8e..8e79908 100644
--- a/src/components/FAQ.tsx
+++ b/src/components/FAQ.tsx
@@ -42,7 +42,7 @@ export default function FAQ() {
   };
 
   return (
-    <div className="relative w-full overflow-hidden bg-gray-50 text-neutral-900 border-b border-gray-200">
+    <div className="relative w-full overflow-hidden bg-transparent text-neutral-900 border-b border-white/20">
       <section className="relative z-10 mx-auto flex max-w-4xl flex-col gap-12 px-6 py-24 lg:max-w-5xl lg:px-12">
         <header className="flex flex-col gap-4 text-center md:text-left">
           <h1 className="text-4xl font-extrabold leading-tight md:text-5xl text-neutral-900">
@@ -62,7 +62,7 @@ export default function FAQ() {
             return (
               <li
                 key={item.question}
-                className="group relative overflow-hidden rounded-3xl border bg-white border-neutral-200 shadow-sm transition-all duration-500 hover:-translate-y-0.5 focus-within:-translate-y-0.5"
+                className="group relative overflow-hidden rounded-3xl border bg-white/70 backdrop-blur-md border-neutral-200 shadow-sm transition-all duration-500 hover:-translate-y-0.5 focus-within:-translate-y-0.5"
                 onMouseMove={setCardGlow}
                 onMouseLeave={clearCardGlow}
               >
diff --git a/src/components/PoweredByStellar.tsx b/src/components/PoweredByStellar.tsx
index a7de8b4..67601ee 100644
--- a/src/components/PoweredByStellar.tsx
+++ b/src/components/PoweredByStellar.tsx
@@ -93,7 +93,7 @@ export default function PoweredByStellar() {
         distortion: 0.2,
         swirl: 0.9,
         swirlIterations: 12,
-        shape: "dots" as const,
+        shape: "edge" as const,
         shapeScale: 0.12,
         colors: ["hsl(200, 100%, 25%)", "hsl(180, 100%, 65%)", "hsl(160, 90%, 35%)", "hsl(190, 100%, 75%)"],
       },
@@ -113,7 +113,7 @@ export default function PoweredByStellar() {
         distortion: 0.22,
         swirl: 0.8,
         swirlIterations: 15,
-        shape: "dots" as const,
+        shape: "edge" as const,
         shapeScale: 0.09,
         colors: ["hsl(215, 100%, 35%)", "hsl(205, 100%, 65%)", "hsl(225, 90%, 40%)", "hsl(195, 100%, 75%)"],
       },
@@ -133,7 +133,7 @@ export default function PoweredByStellar() {
         distortion: 0.19,
         swirl: 0.75,
         swirlIterations: 9,
-        shape: "dots" as const,
+        shape: "edge" as const,
         shapeScale: 0.13,
         colors: ["hsl(200, 100%, 30%)", "hsl(220, 100%, 60%)", "hsl(240, 90%, 35%)", "hsl(210, 100%, 75%)"],
       },
@@ -142,7 +142,7 @@ export default function PoweredByStellar() {
   }
 
   return (
-    <section className="py-24 px-4 bg-white border-t border-gray-200">
+    <section className="py-24 px-4 bg-transparent border-b border-white/20">
       <div className="max-w-7xl mx-auto">
         <div className="text-center mb-16">
           <h2 className="text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight mb-6">Powered by Stellar</h2>
@@ -156,6 +156,7 @@ export default function PoweredByStellar() {
             const shaderConfig = getShaderConfig(index)
             return (
               <div key={index} className="relative h-80 group">
+
                 <div className="absolute inset-0 rounded-[2.5rem] overflow-hidden opacity-90 group-hover:opacity-100 transition-opacity duration-300">
                   <Warp
                     style={{ height: "100%", width: "100%" }}
diff --git a/src/components/ScrollExpand.tsx b/src/components/ScrollExpand.tsx
index 74bbe5b..18ce66d 100644
--- a/src/components/ScrollExpand.tsx
+++ b/src/components/ScrollExpand.tsx
@@ -81,6 +81,7 @@ const ScrollExpand: React.FC<ScrollExpandProps> = ({
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const scrimRef = useRef<HTMLDivElement | null>(null);
   const hintRef = useRef<HTMLDivElement | null>(null);
+  const holeRef = useRef<SVGRectElement | null>(null);
 
   const propsRef = useRef<Required<Pick<ScrollExpandProps, ConfigKey>>>(
     {} as Required<Pick<ScrollExpandProps, ConfigKey>>
@@ -112,9 +113,14 @@ const ScrollExpand: React.FC<ScrollExpandProps> = ({
     const ix = Math.max(0, (100 - w) / 2);
     const iy = Math.max(0, (100 - h) / 2);
     const r = c.startRadius + (c.endRadius - c.startRadius) * e;
-    frame.style.clipPath = `inset(${iy}% ${ix}% ${iy}% ${ix}% round ${r}px)`;
-
-    media.style.transform = `scale(${c.mediaZoom + (1 - c.mediaZoom) * e})`;
+    
+    if (holeRef.current) {
+      holeRef.current.setAttribute('x', `${ix}%`);
+      holeRef.current.setAttribute('y', `${iy}%`);
+      holeRef.current.setAttribute('width', `${w}%`);
+      holeRef.current.setAttribute('height', `${h}%`);
+      holeRef.current.setAttribute('rx', `${r}`);
+    }
 
     if (scrimRef.current) scrimRef.current.style.opacity = `${c.overlayScrim * e}`;
 
@@ -266,9 +272,19 @@ const ScrollExpand: React.FC<ScrollExpandProps> = ({
     >
       <div ref={trackRef} className="relative w-full">
         <div ref={stageRef} className="sticky top-0 w-full overflow-hidden [--se-title-size:4rem]">
+          <svg width="0" height="0" className="absolute pointer-events-none">
+            <defs>
+              <mask id="hole-mask">
+                <rect width="100%" height="100%" fill="white" />
+                <rect ref={holeRef} x="29%" y="21%" width="42%" height="58%" rx="24" fill="black" />
+              </mask>
+            </defs>
+          </svg>
+
           <div
             ref={frameRef}
-            className="absolute inset-0 [clip-path:inset(21%_29%_21%_29%_round_24px)] [will-change:clip-path] shadow-2xl"
+            className="absolute inset-0 z-0 shadow-2xl"
+            style={{ WebkitMaskImage: 'url(#hole-mask)', maskImage: 'url(#hole-mask)' }}
           >
             {media}
             <div