:root{

    --bg:#0a0f18;
    --bg2:#0f1623;
    --card:#111a27;

    --text:#e8eef7;
    --muted:#9aa6b2;

    --border:#1e2a3a;

    --accent:#5eead4;
    --accent2:#a78bfa;

    --container:1100px;

}


*{
    box-sizing:border-box;
}

body{

    margin:0;
    font-family:system-ui,Segoe UI,Roboto;

    background:
            linear-gradient(var(--bg),var(--bg)),
            repeating-linear-gradient(
                    0deg,
                    rgba(255,255,255,0.03),
                    rgba(255,255,255,0.03) 1px,
                    transparent 1px,
                    transparent 40px
            ),
            repeating-linear-gradient(
                    90deg,
                    rgba(255,255,255,0.03),
                    rgba(255,255,255,0.03) 1px,
                    transparent 1px,
                    transparent 40px
            );

    color:var(--text);

}


.container{
    width:min(var(--container),90%);
    margin:auto;
}


.header{

    border-bottom:1px solid var(--border);
    background:rgba(10,15,24,0.9);

}


.nav{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;

}


.logo{

    font-weight:700;
    font-size:20px;

}

.logo span{
    color:var(--accent);
}


nav a{

    margin-left:20px;
    text-decoration:none;
    color:var(--muted);
    font-weight:500;

}


nav a:hover{
    color:white;
}


.hero{

    padding:90px 0;

    background:

            radial-gradient(
                    circle at 20% 20%,
                    rgba(94,234,212,0.15),
                    transparent 40%
            ),

            radial-gradient(
                    circle at 80% 0%,
                    rgba(167,139,250,0.15),
                    transparent 40%
            );

}


.hero-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;

}


.tag{

    color:var(--accent);
    font-weight:600;

}


.hero h1{

    font-size:52px;
    margin:10px 0;

}

.hero h1 span{

    background:linear-gradient(90deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;
    color:transparent;

}


.subtitle{

    color:var(--muted);
    max-width:450px;

}


.hero-buttons{

    margin-top:25px;

}


.button{

    display:inline-block;
    padding:10px 18px;

    background:linear-gradient(90deg,var(--accent),var(--accent2));
    color:black;

    border-radius:8px;

    text-decoration:none;
    font-weight:600;

}


.button.big{
    padding:14px 26px;
}


.button.ghost{

    background:none;
    border:1px solid var(--border);
    color:var(--text);

}


.hero-code{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:12px;

    padding:25px;

    font-family:monospace;

}


.section{

    padding:90px 0;

}


.section h2{

    font-size:36px;
    margin-bottom:40px;

}


.features{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}


.card{

    background:var(--card);
    padding:25px;
    border-radius:12px;
    border:1px solid var(--border);

}


.alt{

    background:rgba(255,255,255,0.02);

    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);

}


.docs-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;

}


.pricing{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}


.price{

    background:var(--card);
    padding:30px;
    border-radius:12px;
    border:1px solid var(--border);

    text-align:center;

}


.price.featured{

    border-color:var(--accent);

}


.amount{

    font-size:36px;
    margin:10px 0;

}


.footer{

    border-top:1px solid var(--border);
    padding:30px 0;
    color:var(--muted);

}


.footer-inner{

    display:flex;
    justify-content:space-between;

}


.footer a{
    color:var(--accent);
    text-decoration:none;
}


@media (max-width:900px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .features{
        grid-template-columns:1fr;
    }

    .docs-grid{
        grid-template-columns:1fr;
    }

    .pricing{
        grid-template-columns:1fr;
    }

    .footer-inner{
        flex-direction:column;
        gap:10px;
    }

}