<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI SaaS Premium UI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}
body{
background:#050816;
overflow-x:hidden;
}
/* ================= BACKGROUND GLOW ================= */
body::before,
body::after{
content:"";
position:fixed;
width:600px;
height:600px;
border-radius:50%;
filter:blur(140px);
z-index:-1;
opacity:0.35;
}
body::before{
background:#6a5cff;
top:-150px;
left:-150px;
}
body::after{
background:#00f0ff;
bottom:-150px;
right:-150px;
}
/* ================= HEADER (SAFE) ================= */
.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 8%;
}
.nav div:first-child{
font-weight:700;
font-size:18px;
color:#fff;
}
.menu a{
margin:0 14px;
color:#cfcfcf;
text-decoration:none;
font-size:14px;
transition:0.3s;
}
.menu a:hover{
color:#fff;
}
.btn{
padding:10px 18px;
border-radius:12px;
background:linear-gradient(90deg,#6a5cff,#ff4ecd);
color:#fff;
font-weight:500;
box-shadow:0 10px 30px rgba(106,92,255,0.25);
}
/* ================= ONLY MAIN CONTENT WHITE ================= */
.hero h1,
.hero p,
.center-box h2,
.center-box p,
.center-btn,
.card h3,
.card p,
.footer{
color:#fff !important;
}
/* ================= HERO ================= */
.hero{
text-align:center;
padding:100px 20px 50px;
}
.hero h1{
font-size:62px;
font-weight:700;
line-height:1.1;
letter-spacing:-1px;
}
.hero p{
margin-top:16px;
font-size:16px;
opacity:0.85;
}
.cta{
margin-top:30px;
display:inline-block;
padding:14px 34px;
border-radius:30px;
background:linear-gradient(90deg,#6a5cff,#00f0ff);
color:#fff;
font-weight:600;
box-shadow:0 15px 40px rgba(0,240,255,0.25);
transition:0.3s;
}
.cta:hover{
transform:translateY(-3px);
}
/* ================= CENTER BOX ================= */
.center-box{
width:90%;
max-width:750px;
margin:70px auto;
border-radius:28px;
background:rgba(255,255,255,0.06);
backdrop-filter:blur(30px);
border:1px solid rgba(255,255,255,0.12);
padding:40px;
position:relative;
overflow:hidden;
}
.center-box::before{
content:"";
position:absolute;
inset:-80px;
background:linear-gradient(45deg,#6a5cff,#00f0ff,#ff4ecd);
filter:blur(100px);
opacity:0.25;
}
.center-box *{
position:relative;
}
.center-btn{
margin-top:18px;
display:inline-block;
padding:11px 24px;
border-radius:22px;
background:linear-gradient(90deg,#00f0ff,#6a5cff);
font-weight:500;
}
/* ================= CARDS ================= */
.cards{
display:flex;
justify-content:center;
gap:28px;
padding:60px 20px;
flex-wrap:wrap;
}
.card{
width:340px;
height:230px;
border-radius:24px;
background:rgba(255,255,255,0.06);
backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,0.1);
padding:28px;
position:relative;
overflow:hidden;
transition:0.4s;
}
.card:hover{
transform:translateY(-14px);
box-shadow:0 25px 70px rgba(0,0,0,0.5);
}
.card::before{
content:"";
position:absolute;
inset:-2px;
background:linear-gradient(45deg,#6a5cff,#00f0ff,#ff4ecd);
filter:blur(30px);
opacity:0.2;
}
.card *{
position:relative;
}
.card h3{
font-size:20px;
}
.card p{
margin-top:10px;
font-size:14px;
opacity:0.85;
}
/* ================= FOOTER ================= */
.footer{
text-align:center;
padding:60px 20px;
opacity:0.75;
font-size:14px;
}
/* ================= RESPONSIVE ================= */
@media(max-width:768px){
.hero h1{
font-size:40px;
}
.cards{
flex-direction:column;
align-items:center;
}
.menu{
display:none;
}
}
</style>
</head>
<body>
Mufi AI
<a href="#">Home</a>
<a href="#">Pricing</a>
<a href="#">Blog</a>
<a href="#">Use Cases</a>
Get Started
<h1>The AI researching tool<br>for Business analysis</h1>
<p>Create research boards with transparency & control</p>
Book a Demo
<h2>Powerful AI Dashboard</h2>
<p>Analyze, research and manage your business insights with a modern AI-powered interface.</p>
Explore Now
<h3>Smart Analytics</h3>
<p>Understand market trends using powerful AI tools.</p>
<h3>Workflow AI</h3>
<p>Automate repetitive tasks and boost productivity.</p>
© 2026 AI Platform. All rights reserved.
</body>
</html>]]>
