:root{
    --bg:#061b1f;
    --bg2:#0b2a2f;
    --card:#0e3237;
    --text:#e9f3f4;
    --muted:#b7c8cb;
    --accent:#22b7a8;
    --accent2:#19a092;
    --line:rgba(255,255,255,.10);
    --shadow: 0 18px 50px rgba(0,0,0,.35);
    --radius: 18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background: radial-gradient(1200px 600px at 20% -10%, rgba(34,183,168,.20), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, #031316, #061b1f 40%, #041113);
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, calc(100% - 40px)); margin-inline:auto}

.section{padding:64px 0}
.section--alt{
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.sectionhead{margin-bottom:22px}
.sectionhead h2{
    margin:0 0 8px;
    font-size: clamp(24px, 2.2vw, 34px);
    letter-spacing:.2px;
}
.sectionhead p{margin:0; color:var(--muted)}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 16px;
    border-radius: 999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.04);
    color:var(--text);
    cursor:pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
    user-select:none;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18)}
.btn--primary{
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-color: rgba(255,255,255,.12);
}
.btn--primary:hover{background: linear-gradient(135deg, #2ad6c6, #1bb3a3)}
.btn--ghost{background: rgba(255,255,255,.02)}
.btn--wide{width:100%}
.btn--small{padding:10px 14px; font-size:14px}

.muted{color:var(--muted)}
.note{margin:18px 0 0; color:var(--muted)}

/* HERO */
.hero{
    position:relative;
    min-height: 72vh;
    display:flex;
    align-items:stretch;
    overflow:hidden;
    border-bottom:1px solid var(--line);
}
.hero__bg{
    position:absolute;
    inset:0;
    background-size: cover;
    background-position:center;
    transform: scale(1.03);
    filter: saturate(1.05) contrast(1.02);
    transition: opacity 900ms ease;
    opacity:1;
}
.hero__overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(6,27,31,.92), rgba(6,27,31,.55) 50%, rgba(6,27,31,.70)),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.40));
    opacity: 0.8;
}
.hero__content{position:relative; z-index:2; padding:22px 0 36px}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
}

.brand{display:flex; align-items:center; gap:12px}
.brand__logo{
    width:42px; height:42px;
    display:grid; place-items:center;
    border-radius: 14px;
    background: rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    font-weight:800;
}
.brand__text small{display:block; color:var(--muted); margin-top:2px}

.nav{
    display:flex;
    gap:16px;
    padding:10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
}
.nav a{
    font-size:14px;
    color: rgba(233,243,244,.92);
    padding:8px 10px;
    border-radius: 999px;
}
.nav a:hover{background: rgba(255,255,255,.06)}

.burger{
    display:none;
    width:44px; height:44px;
    border-radius: 12px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
}
.burger span{
    display:block;
    width:18px;
    height:2px;
    background: rgba(233,243,244,.9);
    margin:5px auto;
    border-radius:2px;
}

.hero__grid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:22px;
    margin-top:20px;
}

.hero__left h1{
    margin:0 0 10px;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height:1.08;
}
.hero__lead{
    margin:0 0 18px;
    color: rgba(233,243,244,.88);
    font-size: clamp(15px, 1.2vw, 18px);
    max-width: 56ch;
}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}

.hero__badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{
    font-size:13px;
    color: rgba(233,243,244,.92);
    padding:8px 10px;
    border-radius: 999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
}

.hero__card{
    background: rgba(14,50,55,.65);
    border:1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:18px;
    backdrop-filter: blur(8px);
}
.hero__cardTitle{font-weight:700; margin-bottom:10px}
.iconlist{list-style:none; padding:0; margin:0 0 14px}
.iconlist li{display:flex; gap:10px; align-items:flex-start; padding:8px 0; color: rgba(233,243,244,.90)}
.dot{
    width:8px; height:8px; margin-top:7px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
}

/* BOOKING */
.booking{padding:28px 0 8px}
.booking__box{
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    padding:16px;
}

/* ABOUT */
.about{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:22px;
    align-items:start;
}
.about__text{
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding:18px;
    background: rgba(255,255,255,.02);
}
.about__text p{margin:0 0 12px; color: rgba(233,243,244,.92); line-height:1.6}
.about__text p:last-child{margin-bottom:0}

.mediaGrid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:12px;
}
.mediaGrid img{
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    aspect-ratio: 4/3;
    object-fit:cover;
}

/* CARDS */
.cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:16px;
}
.card{
    border-radius: var(--radius);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
    display:flex;
    flex-direction:column;
}
.card__img{height:190px; width:100%; object-fit:cover}
.card__body{padding:16px}
.card__title{margin:0 0 8px; font-size:18px}
.card__text{margin:0 0 12px; color: rgba(233,243,244,.88); line-height:1.55}
.card__meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.price__from{display:block; font-size:12px; color:var(--muted)}
.price__value{display:block; font-weight:800}

/* CHIPS (SERVICES) */
.chips{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
}
.chip{
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.chip__title{font-weight:800}
.chip__text{color: rgba(233,243,244,.86); line-height:1.5}

/* REVIEWS */
.reviews{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
}
.review{
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    padding:16px;
}
.review__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}
.review__name{font-weight:800}
.review__stars{letter-spacing:1px; color: rgba(255,255,255,.92)}
.review p{margin:0; color: rgba(233,243,244,.88); line-height:1.6}

/* CITY */
.city{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:16px;
}
.city__text{
    border-radius: var(--radius);
    border:1px solid var(--line);
    padding:18px;
    background: rgba(255,255,255,.02);
}
.city__text p{margin:0 0 12px; line-height:1.65; color: rgba(233,243,244,.90)}
.city__text p:last-child{margin-bottom:0}

.city__tips{
    display:grid;
    gap:12px;
}
.tip{
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    padding:14px;
}
.tip strong{display:block; margin-bottom:6px}
.tip span{color: rgba(233,243,244,.86); line-height:1.5}

/* FAQ */
.faq{display:grid; gap:10px}
.faq__item{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    border-radius: var(--radius);
    padding:12px 14px;
}
.faq__item summary{
    cursor:pointer;
    font-weight:800;
    list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__content{margin-top:10px; color: rgba(233,243,244,.88); line-height:1.6}

/* CONTACTS */
.contacts{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
    align-items:start;
}
.contactCard{
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    padding:16px;
}
.contactRow{display:grid; grid-template-columns: 110px 1fr; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.contactRow:last-child{border-bottom:none}
.contactLabel{color:var(--muted); font-size:13px}
.contactValue{color: rgba(233,243,244,.92)}
.contactActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.contactFormBox{
    margin-top:14px;
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.02);
    padding:16px;
    padding-bottom: 60px;
}
.h3{margin:0 0 10px}

.mapBox{
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    overflow:hidden;
}
.mapBox__title{
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.10);
    font-weight:800;
}
.mapBox__inner{padding:14px}
.mapPlaceholder{
    border-radius: 16px;
    border:1px dashed rgba(255,255,255,.22);
    padding:18px;
    background: rgba(0,0,0,.12);
    min-height: 280px;
    display:grid;
    place-items:center;
    text-align:center;
}
.smallNote{
    margin-top:12px;
    color: rgba(233,243,244,.86);
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    padding:12px 14px;
}

/* FOOTER */
.footer{
    border-top:1px solid var(--line);
    padding:22px 0;
    background: rgba(0,0,0,.10);
}
.footer__grid{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.footer__brand{font-weight:800}
.footer__copy{color:var(--muted); margin-top:4px}

/* RESPONSIVE */
@media (max-width: 980px){
    .hero__grid{grid-template-columns:1fr; gap:14px}
    .about{grid-template-columns:1fr}
    .city{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr; }
    .chips{grid-template-columns:1fr; }
    .reviews{grid-template-columns:1fr; }
    .contacts{grid-template-columns:1fr; }
    .mapPlaceholder{min-height:240px}
    .nav{
        position:fixed;
        top:78px;
        right:20px;
        left:20px;
        display:none;
        flex-direction:column;
        gap:6px;
        padding:12px;
        border-radius: 18px;
        z-index: 50;
        background: rgba(6,27,31,.92);
        backdrop-filter: blur(10px);
    }
    .nav.is-open{display:flex}
    .burger{display:block}
}

@media (max-width: 520px){
    .container{width: calc(100% - 28px)}
    .contactRow{grid-template-columns: 1fr; gap:6px}
}

iframe{
    border-radius: 10px;
    overflow: hidden;
}
textarea, input{
    width: 100%;
    padding: 5px;
    margin: 3px 0;
    border-radius: 4px;
    border: 1px solid #333 !important;
    background: #ffffff10;
    font-family: sans-serif;
}
textarea{
    height:100px;
}
#form-button{
    border-radius: 4px !important;
    border: 1px solid #333 !important;
    background: #ffffff10 !important;
}