body::-webkit-scrollbar, html::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { 
  -webkit-box-shadow: inset 0 0 20px 20px var(--color-brand2), 0 0 20px 20px var(--color-brand2); 
  box-shadow: inset 0 0 20px 20px var(--color-brand2), 0 0 20px 20px var(--color-brand2); 
  border-radius: 10px; 
}
body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { 
  -webkit-box-shadow: inset 0 0 5px -1px var(--color-brand2); 
  box-shadow: inset 0 0 5px -1px var(--color-brand2); 
  border-radius: 10px; 
}
body::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover { 
  -webkit-box-shadow: inset 0 0 20px 20px var(--color-brand), 0 0 20px 20px var(--color-brand); 
  box-shadow: inset 0 0 20px 20px var(--color-brand), 0 0 20px 20px var(--color-brand); 
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background-color: var(--color-brand2); -webkit-box-shadow: none; box-shadow: none; border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--color-brand); -webkit-box-shadow: none; box-shadow: none; }
*::-webkit-scrollbar-track { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; border-radius: 10px; }

button, a, input, select, label, [role="button"] { -webkit-tap-highlight-color: transparent; }

:root { 
  --ink: #2B2015; 
  --muted: #5A4E40; 
  --coral: #FF7A50; 
  --violet: #8A5CF6; 
  --hero-bg: #EAF3F8;
  --hero-page-bg: #EAF3F8;
}

html.dark, body.dark {
  --ink: #F2ECE4;
  --muted: #C9BEB0;
  --hero-bg: #16121F;
  --hero-page-bg: #0d0a15;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body, button { font-family: var(--font-display); }

.hero { position: relative; width: 100%; height: auto; aspect-ratio: 2048 / 1152; overflow: hidden; background: var(--hero-bg); transition: background .4s ease; }

.layer { position: absolute; width: 110%; height: 110%; top: -6%; left: 50%; background-repeat: no-repeat; background-size: contain; background-position: top center; will-change: transform; transform: translate3d(-50%,0,0); }

.layer-bg { background-image: url('/images/layer-background-city.jpg'); z-index: 0; }
.layer-fg { background-image: url('/images/layer-foreground-arch.png'); z-index: 2; }
 
@media (max-width:990px) { 
  .hero { min-height: 225px; }
  .layer { width: 115%; height: 115%; }
}

.scrim { 
  position: absolute; 
  top: 0;  left: 0; 
  width: 56%; 
  height: 60%; 
  z-index: 2; 
  pointer-events: none; 
  background: radial-gradient(ellipse at top left, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 70%); 
}
html.dark .scrim, body.dark .scrim {
  background: radial-gradient(ellipse at top left, rgba(119,0,255,0.28) 0%, rgba(119,0,255,0.0) 70%);
}

.hero-topbar { 
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 10px 28px 30px;
  width: stretch;
  width: -webkit-fill-available;
  height: 60px;
  margin: 10px 10px 0 10px;
}

.mainbar {
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  border: 2px solid rgba(255, 129, 129, 0.2);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .05);
  border-radius: 32px;
}

a.logo_url { text-decoration: none; }

.logo {
  font-family: var(--font-ui); font-weight: 700; font-size: 20px;
  color: var(--color-brand); transition: all .75s ease;
}
.logo span { color: var(--color-brand2); transition: all .75s ease; }

a.logo_url:hover .logo { color: var(--color-brand2); }
a.logo_url:hover .logo span{ color: var(--color-brand); }

.logo-mobile {
  display: none; font-family: var(--font-ui); font-weight: 700; font-size: 20px;
  color: var(--color-brand); transition: all .75s ease;
}
.logo-mobile span { color: var(--color-brand2); transition: all .75s ease; }

a.logo_url:hover .logo-mobile { color: var(--color-brand2); }
a.logo_url:hover .logo-mobile span{ color: var(--color-brand); }

.topbar-links { display: flex; gap: 32px; font-size: 14px; }
.topbar-links a {
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .5s ease;
    background: rgba(255, 255, 255, .30);
    padding: 3px 20px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 8px 18px rgba(0, 0, 0, .1);
}
html.dark .topbar-links a { color: #fff; background: rgba(255, 255, 255, .1); ;
}
html.dark  .topbar-links a:hover { color: var(--color-brand2); }
.topbar-links a:hover { color: var(--color-brand);  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 8px 18px rgba(0, 0, 0, .25); }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.hero-content { position: relative; z-index: 5; padding: 15vh 48px 0; max-width: 540px; }
.hero-content-mobile { display: none; position: relative; z-index: 5; padding: 6vh 48px 0; max-width: 540px; }

.theme-switch--mobile { display: flex; width: fit-content; margin: 0 0 16px auto; }

.eyebrow { 
  display: inline-flex; align-items: center; gap: 8px; 
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; 
  color: #2FB6A8; margin-bottom: 20px; 
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); 
  box-shadow: 0 0 0 4px rgba(255,122,80,0.18); }

h1 { 
  font-family: var(--font-ui); font-weight: 700; 
  font-size: clamp(30px, 4.4vw, 48px); line-height: 1.12; margin: 0 0 18px; color: var(--ink); 
}
h1 em { font-style: normal; color: var(--violet); }

.h1_title_mob { font-size: 28px; font-weight: 700; }
.h1_title_mob em { font-style: normal; color: var(--violet); }

.lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  max-width: 420px;
  margin: 30px 0;
  background: var(--color60);
  border-color: rgba(43, 32, 21, 0.25);
  color: var(--ink);
  backdrop-filter: blur(1px);
  border-radius: 8px;
  padding: 10px;
}

.hero-cta { display: flex; gap: 14px; }
.btn { font-family: var(--font-ui); font-weight: 600; font-size: 15px; padding: 14px; 
  border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-primary { background: var(--coral); color: #2B1200; }
.btn-primary:hover { background: #FF8F6B; }
.btn-secondary { background: var(--color60); border-color: rgba(43,32,21,0.25); color: var(--ink); 
  backdrop-filter: blur(4px); }
.btn-secondary:hover { border-color: var(--ink); }

.motion-enable { 
  position: absolute; 
  z-index: 6; 
  bottom: 20px; 
  left: 50%; 
  transform: translateX(-50%); 
  font-family: var(--font-ui);
  font-weight: 600; 
  font-size: 13px; 
  padding: 10px 18px; 
  border-radius: 20px; 
  border: 1px solid rgba(43,32,21,0.2); 
  background: rgba(255,255,255,0.75); 
  backdrop-filter: blur(6px); 
  color: var(--ink); 
  cursor: pointer; 
  display: none; 
}
.motion-enable.visible { display: block; }

@media (max-width: 720px) { 
  .topbar-links { display: none; }
  .logo { display: none; }
  .logo-mobile { display: unset; }
  .hero-content { display: none; }
  .hero-content-mobile { display: unset; }
  .scrim { width: 100%; }
}


/* ══════════════════════════════════════════
   МЕНЮ ВЫБОРА ГОРОДА
══════════════════════════════════════════ */

.city-dropdown{position:relative;display:inline-block;}
.city-dropdown__trigger{display:flex;align-items:center;gap:8px;padding:6px 6px;background:#fff;border:1px solid #555;border-radius:50px;cursor:pointer;font-size:14px;color:#222;transition:border-color .5s ease;font-family:inherit}
.city-dropdown__trigger:hover{border-color:#EB008C}
.city-dropdown.is-open .city-dropdown__trigger{border-color:#EB008C}
.city-dropdown__current{display:flex;align-items:center;gap:5px}
.city-dropdown__pin{color:#555;transition:color .5s ease;}
.city-dropdown__trigger:hover .city-dropdown__pin{color:#EB008C;}
.city-dropdown__arrow{color:#555;transition:color .5s ease;}
.city-dropdown__trigger:hover .city-dropdown__arrow{color:#EB008C;}
.city-dropdown.is-open .city-dropdown__arrow{transform:rotate(180deg)}
.city-dropdown__menu{position:absolute;top:calc(100% + 6px);right:0;width:250px;z-index:1000;display:none;}
.city-dropdown.is-open .city-dropdown__menu{display:block}
.city-dropdown__panel{position:relative;background:#fff;border:1px solid #e5e5e5;border-radius:20px;box-shadow:0 8px 24px #0000001f;z-index:1000;overflow:hidden}
.city-dropdown__panel2{position:relative;background:#fff;border:1px solid #e5e5e5;border-radius:20px;box-shadow:0 8px 24px #0000001f;z-index:1000;overflow:hidden;margin-top:6px;}
.city-dropdown__search{padding:10px;border-bottom:1px solid #ffdec5}
.city-dropdown__search input{width:100%;padding:8px 10px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;box-sizing:border-box;background:rgba(235,0,140,.1);font-family: inherit;}
.city-dropdown__search input:focus{outline:none;border-color:#EB008C}
.city-dropdown__list{max-height:320px;overflow-y:auto;padding:6px 0}
.city-dropdown__group-label{padding:8px 14px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#999}
.city-dropdown__list .city-dropdown__group:nth-child(2) .city-dropdown__group-label{border-top:1px solid #ffdec5;padding-top:14px;margin-top:5px}
.city-dropdown__item{display:block;padding:9px 14px;font-size:14px;color:#333;text-decoration:none;transition:background .1s}
.city-dropdown__item:hover{background:rgba(235,0,140,.1);}
.city-dropdown__item.is-active{background:rgba(235,0,140,.1);color:#0000be;font-weight:500}
.city-dropdown__empty{padding:16px;text-align:center;color:#999;font-size:14px}

@media (max-width: 991px) {
    .city-dropdown__trigger{font-size:12px;justify-content:space-between;}
    button#themeReset{display:none;}
}


/* ══════════════════════════════════════════
    FOOTER CTA
══════════════════════════════════════════ */
.footer-cta {
  padding: 60px 40px; text-align: center; position: relative; overflow: hidden;
  display: flex; align-items: center; flex-direction: column;
}
.footer-cta::before {
  content: ''; position: absolute;
  top: 90px; right: -70px; width: 300px; height: 300px; border-radius: 50%;
  background: color-mix(in srgb, #fff 5%, transparent); pointer-events: none;
  box-shadow: 0 0 60px 30px color-mix(in srgb, #fff var(--cell-tag-shadow), transparent), inset 0 0 60px 30px  color-mix(in srgb, #fff var(--cell-tag-shadow), transparent); transition: all 2s ease-in-out;
}
html.dark .footer-cta::before {
  box-shadow: 0 0 60px 30px color-mix(in srgb, var(--color-brand) 100%, transparent), inset 0 0 60px 30px color-mix(in srgb, var(--color-brand) 100%, transparent)
}
.footer-cta::after {
  content: ''; position: absolute;
  bottom: 50px; left: 60px; width: 180px; height: 180px; border-radius: 50%;
  background: color-mix(in srgb, #fff 5%, transparent); pointer-events: none;
  box-shadow: 0 0 60px 10px color-mix(in srgb, #fff var(--cell-tag-shadow), transparent), inset 0 0 60px 10px  color-mix(in srgb, #fff var(--cell-tag-shadow), transparent); transition: all 2s ease-in-out;
}
html.dark .footer-cta::after {
  box-shadow: 0 0 60px 10px color-mix(in srgb, var(--color-brand) 100%, transparent), inset 0 0 60px 10px color-mix(in srgb, var(--color-brand) 100%, transparent)
}
.footer-cta h2 {
  font-size: clamp(28px,4vw,42px); font-weight: 700; letter-spacing: -0.03em;
  color: #fff; margin-bottom: 16px;
  position: relative; z-index: 1; transition: color .4s;
}
.footer-cta p {
  font-size: 18px; color: #fff; margin-bottom: 40px;
  font-weight: 300; position: relative; z-index: 1; transition: color .4s;
}
.footer-cta .btn-cta {
  position: relative; z-index: 1; background: #fff; color: var(--color-brand);
  padding: 16px 36px; border-radius: 50px; border: none; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: transform .2s, box-shadow .2s, color .4s;
  text-decoration: none; display: flex; gap: 10px; width: fit-content; align-items: stretch;
}
.footer-cta .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }

@media(max-width:640px){
  .footer-cta { padding: 50px 10px; }
}

/* ══════════════════════════════════════════
    FOOTER
══════════════════════════════════════════ */
footer { background-color: #171a1e; height: 500px; transition: background-color 2s ease; }
.footer-warp {
  background-color: var(--color-brand); overflow: hidden;
  border-bottom-left-radius: 32px; border-bottom-right-radius: 32px;
  transition: background-color 1.5s ease; }
.footer-block {
  background-color: #fff; height: 40px;
  border-bottom-left-radius: 32px; border-bottom-right-radius: 32px;
  transition: background-color .5s ease; }
.footer-block2 { background-color: var(--color-brand); height: 300px; transition: background-color 2s ease; }
.footer-content {
  background-color: #171a1e; color: #fff; font-size: 13px; font-weight: 700;
  transition: background-color 2s ease, color 0.5s ease; }
.footer-link { color: #fff; text-decoration: none; transition: color 0.5s ease; }
.footer-link:hover { color: var(--color-brand); }

html.dark footer { background-color: #fff; }
html.dark .footer-warp { background-color: #020617; }
html.dark .footer-block { background-color: var(--dark-bg); }
html.dark .footer-block2 { background-color: radial-gradient(circle at bottom, var(--color-brand), #020617 40%); }
html.dark .footer-content { background-color: #fff; color: #171a1e; font-size: 13px; font-weight: 700; }
html.dark .footer-link { color: #171a1e; }
html.dark .footer-link:hover { color: var(--color-brand); }

@media (max-width: 400px) {
    footer { margin-top: -1px; }
}