/* =========================
   BASE
========================= */

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

body {
    background: #0b1020;
    color: #f8fafc;
    font-family: Inter, system-ui, Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* =========================
   LAYOUT
========================= */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 100px 0;
}

/* =========================
   NAVBAR
========================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 999;

    background: rgba(17,24,39,.75);
    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,.05);
}

.navbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    min-height:75px;
}

.logo{
    font-size:24px;
    font-weight:700;
    color:#3b82f6;
    white-space:nowrap;
}

.navbar nav{
    display:flex;
    gap:30px;
}

.navbar nav a{
    color:#cbd5e1;
    text-decoration:none;
    transition:.25s;
}

.navbar nav a:hover{
    color:#3b82f6;
}

.lang-switch{
    white-space:nowrap;
}

.lang-switch a{
    color:#94a3b8;
    text-decoration:none;
}

/* =========================
   HERO
========================= */

.hero{

    padding:140px 0;

    text-align:center;

    background:
        radial-gradient(circle at 20% 20%, rgba(59,130,246,.25), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(124,58,237,.25), transparent 40%);
}

.hero h1{

    font-size:clamp(38px,6vw,58px);

    line-height:1.1;

    max-width:900px;

    margin:0 auto 25px;
}

.hero p{

    font-size:clamp(17px,2vw,20px);

    color:#94a3b8;

    max-width:650px;

    margin:0 auto 45px;
}

/* =========================
   BUTTONS
========================= */

.buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.btn{

    padding:14px 28px;

    border-radius:10px;

    text-decoration:none;

    transition:.25s;

    font-weight:600;
}

.btn.primary{

    background:#3b82f6;

    color:#fff;
}

.btn.primary:hover{

    background:#2563eb;
}

.btn.secondary{

    border:1px solid rgba(255,255,255,.15);

    color:#fff;
}

.btn.secondary:hover{

    border-color:#3b82f6;

    color:#3b82f6;
}

/* =========================
   SERVICES
========================= */

.services{
    text-align:center;
}

.services h2{

    font-size:40px;

    margin-bottom:50px;
}

.service-grid{

    display:grid;

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

    gap:25px;
}

.card{

    background:rgba(17,24,39,.65);

    border:1px solid rgba(255,255,255,.05);

    padding:35px;

    border-radius:18px;

    transition:.3s;
}

.card:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;
}

.card h3{

    margin-bottom:15px;

    color:#3b82f6;

    font-size:22px;
}

.card p{

    color:#94a3b8;
}

/* =========================
   FOOTER
========================= */

footer{

    margin-top:80px;

    padding:40px 0;

    border-top:1px solid rgba(255,255,255,.05);

    color:#64748b;

    text-align:center;
}

/* ===================================================
   TABLET
=================================================== */

@media (max-width:1024px){

    .service-grid{

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

    .hero{

        padding:110px 0;
    }

}

/* ===================================================
   MOBILE
=================================================== */

@media (max-width:768px){

    section{

        padding:70px 0;
    }

    .navbar .container{

        flex-direction:column;

        gap:15px;

        padding:18px 0;
    }

    .navbar nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;
    }

    .hero{

        padding:80px 0;
    }

    .buttons{

        flex-direction:column;

        align-items:center;
    }

    .btn{

        width:100%;
        max-width:300px;
    }

    .service-grid{

        grid-template-columns:1fr;
    }

}

/* ===================================================
   SMALL PHONES
=================================================== */

@media (max-width:480px){

    .container{

        padding:0 18px;
    }

    .services h2{

        font-size:30px;
    }

}