*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #000000;
}
.morph-hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
z-index: 1;
opacity: 0.8;
animation: moveBlob 15s infinite alternate ease-in-out;
}
.blob-1 {
width: 500px;
height: 500px;
background: #3b82f6;
top: -100px;
left: -100px;
animation-delay: 0s;
}
.blob-2 {
width: 600px;
height: 600px;
background: #8b5cf6;
bottom: -200px;
right: -100px;
animation-delay: -5s;
}
.blob-3 {
width: 400px;
height: 400px;
background: #ec4899;
top: 40%;
left: 40%;
animation-delay: -10s;
}
@keyframes moveBlob {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(100px, 50px) scale(1.2); }
100% { transform: translate(-50px, 150px) scale(0.9); }
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
color: #ffffff;
padding: 0 20px;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
padding: 60px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-content h1 {
font-size: clamp(3rem, 6vw, 5rem);
margin: 0 0 10px 0;
letter-spacing: -2px;
}
.hero-content p {
font-size: 1.25rem;
color: #e2e8f0;
margin-bottom: 40px;
}
.hero-btn {
background: #ffffff;
color: #0f172a;
border: none;
padding: 16px 36px;
border-radius: 30px;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
.hero-btn:hover {
transform: translateY(-4px);
}