<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>