*{box-sizing:border-box}
body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:#050b16;
color:#fff;
}
.nav{
height:80px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 8%;
background:rgba(5,11,22,.75);
backdrop-filter:blur(15px);
position:sticky;
top:0;
z-index:10;
}
.logo{font-size:24px;font-weight:900}
.logo span{color:#006eff;text-shadow:0 0 20px #006eff}
nav a{color:#b7c4d8;margin:0 15px;text-decoration:none}
.btn{
padding:14px 25px;
border-radius:30px;
border:1px solid #006eff;
color:#fff;
text-decoration:none;
transition:.3s;
}
.primary{
background:#006eff;
box-shadow:0 0 30px rgba(0,110,255,.5);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 0 40px #006eff}
.hero{
min-height:90vh;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
padding:80px 8%;
overflow:hidden;
position:relative;
}
.glow{
position:absolute;
width:500px;height:500px;
background:#006eff;
filter:blur(180px);
opacity:.25;
right:0;
}
.tag{color:#00a8ff;font-weight:800}
h1{font-size:clamp(45px,6vw,75px);line-height:1}
strong{color:#006eff}
.subtitle{font-size:20px;color:#9aa9bd;max-width:600px}
.mockup{
height:420px;
border:1px solid #12345f;
border-radius:30px;
background:linear-gradient(145deg,#0d1729,#07101f);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 30px 80px #000;
}
.screen{
padding:40px;
border-radius:20px;
background:#081525;
box-shadow:0 0 50px rgba(0,110,255,.4);
}
.mini-logo{color:#00a8ff}
section{padding:80px 8%}
h2{font-size:42px}
.cards,.projects{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.cards div,.projects div{
padding:35px;
background:#0b1628;
border:1px solid #17335c;
border-radius:20px;
transition:.3s;
}
.cards div:hover,.projects div:hover{
transform:translateY(-10px);
border-color:#006eff;
}
.contact{text-align:center}
footer{
padding:30px;
text-align:center;
border-top:1px solid #142844;
color:#9aa9bd;
}
.reveal{animation:up 1s}
@keyframes up{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:none}
}
@media(max-width:800px){
.hero,.cards,.projects{grid-template-columns:1fr}
nav{display:none}
}