:root {
    --background: #f6f7fb;
    --surface: #ffffff;
    --text: #172033;
    --muted: #657085;

    --primary: #087e8b;
    --secondary: #0b3954;
    --accent: #f4b400;

    --border: rgba(0,0,0,0.08);

    --shadow:
        0 20px 50px rgba(15,23,42,0.08);

    --radius: 24px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    background:
        linear-gradient(
            180deg,
            #f9fbff 0%,
            var(--background) 100%
        );

    color: var(--text);

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        sans-serif;

    line-height: 1.6;
}



h1,
h2,
h3 {
    font-family:
        "Playfair Display",
        serif;

    line-height: 1.15;
}


p {
    color: var(--muted);
}



.hero {

    min-height: 620px;

    display:flex;
    align-items:center;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.25),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #0b3954,
            #087e8b
        );

    color:white;

    padding:60px 24px;

}



.hero-content {

    width:100%;
    max-width:1100px;
    margin:auto;

}



.eyebrow {

    letter-spacing:3px;

    font-size:13px;

    opacity:.75;

    font-weight:700;

}



.hero h1 {

    font-size:
        clamp(42px,7vw,80px);

    margin:
        15px 0;

    color:white;

}



.subtitle {

    color:
        rgba(255,255,255,.85);

    max-width:700px;

    font-size:20px;

}



.family-summary {

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(130px,1fr));

    gap:16px;

    margin-top:40px;

}



.family-summary div {

    background:
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(10px);

    padding:20px;

    border-radius:
        18px;

}



.family-summary strong {

    display:block;

    font-size:30px;

    color:white;

}



.family-summary span {

    color:
        rgba(255,255,255,.8);

    font-size:14px;

}






main {

    max-width:1200px;

    margin:auto;

    padding:
        40px 20px;

}




section {

    margin-bottom:45px;

}



.panel {

    background:
        var(--surface);

    border-radius:
        var(--radius);

    padding:
        32px;

    box-shadow:
        var(--shadow);

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

}




h2 {

    font-size:
        clamp(28px,4vw,42px);

    margin-top:0;

}



.section-description {

    margin-top:-10px;

}




.sliders {

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin-top:30px;

}



.slider {

    background:#f7f9fc;

    padding:20px;

    border-radius:18px;

}



.slider label {

    display:flex;

    justify-content:space-between;

    font-weight:600;

    margin-bottom:12px;

}



input[type="range"] {

    width:100%;

    accent-color:
        var(--primary);

}




.winner-box {

    margin-top:35px;

    padding:25px;

    border-radius:20px;

    background:

    linear-gradient(
        135deg,
        #e8ffff,
        #f1fbff
    );

    border:
        1px solid rgba(8,126,139,.15);

}



.winner-box h3 {

    font-size:32px;

    margin:
        5px 0;

    color:
        var(--secondary);

}






.cards {

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}



.attraction-card {

    background:white;

    border-radius:
        var(--radius);

    overflow:hidden;

    box-shadow:
        var(--shadow);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

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

}



.attraction-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.12);

}



.attraction-image {
    height:220px;
    overflow:hidden;
    background:#eee;
}


.attraction-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}



.attraction-content {

    padding:25px;

}



.score {

    font-size:38px;

    font-weight:800;

    color:
        var(--primary);

}



.badges {

    margin:
        15px 0;

}



.badge {

    display:inline-block;

    padding:
        7px 13px;

    border-radius:
        50px;

    background:
        #e8f8f7;

    color:
        var(--primary);

    font-size:13px;

    margin:
        4px;

    font-weight:600;

}




button {

    border:none;

    cursor:pointer;

    font-weight:700;

    border-radius:
        14px;

    padding:
        12px 18px;

    background:
        var(--secondary);

    color:white;

    transition:
        .2s;

}



button:hover {

    background:
        var(--primary);

}





/* MODAL */


.modal {

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.55);

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:1000;

}



.modal.active {

    display:flex;

}



.modal-content {

    background:white;

    max-width:900px;

    width:100%;

    max-height:90vh;

    overflow:auto;

    border-radius:
        28px;

    padding:35px;

    position:relative;

}



.close-modal {

    position:absolute;

    right:20px;

    top:20px;

    width:40px;

    height:40px;

    border-radius:50%;

    font-size:24px;

}



.detail-section {

    margin:
        25px 0;

}



.detail-section h3 {

    color:
        var(--secondary);

}





.shortlist {

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}



.short-item {

    background:#f7f9fc;

    padding:20px;

    border-radius:18px;

}





footer {

    text-align:center;

    padding:
        40px 20px;

    color:
        var(--muted);

}





/* MOBILE */


@media(max-width:700px) {


.hero {

    min-height:500px;

}



.panel {

    padding:22px;

}



.cards {

    grid-template-columns:
        1fr;

}



.modal-content {

    padding:
        25px;

}



}