*{margin:0;padding:0;box-sizing:border-box}

body{
font-family:Arial,sans-serif;
background:#03122b;
color:white;
line-height:1.7;
}

header{
position:fixed;
top:0;
width:100%;
z-index:1000;
padding-top:10px;
padding-bottom:10px;
background:rgba(3,18,43,.85);
backdrop-filter:blur(10px);
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:0 40px;
}

.logo img{
height:100px;
}

nav ul{
display:flex;
list-style:none;
gap:28px;
}

nav a{
color:white;
text-decoration:none;
transition:.3s;
}

nav a:hover{
color:#00d4ff;
}

.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:space-between;
padding:140px 8%;
gap:60px;
}

.hero-left{
flex:.8;
}

.hero-right{
flex:1.4;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}

.hero-right::before{
content:'';
position:absolute;
width:550px;
height:550px;
background:radial-gradient(circle,
rgba(0,212,255,.22),
transparent 70%);
filter:blur(50px);
z-index:-1;
}

.hero-right img{
width:115%;
max-width:1200px;
border-radius:20px;
box-shadow:0 20px 80px rgba(0,212,255,.15);
transition:
opacity .8s ease,
transform .8s ease;
}

.hero-right img:hover{
transform:scale(1.02);
}

.hero h1{
font-size:3.8rem;
font-weight:800;
line-height:1.05;
margin-bottom:30px;
}

.hero p{
font-size:1.25rem;
max-width:650px;
margin-bottom:30px;
color:rgba(255,255,255,.85);
}

.gradient{
background:linear-gradient(
90deg,
#00d4ff,
#00ff9c);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn,
.btn-secondary{
padding:14px 28px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

.btn{
background:#00d4ff;
color:#08111f;
}

.btn:hover{
transform:translateY(-2px);
}

.btn-secondary{
border:1px solid #00d4ff;
color:white;
}

.btn-secondary:hover{
background:rgba(0,212,255,.12);
}

@media(max-width:1100px){

.hero{
flex-direction:column;
text-align:center;
}

.hero-right{
flex:1;
}

.hero-right img{
width:100%;
max-width:700px;
}

.hero h1{
font-size:3rem;
}

.hero-buttons{
justify-content:center;
}

.logo img{
height:70px;
}

}