.nx-hero{

position:relative;

overflow:hidden;

padding:180px 0 140px;

background:
radial-gradient(circle at top right,#154b88 0%,transparent 32%),
radial-gradient(circle at left,#00d4ff18 0%,transparent 35%),
linear-gradient(180deg,#07111d,#091523);

}

.nx-hero .nx-container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:90px;

}



.hero-badge{

display:inline-block;

padding:10px 22px;

border-radius:50px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(10px);

color:#00d4ff;

font-size:14px;

letter-spacing:2px;

margin-bottom:30px;

}

.hero-content h1{

font-size:72px;

line-height:1.15;

font-weight:800;

margin-bottom:30px;

}

.hero-content h1 span{

color:var(--primary);

}

.hero-content p{

font-size:20px;

line-height:2.1;

color:var(--text);

max-width:620px;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

gap:18px;

}

.btn-primary{

background:linear-gradient(135deg,#00d4ff,#2f7cff);

padding:18px 42px;

border-radius:60px;

color:white;

font-weight:700;

box-shadow:0 20px 45px rgba(0,212,255,.28);

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-6px);

}

.btn-secondary{

border:1px solid rgba(255,255,255,.15);

padding:18px 42px;

border-radius:60px;

color:white;

transition:.35s;

}

.btn-secondary:hover{

background:white;

color:#07111d;

}




.hero-image img{

width:560px;

margin:auto;

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

filter:drop-shadow(0 40px 70px rgba(0,212,255,.35));

transition:.4s;

cursor:pointer;

}



.hero-image img:hover{

transform:scale(1.05) rotate(-2deg);
}


.hero-glow{

position:absolute;

right:-200px;

top:-100px;

width:600px;

height:600px;

background:#00d4ff;

opacity:.08;

filter:blur(150px);

border-radius:50%;

}

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-22px);}

100%{transform:translateY(0);}

}