:root{
    --bg:#0b0f0d;
    --panel:#0f1512;
    --card:#111a16;
    --card2:#0f1713;
    --text:#e9f2ee;
    --muted:#b8c8c0;
    --line:rgba(255,255,255,.10);
    --shadow: 0 14px 40px rgba(0,0,0,.35);
    --accent:#2fd07a;
    --accent2:#1aa35c;
    --radius:24px;
    --radius2:18px;
    --container: 1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    color:var(--text);
    background: radial-gradient(1200px 800px at 70% -10%, rgba(47,208,122,.18), transparent 60%),
    radial-gradient(900px 700px at 10% 10%, rgba(47,208,122,.08), transparent 60%),
    linear-gradient(180deg, #070a08, #0b0f0d 35%, #0b0f0d);
    line-height:1.55;
    background-attachment: fixed;

}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{
    width:min(var(--container), calc(100% - 40px));
    margin-inline:auto;
}

.section{
    padding: 78px 0;
}
.section--alt{
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 80%);
}

.section__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}
.section__head h2{
    margin:0;
    font-size: clamp(26px, 2.6vw, 38px);
    letter-spacing: .2px;
}
.section__sub{
    margin:0;
    color:var(--muted);
}

/* Cards */
.card{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
}
.card--padded{ padding: 22px; }

/* Hero */
.hero{
    position:relative;
    min-height: 92vh;
    display:flex;
    align-items:stretch;
    max-width: 100%;
    overflow: hidden;
}
.hero__slides{
    position:absolute; inset:0;
}
.hero__slide{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform: scale(1.02);
    transition: opacity 900ms ease, transform 1400ms ease;
    filter: saturate(1.05) contrast(1.05);
}
.hero__slide.is-active{
    opacity:1;
    transform: scale(1);
}
.hero__overlay{
    position:absolute; inset:0;
    background:
            radial-gradient(900px 650px at 20% 20%, rgba(0,0,0,.25), rgba(0,0,0,.65) 55%, rgba(0,0,0,.82)),
            linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.78));
}
.hero__content{
    position:relative;
    z-index:2;
    padding: 22px 0 34px;
    display:flex;
    flex-direction:column;
    gap: 18px;
}

/* Topbar */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,14,12,.35);
    backdrop-filter: blur(10px);
}

.brand{
    display:flex; align-items:center; gap:12px;
}
.brand__mark{
    width:44px; height:44px;
    border-radius: 14px;
    display:grid; place-items:center;
    font-weight:800;
    letter-spacing:.5px;
    background: linear-gradient(180deg, rgba(47,208,122,.95), rgba(26,163,92,.92));
    color: #072012;
    box-shadow: 0 10px 24px rgba(47,208,122,.25);
}
.brand__title{display:block; font-weight:800; line-height:1.05}
.brand__subtitle{display:block; color:var(--muted); font-size:12px; margin-top:2px}

.nav{
    display:flex;
    align-items:center;
    gap: 14px;
}
.nav__link{
    color: rgba(233,242,238,.92);
    font-weight:600;
    font-size:14px;
    padding: 10px 10px;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease;
}
.nav__link:hover{ background: rgba(255,255,255,.08); }
.nav__cta{
    margin-left: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(47,208,122,.18);
    border:1px solid rgba(47,208,122,.35);
    font-weight:800;
}
.nav__cta:hover{ background: rgba(47,208,122,.26); }

.navbtn{
    display:none;
    width:44px; height:44px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color:var(--text);
}
.navbtn__lines{
    width:18px; height:12px; display:inline-block;
    position:relative;
}
.navbtn__lines::before,
.navbtn__lines::after{
    content:"";
    position:absolute; left:0; right:0;
    height:2px; border-radius:2px;
    background: rgba(233,242,238,.92);
}
.navbtn__lines::before{ top:1px; }
.navbtn__lines::after{ bottom:1px; }

/* Hero grid */
.hero__grid{
    display:grid;
    grid-template-columns: 1.4fr .85fr;
    gap: 18px;
    align-items:stretch;
    margin-top: 6px;
}
.hero__text{
    padding: 14px 6px;
}
.hero__text h1{
    margin: 0 0 10px;
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: .2px;
}
.lead{
    margin: 0 0 16px;
    font-size: clamp(16px, 1.4vw, 18px);
    color: rgba(233,242,238,.92);
    max-width: 58ch;
}
.hero__badges{
    display:flex; flex-wrap:wrap; gap:10px;
    margin: 14px 0 18px;
}
.badge{
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(10,14,12,.32);
    color: rgba(233,242,238,.92);
    font-weight:700;
    font-size: 13px;
}

.hero__actions{
    display:flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.16);
    font-weight:800;
    letter-spacing:.2px;
    background: rgba(255,255,255,.06);
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{
    background: linear-gradient(180deg, rgba(47,208,122,.95), rgba(26,163,92,.92));
    color:#061f12;
    border-color: rgba(47,208,122,.55);
}
.btn--ghost{
    background: rgba(10,14,12,.22);
}
.btn--wide{ width:100%; }

.hero__meta{
    display:flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.meta{
    min-width: 220px;
    padding: 12px 14px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.14);
    background: rgba(10,14,12,.26);
}
.meta__label{
    color: var(--muted);
    font-size: 12px;
}
.meta__value{
    font-weight: 800;
    margin-top: 2px;
}

/* Mini card */
.hero__card{
    align-self:stretch;
}
.mini{
    padding: 20px;
}
.mini__title{
    font-weight:900;
    font-size: 16px;
    margin-bottom: 10px;
}
.mini__list{
    margin:0;
    padding-left: 18px;
    color: rgba(233,242,238,.92);
}
.mini__list li{ margin: 7px 0; }
.mini__cta{
    display:inline-block;
    margin-top: 12px;
    font-weight:900;
    color: rgba(47,208,122,.95);
}
.mini__note{
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

/* Dots */
.hero__dots{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin-top: auto;
    padding-top: 6px;
}
.dot{
    width:10px; height:10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.10);
}
.dot.is-active{
    background: rgba(47,208,122,.95);
    border-color: rgba(47,208,122,.95);
}

/* About */
.about{ margin:0; color: rgba(233,242,238,.92); }

/* Rooms */
.rooms{
    display:flex;
    flex-direction:column;
    gap: 16px;
}
.room{
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 320px;
    direction: rtl; /* Reverses inline direction */
}
.room--reverse{
    grid-template-columns: 1fr 1.05fr;
    grid-auto-flow: dense;
    direction: ltr; /* Reverses inline direction */

}
.room__media{
    position:relative;
    background: rgba(255,255,255,.03);
}
.room__media img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.room__body{
    padding: 22px;
    display:flex;
    flex-direction:column;
    gap: 12px;
}
.room__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
}
.room__top h3{
    margin:0;
    font-size: 22px;
    letter-spacing:.2px;
}
.price{
    text-align:right;
    line-height:1.05;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(47,208,122,.30);
    background: rgba(47,208,122,.10);
    min-width: 110px;
    direction: ltr;
}
.price__from{ font-size:12px; color: rgba(233,242,238,.86); }
.price__value{ font-size:22px; font-weight: 900; }
.price__per{ font-size:12px; color: rgba(233,242,238,.86); }

.room__desc{ margin:0; color: rgba(233,242,238,.92); }

#bkng{
    border-bottom: 1px solid #aaaaaa10;
    border-top: 1px solid #aaaaaa10;
    padding: 30px 0;
    background: #ffffff04;
}
.chips{
    list-style:none;
    padding:0;
    margin: 0;
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
}
.chip{
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    font-weight: 800;
    font-size: 12px;
    color: rgba(233,242,238,.92);
}

.link{
    margin-top:auto;
    font-weight: 900;
    color: rgba(47,208,122,.95);
}
.room__note{
    color: var(--muted);
    font-size: 12px;
}

/* Grid helpers */
.grid{
    display:grid;
    gap: 14px;
}
.grid--3{
    grid-template-columns: repeat(3, 1fr);
}
.review__top{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 8px;
}
.review__name{ font-weight: 900; }
.review__stars{ color: rgba(47,208,122,.95); letter-spacing: 1px; }
.review p{ margin:0; color: rgba(233,242,238,.92); }
.h4{ margin:0 0 10px; }
.muted{ color: var(--muted); margin:0; }

/* Features */
.feature__icon{ font-size: 22px; margin-bottom: 8px; }
.feature h3{ margin:0 0 10px; }
.list{ margin:0; padding-left: 18px; color: rgba(233,242,238,.92); }
.list li{ margin: 7px 0; }

/* City */
.city__grid{
    display:grid;
    grid-template-columns: 1.2fr .9fr;
    gap: 18px;
    align-items:start;
}
.city__text p{
    margin: 0 0 12px;
    color: rgba(233,242,238,.92);
}
.city__media img{
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.14);
}
.city__tips{
    margin-top: 12px;
    display:grid;
    gap: 10px;
}
.tip{
    display:flex; align-items:flex-start; gap:10px;
    padding: 12px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(233,242,238,.92);
}
.tip__k{ width: 22px; flex: 0 0 22px; }

/* Contacts */
.contacts{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
}
.contacts__info{
    padding: 22px;
}
.kv{
    display:grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.kv:last-of-type{ border-bottom: none; }
.kv__k{ color: var(--muted); font-size: 13px; }
.kv__v{ font-weight: 800; color: rgba(233,242,238,.92); }
.tel,.mail{ text-decoration: underline; text-decoration-color: rgba(47,208,122,.55); text-underline-offset: 3px; }

.contacts__map{
    border-left: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    padding: 16px;
}
.mapbox{
    height: 100%;
    min-height: 420px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.14);
    overflow:hidden;
    background:
            radial-gradient(600px 400px at 20% 20%, rgba(47,208,122,.15), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.mapbox__inner{
    height:100%;
    padding: 18px;
    display:flex;
    flex-direction:column;
    gap: 10px;
}
.mapbox__title{
    font-weight: 900;
    font-size: 16px;
    text-align: right;
}

/* Form */
.form{
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
    display:flex;
    flex-direction:column;
    gap: 12px;
}
.form__row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.field{ display:flex; flex-direction:column; gap: 6px; }
.field__label{ font-size: 12px; color: var(--muted); }
.field__input{
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,14,12,.25);
    color: var(--text);
    outline: none;
}
.field__input:focus{
    border-color: rgba(47,208,122,.55);
    box-shadow: 0 0 0 4px rgba(47,208,122,.12);
}
.field__input--area{ resize: vertical; min-height: 92px; }
.form__note{ color: var(--muted); font-size: 12px; min-height: 18px; }

/* Footer */
.footer{
    padding: 26px 0;
    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
}
.footer__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    color: rgba(233,242,238,.86);
}
.toTop{
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
}

/* Responsive */
@media (max-width: 980px){
    .hero__grid{ grid-template-columns: 1fr; }
    .hero__text{ padding: 4px 2px; }
    .grid--3{ grid-template-columns: repeat(2, 1fr); }
    .city__grid{ grid-template-columns: 1fr; }
    .contacts{ grid-template-columns: 1fr; }
    .contacts__map{ border-left: none; border-top: 1px solid rgba(255,255,255,.10); }
    .mapbox{ min-height: 360px; }
}

@media (max-width: 760px){
    .section{ padding: 58px 0; }
    .topbar{ border-radius: 22px; }
    .navbtn{ display:inline-flex; align-items:center; justify-content:center; }
    .nav{
        position:absolute;
        right: calc((100% - min(var(--container), calc(100% - 40px))) / 2);
        left: calc((100% - min(var(--container), calc(100% - 40px))) / 2);
        top: 78px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap: 8px;
        padding: 12px;
        border-radius: 22px;
        border:1px solid rgba(255,255,255,.16);
        background: rgba(10,14,12,.86);
        backdrop-filter: blur(10px);
    }
    .nav.is-open{ display:flex; }
    .nav__link, .nav__cta{ padding: 12px 12px; }

    .room{
        grid-template-columns: 1fr;
    }
    .room--reverse{
        grid-template-columns: 1fr;
    }
    .room__media img{ height: 220px; }

    .grid--3{ grid-template-columns: 1fr; }
    .form__row{ grid-template-columns: 1fr; }
    .kv{ grid-template-columns: 1fr; }
}