@font-face{font-family:Gilroy;src:url(/fonts/Gilroy-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Gilroy;src:url(/fonts/Gilroy-ExtraBold.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  --brown:#734D3D; --dark:#4D2C1E; --ink:#4D4D4D; --paper:#FBF8F6; --sand:#F1EAE4;
  --line:rgba(115,77,61,.16); --white:#FFFFFF;
  --pad:clamp(20px,4vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{font-family:Gilroy,'Helvetica Neue',Arial,sans-serif;font-weight:300;color:var(--ink);
  background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.eb{font-weight:800}

/* ── прелоадер: логотип рисуется по контуру ── */
#pre{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:28px;transition:opacity .8s ease}
#pre.off{opacity:0;pointer-events:none}
#pre .mark{width:min(260px,60vw)}
#pre .mark path{fill:none;stroke:var(--brown);stroke-width:1.2;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0;fill:var(--brown)}}
#pre .bar{width:min(200px,44vw);height:1px;background:var(--line);position:relative;overflow:hidden}
#pre .bar i{position:absolute;inset:0;background:var(--brown);transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease}
#pre small{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brown);opacity:.6}

/* ── 3D слой ── */
#world{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;transition:opacity .6s ease}
#vign{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(20,12,8,.45) 100%)}
#grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── шапка ── */
header{position:fixed;inset:0 0 auto;z-index:60;padding:22px var(--pad);display:flex;align-items:center;
  justify-content:space-between;gap:20px;transition:background .45s,padding .45s,box-shadow .45s}
header.solid{background:rgba(251,248,246,.9);backdrop-filter:blur(14px);padding:14px var(--pad);
  box-shadow:0 1px 0 var(--line)}
header .logo{height:32px;transition:filter .45s}
header .logo.light{filter:brightness(0) invert(1)}
header nav{display:flex;gap:clamp(16px,2vw,34px);font-size:13px;letter-spacing:.02em}
header nav a{position:relative;padding:4px 0;opacity:.85;transition:.3s}
header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;
  transition:right .35s cubic-bezier(.4,0,.2,1)}
header nav a:hover:after{right:0}
header .call{border:1px solid currentColor;padding:11px 22px;font-size:12px;letter-spacing:.06em;
  border-radius:2px;transition:.35s;white-space:nowrap}
header .call:hover{background:var(--brown);border-color:var(--brown);color:#fff}
header.on-dark{color:#fff}
@media(max-width:920px){header nav{display:none}header .call{padding:9px 16px}}

/* ── общий каркас секций ── */
main{position:relative;z-index:2}
section{position:relative;padding:clamp(80px,12vh,170px) var(--pad);background:var(--paper);scroll-margin-top:90px}
/* Кадр дома на первом экране лежит картинкой, а не фоном: так один и тот же
   файл берут и разметка, и сцена, и браузер качает его один раз. Пока сцена
   поднимается, человек уже видит дом. */
.hero{background:#1A100B}
.hero-kadr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Живой кадр ложится поверх постера и проявляется, когда пошёл: подмены кадра
   на паузе не видно, а на медленной сети остаётся картинка. */
.hero-video{opacity:0;transition:opacity 1.2s ease}
.hero-video.idet{opacity:1}
.inner{max-width:1280px;margin:0 auto;width:100%}
.kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brown);opacity:.7;margin-bottom:20px}
h1,h2,h3{font-weight:300;color:var(--brown);line-height:1.04;letter-spacing:-.015em}
h2{font-size:clamp(30px,5vw,68px);margin-bottom:26px}
h3{font-size:clamp(20px,2.4vw,30px)}
p.lead{font-size:clamp(16px,1.5vw,20px);max-width:60ch;opacity:.9}
.paper{background:var(--paper)}
.sandbg{background:var(--sand)}
.glass{background:rgba(251,248,246,.72);backdrop-filter:blur(18px);border:1px solid var(--line);
  border-radius:3px;padding:clamp(24px,4vw,54px)}

/* строки, которые проявляются */
.line{display:block;overflow:hidden}
.line > span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.in .line > span{transform:none}
.in .line:nth-child(2) > span{transition-delay:.09s}
.in .line:nth-child(3) > span{transition-delay:.18s}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* ── первый экран ── */
.hero:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(85% 72% at 8% 78%,rgba(27,17,12,.82) 0%,rgba(27,17,12,.26) 62%,rgba(27,17,12,0) 100%),linear-gradient(180deg,rgba(27,17,12,.72) 0%,rgba(27,17,12,.3) 26%,rgba(27,17,12,.3) 46%,rgba(27,17,12,.94) 100%)}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
  padding-bottom:clamp(40px,8vh,90px)}
.hero h1{color:#fff;font-size:clamp(40px,8.4vw,132px);letter-spacing:-.03em;line-height:.96}
.hero h1 b{font-weight:800}
.hero .sub{margin-top:26px;max-width:52ch;font-size:clamp(15px,1.5vw,19px);color:rgba(255,255,255,.88)}
.hero .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:2px;font-size:13px;
  letter-spacing:.06em;border:1px solid transparent;transition:.35s;background:#fff;color:var(--dark)}
.btn:hover{background:var(--brown);color:#fff}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn.dark{background:var(--brown);color:#fff}
.btn.dark:hover{background:var(--dark)}
.hero .marks{position:absolute;left:var(--pad);right:var(--pad);bottom:18px;display:flex;justify-content:space-between;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ── цифры ── */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(20px,3vw,40px)}
.nums .n{font-size:clamp(38px,5vw,72px);font-weight:800;color:var(--brown);line-height:1;
  font-variant-numeric:tabular-nums}
.nums .t{margin-top:10px;font-size:13px;opacity:.75;max-width:22ch}

/* ── манифест ── */
.manifest{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,90px);align-items:center}
@media(max-width:900px){.manifest{grid-template-columns:1fr}}
.ul{list-style:none}
.ul li{padding:16px 0 16px 28px;border-bottom:1px solid var(--line);position:relative;font-size:clamp(15px,1.3vw,17px)}
.ul li:before{content:'';position:absolute;left:0;top:26px;width:12px;height:1px;background:var(--brown)}

/* ── материалы ── */
.mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mat{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px}
.mat img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.mat:hover img{transform:scale(1.06)}
.mat figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff;font-size:14px;
  background:linear-gradient(0deg,rgba(40,22,14,.8),transparent)}
.mat figcaption b{display:block;font-weight:800;font-size:17px;margin-bottom:4px}

/* ── резиденции ── */
.plan{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:980px){.plan{grid-template-columns:1fr}}
.floors{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.floors button{border:1px solid var(--line);background:transparent;color:var(--ink);font-size:13px;
  padding:11px 20px;border-radius:2px;transition:.3s}
.floors button.on,.floors button:hover{background:var(--brown);color:#fff;border-color:var(--brown)}
.floorplan{border:1px solid var(--line);background:#fff;padding:14px;border-radius:2px;position:relative;overflow:hidden}
.floorplan img{width:100%;transition:opacity .5s}
.lots{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:16px}
/* Статус видно до того, как человек прочитал цену: это первое, что спрашивают. */
.lot .метка{position:absolute;top:12px;right:12px;z-index:2;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;border-radius:100px;background:rgba(63,125,91,.14);color:#3F7D5B}
.lot .метка.reserved{background:rgba(180,131,47,.16);color:#8A6410}
.lot .метка.sold{background:rgba(163,86,76,.14);color:#8E4238}
#порядок{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:100px;
  padding:10px 16px;font-size:13px;font-family:inherit;margin-left:auto}
.lot{border:1px solid var(--line);background:#fff;padding:22px 20px;display:flex;flex-direction:column;gap:12px;
  border-radius:2px;transition:.35s;position:relative;overflow:hidden}
.lot:before{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:var(--brown);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.lot:hover:before{transform:none}
.lot:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(77,44,30,.55)}
.lot .num{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);opacity:.65}
.lot .area{font-size:32px;font-weight:800;color:var(--brown);line-height:1}
.lot .area span{font-size:14px;font-weight:300}
.lot .meta{font-size:13px;opacity:.85;flex:1}
.lot .ask{margin-top:4px;border:1px solid var(--brown);color:var(--brown);text-align:center;padding:11px;
  font-size:12px;letter-spacing:.05em;transition:.3s;border-radius:2px}
.lot .ask:hover{background:var(--brown);color:#fff}
.lot.sold{opacity:1}
.lot.sold .ph img,.lot.sold img{filter:grayscale(1);opacity:.55}
.lot.sold .area,.lot.sold .num,.lot.sold .meta{opacity:.7}
.lot.sold .ask{background:var(--sand);border-color:transparent;color:var(--brown);opacity:.9}
.lot.sold .ask{border-color:var(--line);color:var(--ink);pointer-events:none}

/* ── галерея интерьеров ── */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.gal figure{position:relative;overflow:hidden;border-radius:2px}
.gal figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.22,1,.36,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff;font-size:13px;
  background:linear-gradient(0deg,rgba(40,22,14,.72),transparent)}
.g-a{grid-column:span 7}
.g-b{grid-column:span 5}
/* Верхний ряд держит одну высоту на обе карточки. С пропорциями 16/11 и 4/3 при
   разной ширине низ кадров расходился на сотню пикселей, и ряд читался кривым. */
.g-a,.g-b{height:clamp(250px,31vw,440px)}
.g-c{grid-column:span 4;aspect-ratio:1}
.g-d{grid-column:span 4;aspect-ratio:1}
.g-e{grid-column:span 4;aspect-ratio:1}
@media(max-width:820px){.gal{grid-template-columns:repeat(6,1fr)}
  .g-a,.g-b{grid-column:span 6;height:clamp(200px,52vw,340px)}
  .g-c,.g-d,.g-e{grid-column:span 3}}

/* ── локация ── */
.dots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;margin-top:36px}
.dots b{display:block;font-size:clamp(26px,3vw,38px);font-weight:800;color:var(--brown);line-height:1}
.dots span{font-size:13px;opacity:.75}

/* ── собственник ── */
.owner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,5vw,80px);align-items:center}
@media(max-width:900px){.owner{grid-template-columns:1fr}}
.owner q{quotes:none;display:block;font-size:clamp(19px,2.3vw,30px);color:var(--brown);line-height:1.4}
.owner .who{margin-top:26px;font-size:14px;opacity:.85}
.owner .who b{display:block;font-size:19px;font-weight:800;color:var(--brown);margin-bottom:4px}

/* ── форма ── */
/* Под формой лежит фактура кортена, снятая макро, поверх неё тёмная вуаль:
   плоская коричневая заливка на весь экран читается дёшево, фактура держит
   тот же материал, что на фасаде дома. */
.form{background:var(--dark) url(/img/tex-corten-macro.webp) center/cover;color:#fff;position:relative}
.form > *{position:relative;z-index:2}
.form:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,22,15,.93),rgba(26,16,11,.96))}
.form h2,.form .kicker{color:#fff}
.form .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
@media(max-width:900px){.form .grid{grid-template-columns:1fr}}
.form input,.form textarea,.form select{width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.28);color:#fff;font-family:inherit;font-size:16px;
  padding:15px 0;margin-bottom:22px;outline:none;transition:border-color .3s}
.form input:focus,.form textarea:focus,.form select:focus{border-color:#fff}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.42)}
.form select option{background:var(--dark)}
.form button{width:100%;padding:18px;border:0;border-radius:2px;background:#fff;color:var(--dark);
  font-size:14px;font-weight:800;letter-spacing:.04em;transition:.3s}
.form button:hover{background:var(--brown);color:#fff}
.form .small{font-size:12px;opacity:.5;margin-top:14px}
.contacts{font-size:16px;line-height:2.1;margin-top:36px}
.contacts a{border-bottom:1px solid rgba(255,255,255,.3)}
.ok{display:none;border:1px solid rgba(255,255,255,.35);padding:28px;font-size:16px;border-radius:2px}

footer{background:var(--dark);color:rgba(255,255,255,.72);padding:36px var(--pad);font-size:12px;
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer img{height:26px;filter:brightness(0) invert(1);opacity:.8}

/* курсор */
#cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--brown);border-radius:50%;
  pointer-events:none;z-index:150;transform:translate(-50%,-50%);
  transition:width .3s,height .3s,background .3s,border-color .3s;
  mix-blend-mode:difference;opacity:0;display:flex;align-items:center;justify-content:center}
/* Подпись внутри курсора: на кадре «смотреть», на колоде «листать». Человеку
   не приходится гадать, что тут вообще можно сделать. */
#cursor span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:0;
  transition:opacity .25s;white-space:nowrap}
#cursor.podpis{width:88px;height:88px;background:rgba(115,77,61,.9);border-color:transparent;mix-blend-mode:normal}
#cursor.podpis span{opacity:1}
@media(pointer:fine){#cursor{opacity:.7}}
#cursor.big{width:66px;height:66px;background:rgba(115,77,61,.18)}

@media (prefers-reduced-motion: reduce){
  #world{display:none}
  .rv,.line > span{opacity:1!important;transform:none!important;transition:none!important}
  .hero{background:url(/img/r-01.webp) center/cover}
}

/* ── доступность: видимый фокус и переход к содержимому ── */
:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--brown);color:#fff;padding:12px 20px;
  font-size:14px;border-radius:0 0 3px 0}
.skip:focus{left:0}

/* ── тач-зоны: на телефоне палец не попадает в ссылку меньше 44 пикселей ── */
@media (pointer: coarse) {
  header nav a, .tg-nav a, footer a, .contacts a, .ul li a { min-height:44px; display:inline-flex; align-items:center }
  .floors button, .filters button { min-height:44px }
  .lot .ask, .rez-card .ask { min-height:46px; display:flex; align-items:center; justify-content:center }
}
header nav a{padding:10px 0}
footer a{padding:6px 0;display:inline-block}

/* ── меню на телефоне: без него разделы недостижимы ── */
.burger{display:none;width:44px;height:44px;border:1px solid currentColor;border-radius:2px;background:transparent;
  color:inherit;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger i{display:block;width:18px;height:1px;background:currentColor;transition:.3s}
.burger.on i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
.shторка{position:fixed;inset:0;z-index:55;background:var(--dark);display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:0 var(--pad);transform:translateY(-100%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.shторка.on{transform:none}
.shторка a{color:#fff;font-size:clamp(26px,7vw,40px);padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.shторка .low{margin-top:26px;font-size:15px;color:rgba(255,255,255,.7);display:grid;gap:10px}
.shторка .low a{font-size:16px;border:0;padding:0}
@media(max-width:920px){.burger{display:flex}}

/* ── форма: подпись у каждого поля и понятная ошибка ── */
.field{position:relative;margin-bottom:22px}
.field label{position:absolute;left:0;top:14px;font-size:16px;color:rgba(255,255,255,.45);
  pointer-events:none;transition:.25s}
.field input,.field textarea,.field select{margin-bottom:0}
.field.up label{top:-9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.field .oshibka{display:none;font-size:12px;color:#E9A79B;margin-top:6px}
.field.bad input,.field.bad textarea{border-color:#E9A79B}
.field.bad .oshibka{display:block}
.form input:focus-visible,.form textarea:focus-visible,.form select:focus-visible{outline:2px solid #fff;outline-offset:3px}
.form button[disabled]{opacity:.6;cursor:default}

/* ── проём в трёхмерный мир ─────────────────────────────────────────────
   Секции сайта непрозрачные, поэтому сцена за ними не видна. Проём это
   разрыв на весь экран, где фон отсутствует и видно дом, а камера в этот
   момент идёт дальше по своему пути. Текст держится на вуали, чтобы читался
   на любом кадре. Без анимации (и там, где сцена не поднялась) на его месте
   остаётся кадр дома фоном, пустой чёрной дыры не бывает. */
.portal{background:transparent;min-height:100svh;display:flex;align-items:center;
  padding:calc(78px + clamp(50px,8vh,110px)) var(--pad) clamp(60px,10vh,120px);
  position:relative;color:#fff;overflow:hidden}
.portal:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(26,16,11,.94) 0%,rgba(26,16,11,.86) 30%,
    rgba(26,16,11,.5) 58%,rgba(26,16,11,.16) 82%,rgba(26,16,11,.06) 100%)}
.portal .portal-in{position:relative;z-index:2;max-width:1160px;margin:0 auto;width:100%}
.portal .kicker{color:rgba(255,255,255,.72)}
.portal q,.portal .q{display:block;font-size:clamp(27px,4.4vw,68px);line-height:1.08;font-weight:300;
  letter-spacing:-.02em;color:#fff;quotes:none;max-width:20ch}
@media(max-width:700px){.portal q,.portal .q{max-width:16ch;font-size:clamp(26px,7.4vw,40px)}}
.portal .note{margin-top:24px;max-width:46ch;font-size:clamp(14px,1.4vw,17px);color:rgba(255,255,255,.82)}
@media (prefers-reduced-motion: reduce){
  .portal{background:url(/img/w/r-01.webp) center/cover}
}

/* ── первый экран внутренней страницы поверх трёхмерного мира ─────────────
   Раньше это был светлый блок под шапкой. Теперь под ним идёт та же сцена,
   что на главной, поэтому текст ложится на вуаль и держит читаемость на
   любом кадре. Без анимации остаётся кадр дома фоном. */
.page-hero.on-world{position:relative;color:#fff;background:#1A100B center/cover no-repeat;overflow:hidden;
  min-height:min(78svh,760px);display:flex;align-items:flex-end;
  padding:calc(78px + clamp(40px,8vh,110px)) var(--pad) clamp(44px,7vh,90px)}
.page-hero.on-world:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 75% at 10% 82%,rgba(27,17,12,.8) 0%,rgba(27,17,12,.25) 62%,rgba(27,17,12,0) 100%),
    linear-gradient(180deg,rgba(27,17,12,.8) 0%,rgba(27,17,12,.34) 32%,
      rgba(27,17,12,.3) 52%,rgba(27,17,12,.92) 100%)}
.page-hero.on-world .inner{position:relative;z-index:2}
.page-hero.on-world h1{color:#fff}
.page-hero.on-world .kicker{color:rgba(255,255,255,.7)}
.page-hero.on-world p{color:rgba(255,255,255,.88)}
@media (prefers-reduced-motion: reduce){
  .page-hero.on-world{background:url(/img/w/r-01.webp) center/cover}
}

/* Шапка над кадром: буквам нужна тень, иначе на светлом небе их не видно. */
header.on-dark nav a,header.on-dark .call,header.on-dark .burger i{text-shadow:0 1px 14px rgba(20,12,8,.6)}
header.on-dark .call{box-shadow:0 6px 26px -18px rgba(0,0,0,.9);backdrop-filter:blur(4px)}

/* План на карточке. Он общий для всего этажа, поэтому подписан честно: человек
   не должен думать, что видит планировку именно этой резиденции. */
.lot .план{position:relative;margin:-22px -20px 14px;aspect-ratio:4/3;overflow:hidden;background:#fff}
.lot .план img{width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .7s ease}
.lot:hover .план img{transform:scale(1.06)}
.lot .план .подпись{position:absolute;left:10px;bottom:10px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brown);background:rgba(251,248,246,.9);padding:4px 9px;border-radius:100px}

/* ── подсказка прокрутки ────────────────────────────────────────────────
   Первый экран занимает всю высоту, и на длинном мониторе не всегда понятно,
   что дальше что-то есть. Тонкая линия, по которой бежит светлый отрезок,
   говорит это без единого слова. */
.hero .vniz{position:absolute;right:var(--pad);bottom:64px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.hero .vniz b{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:300;color:rgba(255,255,255,.7)}
.hero .vniz i{display:block;width:1px;height:54px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.hero .vniz i:after{content:'';position:absolute;left:0;top:-54px;width:1px;height:54px;
  background:linear-gradient(180deg,transparent,#fff);animation:бежит 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes бежит{to{top:54px}}
@media(max-width:900px){.hero .vniz{display:none}}

/* Остаток резиденций в углу первого экрана: цифра живая, приходит из базы. */
.hero .marks .ostatok{color:#fff}
.hero .marks .ostatok b{font-weight:800}

/* ── просмотр кадра во весь экран ───────────────────────────────────────
   Интерьер на превью в четверть экрана ничего не продаёт. Клик открывает
   кадр целиком, стрелки листают набор, Esc закрывает. Подпись остаётся:
   человек должен понимать, что именно он смотрит. */
.lupa{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(20,12,8,.95);backdrop-filter:blur(6px);padding:clamp(16px,4vw,60px)}
.lupa.on{display:flex}
.lupa img{max-width:100%;max-height:82vh;object-fit:contain;opacity:0;transform:scale(.985);
  transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.lupa.gotovo img{opacity:1;transform:none}
.lupa .podval{position:absolute;left:0;right:0;bottom:clamp(18px,4vh,42px);text-align:center;color:rgba(255,255,255,.82);
  font-size:13px;padding:0 var(--pad)}
.lupa .schet{display:block;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-top:6px}
.lupa button{position:absolute;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:.25s;font-size:20px;line-height:1}
.lupa button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.lupa .zakryt{top:clamp(16px,3vh,34px);right:clamp(16px,3vw,34px)}
.lupa .vlevo{left:clamp(10px,2.5vw,34px);top:50%;transform:translateY(-50%)}
.lupa .vpravo{right:clamp(10px,2.5vw,34px);top:50%;transform:translateY(-50%)}
@media(max-width:700px){.lupa button{width:44px;height:44px}.lupa img{max-height:70vh}}
.gal figure,.mat{cursor:zoom-in}

/* ── раскрытие кадра и параллакс внутри рамки ───────────────────────────
   Рамка открывается снизу вверх, картинка внутри идёт медленнее страницы.
   Так галерея читается как съёмка, а не как плитка из картинок. */
.otkryt{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1)}
.otkryt.in{clip-path:inset(0 0 0 0)}
.gal figure,.mat,.manifest .rv[style*="aspect-ratio"]{overflow:hidden}
.gal figure img,.mat img{will-change:transform}
@media (prefers-reduced-motion: reduce){
  .otkryt{clip-path:none!important;transition:none}
}

/* Полоса под шапкой: на светлом небе белое меню иначе не читается. Кладём её
   фоном самой шапки, без отдельного слоя: слой прятал меню под себя. */
header.on-dark{background:linear-gradient(180deg,rgba(20,12,8,.6) 0%,rgba(20,12,8,.28) 55%,rgba(20,12,8,0) 100%)}

/* ── переход между страницами и полоса прочитанного ─────────────────────
   Клик по ссылке гасит экран шторкой, новая страница открывается из неё же.
   Между разделами больше нет белой вспышки и рывка, сайт читается одним
   куском. Полоса сверху показывает, сколько страницы пройдено. */
.shtorka{position:fixed;inset:0;z-index:190;background:#1A100B;pointer-events:none;
  transform:translateY(100%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.shtorka.zakryt{transform:translateY(0)}
.shtorka.otkryt{transform:translateY(-100%);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:195;background:var(--brown);
  transition:width .12s linear;pointer-events:none}
header.on-dark ~ .progress,.progress.svetlaya{background:#E7D3C0}
@media (prefers-reduced-motion: reduce){.shtorka{display:none}}

/* ── боковой указатель разделов ─────────────────────────────────────────
   Главная длинная, и без него непонятно, где ты и сколько осталось. Точки
   справа: активная растягивается в черту, рядом всплывает название. */
.tochki{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.tochki a{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--brown);
  text-decoration:none;min-height:44px;padding:0 2px}
.tochki i{display:block;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;
  transition:all .35s cubic-bezier(.16,1,.3,1)}
.tochki span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateX(6px);
  transition:.35s;white-space:nowrap}
.tochki a:hover span{opacity:.75;transform:none}
.tochki a.on i{width:22px;border-radius:4px;opacity:1}
.tochki a.on span{opacity:.9;transform:none}
.tochki.na-temnom a{color:#fff}
@media(max-width:1100px){.tochki{display:none}}

/* ── кинопроход ─────────────────────────────────────────────────────────
   Человек нажимает «Смотреть дом», и страница едет сама: камера трёхмерного
   мира идёт по своему маршруту, интерфейс уходит, внизу остаётся подпись
   раздела и полоса пути. Выход по клику, Esc или любому касанию колеса. */
body.kino header,body.kino .tochki,body.kino .vniz,body.kino #cursor{opacity:0;pointer-events:none;transition:opacity .5s}
body.kino{cursor:none}
.kino-panel{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:26px var(--pad) 30px;color:#fff;
  background:linear-gradient(0deg,rgba(20,12,8,.86),rgba(20,12,8,0));opacity:0;pointer-events:none;
  transition:opacity .6s;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
body.kino .kino-panel{opacity:1;pointer-events:auto}
.kino-panel .gde{font-size:clamp(20px,3vw,38px);font-weight:300;line-height:1.05;letter-spacing:-.01em;
  transition:opacity .45s}
.kino-panel .gde small{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:8px}
.kino-panel .vyhod{border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent;border-radius:100px;
  padding:11px 20px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:.25s}
.kino-panel .vyhod{min-height:44px}
.kino-panel .vyhod:hover{background:#fff;color:#2A1A12}
.kino-put{position:fixed;left:0;bottom:0;height:2px;background:#E7D3C0;width:0;z-index:121;opacity:0;transition:opacity .4s}
body.kino .kino-put{opacity:1}
.hero .kino-start{background:transparent;border:0;color:rgba(255,255,255,.85);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.35);transition:.3s;align-self:center}
.hero .kino-start:hover{color:#fff;border-color:#fff}
@media (prefers-reduced-motion: reduce){.hero .kino-start{display:none}}
@media(max-width:700px){.kino-panel .gde{font-size:19px}}

/* ── день в доме ────────────────────────────────────────────────────────
   Три времени суток, между ними кадр меняется наплывом. Дом продают не
   квадратные метры, а картинка того, как в нём живут. */
.den{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:center}
@media(max-width:900px){.den{grid-template-columns:1fr}}
.den .kadr{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.den .kadr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);transition:opacity 1.1s ease,transform 2.4s cubic-bezier(.16,1,.3,1)}
.den .kadr img.on{opacity:1;transform:none}
.den .chasy{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.den .chasy button{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:100px;
  padding:11px 20px;font-size:13px;transition:.3s}
.den .chasy button:hover{border-color:var(--brown);color:var(--brown)}
.den .chasy button.on{background:var(--brown);border-color:var(--brown);color:#fff}
.den .tekst{min-height:170px}
.den .tekst h3{font-size:clamp(22px,2.4vw,34px);font-weight:300;color:var(--brown);margin-bottom:14px;line-height:1.1}
.den .tekst p{font-size:clamp(15px,1.4vw,17px);opacity:.85;max-width:44ch}
.den .tekst .chas{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brown);opacity:.6;
  margin-bottom:14px;display:block}

/* Правая колонка «дня в доме» не должна подлезать под указатель разделов. */
@media(min-width:1101px){.den > div:last-child{padding-right:52px}}

/* ── ползунок площади ────────────────────────────────────────────────── */
.metry{display:flex;align-items:center;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.metry label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);opacity:.7}
.metry input[type=range]{-webkit-appearance:none;appearance:none;height:2px;background:var(--line);
  flex:1;min-width:180px;max-width:340px;outline:none}
.metry input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--brown);cursor:grab;border:3px solid var(--paper);box-shadow:0 2px 10px -4px rgba(40,22,14,.8)}
.metry input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brown);
  border:3px solid var(--paper);cursor:grab}
.metry b{font-weight:800;color:var(--brown);font-variant-numeric:tabular-nums;min-width:120px}

/* Виньетка поверх сцены: края кадра гаснут, взгляд остаётся в центре. Это то,
   что отличает кинокадр от снимка на телефон. */
#world{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;transition:opacity .6s}
.vinetka{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 42%,rgba(20,12,8,.42) 100%)}
body.svetlo .vinetka{opacity:0}

/* ── панель резиденции ──────────────────────────────────────────────────
   Клик по карточке раньше уводил на контакты, и человек терял набор, который
   листал. Теперь справа выезжает панель: параметры, план этажа и запись,
   а сетка остаётся на месте. */
.dver{position:fixed;inset:0;z-index:210;display:none}
.dver.on{display:block}
.dver .ten{position:absolute;inset:0;background:rgba(20,12,8,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .4s}
.dver.gotovo .ten{opacity:1}
.dver .panel{position:absolute;top:0;right:0;bottom:0;width:min(520px,94vw);background:var(--paper);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);overflow-y:auto;
  padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:22px}
.dver.gotovo .panel{transform:none}
.dver .verh{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dver .nomer{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);opacity:.7}
.dver .ploshad{font-size:clamp(38px,6vw,58px);font-weight:800;color:var(--brown);line-height:.95;margin-top:8px}
.dver .ploshad span{font-size:16px;font-weight:300}
.dver .zakryt{border:1px solid var(--line);background:transparent;color:var(--brown);width:44px;height:44px;
  border-radius:50%;font-size:20px;line-height:1;transition:.25s;flex:0 0 44px}
.dver .zakryt:hover{background:var(--brown);color:#fff;border-color:var(--brown)}
.dver .stroki{display:grid;gap:0}
.dver .stroki div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line);
  font-size:14px}
.dver .stroki div span:first-child{opacity:.6}
.dver .stroki div b{font-weight:800;color:var(--brown)}
.dver .plan{border:1px solid var(--line);background:#fff;aspect-ratio:4/3;overflow:hidden;position:relative}
.dver .plan img{width:100%;height:100%;object-fit:contain}
.dver .plan span{position:absolute;left:12px;bottom:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brown);background:rgba(251,248,246,.9);padding:4px 9px;border-radius:100px}
.dver .btn{width:100%;text-align:center}
.dver .melko{font-size:12px;opacity:.6;line-height:1.6}

/* Сообщение о сбое отправки: рядом с кнопкой, а не системным окном. */
.sboy{margin-top:14px;font-size:13px;color:#FFD9D2;background:rgba(163,86,76,.22);
  border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:12px 14px;line-height:1.5}
.sboy a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}

/* ── макет дома ─────────────────────────────────────────────────────────
   Объём, собранный линиями: видно устройство дома, а не только фасад.
   Наведение подсвечивает этаж, перетаскивание крутит макет. */
.maket{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,60px);align-items:center}
@media(max-width:900px){.maket{grid-template-columns:1fr}}
.maket .holst{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,#241710,#150E0A);
  border:1px solid var(--line);overflow:hidden;cursor:grab}
.maket .holst:active{cursor:grabbing}
.maket .holst canvas{display:block;width:100%;height:100%}
.maket .holst .namek{position:absolute;left:16px;bottom:14px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(231,211,192,.55);pointer-events:none}
.maket .opis{min-height:150px}
.maket .opis .etazh{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brown);opacity:.65;
  display:block;margin-bottom:12px}
.maket .opis h3{font-size:clamp(20px,2.2vw,30px);font-weight:300;color:var(--brown);line-height:1.12;margin-bottom:12px}
.maket .opis p{font-size:clamp(14px,1.35vw,16px);opacity:.85;max-width:40ch}
.maket .spisok{display:grid;gap:0;margin-top:24px}
.maket .spisok div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);
  font-size:13px}
.maket .spisok div b{font-weight:800;color:var(--brown)}

/* ── отложенные резиденции ──────────────────────────────────────────────
   Покупатель редко выбирает одну: он отмечает три и хочет посмотреть их
   подряд. Метка на карточке, счётчик внизу, запрос уходит списком. */
.lot .otlozhit{position:absolute;top:12px;left:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:rgba(251,248,246,.92);color:var(--brown);display:flex;
  align-items:center;justify-content:center;transition:.25s;font-size:15px;line-height:1}
.lot .otlozhit:hover{background:var(--brown);color:#fff;border-color:var(--brown)}
.lot .otlozhit.on{background:var(--brown);color:#fff;border-color:var(--brown)}
.korzina{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%);z-index:150;
  display:flex;align-items:center;gap:16px;background:var(--dark);color:#fff;border-radius:100px;
  padding:12px 14px 12px 22px;box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.korzina.on{transform:translateX(-50%)}
.korzina b{font-weight:800}
.korzina .ochistit{background:transparent;border:0;color:rgba(255,255,255,.82);font-size:12px;
  text-decoration:underline;text-underline-offset:3px}
.korzina .ochistit:hover{color:#fff}
.korzina .idem{background:#fff;color:var(--dark);border-radius:100px;padding:11px 20px;font-size:13px;
  white-space:nowrap;transition:.25s}
.korzina .idem:hover{background:var(--brown);color:#fff}
@media(max-width:700px){
  /* На узком экране плашка ложится в два ряда: кнопка в одну строку с текстом
     не помещается и уезжает за край. */
  .korzina{left:12px;right:12px;bottom:14px;transform:translateY(160%);width:auto;border-radius:22px;
    flex-direction:column;align-items:stretch;gap:10px;padding:16px}
  .korzina.on{transform:none}
  .korzina .idem{text-align:center}
  .korzina .ochistit{align-self:flex-start}
}

.cta-band{background:var(--dark) url(/img/tex-corten-macro.webp) center/cover;position:relative}
.cta-band > *{position:relative;z-index:2}
.cta-band:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,22,15,.92),rgba(26,16,11,.96))}

/* ── ЕДИНЫЙ МИР ─────────────────────────────────────────────────────────
   Страница перестаёт быть стопкой непрозрачных экранов. Все разделы висят
   стеклянными панелями в одной трёхмерной сцене: между ними видно дом, улицу
   и квартал, а камера идёт по своему маршруту вбок, вверх и вглубь.
   Класс на теле ставит скрипт, когда сцена реально поднялась: без неё сайт
   остаётся прежним светлым и полностью читаемым. */
body.mir{background:#F2EAE3}
body.mir main > section{background:transparent}
body.mir main > section.sandbg{background:transparent}

body.mir main > section:not(.hero):not(.form):not(.page-hero):not(.cta-band) > .inner{
  background:rgba(251,248,246,.82);
  border:1px solid rgba(255,255,255,.5);
  border-radius:3px;
  padding:clamp(26px,3.4vw,58px);
  box-shadow:0 40px 90px -46px rgba(60,36,22,.5), inset 0 1px 0 rgba(255,255,255,.7);
}
/* Панель внутри панели даёт мутный квадрат в квадрате. */
body.mir main > section > .inner > .glass{background:transparent;backdrop-filter:none;border:0;padding:0;box-shadow:none}
/* Карусель резиденций закреплена на экране, ей стекло мешает ловить кадр. */
body.mir main > section.rez-pin{background:transparent}

/* Проёмы в светлом мире тоже светлые: тёмная вуаль рвала бы поездку надвое. */
body.mir .portal{color:var(--dark)}
body.mir .portal:before{background:linear-gradient(100deg,rgba(248,242,237,.94) 0%,rgba(248,242,237,.84) 32%,
  rgba(248,242,237,.46) 60%,rgba(248,242,237,.12) 84%,rgba(248,242,237,0) 100%)}
body.mir .portal .kicker{color:rgba(115,77,61,.8)}
body.mir .portal q,body.mir .portal .q{color:var(--brown)}
body.mir .portal .note{color:rgba(77,44,30,.82)}

/* Виньетка на светлом мире работает мягче: она держит края кадра, не затемняя. */
body.mir #vign{background:radial-gradient(ellipse at center,transparent 48%,rgba(90,58,38,.26) 100%)}

/* Телефон: размытие стекла это самая дорогая операция кадра. На узком экране
   стекло плотнее и размывает меньше, картинка от этого не проигрывает. */
@media(max-width:760px){
  body.mir main > section:not(.hero):not(.form):not(.page-hero):not(.cta-band) > .inner{
    background:rgba(251,248,246,.9);
    padding:clamp(20px,5vw,30px);
    box-shadow:0 24px 50px -30px rgba(60,36,22,.45);
  }
}
/* Браузер без размытия (старый Firefox, режим экономии) получает плотный лист:
   текст важнее эффекта. */
/* Размытие подложки стоит дорого: браузер пересобирает его каждый кадр, пока
   под стеклом едет сцена. Поэтому размывает только та панель, которая сейчас на
   экране, остальные держат тот же цвет без размытия. */
body.mir main > section > .inner.steklo{
  -webkit-backdrop-filter:blur(16px) saturate(1.06);
  backdrop-filter:blur(16px) saturate(1.06);
}
@media(max-width:760px){body.mir main > section > .inner.steklo{
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  body.mir main > section:not(.hero):not(.form):not(.page-hero):not(.cta-band) > .inner{background:rgba(251,248,246,.96)}
  body.mir .portal:before{background:linear-gradient(100deg,rgba(248,242,237,.96) 0%,rgba(248,242,237,.9) 40%,rgba(248,242,237,.6) 100%)}
}

/* Подпись места: пока камера едет, человек видит, где она сейчас. */
.gde-mir{position:fixed;right:var(--pad);left:auto;bottom:26px;text-align:right;z-index:58;pointer-events:none;
  display:flex;align-items:baseline;gap:12px;opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease}
.gde-mir.on{opacity:1;transform:none}
.gde-mir b{font-weight:800;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brown);opacity:.55}
.gde-mir span{font-size:clamp(13px,1.3vw,15px);color:var(--dark);opacity:.8}
body.kino .gde-mir,body.menu-on .gde-mir{opacity:0}
@media(max-width:920px){.gde-mir{bottom:74px;right:12px}.gde-mir span{font-size:12px}}

/* Воздух между панелями: мир видно ровно там, где кончился раздел. */
body.mir main > section:not(.hero):not(.form):not(.page-hero):not(.cta-band):not(.portal):not(.rez-pin){
  padding-top:clamp(96px,15vh,210px);padding-bottom:clamp(96px,15vh,210px)}
body.mir main > section:not(.hero):not(.form):not(.page-hero):not(.cta-band) > .inner{max-width:1180px}

/* Карусель резиденций тоже часть мира: подложка становится дымкой, а её края
   больше не закрашивают сцену плотным листом. */
body.mir .rez-sticky{background:radial-gradient(120% 80% at 50% 20%,rgba(255,253,252,.62) 0%,
  rgba(241,234,228,.44) 74%,rgba(233,222,214,.34) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.mir .rez-sticky:before{background:linear-gradient(90deg,rgba(251,248,246,.85),transparent)}
body.mir .rez-sticky:after{background:linear-gradient(270deg,rgba(251,248,246,.85),transparent)}
/* Панель въезжает с наклоном, значит секции нужна глубина. */
body.mir main > section{perspective:1500px}
body.mir main > section:not(.hero):not(.form):not(.page-hero):not(.cta-band) > .inner{transform-style:preserve-3d}

/* ─────────────────────────────────────────────────────────────
   Радио: фортепианная классика фоном.
   Кнопка живёт в углу и повторяет знак дома: пять полос эквалайзера.
   Пока играет, полосы двигаются, поэтому состояние читается без подписи.
   ───────────────────────────────────────────────────────────── */
.radio-knopka{
  position:fixed; left:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:70;
  display:flex; align-items:center; gap:10px;
  padding:9px 16px 9px 12px; border:1px solid var(--line); border-radius:999px;
  background:rgba(251,248,246,.82); backdrop-filter:blur(14px) saturate(1.1);
  color:var(--brown); cursor:pointer; font:500 12px/1 'Manrope',system-ui,sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 6px 24px rgba(77,44,30,.10);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, background .5s, opacity .5s;
}
.radio-knopka:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(77,44,30,.18); background:rgba(251,248,246,.95); }
.radio-knopka:focus-visible{ outline:2px solid var(--brown); outline-offset:3px; }
.radio-knopka .rk-podpis{ max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .55s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.radio-knopka:hover .rk-podpis,
.radio-knopka.igraet .rk-podpis{ max-width:190px; opacity:.9; }

.rk-polosy{ display:flex; align-items:flex-end; gap:2.5px; height:15px; }
.rk-polosy i{ width:2.5px; border-radius:2px; background:var(--brown); opacity:.55;
  height:5px; transform-origin:bottom; transition:height .4s, opacity .4s; }
.radio-knopka.igraet .rk-polosy i{ opacity:1; animation:rk-pulse 1.1s ease-in-out infinite; }
.radio-knopka.igraet .rk-polosy i:nth-child(1){ animation-delay:0s;    }
.radio-knopka.igraet .rk-polosy i:nth-child(2){ animation-delay:.16s;  }
.radio-knopka.igraet .rk-polosy i:nth-child(3){ animation-delay:.32s;  }
.radio-knopka.igraet .rk-polosy i:nth-child(4){ animation-delay:.10s;  }
.radio-knopka.igraet .rk-polosy i:nth-child(5){ animation-delay:.26s;  }
@keyframes rk-pulse{ 0%,100%{ height:4px } 50%{ height:15px } }

/* Пока не играет, полосы стоят лесенкой: кнопка не выглядит сломанной. */
.radio-knopka:not(.igraet) .rk-polosy i:nth-child(1){ height:6px }
.radio-knopka:not(.igraet) .rk-polosy i:nth-child(2){ height:10px }
.radio-knopka:not(.igraet) .rk-polosy i:nth-child(3){ height:14px }
.radio-knopka:not(.igraet) .rk-polosy i:nth-child(4){ height:9px }
.radio-knopka:not(.igraet) .rk-polosy i:nth-child(5){ height:5px }

@media (max-width:640px){
  .radio-knopka{ padding:8px 12px; gap:8px; }
  .radio-knopka .rk-podpis{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .radio-knopka.igraet .rk-polosy i{ animation:none; height:10px }
}


/* ─────────────────────────────────────────────────────────────
   Мир это фон, а не сосед текста.
   Линии дома идут через весь экран, и на светлой бумаге они читались как
   вторая колонка, спорящая с заголовком. Поэтому под контентом лежит мягкая
   вуаль цвета бумаги: мир виден, буквы остаются главными.
   ───────────────────────────────────────────────────────────── */
#world{ opacity:.88 }
body.kino #world{ opacity:1 }

section{ position:relative }
section > .wrap,
section > .lid,
section > h2{ position:relative; z-index:2 }

/* Секция с подложкой перекрывает предыдущую целиком: на переходе между
   экранами было видно два заголовка разом. */
section.sandbg{ background:linear-gradient(180deg,rgba(241,234,228,.94),rgba(241,234,228,.99) 18%,rgba(241,234,228,.99) 82%,rgba(241,234,228,.94)); }




/* ─────────────────────────────────────────────────────────────
   Пальцем не попасть.
   Замер показал ссылки и кнопки ниже сорока пикселей на телефоне: по таким
   промахиваются, а промах на кнопке заявки стоит клиента. Область касания
   растим невидимой подушкой, размер самой надписи не трогаем.
   ───────────────────────────────────────────────────────────── */
@media(max-width:820px) and (pointer:coarse){
  a:not(.logo-ssylka), button, [role="button"], summary{
    position:relative;
  }
  a:not(.logo-ssylka)::after, button::after, [role="button"]::after{
    content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:max(100%,44px); height:max(100%,44px); pointer-events:auto;
  }
  /* Подушка не должна перекрывать соседей в плотных списках. */
  nav a::after, .tochki a::after, .rez-track a::after{ width:100%; height:max(100%,40px) }
  .radio-knopka{ min-height:44px; padding:11px 14px }
  input, select, textarea{ min-height:44px }

  /* Часть ссылок мелкая по-настоящему, а не только по замеру: телефон и почта
     в подвале шли строкой в двадцать пикселей, ссылка «узнать стоимость» в
     карточке резиденции была высотой в четырнадцать. Такие растим по-честному. */
  a[href^="tel:"], a[href^="mailto:"], a[href*="t.me"]{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .ask, .lot .ask, .rez-card a, .knopka-tonko, .podval a{
    min-height:44px; display:inline-flex; align-items:center;
  }
  .hero .knopki a, .hero .knopki button, .forma button{ min-height:48px }
}

/* ─────────────────────────────────────────────────────────────
   Вуаль под текстом.
   Раньше она жила в ::before у всех секций подряд и перебила собственный
   тёмный градиент у блоков заявки: белые буквы оказались на светлой бумаге.
   Теперь вуаль рисуется отдельным слоем ::after и только там, где секция
   действительно лежит прямо на мире.
   ───────────────────────────────────────────────────────────── */
section:not(.sandbg):not(.portal):not(.hero):not(.form):not(.cta-band):not(.rez-pin)::after{
  content:''; position:absolute; inset:-2px 0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 70% at 30% 50%, rgba(251,248,246,.72) 0%, rgba(251,248,246,.34) 42%, transparent 72%);
}
section > *{ position:relative; z-index:1 }
@media(max-width:920px){
  section:not(.sandbg):not(.portal):not(.hero):not(.form):not(.cta-band):not(.rez-pin)::after{
    background:linear-gradient(180deg,rgba(251,248,246,.5),rgba(251,248,246,.9) 22%,rgba(251,248,246,.9) 78%,rgba(251,248,246,.5));
  }
}