<title>Aura Financial | Future Banking</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

serif: ['Newsreader', 'serif'],

colors: {

brand: {

sky: '#38BDF8',

dark: '#050505',

panel: '#0F110E',

}

backgroundImage: {

'radial-glow': 'radial-gradient(circle at 70% 50%, rgba(56, 189, 248, 0.25) 0%, rgba(5, 5, 5, 0) 60%)',

animation: {

'beam': 'beam 3s linear infinite',

'spin-slow': 'spin 12s linear infinite',

'spin-slow-reverse': 'spin 15s linear infinite reverse',

'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',

keyframes: {

beam: {

'0%': { strokeDashoffset: '1000' },

'100%': { strokeDashoffset: '0' },

}

</script>

<style>

body {

background-color: #030303;

color: #ffffff;

-webkit-font-smoothing: antialiased;

}

.text-glow {

text-shadow: 0 0 25px rgba(56, 189, 248, 0.4);

}

.grid-bg {

background-size: 100px 200px;

background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),

linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

mask-image: radial-gradient(circle at center, black 40%, transparent 100%);

}

.monotone-logo {

filter: grayscale(100%) brightness(150%) contrast(0.5);

opacity: 0.5;

transition: opacity 0.3s ease;

}

.monotone-logo:hover {

opacity: 1;

filter: grayscale(100%) brightness(200%);

}

.beam-line {

stroke-dasharray: 80 1000;

stroke-linecap: round;

}

/* Custom Keyframes for SVG Sonar */

@keyframes sonar-wave {

0% { r: 10px; opacity: 0.8; stroke-width: 1px; }

100% { r: 80px; opacity: 0; stroke-width: 0px; }

}

.animate-sonar {

animation: sonar-wave 3s cubic-bezier(0, 0, 0.2, 1) infinite;

}

.delay-1000 { animation-delay: 1s; }

.delay-2000 { animation-delay: 2s; }

/* Shiny CTA Button CSS */

@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

@property --gradient-percent { syntax: "<percentage>"; initial-value: 20%; inherits: false; }

@property --gradient-shine { syntax: "<color>"; initial-value: #38BDF8; inherits: false; }

.shiny-cta {

--gradient-angle: 0deg;

--gradient-angle-offset: 0deg;

--gradient-percent: 20%;

--gradient-shine: #38BDF8;

--shadow-size: 2px;

position: relative;

overflow: hidden;

border-radius: 9999px;

padding: 1.25rem 2.5rem;

font-size: 1rem;

line-height: 1.2;

font-weight: 500;

color: #ffffff;

background: linear-gradient(#030303, #030303) padding-box,

conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent 0%, #0ea5e9 5%, var(--gradient-shine) 15%, #0ea5e9 30%, transparent 40%, transparent 100% ) border-box;

border: 2px solid transparent;

box-shadow: inset 0 0 0 1px #1a1818;

outline: none;

transition: --gradient-angle-offset 800ms cubic-bezier(0.25, 1, 0.5, 1), --gradient-percent 800ms cubic-bezier(0.25, 1, 0.5, 1), --gradient-shine 800ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s;

cursor: pointer;

isolation: isolate;

outline-offset: 4px;

font-family: 'Inter', 'Helvetica Neue', sans-serif;

z-index: 0;

animation: border-spin 2.5s linear infinite;

}

@keyframes border-spin { to { --gradient-angle: 360deg; } }

.shiny-cta:active { transform: translateY(1px); }

.shiny-cta::before {

content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0;

--size: calc(100% - 6px); --position: 2px; --space: 4px; width: var(--size); height: var(--size);

background: radial-gradient(circle at var(--position) var(--position), white 0.5px, transparent 0) padding-box;

background-size: var(--space) var(--space); background-repeat: space;

mask-image: conic-gradient( from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black );

border-radius: inherit; opacity: 0.4; pointer-events: none;

}

.shiny-cta::after {

content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;

width: 100%; aspect-ratio: 1;

background: linear-gradient(-50deg, transparent, #0ea5e9, transparent);

mask-image: radial-gradient(circle at bottom, transparent 40%, black);

opacity: 0.6; animation: shimmer 4s linear infinite; animation-play-state: running;

}

.shiny-cta span { position: relative; z-index: 2; display: inline-block; }

.shiny-cta span::before {

content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;

--size: calc(100% + 1rem); width: var(--size); height: var(--size);

box-shadow: inset 0 -1ex 2rem 4px #0ea5e9; opacity: 0; border-radius: inherit;

transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1); animation: breathe 4.5s linear infinite;

}

@keyframes shimmer { to { transform: translate(-50%, -50%) rotate(360deg);} }

@keyframes breathe {

0%, 100% { transform: translate(-50%, -50%) scale(1);}

50% { transform: translate(-50%, -50%) scale(1.20);}

}

/* Shared Border Gradient for Secondary Button */

[style*="--border-gradient"]::before {

content: "";

position: absolute;

inset: 0;

padding: 1px;

border-radius: var(--border-radius-before, inherit);

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

background: var(--border-gradient);

pointer-events: none;

}

</style>

[style*="--border-gradient"]::before {

content: "";

position: absolute;

inset: 0;

padding: 1px;

border-radius: var(--border-radius-before, inherit);

-webkit-mask: linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

background: var(--border-gradient);

pointer-events: none;

}</style> <style>

/* 3D Transform utilities */

</style></head>

</script>

</div></div>

</div>

</div>

<a href="#" class="text-xs font-medium text-white/50 hover:text-white transition-colors">Philosophy</a>

<a href="#" class="text-xs font-medium text-white/50 hover:text-white transition-colors">Ecosystem</a>

<a href="#" class="text-xs font-medium text-white/50 hover:text-white transition-colors">Rates</a>

</div>

Start Engine

</button>

</nav>

</span>

System Operational

</h4>

Architect your wealth <br>

<span class="text-white opacity-90">with absolute precision.</span>

</h1>

Advanced financial protocols merged with intuitive design. We provide the infrastructure to accelerate your

economic

legacy.

</p>

<span>Initialize Protocol</span>

</button>

View Ecosystem

</span>

</button>

</div>

<defs>

</defs>

<g>

</g>

<g>

</g>

<g>

</g>

<g>

</g>

</circle>

</circle>

</g>

</g>

</svg>

<span class="text-xs font-mono text-brand-sky tracking-widest mb-1 opacity-80">ZERO LATENCY</span>

</div>

<span class="text-xs font-mono text-brand-sky tracking-widest mb-1 opacity-80">DEFI NATIVE</span>

</div>

</div>

<style>

@keyframes marquee {

0% { transform: translateX(0); }

100% { transform: translateX(-50%); }

}

.animate-marquee {

animation: marquee 40s linear infinite;

}

.mask-gradient-fade {

mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

}

</style>

</path>

</path>

</g>

</svg><svg xmlns="http://www.w3.org/2000/svg" width="124" height="28" viewBox="0 0 512 107" style="color: rgb(255, 255, 255); width: 124px; height: 28px" class="w-[124px] h-[28px]" aria-hidden="true" role="img" data-icon="logos:vercel" data-logos="amplitude" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">

</path>

</svg>

</svg>

</path>

</g>

</path>

</svg>

</div>

<span class="text-white tracking-wide">[ <span class="text-brand-sky">✓</span> ] TRUSTED BY INDUSTRY LEADERS</span>

</div>

</section>

</main>

<defs>

</defs>

</svg>

</div>

</span>

<span class="text-xs font-mono text-brand-sky uppercase tracking-[0.2em] font-medium">System Capabilities</span>

</div>

Banking intelligence

<span class="text-white/60">made effortless.</span>

</h2>

Streamline your capital deployment with AI-driven protocols designed to simplify, automate, and enhance your

wealth architecture.

</p>

</div>

document.querySelectorAll('.spotlight-card').forEach(card => {

card.addEventListener('mousemove', e => {

const rect = card.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

card.style.setProperty('--mouse-x', `${x}px`);

card.style.setProperty('--mouse-y', `${y}px`);

});

</script>

</div>

<h3 class="text-2xl font-semibold tracking-tight text-white mb-4 relative z-10">Automated Execution</h3>

<p class="text-base text-white/50 leading-relaxed mb-12 relative z-10 font-light">Generate high-yield

strategies and execute trades in milliseconds with our custodial AI algorithms.</p>

</div>

</div>

</div>

Initialize rebalancing for <span class="text-white font-medium">Portfolio Alpha</span>.

Target <span class="text-brand-sky">12.5% APY</span>.

</p>

</div>

</path>

</svg> Aura Protocol

</div>

<p class="mb-4 text-xs text-white/80 font-light">Analyzing liquidity depth across 4 exchanges.

Optimal route secured.</p>

</div>

<span>EXECUTING</span>

</div>

</div>

</div>

</div>

</svg>

</div>

<h3 class="text-2xl font-semibold tracking-tight text-white group-hover:text-white transition-colors">Smart

Liquidity</h3>

</div>

Connect to deep liquidity pools

across chains to ensure zero-slippage execution on institutional orders.</p>

<defs>

</defs>

</path>

</svg>

</div>

</div>

</div>

</div>

</div>

</div>

</svg>

</div>

</svg>

</div>

</path>

</svg>

</div>

</div>

</span>

Network Active</div>

</div>

<h3 class="text-2xl font-semibold tracking-tight text-white mb-4 relative z-10">Multi-Sig Governance</h3>

<p class="text-base text-white/50 leading-relaxed mb-12 relative z-10 font-light">Manage treasury operations

with institutional-grade security. Set permissions, approve transactions, and audit logs.</p>

<span class="text-xs text-white/50 font-mono uppercase tracking-wider">Treasury_V4</span>

</div>

JD</div>

AS</div>

+3</div>

</div>

<span class="">Allocation Limit</span>

<span class="text-brand-sky">75% Approved</span>

</div>

</div>

Signed by Alex

</div>

</svg>

<span class="text-xs text-white/60 font-medium">Audit Log</span>

</div>

</svg>

<span class="text-xs text-brand-sky font-medium">Approve Tx</span>

</div>

<span class="relative z-10">Explore Capabilities</span>

</button>

</div>

</section><section class="overflow-hidden flex flex-col lg:px-12 z-10 bg-[#030303]/80 w-full border-white/5 border-t pt-32 pb-32 relative backdrop-blur-xl items-center">

</div>

Built for the Hybrid Economy

</span>

The modern investor doesn't fit in a single market —

<span class="text-white/50">they stake, they hedge, they compound smart.</span> This protocol was made

for them.

</h2>

</div>

</div>

</div>

</div>

</div>

</path>

</svg>

"I used to track my positions in one terminal, my yield in another, and my risk nowhere. This

protocol keeps it simple — I see the full liquidity picture without the cognitive load."

</p>

</blockquote>

</div>

Portfolio Volume Up <span class="text-brand-sky">17%</span> since inception

</span>

</svg>

</div>

<span class="text-sm font-medium">Start Investing</span>

</button>

</div>

</section><section class="lg:px-12 flex flex-col overflow-hidden z-10 bg-[#030303]/50 w-full border-white/5 border-t px-6 py-32 relative backdrop-blur-xl items-center">

</div>

<span class="text-xs font-mono text-brand-sky/90 uppercase tracking-[0.2em]">Exchange Infrastructure</span>

</div>

Liquidate & Exchange

<span class="text-white/40 italic">Global Assets Instantly.</span>

</h2>

</div>

Direct market access with deep institutional liquidity. Convert fiat to digital assets with zero

slippage and T+0 settlement.

</p>

</div>

Buy, Sell & Yield Digital Currency.

</h3>

Initialize your portfolio and execute trades across 40+ exchanges. One interface for spot, margin,

and

perpetuals.

</p>

Get Started

</button>

View Markets

</button>

</div>

</div>

</div>

</div>

</svg>

</div>

</div>

</div>

<span class="text-xs text-white/40">Amount</span>

</div>

</div>

</svg>

</div>

</section><section class="flex lg:px-12 bg-[#030303]/80 w-full z-10 border-white/5 border-t px-6 py-32 relative backdrop-blur-xl justify-center">

</div>

</div>

</div>

Uncertain about your <span class="opacity-60 italic">allocation strategy?</span>

</h2>

</path>

</svg>

</svg>

</div>

<span class="block text-[#030303] font-semibold text-lg tracking-tight">Consult Architect</span>

<span class="text-[#030303]/60 text-xs font-medium uppercase tracking-wider">Priority Access</span>

</div>

</a>

</div>

Our liquidity specialists are standing by to model your risk profile and architect a custom yield

solution.

</p>

</div>

</section><footer class="lg:px-12 flex flex-col z-10 overflow-hidden bg-[#030303] w-full border-white/5 border-t pt-12 pr-6 pb-12 pl-6 relative items-center">

</div>

</path>

</svg>

</div>

</div>

Engineering the bedrock of the programmable economy. Secure, scalable, and instant.

</p>

</path>

</svg></a>

</path>

</svg></a>

</path>

</svg></a>

</path>

</svg></a>

</div>

<h4 class="text-white font-medium text-sm tracking-wide">Protocol</h4>

<li class=""><a href="#" class="text-white/40 hover:text-brand-sky text-sm transition-colors font-light">Documentation</a>

</li>

<li><a href="#" class="text-white/40 hover:text-brand-sky text-sm transition-colors font-light">API

Reference</a></li>

<li><a href="#" class="text-white/40 hover:text-brand-sky text-sm transition-colors font-light">Governance</a>

</li>

System Status

</span>

</a></li>

</ul>

</div>

<h4 class="text-white font-medium text-sm tracking-wide">Company</h4>

<li class=""><a href="#" class="text-white/40 hover:text-brand-sky text-sm transition-colors font-light">Philosophy</a>

</li>

<li><a href="#" class="text-white/40 hover:text-brand-sky text-sm transition-colors font-light">Careers</a></li>

<li><a href="#" class="text-white/40 hover:text-brand-sky text-sm transition-colors font-light">Press

Kit</a></li>

<li><a href="#" class="text-white/40 hover:text-brand-sky text-sm transition-colors font-light">Legal</a></li>

</ul>

</div>

</div>

<span class="text-white font-medium text-sm tracking-wide">Contact Sales</span>

</svg>

</div>

</path>

</path>

</svg>

</div>

</a>

</div>

<span class="text-white font-medium text-sm tracking-wide">Help Center</span>

</svg>

</div>

</path>

</svg>

</div>

</a>

</div>

</path>

</svg>

</div>

</path>

</svg>

</div>

<span class="text-white/20 text-xs font-mono border-l border-white/10 pl-8">SOC2 Type II Compliant</span>

</div>

</footer>

</body></html>