/* Общий стиль страниц ЖК — подключается всеми zhk-*.html.
   Собран из страницы «Новая Земля»: её CSS был надмножеством двух ранних страниц,
   поэтому объединение прошло без потерь. Правки делать здесь, а не в копиях. */

@import url("fonts/fonts.css");

:root{
  /* Цвет — визуальная система КОТ */
  --ink:#17171A; --ink-2:#5B6072; --paper:#EEF0F4; --sand:#DDE1EA;
  --blue:#1A56DB; --blue-d:#1447B8; --blue-l:#E6EDFC;
  --night:#111320; --night-2:#1C1F2E; --sky:#8FB0F5;
  --white:#fff; --tint:rgba(26,86,219,.07);

  --sans:'Onest',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;

  --fs-h1:clamp(32px,5.2vw,62px);
  --fs-h2:clamp(26px,3.6vw,42px);
  --fs-h3:clamp(17px,1.5vw,21px);
  --fs-lead:clamp(16px,1.9vw,20px);
  --fs-body:clamp(15px,1.15vw,17px);
  --fs-meta:12px;

  --s1:8px; --s2:16px; --s3:28px; --s4:44px;
  --sec:clamp(64px,9vw,136px);
  --pad:clamp(18px,5vw,44px);

  /* Форма — шкала скруглений системы КОТ v6 (плитка / карточка / панель / таблетка),
     приведённая к размеру экрана. Острых углов у деталей нет */
  --r:16px; --r-lg:24px; --r-xl:32px; --pill:999px;

  /* Плоскость вместо теней. Разделение тоном, тени — только там,
     где элемент реально висит над контентом (шапка, sticky, попапы) */
  --sh-1:none;
  --sh-2:none;
  --sh-3:none;
  --sh-blue:none;
  --sh-blue-h:none;
  --sh-float:0 2px 4px rgba(23,23,26,.04), 0 10px 24px rgba(23,23,26,.06), 0 28px 60px rgba(23,23,26,.08);

  --head-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding-top:var(--head-h);background:var(--paper);color:var(--ink);
     font:var(--fs-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.08}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);line-height:1.1}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.02em}
p{margin:0 0 .75em}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sec) 0}
/* светлые секции: раз теней нет, карточки внутри них уходят на тон фона страницы */
.sec--w{background:var(--white)}
.sec--w .cell{background:transparent}
.sec--w .cell--blue{background:var(--blue)}
.sec--w .cell--img{background:var(--sand)}
.sec--w .finish-body{background:var(--paper)}
.sec--w .faq details{background:var(--paper)}
.sec--w .plan-img{background:var(--paper)}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.small{font-size:14px;line-height:1.4}

/* рубрика — мелкий капс с разрядкой, как категория товара у goldapple */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;
         text-transform:uppercase;color:var(--ink-2);margin-bottom:14px;display:block}
/* заголовок секции — капсом, как «ХИТЫ» и «НОВИНКИ».
   Ширину меряем в ch на самом тексте: тогда лимит считается от собственного
   кегля и растёт вместе с ним. em на контейнере давал жёсткие 330px. */
/* заголовок секции по центру со стрелками справа — раскладка goldapple */
.sec-head{margin:0 auto var(--s4);text-align:center}
.sec-head h2{letter-spacing:-.035em;max-width:26ch;margin:0 auto;text-wrap:balance}
.sec-head .lead{max-width:56ch;margin:16px auto 0}
.sec-head .lead{margin-top:14px}
.sec-top{position:relative;margin-bottom:var(--s4)}
.sec-top .sec-head{margin-bottom:0}
.sec-top .rail-nav{position:absolute;right:0;bottom:2px}
@media(max-width:820px){.sec-top .rail-nav{position:static;justify-content:center;margin-top:18px}}

/* ---------- ИКОНКИ ---------- */
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
/* иконки без подложек — у goldapple плашек под иконками нет */
.ic-badge{display:block;flex:none;background:none;color:var(--blue);width:auto;height:auto}
.ic-badge .ic{width:28px;height:28px;stroke-width:1.5}

/* ---------- КНОПКИ: pill, одинаковая высота ---------- */
/* Кнопка goldapple: прямоугольная, капсом, с разрядкой и стрелкой */
.btn{font:inherit;font-weight:700;font-size:15.5px;letter-spacing:-.005em;
     display:inline-flex;align-items:center;justify-content:center;gap:10px;
     height:56px;padding:0 26px;border-radius:var(--pill);
     border:1.5px solid var(--blue);background:var(--blue);color:var(--white);
     cursor:pointer;text-decoration:none;white-space:nowrap;
     transition:background-color .16s,border-color .16s,color .16s}
.btn .ic{width:18px;height:18px;stroke-width:2}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:#000;border-color:#000}
.btn.ghost{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn.ghost:hover{background:var(--sand);border-color:var(--sand)}
.btn.on-blue{background:var(--white);color:var(--blue);border-color:var(--white)}
.btn.on-blue:hover{background:#EAF0FD;border-color:#EAF0FD}
.btn.outline{background:transparent;color:var(--ink);border-color:rgba(23,23,26,.22)}
.btn.outline:hover{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.btn--sm{height:46px;padding:0 20px;font-size:14.5px;letter-spacing:0}
.btn--sm .ic{width:15px;height:15px}
/* кнопки в ряд, равной ширины — не встают друг под друга, пока хватает места */
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
/* min-width:max-content — кнопка не может стать уже своего текста.
   Без него при nowrap текст вылезал за пределы плашки */
.btn-row .btn{flex:1 1 auto;min-width:max-content;padding:0 20px}
@media(max-width:460px){.btn-row{flex-wrap:wrap}.btn-row .btn{flex:1 1 100%}}

/* ---------- ШАПКА ---------- */
.top{position:fixed;inset:0 0 auto;height:var(--head-h);z-index:80;
     background:rgba(238,240,244,.66);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
.top::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:rgba(23,23,26,.07)}
.top .wrap{height:100%;display:flex;align-items:center;gap:16px}
.top .logo img{height:28px;width:auto}
.top-price{margin-left:auto;text-align:right;line-height:1.1}
.top-price b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.top-price span{display:block;font-size:10.5px;color:var(--ink-2);letter-spacing:.02em}
@media(max-width:600px){.top-price{display:none}}

/* ---------- ХЛЕБНЫЕ КРОШКИ ---------- */
.crumbs{font-size:13px;color:var(--ink-2);padding:20px 0 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--ink)}

/* ================= ПЕРВЫЙ ЭКРАН — единая композиция ================= */
.hero{padding:16px 0 0}
.hero-stage{position:relative;border-radius:var(--r-xl);overflow:hidden;
            min-height:clamp(500px,62vw,660px);display:flex;flex-direction:column;
            justify-content:space-between;box-shadow:var(--sh-3);background:var(--sand)}
.hero-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,18,.55) 0%,rgba(8,10,18,.16) 28%,rgba(8,10,18,.52) 58%,rgba(8,10,18,.88) 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding:clamp(24px,3.4vw,44px);color:#fff}
/* карточка фактов наезжает на кадр на 46px — отдаём ей запас,
   иначе она садится на строку с ценой и кнопками */
@media(min-width:760px){.hero-in{padding-bottom:calc(clamp(24px,3.4vw,44px) + 62px)}}
.hero-top{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;
          padding:clamp(20px,3vw,36px) clamp(24px,3.4vw,44px) 0}
.pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
      border-radius:var(--pill);font-size:13px;font-weight:600;
      background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.24)}
.pill .ic{width:16px;height:16px}
.pill.solid{background:var(--blue);border-color:var(--blue)}
.hero h1{color:#fff;max-width:20ch;margin-bottom:14px;text-wrap:balance}
/* название ЖК — строкой над заголовком, внутри h1: поисковик читает «ЖК «Окла» Квартал…» */
.h1-name{display:block;font-size:clamp(15px,1.5vw,19px);font-weight:600;letter-spacing:0;line-height:1.3;
         color:rgba(255,255,255,.88);margin-bottom:10px}
.hero-sub{font-size:var(--fs-lead);color:rgba(255,255,255,.9);max-width:34em;margin-bottom:clamp(20px,2.6vw,30px)}
/* цена сверху, кнопки под ней — не в одну строку */
.hero-bar{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.2vw,26px)}
.hero-price b{display:block;font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1}
.hero-price span{display:block;font-size:12.5px;color:rgba(255,255,255,.72);margin-top:6px}
.hero .btn-row{width:100%;max-width:560px;align-items:center}

/* строка фактов — карточка, наезжающая на кадр */
.facts{position:relative;z-index:3;margin:14px auto 0;max-width:1180px;
       background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-2);
       display:grid;grid-template-columns:repeat(2,1fr);overflow:hidden}
@media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr);margin-top:-46px}}
@media(min-width:1000px){.facts{grid-template-columns:repeat(5,1fr)}}
/* пятый пункт на узких экранах занимает строку целиком, чтобы не висел сиротой */
@media(max-width:759px){.facts>div:last-child{grid-column:1/-1}}
.facts>div{padding:clamp(16px,1.8vw,24px);display:flex;gap:12px;align-items:center}
.facts>div+div{box-shadow:inset 1px 0 0 var(--sand)}
@media(max-width:759px){.facts>div:nth-child(odd)+div{box-shadow:inset 1px 0 0 var(--sand)}
                        .facts>div:nth-child(-n+2){box-shadow:none}
                        .facts>div:nth-child(n+3){box-shadow:inset 0 1px 0 var(--sand)}
                        .facts>div:nth-child(even){box-shadow:inset 1px 0 0 var(--sand)}}
.facts .ic-badge .ic{width:22px;height:22px}
.facts dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.facts dd{margin:0;font-weight:700;font-size:15.5px;letter-spacing:-.01em;line-height:1.2}

/* ================= БЕНТО-КАРТОЧКИ ================= */
.bento{display:grid;gap:34px 28px;grid-template-columns:1fr}
@media(min-width:680px){.bento{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.bento{grid-template-columns:repeat(3,1fr)}}
.cell{background:transparent;border-radius:0;padding:24px 0 0;border-top:1px solid var(--sand)}
.cell h3{margin:14px 0 8px}
.cell h3{margin:16px 0 8px}
.cell p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.5}
.cell--blue{background:var(--blue);color:#fff;border-top:0;border-radius:var(--r);
            padding:clamp(22px,2.4vw,30px)}
.cell--blue p{color:rgba(255,255,255,.85)}
.cell--blue .ic-badge{background:none;color:#fff}
.cell--img{padding:0;overflow:hidden;position:relative;min-height:230px;
           border-top:0;border-radius:var(--r)}
.cell--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cell--wide{grid-column:span 1}
@media(min-width:680px){.cell--wide{grid-column:span 2}}

/* кадр-обёртка для фото — приём Livingston */
.af{position:relative;overflow:hidden;border-radius:var(--r);min-height:0;background:var(--sand)}
.af img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ================= ЛОКАЦИЯ ================= */
.loc{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.loc{grid-template-columns:1.25fr 1fr;align-items:stretch}}
.loc-map{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--sand);
         min-height:clamp(330px,40vw,436px);box-shadow:var(--sh-1)}
.loc-map img,.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-todo{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:26px;
          background:repeating-linear-gradient(45deg,#E4E8EF,#E4E8EF 12px,#EDF0F5 12px,#EDF0F5 24px)}
.map-todo div{max-width:26em}
.map-todo b{display:block;margin-bottom:6px}
.loc-map img{object-fit:cover}
.routes{display:grid;gap:10px;align-content:start}
.route{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:var(--r);
       padding:16px 18px;box-shadow:var(--sh-1)}
.route .ic-badge .ic{width:22px;height:22px}
.route b{display:block;font-size:15.5px;letter-spacing:-.01em}
.route span{font-size:13.5px;color:var(--ink-2)}
.route .t{margin-left:auto;font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap}

/* ================= КАРУСЕЛЬ (планировки, галерея) ================= */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
      padding:4px 0 6px;scrollbar-width:none;-ms-overflow-style:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}
/* полосу прокрутки прячем — у ленты есть стрелки */
.rail::-webkit-scrollbar{display:none}
.rail-nav{display:flex;gap:8px}
/* стрелки карусели — тонкие, без обводки, как у goldapple */
.rnav{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;
      cursor:pointer;color:var(--ink);transition:color .16s,transform .16s}
.rnav .ic{width:26px;height:26px;stroke-width:1.4}
.rnav:hover{color:var(--blue)}
.rnav:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* карточка планировки: товар лежит на фоне, без рамки и тени.
   Кликабельна целиком — кнопки на карточке нет, как у goldapple */
.plan{width:min(300px,78vw);display:flex;flex-direction:column;gap:14px;
      text-decoration:none;color:inherit}
.plan-img{position:relative;background:#E9ECF2;padding:18px;height:246px;display:grid;place-items:center;
          border-radius:var(--r);transition:background-color .18s}
.plan:hover .plan-img{background:#E1E5ED}
/* --k = корень из площади, нормированный по самой большой квартире.
   Так размер чертежа на экране соответствует реальному метражу */
.plan-img img{max-height:calc(232px * var(--k,1));max-width:calc(100% * var(--k,1));
              width:auto;object-fit:contain;mix-blend-mode:multiply}
/* острый яркий бейдж в углу — приём goldapple */
.plan-tag{position:absolute;top:0;left:0;display:inline-flex;align-items:center;height:24px;
          padding:0 9px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;
          letter-spacing:.09em;text-transform:uppercase;border-radius:var(--pill);top:12px;left:12px}
.plan-tag.soon{background:var(--sand);color:var(--ink)}
.plan-b{display:flex;flex-direction:column;gap:6px;flex:1}
.plan-meta{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.plan-b h3{font-size:19px;font-weight:500;letter-spacing:-.02em}
.plan-price{margin-top:6px;font-size:21px;font-weight:700;letter-spacing:-.03em}
.plan-price i{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink-2);letter-spacing:0;margin-top:4px}
.plan-go{margin-top:10px;font-size:14px;font-weight:600;letter-spacing:0;
         color:var(--blue);display:inline-flex;align-items:center;gap:7px}
.plan-go .ic{width:15px;height:15px;stroke-width:2;transition:transform .18s}
.plan:hover .plan-go .ic{transform:translateX(4px)}

/* галерея-карусель */
.shot{width:min(420px,84vw);height:290px;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.shot:hover img{transform:scale(1.04)}

/* ================= СТАВКИ ================= */
.rates{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.rates{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.rates{grid-template-columns:repeat(3,1fr)}}
.rate{background:var(--white);border-radius:var(--r);padding:clamp(24px,2.8vw,34px);
      display:flex;flex-direction:column;gap:8px}
.rate .n{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.rate b{font-size:clamp(42px,5.4vw,62px);font-weight:700;letter-spacing:-.045em;line-height:.95}
.rate p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.rate--accent{background:var(--blue);color:#fff}
.rate--accent .n{color:rgba(255,255,255,.72)}
.rate--accent p{color:rgba(255,255,255,.86)}
.rate--text b{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.03em;line-height:1.15}
.rates-note{margin:20px 0 0;font-size:13px;color:var(--ink-2)}

/* ================= СИНИЙ CTA-БЛОК ================= */
.offer{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--blue);
       color:#fff;box-shadow:var(--sh-3)}
.offer-grid{display:grid;grid-template-columns:1fr}
@media(min-width:920px){.offer-grid{grid-template-columns:1.08fr .92fr}}
.offer-copy{padding:clamp(28px,4vw,56px)}
.offer h2{color:#fff;margin-bottom:14px;max-width:24ch;text-wrap:balance}
.offer .lead{color:rgba(255,255,255,.86);margin-bottom:26px}
.offer-ticks{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:12px}
.offer-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.4}
.offer-ticks .ic{color:#fff;margin-top:2px;width:20px;height:20px}
.offer-form{background:rgba(255,255,255,.10);backdrop-filter:blur(6px);
            padding:clamp(24px,3.2vw,44px);display:flex;flex-direction:column;justify-content:center}
.offer-form .fh{font-size:20px;font-weight:700;letter-spacing:-.025em;margin-bottom:6px}
.offer-form .fs{font-size:14px;color:rgba(255,255,255,.78);margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.field input{width:100%;font:inherit;height:56px;padding:0 18px;border-radius:var(--r);
             border:1.5px solid transparent;background:var(--white);color:var(--ink)}
.field input::placeholder{color:#7D8294}
.field input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.offer-form .btn{width:100%;margin-top:12px}
/* согласие на обработку ПД — чекбокс под кнопкой во всех формах с телефоном; без галочки форма не уходит (zhk.js) */
.agree{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:12.5px;line-height:1.45;font-weight:400;
       color:rgba(255,255,255,.82);cursor:pointer;text-align:left}
.agree input{flex:none;width:18px;height:18px;margin:0;accent-color:#fff;cursor:pointer}
.agree a{color:#fff;text-decoration:underline}
form p.agree-err{margin:8px 0 0;width:fit-content;max-width:100%;padding:7px 12px;border-radius:8px;
                 background:#fff;color:var(--alert);font-size:13px;line-height:1.35;font-weight:600}
form p.agree-err[hidden]{display:none}
.offer :focus-visible{outline-color:#fff}

/* ================= ОТДЕЛКА ================= */
.finish{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.finish{grid-template-columns:1fr 1fr;align-items:stretch}}
.finish-media{display:grid;gap:12px;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;min-height:340px}
.finish-media .af:first-child{grid-column:1/-1}
.finish-body{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-1);
             padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.incl{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:12px}
.incl li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.incl .ic{color:var(--blue);margin-top:2px;width:20px;height:20px}

/* ================= ТАБЛИЦА КОРПУСОВ ================= */
.corp{display:grid;gap:12px}
/* пояснение прижато к названию корпуса — оно его поясняет,
   а не самостоятельная колонка посреди пустой строки */
.corp-row{display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap;
          background:var(--white);border-radius:var(--r);padding:18px 22px}
.corp-row .who{display:flex;flex-direction:column;gap:2px;margin-right:auto}
.corp-row b{font-size:16px;letter-spacing:-.01em}
.corp-row .d{font-size:14px;color:var(--ink-2)}
.status{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;
        border-radius:var(--pill);font-size:13px;font-weight:700;white-space:nowrap}
.status.ok{background:var(--blue);color:#fff}
.status.go{background:var(--blue-l);color:var(--blue)}

/* ================= КВИЗ ================= */
.quiz{background:var(--white);border-radius:var(--r-xl);
      padding:clamp(24px,3.4vw,52px);
      display:grid;grid-template-columns:1fr;column-gap:clamp(16px,2.2vw,40px)}
@media(min-width:900px){.quiz{grid-template-columns:minmax(0,1fr) auto}}
.quiz-main{min-width:0}
.quiz .steps{grid-column:1/-1}
/* маскот КОТа. По правилам системы он не появляется в блоках
   про деньги, ипотеку и сделку — поэтому только квиз и вопросы */
.mascot{display:block;pointer-events:none;user-select:none}
.mascot--quiz{align-self:end;justify-self:end;width:clamp(112px,12vw,172px)}
.mascot--faq{position:absolute;right:0;bottom:-10px;width:clamp(92px,9vw,132px)}
@media(max-width:899px){.mascot--quiz{display:none}}
@media(max-width:900px){.mascot--faq{display:none}}
.quiz-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.quiz-bar{flex:1;min-width:140px;max-width:260px;height:5px;background:var(--sand);border-radius:3px;overflow:hidden}
.quiz-bar span{display:block;height:100%;width:25%;background:var(--blue);border-radius:3px;transition:width .3s}
.quiz-back{font:inherit;font-size:13px;font-weight:600;border:0;background:none;cursor:pointer;
           color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 0;
           margin-right:4px;border-radius:6px}
.quiz-back .ic{width:16px;height:16px}
.quiz-back:hover{color:var(--blue)}
.quiz-back:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.qstep h3{font-size:clamp(20px,2.4vw,28px)}
.q-answers{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.q-answers li{font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--pill);
              background:var(--tint);color:var(--blue)}
.qfinal form{margin-top:22px;max-width:420px}
.qfinal .field input{border-color:var(--sand)}
.qfinal .field input[aria-invalid="true"]{border-color:var(--alert)}
.qfinal .btn{width:100%;margin-top:14px}
.qdone{text-align:center;padding:14px 0 6px}
.qdone .ic{width:46px;height:46px;color:var(--blue);margin:0 auto 14px;stroke-width:1.4}
.qdone b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:8px}
.qdone p{color:var(--ink-2);font-size:15px;margin:0}
.opts{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin:20px 0 0}
@media(min-width:680px){.opts{grid-template-columns:repeat(4,1fr)}}
.opt{font:inherit;font-weight:600;text-align:center;background:var(--paper);border:1.5px solid transparent;
     border-radius:var(--r);padding:18px 12px;min-height:60px;cursor:pointer;
     transition:border-color .16s,background-color .16s,transform .16s}
.opt:hover{border-color:var(--blue);background:var(--white);transform:translateY(-2px)}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--tint)}
.opt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.steps{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:34px;
       padding-top:28px;border-top:1px solid var(--sand)}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step .n{display:block;font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.1em;margin-bottom:8px}
.step b{display:block;font-size:16px;letter-spacing:-.015em;margin-bottom:4px}
.step p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.45}


/* планировки показываем сеткой — их пять, прокручивать нечего */
.plans-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.plans-grid .plan{width:auto}
.plans-grid .plan-img{height:212px;padding:14px}
.plans-grid .plan-img img{max-height:calc(196px * var(--k,1))}
/* подпись в две строки и кнопка внизу — площадь, цена и «Смотреть» стоят на одной линии во всех карточках */
.plans-grid .plan-meta{min-height:3.1em}
.plans-grid .plan-go{margin-top:auto;padding-top:10px}
/* Фёдор — маскот-консультант */
.mascot-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;align-self:end;justify-self:end}
.mascot-name{margin:0;text-align:center;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.mascot-name span{display:block;font-size:11px;font-weight:500;color:var(--ink-2);letter-spacing:.02em;margin-top:2px}
@media(max-width:899px){.mascot-wrap{display:none}}

/* ================= ПОХОЖИЕ ================= */
.sim{width:min(280px,76vw);background:var(--white);border-radius:var(--r);overflow:hidden;
     text-decoration:none;box-shadow:var(--sh-1);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.sim:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.sim-img{height:170px;flex:none;background:var(--sand);position:relative}
.sim-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sim-b{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
.sim-b h3{font-size:16.5px;margin-bottom:5px}
.sim-b p{margin:0;font-size:13.5px;color:var(--ink-2)}
.sim-b .sim-why{margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--blue)}
.sim-b .pr{margin-top:auto;padding-top:12px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:26px 0 0;padding:0}
.chips a{display:inline-flex;align-items:center;height:44px;padding:0 18px;text-decoration:none;
         font-size:14.5px;font-weight:600;background:var(--white);border-radius:var(--pill);box-shadow:var(--sh-1);
         transition:color .16s,box-shadow .16s}
.chips a:hover{color:var(--blue);box-shadow:var(--sh-2)}

/* ================= FAQ ================= */
.faq{display:grid;gap:10px}
.faq details{background:var(--white);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.faq summary{padding:22px 58px 22px 24px;font-weight:700;font-size:17px;cursor:pointer;
             position:relative;list-style:none;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;
    margin-top:-8px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
    transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.faq .ans{padding:0 24px 24px;color:var(--ink-2);font-size:15.5px;max-width:56em}

/* ================= ФИНАЛ + ФУТЕР ================= */
/* без вуали поверх фото: слева графитовая плашка с текстом, справа чистый кадр */
.final{border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:1fr;
       background:var(--night);color:#fff}
@media(min-width:860px){.final{grid-template-columns:1.05fr 1fr}}
.final-in{padding:clamp(30px,4vw,60px);display:flex;flex-direction:column;justify-content:center}
.final-media{position:relative;min-height:clamp(240px,26vw,340px);background:var(--sand)}
.final-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final .eyebrow{color:rgba(255,255,255,.66)}
.final h2{color:#fff;margin-bottom:14px;letter-spacing:-.035em}
.final p{color:rgba(255,255,255,.8);font-size:var(--fs-lead);margin-bottom:30px;max-width:36ch}
.final-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.final-note{font-size:13px;color:rgba(255,255,255,.7)}
.upd{font-size:12.5px;color:var(--ink-2);margin-top:22px;text-align:center}

.foot{background:var(--night);color:rgba(255,255,255,.7);padding:56px 0 40px;font-size:14px;margin-top:var(--sec)}
.foot h3{color:#fff;font-size:16px;margin-bottom:12px}
.foot a{color:rgba(255,255,255,.9);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.foot .disc{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
            font-size:12px;line-height:1.55;color:rgba(255,255,255,.5)}

/* ================= ПОПАП-ФОРМА ================= */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(12,12,16,.64)}
.modal-card{position:relative;z-index:1;width:min(470px,100%);background:var(--white);
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,40px);box-shadow:var(--sh-float);
  max-height:calc(100vh - 40px);overflow-y:auto;
  animation:mIn .2s ease}
@keyframes mIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:none;
  cursor:pointer;color:var(--ink-2);display:grid;place-items:center;border-radius:6px}
.modal-x:hover{color:var(--ink);background:var(--paper)}
.modal-x:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.modal-card h2{font-size:clamp(20px,2.4vw,26px);text-transform:none;letter-spacing:-.025em;
  margin-bottom:10px;max-width:20ch}
.modal-sub{color:var(--ink-2);font-size:15px;line-height:1.45;margin:0 0 24px;max-width:34ch}
.modal .field input{border-color:var(--sand)}
.modal .field input[aria-invalid="true"]{border-color:var(--alert)}
.modal .btn{width:100%;margin-top:14px}
.modal .agree,.quiz .agree{color:var(--ink-2)}
.modal .agree input,.quiz .agree input{accent-color:var(--blue)}
.modal .agree a,.quiz .agree a{color:var(--blue)}
.modal p.agree-err,.quiz p.agree-err{background:#FCEBEA}
.err{color:var(--alert);font-size:13px;margin:8px 0 0}
/* что произойдёт после отправки — снимает страх прозвона */
/* полоса «почему через нас» — ответ на главное возражение сразу после фактов */
.why{display:grid;gap:22px 30px;grid-template-columns:1fr;margin-top:clamp(28px,3.4vw,44px);
     padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--sand)}
@media(min-width:760px){.why{grid-template-columns:repeat(3,1fr)}}
.why>div{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.why .ic{width:20px;height:20px;color:var(--blue);stroke-width:2;grid-row:1/3;margin-top:2px}
.why b{font-size:16px;letter-spacing:-.015em}
.why span{font-size:14px;color:var(--ink-2);line-height:1.45}

/* вторичное действие первого экрана — ссылка, а не вторая кнопка */
.hero-link{display:inline-flex;align-items:center;gap:9px;min-height:48px;
           font-size:15px;font-weight:700;letter-spacing:-.005em;
           color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.45);
           padding-bottom:2px;transition:border-color .16s}
.hero-link:hover{border-color:#fff}
.hero-link:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hero-link .ic{width:17px;height:17px;stroke-width:2}

/* второй способ связаться — для тех, кто не оставляет телефон */
.alt-contact{display:flex;align-items:center;gap:10px;justify-content:center;
             margin:16px 0 0;font-size:13.5px;color:var(--ink-2)}
.alt-contact a{display:inline-flex;align-items:center;gap:7px;min-height:44px;
               font-weight:700;color:var(--blue);text-decoration:none}
.alt-contact a:hover{text-decoration:underline}
.offer .alt-contact{color:rgba(255,255,255,.75)}
.offer .alt-contact a{color:#fff}

.promise{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.4;
         color:var(--ink-2);margin:0 0 20px}
.promise .ic{width:17px;height:17px;color:var(--blue);flex:none;margin-top:2px;stroke-width:2}
.offer .promise{color:rgba(255,255,255,.82)}
.offer .promise .ic{color:#fff}
.modal-done{text-align:center;padding:10px 0 6px}
.modal-done .ic{width:46px;height:46px;color:var(--blue);margin:0 auto 16px;stroke-width:1.4}
.modal-done b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:8px}
.modal-done p{color:var(--ink-2);font-size:15px;margin:0}
@media (prefers-reduced-motion:reduce){.modal-card{animation:none}}

/* ================= STICKY ================= */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.94);
        backdrop-filter:blur(14px);box-shadow:0 -2px 20px rgba(23,23,26,.10);
        padding:11px var(--pad);display:flex;align-items:center;gap:14px;
        transform:translateY(115%);transition:transform .24s;
        padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.sticky.on{transform:none}
.sticky .p b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sticky .p span{font-size:11px;color:var(--ink-2)}
.sticky .btn{margin-left:auto;flex:none}
@media(min-width:900px){.sticky{display:none}}

/* ================= ПОЯВЛЕНИЕ ПО СКРОЛЛУ ================= */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ================= ДОБАВЛЕНО ДЛЯ «НОВОЙ ЗЕМЛИ» ================= */
/* цвет ошибки формы: в шаблоне переменная использовалась, но не была объявлена */
:root{--alert:#C0332B}

/* атрибут hidden перебивался авторским display:inline-flex у .quiz-back —
   кнопка «Назад» оставалась видимой на первом шаге квиза */
[hidden]{display:none!important}

/* карточки планировок лежат в ленте и растягиваются по высоте самой высокой.
   Подпись под чертежом занимает то одну строку, то две — из-за этого метраж
   и цена в соседних карточках расходились по вертикали. Держим подпись
   в две строки, тогда все строки карточек выстраиваются в ряд */
#rail-plans .plan-b p{margin:0}
#rail-plans .plan-meta{min-height:3.1em}

/* строка корпуса переносится по flex-wrap, а размер .who считается по
   неразорванной строке — из-за длинного описания бейдж срока уезжал
   на вторую строку. Базис 0 позволяет описанию сжаться, а не ломать ряд */
.corp-row .who{flex:1 1 0;min-width:0}

/* последняя секция отбивалась на var(--sec) снизу, и футер добавлял сверху
   ещё столько же — между финальным блоком и подвалом висело почти 300px пустоты */
.foot{margin-top:0}

/* генплан — чертёж на светлом, его нельзя кадрировать как фотографию */
.gplan{position:relative;background:var(--white);border-radius:var(--r-lg);
       min-height:clamp(300px,34vw,430px);padding:clamp(14px,1.6vw,22px)}
.gplan img{position:absolute;inset:clamp(14px,1.6vw,22px);
           width:calc(100% - 2*clamp(14px,1.6vw,22px));
           height:calc(100% - 2*clamp(14px,1.6vw,22px));object-fit:contain}
.gplan figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;
                  font-size:12px;color:var(--ink-2)}

/* Рендер «Новой Земли» светлее кадров на соседних страницах: общей вуали
   кадра не хватает, подзаголовок ложится на подсвеченный фасад. Общую вуаль
   не трогаем (иначе страница выпадет из ряда) — добавляем локальную подложку
   под сам текстовый блок, от прозрачной сверху, чтобы не было видимой границы */
.hero-in{background:linear-gradient(180deg,rgba(8,10,18,0) 0%,
                                    rgba(8,10,18,.24) 34%,rgba(8,10,18,.42) 100%)}

/* пары «параметр — значение» в блоке про подготовку квартиры */
.spec{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.spec li{display:grid;grid-template-columns:1fr;gap:2px;padding:13px 0;
         border-top:1px solid var(--sand);font-size:15px}
@media(min-width:520px){.spec li{grid-template-columns:150px 1fr;gap:16px;align-items:baseline}}
.spec b{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.spec span{color:var(--ink);line-height:1.45}


/* =====================================================================
   ВИЗУАЛ v6 ДЛЯ ВСЕГО САЙТА
   Перенесено с главной, чтобы главная, каталог и страницы ЖК говорили на одном языке:
   токены, кнопки-таблетки, жидкое стекло, сияние, общая шапка с мобильным меню,
   подвал, белые плашки с мягкой тенью вместо плоских ячеек.
   ===================================================================== */
:root{
  /* цвет — v6; те же значения теперь и в zhk.css, здесь продублированы, чтобы главная не зависела от порядка правок */
  --paper:#EEF0F4; --sand:#DDE1EA; --ink:#17171A; --ink-2:#5B6072;
  --blue:#1A56DB; --blue-d:#1447B8; --blue-l:#E6EDFC; --tint:rgba(26,86,219,.08);
  --night:#111320; --night-2:#1C1F2E; --sky:#8FB0F5;
  --line:rgba(23,23,26,.08); --line-n:rgba(255,255,255,.1);
  /* форма — шкала v6, приведённая к размеру экрана */
  --r:16px; --r-lg:24px; --r-xl:32px; --pill:999px;
  --sh-plate:0 1px 0 rgba(23,23,26,.03),0 14px 36px rgba(30,45,90,.07);
  --head-h:68px;
  /* один шаг между блоками страницы: от контента до контента и от края тёмной панели до контента */
  --gap-sec:clamp(64px,8vw,112px);
}
body{background:var(--paper)}
h1,h2,h3{font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{display:block}

/* ---------- кнопки v6: таблетка, без капса ---------- */
.btn{border-radius:var(--pill);text-transform:none;letter-spacing:-.005em;font-size:15.5px;font-weight:700;
     height:54px;padding:0 26px;transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.btn:active{transform:scale(.98)}
.btn--sm{height:44px;padding:0 20px;font-size:14.5px;letter-spacing:0}
.btn.outline{border-color:rgba(23,23,26,.16)}
.btn-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;
          color:var(--ink);text-decoration:none;transition:color .16s}
.btn-link .ic{width:18px;height:18px;stroke-width:1.8;transition:transform .18s}
.btn-link:hover{color:var(--blue)}
.btn-link:hover .ic{transform:translateX(3px)}
.btn-link:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ================= ЖИДКОЕ СТЕКЛО =================
   Три слоя, все обязательны: размытие фона, блик по кромке (::before), отсвет сверху (::after).
   По умолчанию — молочное стекло для светлого сияния; на фото — тёмное (.zc-img, .aero). */
.glass,.fin .quiz{position:relative;isolation:isolate;background:rgba(255,255,255,.5);
       -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
       box-shadow:0 18px 48px rgba(30,45,90,.12),inset 0 1px 0 rgba(255,255,255,.9)}
.glass::before,.fin .quiz::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:-1;
  background:linear-gradient(150deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.2) 38%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass::after,.fin .quiz::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 60%)}
/* стекло на фото — тёмное, 38% ночи, белый текст */
.zc-img .glass,.aero .glass{background:rgba(17,19,32,.38);color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.9)} .zc-img .glass,.aero .glass{background:rgba(17,19,32,.72)}
}

/* ================= СИЯНИЕ =================
   Три размытых пятна и зерно. Только первый экран и финал — по правилу v6 «обложка и финал». */
.aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
      background:radial-gradient(38% 42% at var(--au-lx,74%) var(--au-ly,6%),rgba(255,255,255,.95) 0%,transparent 70%)}
.aura::before,.aura::after{content:"";position:absolute;border-radius:50%;filter:blur(70px)}
.aura::before{width:var(--au-s1,64vw);height:var(--au-s1,64vw);left:var(--au-x1,-16vw);top:var(--au-y1,8%);
              background:radial-gradient(circle,rgba(26,86,219,.5) 0%,transparent 66%)}
.aura::after{width:var(--au-s2,56vw);height:var(--au-s2,56vw);left:var(--au-x2,54vw);top:var(--au-y2,-4%);
             background:radial-gradient(circle,rgba(120,160,245,.7) 0%,transparent 66%)}
/* a3 — зеркальная раскладка для финала: обложка и финал не повторяют друг друга */
.aura.a3{--au-x1:56vw;--au-y1:10%;--au-x2:-18vw;--au-y2:30%;--au-lx:24%;--au-ly:4%}
.grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}


/* ---------- ШАПКА: стекло над контентом, одна на весь сайт (parts/header.html) ---------- */
.top{background:rgba(238,240,244,.66);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
.top::after{background:rgba(23,23,26,.06)}
.top .wrap{gap:12px}
.top .logo{flex:none;display:block}
.top .logo img{height:28px;width:auto}
.h-nav{display:none;gap:2px;margin-left:clamp(8px,2vw,32px);padding:4px;border-radius:var(--pill);
       background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.h-nav a{font-size:14px;font-weight:600;text-decoration:none;padding:9px 13px;border-radius:var(--pill);white-space:nowrap;
         color:var(--ink-2);transition:color .16s,background-color .16s}
.h-nav a:hover{color:var(--ink);background:rgba(255,255,255,.9)}
.h-nav a[aria-current="page"]{color:var(--ink);background:var(--white)}
.h-nav a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.top-cta{margin-left:auto}
.top-price{margin-left:auto}
.top-price+.top-cta{margin-left:0}
.top-price b{font-size:15px}
/* мобильное меню: кнопка-бургер и стеклянная панель под шапкой */
.burger{flex:none;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
        background:rgba(255,255,255,.7);color:var(--ink);transition:background-color .16s}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
        transition:transform .2s,opacity .2s}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.burger:hover{background:var(--white)}
.burger:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media(max-width:1079px){
  .top.open .h-nav{display:grid;position:absolute;top:calc(100% + 8px);left:var(--pad);right:var(--pad);margin:0;
       /* внутри стеклянной шапки второе размытие не работает (браузер не размывает фон под вложенным стеклом),
          поэтому панель почти непрозрачная */
       padding:8px;border-radius:var(--r-lg);background:var(--white);
       -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
       box-shadow:0 24px 60px rgba(30,45,90,.18),inset 0 0 0 1px rgba(255,255,255,.9)}
  .top.open .h-nav a{padding:14px 16px;font-size:16px;color:var(--ink)}
}
@media(min-width:1080px){.h-nav{display:flex}.burger{display:none}}
@media(max-width:1180px) and (min-width:1080px){.top-price{display:none}.top-price+.top-cta{margin-left:auto}}
@media(max-width:420px){.top-cta{padding:0 14px;font-size:13.5px}.top .logo img{height:24px}}

/* ---------- ПОДВАЛ: ночная панель, один на весь сайт (parts/footer.html) ---------- */
.foot{background:var(--night);color:rgba(255,255,255,.66);font-size:14.5px;
      padding:clamp(44px,5.6vw,72px) 0 26px;margin:var(--gap-sec) clamp(8px,1.2vw,16px) clamp(8px,1.2vw,16px);
      border-radius:var(--r-xl)}
.foot-top{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:900px){.foot-top{grid-template-columns:1.1fr 2fr;gap:clamp(40px,6vw,96px)}}
.foot-logo img{height:28px;width:auto}
.foot-brand p{margin:18px 0 22px;max-width:36ch;line-height:1.55}
.foot-cols{display:grid;gap:28px;grid-template-columns:1fr 1fr}
@media(min-width:1100px){.foot-cols{grid-template-columns:repeat(4,auto);justify-content:space-between}}
.foot h3{color:#fff;font-size:15px;margin-bottom:14px;letter-spacing:-.01em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .16s}
.foot a:hover{color:#fff;text-decoration:none}
.foot .btn.on-blue{color:var(--blue)}
.foot .disc{margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:1px solid var(--line-n);font-size:12px;line-height:1.6;color:rgba(255,255,255,.45)}
.foot .disc a{color:rgba(255,255,255,.7);text-decoration:underline}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:rgba(255,255,255,.5)}
.foot-up{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.foot-up .ic{width:16px;height:16px;transform:rotate(-90deg)}
.foot :focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

/* ---------- модалка, квиз, вопросы — в той же форме ---------- */
.modal-card{border-radius:var(--r-xl)}
.modal-backdrop{background:rgba(17,19,32,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.opt{border-radius:var(--r)}
.qfinal .field input,.modal .field input,.offer .field input{border-radius:var(--r)}
.quiz-bar{border-radius:var(--pill)}
.faq{gap:10px}
.faq details,.sec--w .faq details{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-plate);transition:box-shadow .2s}
.faq details[open]{box-shadow:0 18px 44px rgba(30,45,90,.1)}
.faq summary{padding:24px 64px 24px 28px;font-weight:600;font-size:17px}
.faq summary::after{right:28px;width:9px;height:9px;border-width:0 2px 2px 0}
.faq .ans{padding:0 28px 26px}

/* ---------- страницы ЖК: ритм, рубрики, заголовки как на главной ---------- */
:root{--sec:var(--gap-sec)}
.eyebrow{font-weight:600;letter-spacing:.14em;color:var(--blue)}
.sec-head h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.035em;max-width:28ch}
.sec-head .lead{max-width:64ch;text-wrap:balance}
/* белые полосы на всю ширину убраны: фон один, светлый; всё, что лежит на нём, — белые плашки */
.sec--w{background:transparent}

/* плашки: белые, крупное скругление, мягкая тень — как карточки главной */
.cell,.sec--w .cell{background:var(--white);border-top:0;border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh-plate)}
.cell--blue,.sec--w .cell--blue{background:var(--blue);box-shadow:0 22px 50px rgba(26,86,219,.26)}
.cell--img,.sec--w .cell--img{padding:0;background:var(--sand)}
.cell .ic-badge{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blue-l)}
.cell .ic-badge .ic{width:22px;height:22px;stroke-width:1.7}
.cell--blue .ic-badge{background:rgba(255,255,255,.16)}
.bento{gap:16px}
.rate{border-radius:var(--r-lg);box-shadow:var(--sh-plate)}
.rate--accent{box-shadow:0 22px 50px rgba(26,86,219,.26)}
.route{border-radius:var(--r);box-shadow:var(--sh-plate)}
.corp-row{border-radius:var(--r);box-shadow:var(--sh-plate)}
.finish-body,.sec--w .finish-body{background:var(--white);box-shadow:var(--sh-plate)}
.quiz{box-shadow:var(--sh-plate)}
.facts{border-radius:var(--r-lg);box-shadow:0 18px 48px rgba(30,45,90,.12)}
.gplan{box-shadow:var(--sh-plate)}
.af,.shot{border-radius:var(--r-lg)}
.loc-map{border-radius:var(--r-lg)}
/* планировка — товарная плитка на белом, как у референса */
.plan-img,.sec--w .plan-img{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-plate)}
.plan:hover .plan-img{background:#F6F7FA}
.plan-price i{color:var(--ink-2)}
/* похожие ЖК — та же плитка, что на главной */
.sim{border-radius:var(--r-lg);box-shadow:var(--sh-plate)}
.sim-img{height:190px}
/* бейджи на фото первого экрана — жидкое стекло: размытие, блик по кромке */
.pill{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.pill.solid{box-shadow:none}
/* синий блок с формой — те же пропорции, что у панелей главной */
.offer{box-shadow:0 30px 70px rgba(26,86,219,.25)}
.offer-form{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.status{border-radius:var(--pill)}

/* ================= СТРАНИЦА «СПАСИБО» (pages/spasibo.html) ================= */
.ty{padding:clamp(28px,5vw,64px) 0 var(--sec)}
.ty-card{display:grid;gap:clamp(24px,4vw,48px);background:var(--white);border-radius:var(--r-xl);
         padding:clamp(24px,4.5vw,56px);overflow:hidden}
@media(min-width:900px){.ty-card{grid-template-columns:minmax(0,1fr) clamp(260px,30vw,380px);align-items:center}}
.ty-ok{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;
       color:var(--blue);background:var(--blue-l);border-radius:var(--pill);padding:7px 14px 7px 10px;margin-bottom:18px}
.ty-ok .ic{width:18px;height:18px;stroke-width:2}
.ty h1{font-size:clamp(30px,4.4vw,52px);margin-bottom:16px}
.ty .lead{max-width:36em;margin-bottom:28px}
.ty-steps{list-style:none;counter-reset:ty;margin:0 0 28px;padding:0;display:grid;gap:10px}
@media(min-width:600px) and (max-width:899px),(min-width:1180px){.ty-steps{grid-template-columns:repeat(3,1fr)}}
.ty-steps li{counter-increment:ty;background:var(--paper);border-radius:var(--r);padding:16px 18px}
.ty-steps li::before{content:"0" counter(ty);display:block;font-size:12px;font-weight:700;color:var(--blue);
                     letter-spacing:.08em;margin-bottom:8px}
.ty-steps b{display:block;font-size:16px;letter-spacing:-.01em;margin-bottom:4px}
.ty-steps span{display:block;font-size:14px;line-height:1.4;color:var(--ink-2)}
.ty-tg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
       background:var(--blue);color:#fff;border-radius:var(--r-lg);padding:clamp(20px,3vw,28px);margin-bottom:24px}
.ty-tg>div{flex:1 1 280px}
.ty-tg b{display:block;font-size:clamp(18px,1.8vw,22px);letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.ty-tg p{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.82)}
.ty-tg .btn{flex:none}
@media(max-width:460px){.ty-tg .btn{flex:1 1 100%}}
.ty-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.ty-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue);text-decoration:none;min-height:48px}
.ty-link:hover{color:var(--blue-d)}
.ty-link .ic{width:17px;height:17px;stroke-width:2}
/* две кнопки одинаковой ширины — по самой широкой (страница 404); на телефоне — друг под другом во всю ширину */
.ty-btns{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}
@media(max-width:520px){.ty-btns{display:grid;grid-auto-flow:row;width:100%}}
.ty-mascot{display:flex;flex-direction:column;align-items:center;gap:8px}
.ty-mascot img{width:100%;max-width:380px;height:auto}
@media(max-width:899px){.ty-mascot{order:-1}.ty-mascot img{max-width:220px}}

/* ---------- Документы: политика, согласия (pages/politika-*.html, pages/soglasie-*.html) ---------- */
.doc{padding:clamp(28px,5vw,64px) 0 var(--sec)}
.doc .wrap{display:grid;gap:clamp(20px,3vw,40px);align-items:start}
@media(min-width:960px){.doc .wrap{grid-template-columns:260px minmax(0,1fr)}}
.doc-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
@media(min-width:960px){.doc-nav{position:sticky;top:calc(var(--head-h) + 24px)}}
.doc-nav a{display:block;padding:12px 16px;border-radius:var(--r);font-size:15px;line-height:1.35;
           color:var(--ink-2);text-decoration:none;background:var(--white)}
.doc-nav a:hover{color:var(--ink)}
.doc-nav a[aria-current]{color:var(--blue);background:var(--blue-l);font-weight:700}
.doc-body{background:var(--white);border-radius:var(--r-xl);padding:clamp(22px,4.5vw,56px);min-width:0;
          font-size:var(--fs-body);line-height:1.6;overflow-wrap:anywhere}
.doc-body h1{font-size:clamp(26px,3.6vw,42px);line-height:1.15;margin:0 0 clamp(20px,3vw,32px)}
.doc-body h2{font-size:clamp(19px,2vw,24px);line-height:1.3;margin:clamp(28px,4vw,44px) 0 12px}
.doc-body p{margin:0 0 10px}
.doc-body ul{margin:0 0 14px;padding-left:1.3em}
.doc-body li{margin-bottom:4px}
.doc-body li::marker{color:var(--blue)}

/* ================= ПЛАШКА COOKIES (создаёт zhk.js) ================= */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;max-width:560px;
  display:grid;gap:14px;padding:18px 20px;border-radius:var(--r);background:var(--white);
  box-shadow:0 12px 40px rgba(23,23,26,.18);font-size:14.5px;line-height:1.5}
.cookie p{margin:0;color:var(--ink-2)}
.cookie a{color:var(--blue)}
.cookie-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cookie-btns .btn{padding:0 12px}
@media(min-width:760px){.cookie-btns{display:flex}.cookie-btns .btn{padding:0 22px}}
.cookie .btn.ghost{border-color:var(--sand)}
@media(min-width:760px){.cookie{left:24px;bottom:24px}}
form p.send-err a{color:inherit;text-decoration:underline}