/* =====================================
   XYL.ONE WEBSITE RANKING
   PREMIUM DARK BLUE UI
===================================== */


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


:root{

    --background:#06152b;
    --background2:#0b2344;

    --card:#102d52;

    --primary:#00d9ff;

    --secondary:#66ecff;

    --text:#eaf6ff;

    --muted:#9fc4e8;

    --gold:#ffd43b;

    --shadow:
    0 20px 50px rgba(0,0,0,.35);

}



body{

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:

    radial-gradient(
    circle at top left,
    #123b70,
    transparent 40%
    ),

    radial-gradient(
    circle at bottom right,
    #062b55,
    transparent 35%
    ),

    var(--background);

    color:var(--text);

    min-height:100vh;

}





/* =========================
HEADER
========================= */


.header{

    position:sticky;

    top:0;

    z-index:1000;

    background:
    rgba(6,21,43,.85);

    backdrop-filter:
    blur(15px);

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

}



.nav-container{

    max-width:1200px;

    margin:auto;

    padding:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.brand{

    display:flex;

    align-items:center;

    gap:15px;

}



.brand-logo{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:

    linear-gradient(
    135deg,
    #00d9ff,
    #006bff
    );

    color:#001a33;

    font-size:22px;

    font-weight:900;

}



.brand-text h1{

    color:white;

    font-size:25px;

}



.brand-text span{

    color:var(--muted);

    font-size:13px;

}



nav{

    display:flex;

    gap:25px;

}



nav a{

    color:var(--text);

    text-decoration:none;

    transition:.3s;

}



nav a:hover{

    color:var(--primary);

}







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


.hero{

    min-height:450px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:50px 20px;

}



.hero-content{

    max-width:800px;

}



.hero h2{

    font-size:55px;

    line-height:1.15;

}



.hero h2 span{

    color:var(--primary);

}



.hero p{

    margin-top:20px;

    color:var(--muted);

    font-size:20px;

}






/* SEARCH */


.search-box{

    margin-top:40px;

    display:flex;

    max-width:650px;

    margin-left:auto;

    margin-right:auto;

}



.search-box input{

    flex:1;

    padding:18px;

    border:none;

    outline:none;

    border-radius:

    50px 0 0 50px;

    background:white;

    font-size:16px;

}



.search-box button{

    padding:

    0 35px;

    border:none;

    background:

    var(--primary);

    color:#00182b;

    font-weight:bold;

    border-radius:

    0 50px 50px 0;

    cursor:pointer;

}






/* =========================
FILTER
========================= */


.filter-section{

    max-width:1200px;

    margin:auto;

    padding:20px;

}



.filters{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    justify-content:center;

}



.filter{

    padding:

    10px 22px;

    border-radius:30px;

    border:none;

    cursor:pointer;

    background:

    rgba(255,255,255,.08);

    color:white;

}



.filter.active,

.filter:hover{

    background:var(--primary);

    color:#002033;

}







/* =========================
RANKING TITLE
========================= */


.ranking-header{

    text-align:center;

    padding:40px 20px;

}



.ranking-header h2{

    font-size:35px;

}



.ranking-header p{

    color:var(--muted);

    margin-top:10px;

}







/* =========================
CARDS
========================= */


.ranking-grid{

    width:95%;

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

}





.website-card{

    position:relative;

    background:

    rgba(255,255,255,.06);

    backdrop-filter:

    blur(12px);

    border:

    1px solid rgba(255,255,255,.1);

    border-radius:25px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}



.website-card:hover{

    transform:

    translateY(-10px);

}





.thumbnail{

    width:100%;

    height:200px;

    object-fit:cover;

}





.card-body{

    padding:25px;

}



.rank-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:

    var(--primary);

    color:#001b2d;

    padding:8px 18px;

    border-radius:30px;

    font-weight:900;

}




.choice-badge{

    position:absolute;

    top:15px;

    right:15px;

    background:

    var(--gold);

    color:#332600;

    padding:7px 15px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}





.website-name{

    font-size:25px;

    margin-bottom:8px;

}



.domain{

    color:var(--primary);

}



.score{

    margin-top:15px;

    font-size:32px;

    font-weight:900;

}



.stars{

    color:

    var(--gold);

    font-size:22px;

    margin:10px 0;

}



.review{

    color:var(--muted);

    line-height:1.7;

}



.pros,

.cons{

    margin-top:20px;

}



.pros li{

    color:#8dffb1;

}



.cons li{

    color:#ff9999;

}



.visit-btn{

    display:block;

    text-align:center;

    margin-top:25px;

    padding:13px;

    border-radius:30px;

    background:var(--primary);

    color:#002033;

    text-decoration:none;

    font-weight:bold;

}








/* =========================
PAGINATION
========================= */


.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    padding:50px;

}



.pagination button{

    background:

    var(--primary);

    border:none;

    padding:

    12px 25px;

    border-radius:30px;

    cursor:pointer;

    font-weight:bold;

}



#pageNumbers button{

    margin:3px;

}







/* =========================
NEWSLETTER
========================= */


.newsletter{

    text-align:center;

    padding:

    60px 20px;

}



.newsletter p{

    color:var(--muted);

}



.newsletter-box{

    margin-top:25px;

}



.newsletter input{

    padding:15px;

    width:300px;

    border-radius:30px;

    border:none;

}



.newsletter button{

    padding:15px 25px;

    border:none;

    border-radius:30px;

    background:var(--primary);

}








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


footer{

    background:#041021;

    padding:40px 20px;

}



.footer-content{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(200px,1fr));

    gap:30px;

}



footer a{

    display:block;

    color:var(--muted);

    text-decoration:none;

    margin-top:8px;

}



.copyright{

    text-align:center;

    margin-top:30px;

    color:#7195bd;

}







/* =========================
RESPONSIVE
========================= */


@media(max-width:800px){

.nav-container{

    flex-direction:column;

    gap:20px;

}


nav{

    flex-wrap:wrap;

    justify-content:center;

}


.hero h2{

    font-size:38px;

}


.search-box{

    flex-direction:column;

    gap:10px;

}


.search-box input,
.search-box button{

    border-radius:50px;

    padding:16px;

}


}



@media(max-width:450px){


.hero h2{

    font-size:30px;

}


.website-card{

    border-radius:18px;

}


}