:root{
    --bg:#f7f8fb;
    --card:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --brand:#1f6feb;
    --brand2:#0ea5e9;
    --shadow: 0 12px 28px rgba(17,24,39,.08);
    --radius: 18px;
    --content: 1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size:18px;
    line-height:1.55;
    color:var(--text);
    background: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.14), transparent 55%),
    radial-gradient(900px 500px at 100% 10%, rgba(31,111,235,.12), transparent 55%),
    var(--bg);
}

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

.container{
    width:100%;
    max-width:var(--content);
    margin:0 auto;
    padding:0 18px;
    padding-bottom: 30px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 18px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color:#fff;
    font-weight:700;
    border:0;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(31,111,235,.22);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    user-select:none;
    white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(31,111,235,.26); }
.btn:active{ transform: translateY(0px); opacity:.95; }

.btn-ghost{
    background: rgba(17, 24, 39, .5);
    color: #ffffffbe;
    box-shadow: none;
    font-weight: 700;
}
.btn-ghost:hover{ background: rgba(17,24,39,.10); transform:none; }

.pill{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 25px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .4);
    color: #ffffffe0;
    font-weight: 600;
}

/* Header / Hero */
header{
    position:relative;
    overflow:hidden;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
}

.hero{
    position:relative;
    min-height: 62vh;
    display:flex;
    align-items:flex-end;
    padding: 26px 0 26px;
    background:
            linear-gradient(180deg, rgba(17,24,39,.10), rgba(17,24,39,.40)),
            url("/images/imgi_106_XXL.jpg") center/cover no-repeat;
}

.topbar{
    position:absolute;
    top:16px;
    left:0;
    right:0;
    z-index:3;
}

.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.brand{
    display:flex;
    flex-direction:column;
    gap:4px;
    color:#fff;
}
.brand strong{
    font-size:20px;
    letter-spacing:.2px;
}
.brand span{
    font-size:14px;
    color: rgba(255,255,255,.85);
}

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.tel{
    color:#fff;
    font-weight:800;
    padding:10px 14px;
    border-radius:999px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16);
}

.mobile-toggle{
    display:none;
    padding:10px 12px;
    border-radius:12px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.16);
    color:#fff;
    cursor:pointer;
    font-weight:800;
}

.hero-content{
    width:100%;
    color:#fff;
    padding: 18px 0 10px;
    z-index:2;
}

.hero-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:18px;
    align-items:end;
}

.hero h1{
    margin:0 0 10px;
    font-size: 44px;
    line-height:1.06;
    letter-spacing:-.6px;
}
.hero p{
    margin:0 0 16px;
    max-width: 56ch;
    color: rgba(255,255,255,.88);
}

.hero-cards{
    display:grid;
    gap:12px;
    justify-items:stretch;
}

.hero-card{
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius);
    padding: 14px;
    backdrop-filter: blur(10px);
}

.hero-card b{
    display:block;
    margin-bottom:6px;
    font-size:16px;
}
.hero-card small{
    color: rgba(255,255,255,.86);
    font-size:14px;
    display:block;
}

/* Booking form area */
.booking-wrap{
    margin-top: -18px;
    position:relative;
    z-index:4;
}
.booking-shell{
    background: var(--card);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 14px;
}
.booking-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding: 6px 8px 14px;
}
.booking-head b{ font-size:18px; }
.booking-head span{ color: var(--muted); font-size:14px; }

/* Nav */
nav{
    position: sticky;
    top:0;
    z-index:10;
    background: rgba(247,248,251,.78);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(17,24,39,.06);
}
.nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding: 10px 0;
}
.nav-links{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.nav-links a{
    padding: 10px 12px;
    border-radius: 999px;
    font-weight:700;
    color: var(--text);
    background: transparent;
    transition: background .15s ease;
}
.nav-links a:hover{ background: rgba(17,24,39,.06); }

/* Sections */
section{ padding: 54px 0; }
.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom: 18px;
}
.section-head h2{
    margin:0;
    font-size: 30px;
    line-height:1.12;
    letter-spacing:-.4px;
}
.section-head p{
    margin:0;
    color: var(--muted);
    max-width: 62ch;
    font-size: 16px;
}

.card{
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* About block */
.about{
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
    padding: 22px;
}
.facts{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top: 12px;
}
.fact{
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(17,24,39,.04);
}
.fact b{ display:block; margin-bottom:4px; }
.fact span{ color: var(--muted); font-size:14px; }

/* Rooms */
.rooms{
    display:grid;
    gap:14px;
}
.room{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:0;
    overflow:hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--card);
}
.room.reverse{ grid-template-columns: 1fr 1fr; }
.room-media{
    min-height: 260px;
    background: #e5e7eb;
}
.room-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.room-body{
    padding: 22px;
    display:flex;
    flex-direction:column;
    gap:12px;
    justify-content:center;
}
.room-body h3{
    margin:0;
    font-size: 22px;
    letter-spacing:-.2px;
}
.room-body p{
    margin:0;
    color: var(--muted);
}
.room-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 4px;
}
.price{
    font-weight:800;
    font-size: 18px;
}
.price small{
    font-weight:700;
    color: var(--muted);
    font-size: 14px;
    margin-left: 6px;
}
.room-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top: 8px;
    flex-wrap:wrap;
}

/* Services */
.services-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:12px;
}
.service{
    padding: 16px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.service b{ font-size: 18px; }
.service p{ margin:0; color: var(--muted); font-size: 15px; }
.service .btn{ width:100%; }

/* Reviews */
.reviews{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
}
.review{
    padding: 18px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.stars{ letter-spacing: 2px; }
.review p{ margin:0; color: var(--muted); }
.review .who{ margin-top:auto; font-weight:800; }

/* FAQ */
.faq{
    display:grid;
    gap:10px;
}
details{
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
}
summary{
    cursor:pointer;
    font-weight:800;
    list-style:none;
}
summary::-webkit-details-marker{ display:none; }
details p{ margin:10px 0 0; color: var(--muted); }

/* City */
.city{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:14px;
    align-items:stretch;
}
.city .card{ padding: 22px; }
.city-photo{
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow);
    background:#e5e7eb;
}
.city-photo img{ width:100%; height:100%; object-fit:cover; }

/* Contacts */
.contacts{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    align-items:stretch;
}
.contacts .card{ padding: 22px; }
.contacts h3{ margin:0 0 10px; font-size:22px; }
.contacts p{ margin:0 0 10px; color: var(--muted); }
.contact-line{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding: 10px 0;
}
.dot{
    width:10px; height:10px; border-radius:999px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    margin-top: 8px;
    flex: 0 0 10px;
}
.map-box{
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(31,111,235,.12), rgba(14,165,233,.10));
    min-height: 320px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 0px;
    color: var(--muted);
}

/* Footer */
footer{
    padding: 22px 0 34px;
}
.footer-inner{
    display:flex;
    gap:14px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(17,24,39,.04);
}
.footer-inner small{ color: var(--muted); }

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

    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 16px;
    color: #ffffffe0;
    font-weight: 600;
}

#contact-form .button{
    border: 1px solid #e0e0e0 !important;
}

textarea{
    height:100px;
    border-radius: 16px;
}
#form-button{
    border-radius: 4px !important;
    border: 1px solid #333 !important;
    background: #ffffff10 !important;
}
/* Responsive */
@media (max-width: 1280px){
	 .hero{
		    padding: 26px 20px;
	}
}
@media (max-width: 980px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero h1{ font-size: 38px; }
    .facts{ grid-template-columns: 1fr; }
    .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reviews{ grid-template-columns: 1fr; }
    .city{ grid-template-columns: 1fr; }
    .contacts{ grid-template-columns: 1fr; }
    .map-box{ order:2; } /* карта снизу на адаптиве */
}

@media (max-width: 760px){
    .mobile-toggle{ display:inline-flex; }
    .nav-links{
        display:none;
        width:100%;
        padding: 10px 0 4px;
    }
    .nav-links.open{ display:flex; }
    .nav-inner{ flex-wrap:wrap; }
    .room{ grid-template-columns: 1fr; }
    .room-media{ min-height: 220px; }
    .services-grid{ grid-template-columns: 1fr; }
    .hero{ min-height: 64vh; padding-left: 10px; padding-right: 10px; }
    .hero h1{ font-size: 34px; }
}

@media (max-width: 580px){
    h1 span{display: none; }
    .hero h1{text-align: center; padding: 20px 10px; font-size: 30px}
    .pill{opacity: 0}

}


@media (max-width: 480px){
    header .hero-grid p {
        opacity: 0;
    }
    .hero h1{margin-top: 100px;}
}