/* «Голубые озёра» — главная (одобрена Леонидом 12.10.2026; 13.10 — первый экран из четырёх частей по его голосовому:
   домики, озеро, термы, гостиница — швы живыми волнами). Оболочка (шапка, меню, кнопки, подвал) — obshchiy.css. */

:root {
  --goluboy: #a9c3e0;
  --goluboy-svet: #d3e2f2;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.bez-anim { scroll-behavior: auto; }
body {
  margin: 0; background: var(--krem); color: var(--chernila);
  font: 400 17px/1.6 var(--txt); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { list-style: none; padding: 0; }
.lupa-otkryta { overflow: hidden; }
:focus-visible { outline: 2px solid var(--goluboy-glub); outline-offset: 3px; }

/* ───────── общее ───────── */
.metka { font: 600 12px/1.3 var(--txt); letter-spacing: .26em; text-transform: uppercase; color: var(--dub); }
.zag { font: 300 clamp(40px, 5.4vw, 84px)/1.02 var(--zag); letter-spacing: -.005em; margin-top: 16px; }
.zag em { font-style: italic; font-weight: 400; color: var(--dub); }
.vvod { font: 400 18px/1.6 var(--txt); color: var(--chernila-2); max-width: 560px; margin-top: 20px; }

.js-anim [data-poyav] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--plavno) var(--zaderzhka, 0s), transform 1.1s var(--plavno) var(--zaderzhka, 0s);
}
.js-anim [data-poyav].vidno { opacity: 1; transform: none; }

/* ───────── первый экран: четыре части базы, швы — живые волны ───────── */
.geroy { position: relative; height: 100vh; height: 100svh; min-height: 600px; background: var(--kamen-temn); overflow: hidden; }
.kollazh { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.oblast { position: absolute; inset: 0; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.oblast--domiki { z-index: 1; }
.oblast--ozero { z-index: 2; clip-path: polygon(0 44%, 53% 44%, 53% 100%, 0 100%); }
.oblast--gost { z-index: 3; clip-path: polygon(53% 0, 100% 0, 100% 100%, 53% 100%); }
.oblast--termy { z-index: 4; clip-path: polygon(53% 54%, 100% 54%, 100% 100%, 53% 100%); }
.oblast__ramka { position: absolute; overflow: hidden; transform: scale(1.015); transition: transform 2.8s cubic-bezier(.2, .7, .2, 1); }
.oblast.fokus .oblast__ramka { transform: scale(1.06); }
.oblast__ramka img, .ozero-holst { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.oblast__ramka img { object-fit: cover; }
.oblast--domiki .oblast__ramka { left: 0; top: 0; width: 60%; height: 64%; }
.oblast--domiki img { object-position: 50% 58%; }
.oblast--ozero .oblast__ramka { left: 0; top: 26%; width: 62%; height: 74%; }
.oblast--ozero img { object-position: 50% 72%; }
.oblast--gost .oblast__ramka { left: 36%; top: 0; width: 64%; height: 72%; }
.oblast--gost img { object-position: 42% 62%; }
.oblast--termy .oblast__ramka { left: 36%; top: 38%; width: 64%; height: 68%; }   /* вывеска «Термы» — ниже шва */
.oblast--termy img { object-position: 50% 32%; }
.ozero-holst { pointer-events: none; }
.shvy { position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; overflow: visible; }
.shov { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.shov--oreol { stroke: rgba(186, 226, 255, .2); stroke-width: 16; }
.shov--svet { stroke: rgba(205, 234, 255, .55); stroke-width: 5; }
.shov--nit { stroke: #f6fcff; stroke-width: 1.7; }
.shov--tonko.shov--svet { stroke: rgba(205, 234, 255, .38); stroke-width: 3.5; }
.shov--tonko.shov--nit { stroke-width: 1.1; }

.yarlyk {
  position: absolute; z-index: 6; left: 0; top: 0; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center;
  padding: 10px 16px 10px 13px; border-radius: 14px; color: var(--led); pointer-events: none; white-space: nowrap;
  background: rgba(20, 28, 34, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(244, 251, 255, .18); transition: background .5s, box-shadow .5s, opacity .5s; will-change: transform;
}
.yarlyk.skryt { opacity: 0; }
.yarlyk i {
  grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--led);
  box-shadow: 0 0 0 4px rgba(186, 226, 255, .18), 0 0 14px 2px var(--led-oreol);
}
.yarlyk b { font: 500 20px/1.1 var(--zag); }
.yarlyk small { font: 700 10px/1.35 var(--txt); letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.yarlyk.fokus { background: rgba(244, 251, 255, .16); box-shadow: inset 0 0 0 1px rgba(244, 251, 255, .55), 0 0 26px rgba(186, 226, 255, .28); }
.js-anim .yarlyk.fokus i { animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 7px rgba(186, 226, 255, .1), 0 0 20px 4px var(--led-oreol); } }

.geroy::after {
  content: ""; position: absolute; z-index: 1; left: 0; bottom: 0; width: 62%; height: 72%; pointer-events: none;
  background: radial-gradient(115% 95% at 0% 100%, rgba(14, 22, 28, .82), rgba(14, 22, 28, .44) 46%, rgba(14, 22, 28, 0) 74%);
}
.geroy__tekst { position: absolute; z-index: 2; left: var(--pole); bottom: clamp(28px, 6vh, 64px); width: min(560px, 42vw); color: var(--led); }
.geroy__zag { display: flex; flex-direction: column; font-weight: inherit; }
.geroy__metka {
  display: inline-flex; align-items: center; gap: 12px; font: 700 13px/1.3 var(--txt); letter-spacing: .24em;
  text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.volna-ikon { width: 30px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(186, 226, 255, .8)); }
.geroy__imya {
  margin-top: 12px; font: 300 clamp(56px, 6.4vw, 100px)/.95 var(--zag); letter-spacing: -.01em; white-space: nowrap;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .3);
}
.geroy__fraza { margin-top: 14px; font: italic 400 clamp(22px, 2vw, 30px)/1.2 var(--zag); text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.geroy__fraza em { color: #dcefff; text-shadow: 0 0 18px rgba(170, 215, 255, .65); }
.geroy__kn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.geroy__akciya { margin-top: 18px; font: 500 14px/1.45 var(--txt); opacity: .95; }
.geroy__akciya b { display: inline-block; margin-right: 8px; padding: 4px 10px 3px; border-radius: 99px; background: var(--goluboy); color: #1f3550; font-weight: 700; }
.js-anim .geroy__tekst > * { animation: vsplyt 1.2s var(--plavno) both; }
.js-anim .geroy__tekst > :nth-child(2) { animation-delay: .12s; }
.js-anim .geroy__tekst > :nth-child(3) { animation-delay: .2s; }
.js-anim .geroy__tekst > :nth-child(4) { animation-delay: .28s; }
@keyframes vsplyt { from { opacity: 0; transform: translateY(22px); } }
.js-anim .kollazh { animation: rassvet 1.6s ease-out both; }
@keyframes rassvet { from { opacity: 0; } }
@media (max-height: 760px) and (min-width: 760px) and (min-aspect-ratio: 19/20) {
  .geroy__akciya { display: none; }
  .geroy__kn { margin-top: 20px; }
}

/* ───────── вся база ───────── */
.razdely { position: relative; padding: clamp(80px, 11vw, 160px) var(--pole); background: var(--krem) var(--zerno); }
.razdely__shapka { max-width: 980px; margin-bottom: clamp(40px, 6vw, 80px); }
.razdely__telo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.razdely__okno {
  position: sticky; top: 100px; height: min(calc(100vh - 140px), 760px); overflow: hidden; background: var(--kamen);
  border-radius: 46% 46% 26px 26px / 22% 22% 26px 26px; box-shadow: 0 40px 80px -40px rgba(42, 37, 32, .55);
}
.razdely__okno::before {
  content: ""; position: absolute; inset: -40px; background: url(img/fasad-eskiz.jpg) center / cover;
  filter: blur(30px) saturate(1.1); opacity: 0; transition: opacity .6s;
}
.razdely__okno.shir::before { opacity: .95; }
.razdely__okno img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08);
  transition: opacity .7s, transform 1.6s var(--plavno);
}
.razdely__okno img.tut { opacity: 1; transform: none; }
.razdely__okno img.shirokoe { object-fit: contain; }
.razdely__okno::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(0deg, rgba(20, 28, 34, .6), rgba(20, 28, 34, 0)); }
.razdely__okno-metka { position: absolute; z-index: 1; left: 30px; bottom: 26px; color: var(--led); font: italic 400 clamp(28px, 2.6vw, 38px)/1 var(--zag); }
.razdely__spisok li:last-child .razdel { border-bottom: 1px solid rgba(94, 58, 31, .18); }
.razdel {
  position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-areas: "n nazv strelka" "n tekst strelka"; column-gap: 18px;
  padding: 26px 6px 28px 0; border-top: 1px solid rgba(94, 58, 31, .18); text-decoration: none;
  transition: padding .45s var(--plavno);
}
.razdel__n {
  grid-area: n; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 6px;
  border-radius: 10px; color: #fff6ea; font: 700 13px/1 var(--txt); letter-spacing: .06em;
  background: var(--reyki-melko); box-shadow: inset 0 1px 0 rgba(255, 236, 210, .3), 0 6px 14px -8px rgba(94, 58, 31, .7);
  transition: box-shadow .4s;
}
.razdel__foto { display: none; }
.razdel__nazv { grid-area: nazv; font: 400 clamp(32px, 3.3vw, 50px)/1.05 var(--zag); transition: color .3s; }
.razdel__tekst { grid-area: tekst; max-width: 540px; margin-top: 8px; font: 400 16px/1.55 var(--txt); color: var(--chernila-2); }
.razdel__strelka {
  grid-area: strelka; align-self: center; display: grid; place-items: center; width: 52px; height: 52px; margin-left: 12px;
  border: 1px solid rgba(94, 58, 31, .25); border-radius: 50%; color: var(--dub); font-size: 20px;
  transition: background .35s, color .35s, border-color .35s, transform .35s var(--plavno);
}
.razdel.tut { padding-left: 14px; }
.razdel.tut .razdel__nazv, .razdel:hover .razdel__nazv { color: var(--dub); }
.razdel.tut .razdel__n { box-shadow: inset 0 1px 0 rgba(255, 236, 210, .3), 0 0 0 3px rgba(169, 195, 224, .55), 0 0 18px rgba(169, 195, 224, .8); }
.razdel:hover .razdel__strelka, .razdel.tut .razdel__strelka { background: var(--dub); color: #fff8ef; border-color: transparent; transform: translateX(4px); }

/* ───────── цифры на рейках ───────── */
.cifry { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 130px) var(--pole); color: #fff7ea; background: var(--reyki); }
.cifry__svet {
  position: absolute; left: -10%; width: 120%; height: 4px; border-radius: 4px; background: #fffaf0;
  box-shadow: 0 0 6px 1px rgba(255, 248, 232, .9), 0 0 28px 6px rgba(255, 240, 215, .42); transform: rotate(-6deg);
}
.cifry__svet--1 { top: 14%; }
.cifry__svet--2 { top: 88%; transform: rotate(-4deg); }
.cifry__spisok { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); max-width: 1320px; margin: 0 auto; }
.cifry li {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 28px); border-radius: 22px;
  background: rgba(30, 18, 10, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 210, .14), 0 20px 40px -24px rgba(0, 0, 0, .6);
}
.cifry b { font: 300 clamp(44px, 5.4vw, 88px)/1 var(--zag); color: #fff8ec; text-shadow: 0 0 30px rgba(255, 236, 205, .35); white-space: nowrap; }
.cifry span { font: 700 12.5px/1.45 var(--txt); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 244, 228, .86); }

/* ───────── новая глава: термы и гостиница ───────── */
.glava {
  position: relative; overflow: hidden; padding: clamp(90px, 11vw, 170px) var(--pole) clamp(70px, 9vw, 130px);
  color: var(--nebo-chernila); background: linear-gradient(180deg, #c6d8eb, #b4cae2 55%, #a9c3e0);
}
.glava__volny { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.glava__volny path { fill: rgba(244, 251, 255, .34); }
.glava__volny .glava__volna-2 { fill: rgba(111, 147, 189, .2); }
.glava .metka { color: var(--nebo-tekst); }
.glava .zag em { color: #2b5683; }
.glava__verh { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.vyveska {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 4 / 3.3; border-radius: 24px; overflow: hidden; background: var(--reyki);
  box-shadow: 0 34px 70px -34px rgba(40, 24, 12, .7), inset 0 0 0 1px rgba(255, 236, 210, .12);
}
.vyveska::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 30%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(186, 226, 255, .35), rgba(186, 226, 255, 0)); pointer-events: none;
}
.vyveska__t {
  font: 500 clamp(52px, 6.6vw, 104px)/1 var(--zag); letter-spacing: .14em; padding-left: .14em; text-transform: uppercase; color: #f6fcff;
  text-shadow: 0 0 6px #fff, 0 0 18px rgba(190, 230, 255, .95), 0 0 42px rgba(150, 205, 255, .75), 0 0 80px rgba(120, 185, 255, .45);
}
.vyveska__p {
  font: 700 clamp(12px, 1.15vw, 16px)/1 var(--txt); letter-spacing: .36em; padding-left: .36em; text-transform: uppercase; color: #eef8ff;
  text-shadow: 0 0 8px rgba(190, 230, 255, .9), 0 0 22px rgba(150, 205, 255, .6);
}
.vyveska__volna {
  width: min(220px, 42%); height: auto; margin-top: 12px; fill: none; stroke: #f4fbff; stroke-width: 2.2; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(190, 230, 255, .95)) drop-shadow(0 0 14px rgba(150, 205, 255, .7));
}
.js-anim .vyveska.vidno .vyveska__t, .js-anim .vyveska.vidno .vyveska__volna { animation: neon 2.2s linear .5s both; }
@keyframes neon {
  0% { opacity: .15; } 6% { opacity: 1; } 9% { opacity: .25; } 13% { opacity: 1; } 30% { opacity: 1; }
  32% { opacity: .5; } 34% { opacity: 1; } 100% { opacity: 1; }
}
.citata p { margin-top: 26px; font: italic 300 clamp(24px, 2.4vw, 36px)/1.3 var(--zag); }
.citata cite { display: block; margin-top: 14px; font: 700 12px/1.3 var(--txt); letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--nebo-tekst); }

.glava__dva { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(50px, 7vw, 100px); }
.budet {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); overflow: hidden; border-radius: 26px;
  background: rgba(247, 242, 234, .86); color: var(--chernila); text-decoration: none;
  box-shadow: 0 30px 60px -36px rgba(31, 46, 61, .6); transition: transform .45s var(--plavno), box-shadow .45s;
}
.budet:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -36px rgba(31, 46, 61, .7); }
.budet__foto { position: relative; min-height: 270px; overflow: hidden; }
.budet__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--plavno); }
.budet__foto--shir img { object-position: 30% 50%; }
.budet:hover .budet__foto img { transform: scale(1.05); }
.budet__telo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 28px 26px; }
.budet .cip { margin-left: 0; }
.budet__zag { font: 400 clamp(26px, 2.3vw, 34px)/1.08 var(--zag); }
.budet__tekst { font: 400 15.5px/1.55 var(--txt); color: var(--chernila-2); }
.budet__dalee { margin-top: auto; padding-top: 8px; font: 700 12.5px/1 var(--txt); letter-spacing: .16em; text-transform: uppercase; color: var(--dub); }

.eskizy { position: relative; margin-top: clamp(50px, 7vw, 100px); }
.eskizy__shapka { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.eskizy__zag { font: italic 400 clamp(26px, 2.5vw, 36px)/1.1 var(--zag); }
.eskizy__kn { display: flex; gap: 10px; }
.krug-kn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(31, 46, 61, .3); background: rgba(247, 242, 234, .55);
  cursor: pointer; font-size: 18px; transition: background .3s, color .3s, border-color .3s, opacity .3s;
}
.krug-kn:hover:not(:disabled) { background: var(--dub); color: #fff8ef; border-color: transparent; }
.krug-kn:disabled { opacity: .35; cursor: default; }
.eskizy__lenta {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--pole)); padding: 0 var(--pole) 8px; scroll-padding: 0 var(--pole); cursor: grab;
}
.eskizy__lenta::-webkit-scrollbar { display: none; }
.eskizy__lenta figure { flex: 0 0 auto; scroll-snap-align: start; }
.eskizy__lenta img {
  height: clamp(220px, 29vw, 420px); width: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; cursor: zoom-in;
  box-shadow: 0 24px 50px -30px rgba(31, 46, 61, .65); -webkit-user-drag: none;
}
.eskizy__lenta .shir img { aspect-ratio: 1280 / 472; }
.eskizy__lenta figcaption { margin-top: 12px; font: 700 12px/1.3 var(--txt); letter-spacing: .16em; text-transform: uppercase; color: var(--nebo-tekst); }
.eskizy__prim { margin-top: 22px; font: 400 15px/1.5 var(--txt); color: var(--nebo-tekst); }
.eskizy__prim a { color: var(--nebo-chernila); }

/* ───────── ролики историями — на камне пола ───────── */
.roliki {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: center;
  padding: clamp(90px, 11vw, 160px) var(--pole); color: #eef3f6;
  background:
    radial-gradient(60% 50% at 18% 20%, rgba(127, 160, 190, .32), rgba(127, 160, 190, 0) 70%),
    radial-gradient(50% 60% at 88% 84%, rgba(167, 118, 79, .24), rgba(167, 118, 79, 0) 70%),
    var(--mramor), linear-gradient(160deg, #42555f, #2a3640);
}
.roliki .metka { color: var(--med); }
.roliki .zag em { color: #d4e7f7; }
.roliki .vvod { color: rgba(238, 243, 246, .78); }
.roliki__shagi { margin-top: 34px; counter-reset: sh; max-width: 520px; }
.roliki__shagi li {
  position: relative; padding: 13px 0 13px 48px; border-top: 1px solid rgba(238, 243, 246, .12); cursor: pointer;
  font: 400 19px/1.3 var(--txt); color: rgba(238, 243, 246, .6); transition: color .3s;
}
.roliki__shagi li::before { counter-increment: sh; content: counter(sh, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: 700 11px/1 var(--txt); letter-spacing: .14em; color: var(--med); }
.roliki__shagi li::after {
  content: ""; position: absolute; left: 48px; right: 0; bottom: -1px; height: 1px; background: #f4fbff;
  box-shadow: 0 0 8px rgba(186, 226, 255, .9); transform-origin: left; transform: scaleX(var(--dolya, 0));
}
.roliki__shagi li span { margin-left: 8px; font-size: 13px; opacity: .6; }
.roliki__shagi li.tut, .roliki__shagi li:hover { color: #fff; }
.istorii {
  position: relative; justify-self: center; width: min(380px, 100%); aspect-ratio: 9 / 16; overflow: hidden; cursor: pointer;
  border-radius: 32px; background: #1b242b;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(244, 251, 255, .14), 0 0 0 10px rgba(20, 28, 34, .35);
}
.istorii figure { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.istorii figure.tut { opacity: 1; }
.istorii video { width: 100%; height: 100%; object-fit: cover; }
.istorii figcaption { position: absolute; left: 20px; right: 20px; bottom: 20px; color: #fff; font: italic 400 28px/1.1 var(--zag); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.istorii__polosy { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; gap: 5px; }
.istorii__polosy i { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.istorii__polosy i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--dolya, 0)); }
/* экскурсия Леонида — с его голосом: в историях всё тихо, звук по кнопке (glavnaya.js) */
.istorii__zvuk {
  position: absolute; z-index: 3; top: 30px; left: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 10px; border: 1px solid rgba(244, 251, 255, .34); border-radius: 999px; cursor: pointer;
  font: 600 13px/1 var(--txt); letter-spacing: .02em; color: #fff;
  background: rgba(20, 28, 34, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); transition: background .25s, border-color .25s, box-shadow .25s;
}
.istorii__zvuk[hidden] { display: none; }
.istorii__zvuk:hover { background: rgba(20, 28, 34, .68); border-color: rgba(244, 251, 255, .6); }
.istorii__zvuk:focus-visible { outline: 2px solid #f4fbff; outline-offset: 3px; }
.istorii__zvuk.vkl { border-color: rgba(186, 226, 255, .85); box-shadow: 0 0 16px rgba(186, 226, 255, .45), 0 10px 24px -12px rgba(0, 0, 0, .7); }
.istorii__zvuk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.istorii__zvuk .zv-dinamik { fill: currentColor; }
.istorii__zvuk .zv-volny, .istorii__zvuk.vkl .zv-krest { display: none; }
.istorii__zvuk.vkl .zv-volny { display: inline; }

/* ───────── отзывы ───────── */
.otzyvy {
  display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(30px, 5vw, 90px);
  padding: clamp(90px, 11vw, 160px) var(--pole); background: var(--krem-svet) var(--zerno);
}
.otzyvy__ball { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 10px; }
.otzyvy__ball b { font: 300 clamp(96px, 11vw, 170px)/.85 var(--zag); color: var(--dub); }
.otzyvy__ball span { font: 700 13px/1.4 var(--txt); letter-spacing: .16em; text-transform: uppercase; }
.otzyvy__ball a { margin-top: 12px; font: 700 12.5px/1 var(--txt); letter-spacing: .16em; text-transform: uppercase; color: var(--dub); text-decoration: none; }
.otzyvy__spisok { display: grid; gap: clamp(36px, 4.4vw, 60px); }
.otzyv { position: relative; padding-left: clamp(34px, 4.4vw, 70px); border-left: 1px solid rgba(94, 58, 31, .2); }
.otzyv::before {
  content: "«"; position: absolute; left: clamp(6px, 1.2vw, 18px); top: -.12em; color: var(--goluboy-glub);
  font: 400 clamp(52px, 5vw, 76px)/1 var(--zag);
}
.otzyv:nth-child(2) { margin-left: clamp(0px, 6vw, 110px); }
.otzyv blockquote { font: italic 400 clamp(22px, 2.15vw, 31px)/1.36 var(--zag); }
.otzyv figcaption { margin-top: 16px; font: 500 13px/1.4 var(--txt); letter-spacing: .06em; color: var(--chernila-2); }
.otzyv figcaption b { color: var(--chernila); font-weight: 700; }

/* ───────── финал: вечер у воды ───────── */
.final {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center;
  overflow: hidden; padding: clamp(100px, 12vw, 180px) var(--pole); color: var(--led); background: #16212a;
}
.final__fon { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; opacity: .62; }
.final::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(16, 24, 30, .92), rgba(16, 24, 30, .55) 55%, rgba(16, 24, 30, .25)), linear-gradient(0deg, rgba(16, 24, 30, .6), rgba(16, 24, 30, 0) 40%);
}
.final__tekst, .final__karta { position: relative; z-index: 2; }
.final .metka { color: var(--med); }
.final .zag em { color: #dcefff; text-shadow: 0 0 22px rgba(170, 215, 255, .5); }
.final__adres { max-width: 520px; margin-top: 22px; font: 400 18px/1.6 var(--txt); color: rgba(244, 251, 255, .86); }
.final__chasy { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 14px 34px; margin-top: 30px; }
.final__chasy dt { font: 700 11px/1.2 var(--txt); letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 251, 255, .6); }
.final__chasy dd { margin-top: 6px; font: 400 28px/1.2 var(--zag); white-space: nowrap; }
.final__kn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.final__prim { margin-top: 18px; max-width: 520px; font: 400 14px/1.5 var(--txt); color: rgba(244, 251, 255, .72); }
.final__karta { overflow: hidden; border-radius: 26px; background: #22303a; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(244, 251, 255, .15); }
.final__karta iframe { display: block; width: 100%; height: clamp(320px, 36vw, 460px); border: 0; }
.final__marshrut {
  display: flex; justify-content: space-between; padding: 18px 22px; background: rgba(247, 242, 234, .97); color: var(--chernila);
  font: 700 12.5px/1 var(--txt); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}

/* ───────── лупа ───────── */
.lupa[hidden] { display: none; }
.lupa { position: fixed; z-index: 100; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 24px; background: rgba(16, 22, 28, .95); }
.lupa__kadr { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.lupa__kadr img { max-width: 100%; max-height: calc(100vh - 130px); border-radius: 14px; object-fit: contain; }
.lupa__kadr figcaption { color: #e9eef2; font: 400 15px/1.4 var(--txt); text-align: center; }
.lupa__schet { margin-left: 8px; opacity: .6; }
.lupa__zakryt { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; cursor: pointer; }
.lupa__strelka { width: 54px; height: 54px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; color: #fff; font-size: 20px; cursor: pointer; }
.lupa__strelka[hidden] { visibility: hidden; display: block; }

/* ───────── средние экраны ───────── */
@media (max-width: 1100px) {
  .budet { grid-template-columns: 1fr; }
  .budet__foto { min-height: 230px; }
}
@media (max-width: 900px) {
  .cifry__spisok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final { grid-template-columns: 1fr; }
  .final__chasy { grid-template-columns: repeat(2, auto); }
  .otzyvy { grid-template-columns: 1fr; }
  .otzyvy__ball { position: static; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
  .otzyvy__ball a { margin-top: 0; }
}

/* ───────── узкое окно и телефон: четыре части стопкой, текст под ними ───────── */
@media (max-width: 759px), (max-aspect-ratio: 19/20) {
  .geroy { height: auto; min-height: 0; }
  .kollazh { position: relative; height: clamp(470px, 72svh, 760px); }
  .oblast--domiki .oblast__ramka { left: 0; top: 0; width: 100%; height: 52%; }
  .oblast--domiki img { object-position: 50% 64%; }
  .oblast--ozero { clip-path: polygon(0 34%, 100% 34%, 100% 100%, 0 100%); }
  .oblast--ozero .oblast__ramka { left: 0; top: 14%; width: 100%; height: 60%; }
  .oblast--ozero img { object-position: 50% 70%; }
  .oblast--termy { z-index: 3; clip-path: polygon(0 55.5%, 100% 55.5%, 100% 100%, 0 100%); }
  .oblast--termy .oblast__ramka { left: 0; top: 45%; width: 100%; height: 48%; }
  .oblast--termy img { object-position: 50% 25%; }
  .oblast--gost { z-index: 4; clip-path: polygon(0 79%, 100% 79%, 100% 100%, 0 100%); }
  .oblast--gost .oblast__ramka { left: 0; top: 52%; width: 100%; height: 48%; }
  .oblast--gost img { object-position: 40% 55%; }
  .geroy::after { display: none; }
  .geroy__tekst {
    position: relative; left: auto; bottom: auto; width: auto; padding: 30px var(--pole) 40px;
    background: radial-gradient(80% 60% at 10% 0%, rgba(127, 160, 190, .3), rgba(127, 160, 190, 0) 70%), var(--mramor), linear-gradient(170deg, #34444f, #24303a);
  }
  .geroy__imya { font-size: clamp(48px, 13.4vw, 84px); white-space: normal; }
  .geroy__metka { font-size: 11.5px; letter-spacing: .2em; }
}

@media (max-width: 759px) {
  body { font-size: 16px; }
  .yarlyk { column-gap: 8px; padding: 7px 12px 7px 10px; border-radius: 12px; }
  .yarlyk i { width: 7px; height: 7px; }
  .yarlyk b { font-size: 16.5px; }
  .yarlyk small { font-size: 8.5px; letter-spacing: .12em; }
  .geroy__tekst { padding-top: 26px; }
  .geroy__fraza { margin-top: 12px; font-size: 21px; }
  .geroy__kn { margin-top: 20px; }
  .geroy__vsya { display: none; }

  .zag { font-size: clamp(38px, 10.6vw, 52px); }
  .vvod { font-size: 16.5px; }
  .razdely__telo { display: block; }
  .razdely__okno { display: none; }
  .razdel, .razdel.tut {
    grid-template-columns: minmax(0, 1fr) 100px; grid-template-areas: "n foto" "nazv foto" "tekst foto";
    column-gap: 16px; padding: 22px 0;
  }
  .razdel__n, .razdel.tut .razdel__n {
    width: auto; height: auto; margin: 0 0 6px; place-items: start; background: none; box-shadow: none;
    color: var(--dub); font-size: 11px; letter-spacing: .22em;
  }
  .razdel__foto { display: block; grid-area: foto; align-self: start; width: 100px; height: 126px; overflow: hidden; border-radius: 50px 50px 14px 14px; }
  .razdel__foto img { width: 100%; height: 100%; object-fit: cover; }
  .razdel__foto--shir img { object-position: 30% 50%; }
  .razdel__nazv { font-size: 31px; }
  .razdel__tekst { font-size: 14.5px; }
  .razdel__strelka { display: none; }
  .razdel.tut .razdel__nazv { color: inherit; }

  .cifry__svet--1 { top: 6%; }
  .cifry__svet--2 { top: 95%; }
  .cifry li { border-radius: 18px; }
  .cifry span { font-size: 11px; letter-spacing: .1em; }

  .glava__verh { grid-template-columns: 1fr; }
  .vyveska { aspect-ratio: 4 / 2.6; }
  .glava__dva { grid-template-columns: 1fr; }
  .eskizy__kn { display: none; }
  .eskizy__lenta img { height: 210px; border-radius: 16px; }

  .roliki { grid-template-columns: 1fr; }
  .roliki__shagi { display: none; }
  .istorii { width: min(340px, 100%); border-radius: 26px; }

  .otzyv:nth-child(2) { margin-left: 0; }
  .otzyv { padding-left: 30px; }
  .otzyv::before { left: 4px; font-size: 48px; }

  .final__chasy dd { font-size: 24px; }
  .final__kn .kn { flex: 1 1 100%; }
  .final__karta iframe { height: 320px; }

  .lupa { grid-template-columns: minmax(0, 1fr); padding: 64px 10px 20px; }
  .lupa__strelka { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}