.logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:white;
    width: 180px;
    height: auto;
    
}

.logo img{
    width:55px;
    height:55px;
    object-fit:contain;
}

.logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.logo-text h2{
    font-size:24px;
    color:white;
    margin:0;
}

.logo-text span{
    color:#38bdf8;
    font-size:14px;
    letter-spacing:1px;
}


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',Arial,sans-serif;
scroll-behavior:smooth;
}


body{
background:#050816;
color:white;
line-height:1.6;
}


/* Navigation */

nav{

position:fixed;
top:0;
width:100%;
padding:20px 8%;
display:flex;
justify-content:space-between;
align-items:center;

background:rgba(5,8,22,.85);
backdrop-filter:blur(10px);

z-index:1000;

}


nav a{

color:white;
text-decoration:none;
margin-left:25px;
font-size:15px;

}


nav a:hover{

color:#38bdf8;

}



/* Hero */


.hero{

min-height:100vh;

display:flex;
align-items:center;

padding:120px 8%;

background:

radial-gradient(circle at top right,#2563eb55,transparent 35%),
radial-gradient(circle at bottom left,#06b6d455,transparent 35%);

}


.hero h1{

font-size:65px;
max-width:900px;

}


.hero h1 span{

background:linear-gradient(90deg,#38bdf8,#6366f1);
-webkit-background-clip:text;
color:transparent;

}


.hero p{

font-size:22px;
color:#cbd5e1;

max-width:650px;

margin:30px 0;

}



.btn{

display:inline-block;

padding:15px 35px;

border-radius:30px;

background:linear-gradient(90deg,#2563eb,#38bdf8);

color:white;

text-decoration:none;

font-weight:bold;

}




/* Sections */


section{

padding:90px 8%;

}


.title{

text-align:center;

font-size:42px;

margin-bottom:50px;

}



/* Cards */


.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}



.card{

background:#111827;

padding:35px;

border-radius:20px;

border:1px solid #1e293b;

transition:.3s;

}


.card:hover{

transform:translateY(-10px);

border-color:#38bdf8;

}



.card h3{

font-size:24px;

margin-bottom:15px;

color:#38bdf8;

}



.card p{

color:#cbd5e1;

}



/* Pricing */


.price{

font-size:32px;

color:#38bdf8;

margin:20px 0;

}



ul{

list-style:none;

}


li{

margin:12px 0;

color:#cbd5e1;

}


li:before{

content:"✓ ";
color:#38bdf8;

}



/* About */


.about{

background:#0f172a;

}



.about p{

max-width:900px;

margin:auto;

font-size:20px;

text-align:center;

color:#cbd5e1;

}



/* Form */


form{

max-width:800px;

margin:auto;

background:#111827;

padding:40px;

border-radius:20px;

}



input,select,textarea{

width:100%;

padding:15px;

margin:10px 0;

background:#020617;

border:1px solid #334155;

border-radius:10px;

color:white;

}



textarea{

height:150px;

}



button{

width:100%;

padding:16px;

border:none;

border-radius:30px;

background:#2563eb;

color:white;

font-size:18px;

cursor:pointer;

}



/* Footer */


footer{

background:#020617;

padding:30px;

text-align:center;

color:#94a3b8;

}



/* Mobile */


@media(max-width:768px){

.hero h1{

font-size:42px;

}


nav{

flex-direction:column;

}


nav div{

margin-top:15px;

}


}