*{box-sizing:border-box}
body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:radial-gradient(circle at top,#082c55,#050b18 60%);
color:#e8f5ff;
}
.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 8%;
}
.brand{
display:flex;
align-items:center;
gap:12px;
font-size:26px;
font-weight:700;
}
.brand img{width:42px}
.nav a{
color:#cdeaff;
text-decoration:none;
margin-left:25px;
}
.hero{
text-align:center;
padding:70px 8%;
}
.hero-logo{
width:130px;
filter:drop-shadow(0 0 35px #008cff);
}
.hero h1{
font-size:56px;
background:linear-gradient(90deg,#0066ff,#00d4ff);
-webkit-background-clip:text;
color:transparent;
}
.hero p{
font-size:22px;
color:#b8d9f5;
}
.buttons{margin:40px}
.btn{
background:#008cff;
color:white;
padding:14px 28px;
border-radius:12px;
text-decoration:none;
font-weight:bold;
margin:8px;
}
.secondary{background:#10233b}
pre{
max-width:760px;
margin:25px auto;
text-align:left;
background:#020817;
border:1px solid #174d82;
padding:25px;
border-radius:18px;
overflow:auto;
}
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:22px;
padding:50px 8%;
}
.card{
background:#0b1628;
border:1px solid #174d82;
padding:28px;
border-radius:20px;
}
.card h3{color:#00d4ff}
footer{text-align:center;padding:40px;color:#8fb7d9}


/* Responsive improvements */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .nav {
        flex-direction: column;
        gap: 20px;
        padding: 20px 5%;
    }

    .brand {
        font-size: 22px;
    }

    .nav nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .nav a {
        margin-left: 0;
    }

    .hero {
        padding: 45px 5%;
    }

    .hero-logo {
        width: 95px;
    }

    .hero h1 {
        font-size: clamp(32px, 8vw, 44px);
        line-height: 1.15;
    }

    .hero p {
        font-size: 18px;
        line-height: 1.5;
    }

    .buttons {
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: min(100%, 280px);
        text-align: center;
    }

    pre {
        padding: 18px;
        font-size: 13px;
        margin: 20px 0;
        border-radius: 14px;
    }

    .features {
        padding: 35px 5%;
        grid-template-columns: 1fr;
    }

    .card {
        padding: 22px;
    }
}

@media (max-width: 420px) {
    .brand img {
        width: 34px;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero p {
        font-size: 16px;
    }

    footer {
        padding: 30px 5%;
        font-size: 14px;
    }
}