/*======================================
FRAMEWORK 10 HERO
======================================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-bg{

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 30%,
rgba(124,58,237,.30),
transparent),

radial-gradient(circle at 80% 20%,
rgba(0,229,255,.20),
transparent),

radial-gradient(circle at 50% 100%,
rgba(255,77,157,.18),
transparent);

animation:aurora 12s infinite alternate;

}

@keyframes aurora{

100%{

transform:scale(1.2) rotate(8deg);

}

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:var(--space-xl);

position:relative;

z-index:2;

}

.hero-badge{

display:inline-block;

padding:12px 24px;

border-radius:40px;

background:var(--glass);

border:1px solid var(--glass-border);

margin-bottom:var(--space-lg);

}

.hero h1{

font-size:82px;

line-height:1;

margin-bottom:var(--space-lg);

}

.gradient{

background:

var(--gradient-primary);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

max-width:620px;

margin-bottom:var(--space-xl);

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:var(--space-2xl);

}

.hero-stats{

display:flex;

gap:50px;

}

.hero-stats h2{

font-size:46px;

}

.hero-image{

width:100%;

animation:float 6s ease-in-out infinite;

}

@keyframes float{

50%{

transform:translateY(-20px);

}

}

.glass-card{

position:absolute;

background:var(--glass);

backdrop-filter:blur(var(--blur));

padding:18px 28px;

border-radius:var(--radius-md);

border:1px solid var(--glass-border);

top:80px;

right:20px;

}

.second{

top:auto;

bottom:90px;

left:20px;

}

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:54px;

}

.hero-buttons,

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

}