/* Quiobit - style.css */

:root{
    --bg1:#08142B;
    --bg2:#0E2550;
    --primary:#58CFFF;
    --secondary:#FF8A00;
    --accent:#FF4DA6;
    --green:#49D13D;
    --text:#FFFFFF;
    --text2:#DCE8F9;
    --glass:rgba(255,255,255,.06);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    overflow-x:hidden;
    background:
    radial-gradient(circle at top,#1E5DC2 0%,transparent 30%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    padding:18px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(8,20,43,.55);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.logo{
    width:160px;
}

#language-selector{
    padding:10px 14px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    color:#fff;
}

section{
    width:min(1200px,92%);
    margin:auto;
    padding:110px 0;
}

#hero{
    min-height:85vh;
    display:flex;
    align-items:center;
}

#hero h1{
    font-size:clamp(3rem,7vw,5rem);
    font-weight:900;
}

#hero h2{
    margin-top:16px;
    color:var(--primary);
    font-size:clamp(1.4rem,3vw,2rem);
}

#hero p{
    margin-top:25px;
    color:var(--text2);
    line-height:1.8;
    font-size:1.1rem;
}

.buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.download-button{
    padding:16px 34px;
    border-radius:60px;
    background:linear-gradient(90deg,#FF4B2B,#FF7A00);
    color:#fff;
    font-weight:bold;
    transition:.3s;
    box-shadow:0 12px 25px rgba(255,110,0,.35);
}

.download-button.secondary{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:none;
}

.download-button:hover{
    transform:translateY(-4px);
}

.hero-image img{
    border-radius:28px;
    box-shadow:0 25px 50px rgba(0,0,0,.35);
}

#features .cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
    margin-top:40px;
}

.card{
    background:var(--glass);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    padding:35px;
    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
}

.icon{
    font-size:42px;
    margin-bottom:20px;
}

.carousel{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
    margin-top:35px;
}

.carousel img{
    border-radius:24px;
    transition:.35s;
    box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.carousel img:hover{
    transform:scale(1.04);
}

footer{
    padding:50px 8%;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.08);
    color:#BFD5F3;
}

.footer-links{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:20px;
    flex-wrap:wrap;
}

@media(max-width:900px){

    header{
        padding:16px 5%;
    }

    #hero{
        grid-template-columns:1fr;
        text-align:center;
        padding-top:130px;
    }

    .buttons{
        justify-content:center;
    }

    /* ===========================
   DOWNLOAD
=========================== */

#download{

    text-align:center;

    padding:140px 0;

}

#download h2{

    margin-bottom:20px;

    font-size:48px;

}

#download p{

    max-width:700px;

    margin:0 auto 40px;

    color:var(--text2);

    line-height:1.8;

}

#download .download-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

}