<![CDATA[<script src="https://cdn.tailwindcss.com"></script>
<div class="w-full bg-[#05070a] text-white p-4 md:p-10 font-['DM_Sans'] antialiased">
<div class="max-w-[1400px] mx-auto space-y-8">
<!-- COLOR GRID -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-0 rounded-[2rem] overflow-hidden shadow-2xl border border-white/5">
<div class="bg-[#4136C3] p-8 h-56 flex flex-col justify-between hover:brightness-110 transition-all">
<span class="text-[10px] uppercase tracking-[0.2em] opacity-60 italic">Accent Color — 01</span>
<div>
<h3 class="text-2xl font-bold">Royal Blue</h3>
<p class="text-[11px] mt-3 opacity-80 leading-relaxed font-mono">HEX #4136C3<br>RGB 65 | 54 | 195</p>
</div>
</div>
<div class="bg-[#3E3183] p-8 h-56 flex flex-col justify-between hover:brightness-110 transition-all">
<span class="text-[10px] uppercase tracking-[0.2em] opacity-60 italic">Secondary Color — 01</span>
<div>
<h3 class="text-2xl font-bold">Deep Indigo</h3>
<p class="text-[11px] mt-3 opacity-80 leading-relaxed font-mono">HEX #3E3183<br>RGB 62 | 49 | 131</p>
</div>
</div>
<div class="bg-[#7492FF] p-8 h-56 flex flex-col justify-between hover:brightness-110 transition-all">
<span class="text-[10px] uppercase tracking-[0.2em] opacity-60 italic">Secondary Color — 02</span>
<div>
<h3 class="text-2xl font-bold">Cornflower Blue</h3>
<p class="text-[11px] mt-3 opacity-80 leading-relaxed font-mono">HEX #7492FF<br>RGB 116 | 146 | 255</p>
</div>
</div>
<div class="bg-[#EBDDFB] p-8 h-56 flex flex-col justify-between text-indigo-950 hover:brightness-105 transition-all">
<span class="text-[10px] uppercase tracking-[0.2em] opacity-60 italic">Secondary Color — 03</span>
<div>
<h3 class="text-2xl font-bold">Lavender Mist</h3>
<p class="text-[11px] mt-3 opacity-70 leading-relaxed font-mono">HEX #EBDDFB<br>RGB 235 | 221 | 251</p>
</div>
</div>
</div>
<!-- HERO -->
<div class="relative w-full rounded-[2.5rem] h-[450px] overflow-hidden group shadow-[0_0_50px_rgba(65,54,195,0.2)]">
<div class="absolute inset-0 bg-gradient-to-br from-[#1e1b4b] via-[#312e81] to-[#4136C3] group-hover:scale-105 transition-transform duration-700"></div>
<div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 30px 30px;"></div>
<div class="relative h-full flex flex-col items-center justify-center">
<div class="flex items-center gap-6">
<!-- ⭐ FIXED WHITE LOGO -->
<span class="text-6xl text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.6)]">✦</span>
<!-- ⭐ FIXED GALAXY TEXT -->
<h1 class="text-7xl md:text-8xl font-bold tracking-tighter
text-white
drop-shadow-[0_0_20px_rgba(255,255,255,0.4)]">
Galaxy
</h1>
</div>
</div>
</div>
<!-- ICONS -->
<div class="grid grid-cols-5 gap-4 md:gap-8">
<div class="aspect-square bg-white/5 rounded-3xl border border-white/10 flex items-center justify-center text-4xl backdrop-blur-xl hover:bg-white/10 transition-all">☺</div>
<div class="aspect-square bg-white/5 rounded-3xl border border-white/10 flex items-center justify-center text-4xl backdrop-blur-xl hover:bg-white/10 transition-all">🧭</div>
<div class="aspect-square bg-[#4136C3] rounded-3xl flex items-center justify-center text-4xl shadow-[0_20px_40px_rgba(65,54,195,0.4)] hover:-translate-y-2 transition-all">✦</div>
<div class="aspect-square bg-gradient-to-tr from-[#3E3183] to-[#EBDDFB] rounded-3xl flex items-center justify-center text-4xl hover:-translate-y-2 transition-all">✿</div>
<div class="aspect-square bg-white/5 rounded-3xl border border-white/10 flex items-center justify-center text-4xl backdrop-blur-xl hover:bg-white/10 transition-all">📹</div>
</div>
<!-- BOTTOM -->
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white/[0.02] p-12 rounded-[2.5rem] border border-white/5 space-y-12 backdrop-blur-3xl">
<div>
<span class="text-[10px] tracking-[0.4em] opacity-40 mb-6 block uppercase font-bold">Space Grotesk — Display</span>
<h2 class="font-['Space_Grotesk'] text-4xl md:text-5xl font-bold leading-[1.1] tracking-tight text-white/90">
WELCOME TO THE<br>FUTURE OF FINANCE.
</h2>
</div>
<div>
<span class="text-[10px] tracking-[0.4em] opacity-40 mb-6 block uppercase font-bold">DM Sans — Interface</span>
<h2 class="text-3xl md:text-4xl font-medium text-white/80">
Welcome to the<br>future of finance.
</h2>
</div>
</div>
<div class="bg-white/[0.02] p-12 rounded-[2.5rem] border border-white/5 flex items-center justify-center relative overflow-hidden">
<div class="absolute w-64 h-64 bg-[#4136C3]/20 blur-[100px] -bottom-20 -right-20"></div>
<div class="w-64 h-96 bg-gradient-to-b from-[#3E3183] to-[#05070a] rounded-2xl p-8 shadow-2xl border border-white/10">
<div class="text-2xl opacity-80">✦</div>
<div class="mt-40">
<h4 class="text-3xl font-bold">Speaker</h4>
<p class="text-xs opacity-50 tracking-[0.3em] uppercase mt-2">Stage Access</p>
</div>
</div>
</div>
</div>
</div>
</div>]]>
