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


body{

    font-family:
    "Manrope",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    sans-serif;

    background:#050816;

    color:white;

}



.page{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 25px;

}




/* =================
   Header
================= */


header{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* Logo */


.logo{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:24px;

    font-weight:600;

    letter-spacing:-0.8px;

}



.logo img{

    display:block;

    width:32px;

    height:32px;

    max-width:32px;

    max-height:32px;

    object-fit:contain;

}



.logo span{

    color:#e5e7eb;

}




/* Navigation */


nav{

    display:flex;

    align-items:center;

    gap:35px;

}



nav a{

    color:#cbd5e1;

    text-decoration:none;

    font-size:15px;

    transition:.2s;

}



nav a:hover{

    color:white;

}



.login{

    background:#2563eb;

    padding:10px 25px;

    border-radius:10px;

    color:white!important;

}





/* =================
   Hero
================= */


.hero{

    text-align:center;

    padding:90px 0 120px;

}



.hero h1{

    font-size:60px;

    font-weight:700;

    letter-spacing:-1.5px;

    line-height:1.2;


    background:

    linear-gradient(
        90deg,
        #60a5fa,
        #a78bfa
    );


    background-clip:text;

    -webkit-background-clip:text;


    color:transparent;

    -webkit-text-fill-color:transparent;

}



.hero p{

    font-size:22px;

    color:#94a3b8;

    margin:35px 0;

}





/* =================
   Button
================= */


.btn{

    display:inline-block;

    padding:15px 35px;

    background:#2563eb;

    border-radius:12px;

    color:white;

    text-decoration:none;

    margin:10px;

    transition:.25s;

}



.btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 8px 25px rgba(37,99,235,.35);

}



.dark{

    background:#1e293b;

}





/* =================
   Sections
================= */


.section{

    padding:80px 0;

}



.section h2{

    text-align:center;

    font-size:42px;

    margin-bottom:50px;

}





/* =================
   Core Cards
================= */


.cards{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}



.card{

    background:#111827;

    border:1px solid #1e293b;

    padding:35px;

    border-radius:20px;

    text-align:center;

    transition:.3s;

}



.card:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;

    box-shadow:

    0 10px 30px rgba(37,99,235,.15);

}



.card p{

    margin-top:15px;

    color:#94a3b8;

}





/* =================
   Models
================= */


.models{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}



.model{

    background:#111827;

    border:1px solid #1e293b;

    padding:35px 45px;

    border-radius:20px;

    min-width:220px;

    text-align:center;

    transition:.3s;

}



.model h3{

    font-size:22px;

    margin-bottom:12px;

}



.model p{

    color:#94a3b8;

    font-size:14px;

}



.model:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;

    box-shadow:

    0 10px 30px rgba(37,99,235,.15);

}





/* =================
   API
================= */


.api-box{

    max-width:900px;

    margin:auto;

    background:#111827;

    border:1px solid #1e293b;

    padding:50px;

    border-radius:25px;

    text-align:center;

}



.api-box p{

    color:#94a3b8;

    margin:20px;

}








/* =================
   Footer
================= */


footer{

    text-align:center;

    padding:50px;

    color:#64748b;

}





/* =================
   Mobile
================= */


@media(max-width:800px){


.hero h1{

    font-size:40px;

}



.cards{

    grid-template-columns:1fr;

}



nav{

    display:none;

}



.logo img{

    width:28px;

    height:28px;

}


}