/* ============================================================
   Кинематографичный премиум. Ритм тёмное-светлое-тёмное:
   герой во весь экран на фото, светлый каталог с крупными
   изображениями, тёмная секция сделки, изумрудный показ.
   От чёрного с золотом, на котором сидит вся ниша, уходим
   в графит с изумрудом залива.
   ============================================================ */
:root{
  --night:#0A1114;
  --night-2:#101A1E;
  --bg:#FAF8F4;
  --bg-2:#F2EEE7;
  --surface:#FFFFFF;
  --ink:#14181A;
  --ink-2:#454F53;
  --ink-3:#7C868B;
  --accent:#12857A;
  --accent-d:#0E4F4A;
  --accent-l:#3FB8A6;
  --accent-soft:rgba(18,133,122,.1);
  --line:#E6DFD4;
  --line-2:#D8CFC0;
  --r:20px;
  --r-s:12px;
  --maxw:1360px;
  --sh-lg:0 2px 6px rgba(10,17,20,.06), 0 34px 80px rgba(10,17,20,.16);
}
*{box-sizing:border-box}
html{background:var(--night); -webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:17px; line-height:1.6; overflow-x:hidden}
h1,h2,h3{margin:0; line-height:1.06; letter-spacing:-.025em; font-weight:700; text-wrap:balance}
h2{font-size:clamp(31px,4.2vw,54px)}
p{margin:0; text-wrap:pretty}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{width:min(100% - clamp(32px, 6vw, 120px), var(--maxw)); margin-inline:auto}
.eyebrow{font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 16px}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:12px 18px; z-index:300}
.skip-link:focus{left:12px; top:12px}
:focus-visible{outline:2px solid var(--accent-l); outline-offset:3px; border-radius:4px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:600; font-size:16px; line-height:1; padding:18px 30px; border-radius:var(--r-s); border:1px solid transparent; cursor:pointer; text-decoration:none; min-height:56px; transition:transform .18s, background .18s, box-shadow .18s, border-color .18s, color .18s}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 10px 30px rgba(18,133,122,.3)}
.btn-primary:hover{background:var(--accent-l); transform:translateY(-2px); box-shadow:0 16px 38px rgba(18,133,122,.38)}
.btn-light{background:#fff; color:var(--accent-d)}
.btn-light:hover{background:#EAF3F1; transform:translateY(-2px)}
.btn-block{width:100%}

/* ---------- Шапка поверх героя ---------- */
.hdr{position:absolute; top:0; left:0; right:0; z-index:60; padding:20px 0; transition:background .3s, padding .3s, box-shadow .3s}
.inner-page .hdr:not(.stuck){background:linear-gradient(180deg, rgba(10,17,20,.98), rgba(10,17,20,.92))}
.hdr.stuck{position:fixed; background:rgba(10,17,20,.88); backdrop-filter:saturate(160%) blur(16px); padding:11px 0; box-shadow:0 6px 30px rgba(0,0,0,.3)}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; color:#fff}
.brand-mark{
  width:42px; height:42px; border:1px solid rgba(255,255,255,.42); display:grid; place-items:center;
  flex-shrink:0; font-family:'Playfair Display',Georgia,serif; font-size:15px; font-weight:600;
  letter-spacing:.06em; color:#fff; transition:border-color .2s;
}
.brand:hover .brand-mark{border-color:var(--accent-l)}
.brand-name{
  font-family:'Playfair Display',Georgia,serif; font-size:19px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; display:block; line-height:1.1;
}
.brand-sub{
  display:block; font-size:9.5px; font-weight:500; color:rgba(255,255,255,.52);
  letter-spacing:.19em; text-transform:uppercase; margin-top:4px;
}
.hdr-right{display:flex; align-items:center; gap:16px}
.hdr-cat{opacity:.84; transition:opacity .18s, color .18s}
.hdr-cat:hover{opacity:1; color:var(--accent-l) !important}
.hdr-phone{text-decoration:none; color:#fff; font-weight:600; font-size:17px; white-space:nowrap}
.hdr-phone small{display:block; font-size:10.5px; font-weight:500; color:rgba(255,255,255,.55)}
.hdr .btn{padding:13px 22px; min-height:46px; font-size:15px}

/* ---------- Герой ---------- */
.hero{position:relative; min-height:min(100svh, 780px); display:flex; align-items:center; padding:100px 0 72px; overflow:hidden; background:var(--night)}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.04)}
/* Два градиента: вертикальный держит шапку и низ, диагональный подкладывает
   текст. Без него белый заголовок теряется на светлых участках фото. */
.hero-bg::after{content:''; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,17,20,.86) 0%, rgba(10,17,20,.3) 26%, rgba(10,17,20,.5) 66%, rgba(10,17,20,.95) 100%),
  linear-gradient(100deg, rgba(10,17,20,.9) 0%, rgba(10,17,20,.6) 42%, rgba(10,17,20,.12) 74%)}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(36px,4vw,72px); align-items:center}
.hero-copy{color:#fff}
.hero .eyebrow{color:var(--accent-l)}
.hero h1{font-size:clamp(32px,3.6vw,54px); margin-bottom:20px; color:#fff; letter-spacing:-.03em; line-height:1.06; max-width:19ch}
.hero h1 .hl{color:var(--accent-l); font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:500; letter-spacing:-.01em}
.hero-lead{font-size:17.5px; color:rgba(255,255,255,.74); margin-bottom:22px; max-width:590px}
/* Дефицит на первом экране. У лучшей по конверсии страницы клиента ограничение
   стояло прямо в заголовке, его нельзя было проскроллить. */
.hero-deficit{
  display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.45;
  color:rgba(255,255,255,.6); padding:0 0 0 1px; margin-bottom:26px; max-width:560px;
}
.hero-deficit .dot{margin-top:6px}
.hero-facts{display:grid; grid-template-columns:repeat(3,auto); gap:clamp(20px,2.4vw,40px); justify-content:start; align-items:start; width:fit-content; margin-bottom:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2)}
.hf b{display:block; font-family:'Playfair Display',Georgia,serif; font-size:clamp(22px,2vw,30px); font-weight:600; color:#fff; line-height:1; white-space:nowrap}
.hf span{font-size:12.5px; color:rgba(255,255,255,.6); display:block; margin-top:7px; max-width:22ch; line-height:1.35}
.hero-note{display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.58)}
.hero-jump{display:none; margin-top:20px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent-l); box-shadow:0 0 0 4px rgba(63,184,166,.22); flex-shrink:0; animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(63,184,166,0)}}

/* ---------- Форма стеклом ---------- */
.formcard{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); border-radius:var(--r); padding:26px 28px; backdrop-filter:blur(22px) saturate(140%); box-shadow:0 30px 70px rgba(0,0,0,.4); position:relative; color:#fff}
.formcard-tag{position:absolute; top:-13px; left:28px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:7px 14px; border-radius:99px}
.formcard h2{font-size:26px; margin:4px 0 8px; color:#fff; letter-spacing:-.02em}
.fc-sub{font-size:14px; color:rgba(255,255,255,.72); margin-bottom:18px}
.field{margin-bottom:11px}
.field label{display:block; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:7px}
.field input{width:100%; font:inherit; font-size:16px; padding:15px 16px; border-radius:var(--r-s); border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; transition:border-color .18s, background .18s, box-shadow .18s}
.field input::placeholder{color:rgba(255,255,255,.45)}
.field input:focus{outline:none; border-color:var(--accent-l); background:rgba(255,255,255,.16); box-shadow:0 0 0 3px rgba(63,184,166,.2)}
.field.err input{border-color:#FF8A7A}
.field .msg{display:none; font-size:12.5px; color:#FF8A7A; margin-top:6px}
.field.err .msg{display:block}
.segbox{margin-bottom:16px}
.segbox>span{display:block; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:8px}
.seg{display:flex; gap:8px}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg label{flex:1; text-align:center; padding:12px 10px; border:1px solid rgba(255,255,255,.22); border-radius:var(--r-s); font-size:15px; font-weight:500; cursor:pointer; background:rgba(255,255,255,.07); color:#fff; transition:background .16s, color .16s, border-color .16s}
.seg input:checked + label{background:#fff; color:var(--accent-d); border-color:#fff; font-weight:600}
.seg input:focus-visible + label{outline:2px solid var(--accent-l); outline-offset:2px}
.hint{font-size:12.5px; color:rgba(255,255,255,.6); margin:13px 0 0; text-align:center}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:15px; font-size:12px; color:rgba(255,255,255,.6); line-height:1.45}
.consent input{margin-top:2px; width:17px; height:17px; accent-color:var(--accent-l); flex-shrink:0}
.consent a{color:rgba(255,255,255,.85)}
.consent.err{color:#FF8A7A}
.consent.err a{color:#FF8A7A}
.consent.err input{outline:2px solid #FF8A7A; outline-offset:2px; border-radius:3px}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}

/* ---------- Полоса застройщиков ---------- */
.devs{background:var(--night-2); border-top:1px solid rgba(255,255,255,.07); padding:26px 0}
.devs-in{display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:space-between}
.devs-lab{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.38)}
.devs-list{display:flex; align-items:center; gap:36px; flex-wrap:wrap}
.dev-logo{font-family:'Playfair Display',Georgia,serif; font-size:21px; font-weight:600; color:rgba(255,255,255,.62); letter-spacing:.03em; transition:color .2s}
.dev-logo:hover{color:#fff}

/* ---------- Секции ---------- */
.sec{padding:96px 0}
.sec-head{margin-bottom:40px; max-width:900px}
.sec-head h1{font-size:clamp(34px,4vw,54px)}
.sec-sub{font-size:18.5px; color:var(--ink-2); margin-top:16px}
.sec-dark{background:var(--night); color:#fff}
.sec-dark h2{color:#fff}

/* ---------- Фильтр ---------- */
.picker{display:flex; gap:30px; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; padding:24px 0 30px; border-block:1px solid var(--line); margin-bottom:34px}
.pick-groups{display:flex; gap:30px; flex-wrap:wrap}
.pick-group>span{display:block; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chips input{position:absolute; opacity:0; width:0; height:0}
.chips label{padding:10px 16px; border:1px solid var(--line-2); border-radius:99px; font-size:14.5px; font-weight:500; cursor:pointer; background:#fff; white-space:nowrap; transition:border-color .16s, background .16s, color .16s}
.chips label:hover{border-color:var(--accent)}
.chips input:checked + label{border-color:var(--accent); background:var(--accent); color:#fff}
.chips input:focus-visible + label{outline:2px solid var(--accent); outline-offset:2px}
.picker-count{font-size:15px; color:var(--ink-2); white-space:nowrap}
.picker-count b{font-family:'Playfair Display',Georgia,serif; font-size:26px; color:var(--ink); margin-right:5px}

/* ---------- Карточки объектов ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:24px}
.card{background:var(--surface); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line); transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:transparent}
.card:focus-within{box-shadow:var(--sh-lg); border-color:var(--accent)}
.card.hide,.card.folded{display:none}
.card-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--night-2)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.07)}
.card-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,17,20,.45) 0%, rgba(10,17,20,.05) 38%, rgba(10,17,20,.75) 100%)}
.card-media::before{content:'Концептуальная визуализация'; position:absolute; left:14px; top:51px; z-index:3; padding:5px 9px; border-radius:7px; background:rgba(10,17,20,.58); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(7px); color:rgba(255,255,255,.84); font-size:9px; font-weight:600; line-height:1.2; letter-spacing:.06em; text-transform:uppercase}
.card-badge{position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,.94); color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:99px}
.card-when{position:absolute; top:14px; right:14px; z-index:2; background:rgba(10,17,20,.55); color:#fff; backdrop-filter:blur(6px); font-size:11.5px; font-weight:600; padding:7px 12px; border-radius:99px; border:1px solid rgba(255,255,255,.2)}
.card-onmedia{position:absolute; left:18px; right:18px; bottom:15px; z-index:2; color:#fff}
.card-onmedia h3{font-size:24px; margin-bottom:4px; color:#fff}
.card-onmedia .area{font-size:13.5px; color:rgba(255,255,255,.78)}
.card-body{padding:20px 20px 0}
.card-price b{font-family:'Playfair Display',Georgia,serif; font-size:28px; font-weight:600; display:block; line-height:1.05}
.card-price span{font-size:12.5px; color:var(--ink-3)}
.card-specs{display:flex; margin:18px 0 0; border-top:1px solid var(--line)}
.spec{flex:1; padding:13px 18px; border-right:1px solid var(--line)}
.spec:last-child{border-right:0}
.spec b{display:block; font-size:15.5px; font-weight:700}
.spec span{font-size:11.5px; color:var(--ink-3)}
.card-cta{padding:0 20px 20px}
.card-cta button{width:100%; background:var(--bg-2); border:0; border-radius:10px; padding:14px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; color:var(--ink); transition:background .18s, color .18s}
.card-cta button:hover{background:var(--accent); color:#fff}
.empty{padding:56px 24px; text-align:center; color:var(--ink-2); border:1px dashed var(--line-2); border-radius:var(--r); grid-column:1/-1}
.catalog-actions{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:34px; flex-wrap:wrap}
.btn-more{background:var(--night); color:#fff; box-shadow:0 14px 34px rgba(10,17,20,.2); min-width:250px}
.btn-more:hover{background:var(--night-2); transform:translateY(-2px); box-shadow:0 18px 42px rgba(10,17,20,.28)}
.more-arrow{font-size:18px; color:var(--accent-l); transition:transform .18s}
.catalog-table-link{color:var(--accent-d); font-size:15px; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(14,79,74,.24); transition:color .18s,border-color .18s}
.catalog-table-link:hover{color:var(--accent); border-color:var(--accent)}

/* ---------- Полоса-разделитель с фото ---------- */
.strip{position:relative; height:min(46vw,440px); overflow:hidden; background:var(--night)}
.strip img{width:100%; height:100%; object-fit:cover; opacity:.68}
.strip-in{position:absolute; inset:0; display:flex; align-items:center; background:linear-gradient(90deg, rgba(10,17,20,.95), rgba(10,17,20,.35) 72%)}
.strip-in .wrap{color:#fff}
.strip h2{color:#fff; max-width:760px}
.strip p{color:rgba(255,255,255,.76); font-size:18px; margin-top:16px; max-width:640px}

/* ---------- Шаги ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:20px}
.step{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:26px; transition:background .24s, border-color .24s, transform .24s}
.step:hover{background:rgba(255,255,255,.08); border-color:rgba(63,184,166,.45); transform:translateY(-4px)}
.step-n{font-family:'Playfair Display',Georgia,serif; font-size:15px; font-weight:600; color:var(--accent-l); border:1px solid rgba(63,184,166,.4); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; margin-bottom:18px}
.step h3{font-size:18.5px; margin-bottom:9px; color:#fff; letter-spacing:-.01em}
.step p{font-size:14.5px; color:rgba(255,255,255,.66)}

/* ---------- Показ ---------- */
.show{position:relative; border-radius:var(--r); overflow:hidden; background:var(--accent-d)}
.show-bg{position:absolute; inset:0}
.show-bg img{width:100%; height:100%; object-fit:cover; opacity:.32}
.show-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(105deg, rgba(14,79,74,.96) 0%, rgba(14,79,74,.74) 55%, rgba(14,79,74,.42) 100%)}
.show-in{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:56px}
.show h2{color:#fff}
.show .eyebrow{color:rgba(255,255,255,.72)}
.show p.lead{color:rgba(255,255,255,.82); font-size:17.5px; margin:16px 0 28px}
.show-list{list-style:none; padding:0; margin:0}
.show-list li{padding:13px 0 13px 28px; position:relative; color:rgba(255,255,255,.9); font-size:16px; border-bottom:1px solid rgba(255,255,255,.14)}
.show-list li::before{content:''; position:absolute; left:2px; top:21px; width:8px; height:8px; border-radius:50%; background:var(--accent-l)}
.show .formcard{background:rgba(255,255,255,.1)}

/* ---------- Футер ---------- */
.ftr{background:var(--night); color:rgba(255,255,255,.62); padding:64px 0 36px; font-size:14.5px}
.ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1)}
.ftr h4{font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 16px; font-weight:600}
.ftr a{color:rgba(255,255,255,.78); text-decoration:none}
.ftr a:hover{color:#fff}
.ftr ul{list-style:none; padding:0; margin:0}
.ftr li{margin-bottom:10px}
.ftr-legal{padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.4); line-height:1.65}
.ftr-legal p{margin-bottom:10px}

/* ---------- Модалка ---------- */
.modal{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal-bg{position:absolute; inset:0; background:rgba(10,17,20,.72); backdrop-filter:blur(6px)}
.modal-box{position:relative; width:min(100%,470px); max-height:92vh; overflow-y:auto; background:var(--night-2); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:32px; color:#fff; box-shadow:var(--sh-lg)}
.modal-x{position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:rgba(255,255,255,.55); border-radius:8px}
.modal-x:hover{background:rgba(255,255,255,.1); color:#fff}
.modal-box .formcard{background:transparent; border:0; padding:0; backdrop-filter:none; box-shadow:none}
.done{text-align:center; padding:12px 0}
.done-ic{width:60px; height:60px; border-radius:50%; background:rgba(63,184,166,.16); color:var(--accent-l); display:grid; place-items:center; margin:0 auto 18px; font-size:27px}
.done h3{font-size:25px; margin-bottom:10px; color:#fff}
.done p{color:rgba(255,255,255,.72); margin-bottom:8px; font-size:15px}
.done .num{font-family:'Playfair Display',Georgia,serif; font-size:21px; color:var(--accent-l)}

/* ---------- Куки ---------- */
.cookie{
  position:fixed; left:24px; right:auto; bottom:24px; z-index:200; display:none;
  width:min(690px,calc(100% - 48px)); background:rgba(16,26,30,.96); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:14px 16px;
  font-size:12.5px; color:rgba(255,255,255,.72); box-shadow:0 18px 54px rgba(0,0,0,.34);
}
.cookie.show{display:block}
.cookie .wrap{width:100%}
.cookie-in{display:flex; align-items:center; justify-content:space-between; gap:18px}
.cookie p{margin:0; max-width:none}
.cookie .btn{flex-shrink:0}
.cookie a{color:#fff}

.cookie .btn{padding:11px 20px; min-height:42px; font-size:14px}

/* ---------- Появление ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .52s cubic-bezier(.2,.7,.3,1), transform .52s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

/* ---------- Адаптив ---------- */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr; gap:38px}
  .hero{min-height:auto; padding:108px 0 56px}
  .show-in{grid-template-columns:1fr; gap:32px; padding:38px}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{width:min(100% - 32px, var(--maxw))}
  .hdr{padding:14px 0}
  .hdr .btn, .hdr-phone small, .brand-sub, .hdr-cat{display:none}
  .sec{padding:60px 0}
  /* Три колонки цифр на узком экране жмутся, подписи рвутся. Разворачиваем
     в список: цифра слева, расшифровка справа. */
  .hero-facts{grid-template-columns:1fr; gap:14px; width:100%; padding-top:20px}
  .hf{display:flex; align-items:baseline; gap:12px}
  .hf b{font-size:23px}
  .hf span{margin-top:0; max-width:none; font-size:13px}
  .hero-lead{font-size:17px}
  .hero{padding:94px 0 42px}
  .hero-in{gap:30px}
  .hero-deficit{margin-bottom:20px}
  .hero-facts{margin-bottom:18px}
  .hero-note{display:none}
  .hero-jump{display:inline-flex}
  .formcard{padding:24px}
  .picker{flex-direction:column; align-items:stretch; gap:20px}
  .pick-groups{flex-direction:column; gap:18px}
  .cards{grid-template-columns:1fr}
  .catalog-actions{align-items:stretch; gap:18px; margin-top:28px}
  .catalog-actions .btn-more{width:100%}
  .catalog-table-link{text-align:center; align-self:center}
  .strip{height:auto; min-height:300px}
  .strip img{position:absolute; inset:0}
  .strip-in{position:relative; padding:44px 0; background:linear-gradient(180deg, rgba(10,17,20,.55), rgba(10,17,20,.95))}
  .show-in{padding:26px 20px}
  .ftr-grid{grid-template-columns:1fr}
  .cookie{left:12px; bottom:12px; width:calc(100% - 24px); padding:14px; border-radius:16px}
  .cookie-in{flex-direction:column; align-items:stretch; gap:11px; text-align:left}
  .cookie .btn{width:100%}
  .devs-in{gap:16px}
  .devs-list{gap:20px}
  .dev-logo{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
/* ============================================================
   СТРАНИЦА ПРОЕКТА. Посадочная под конкретный ЖК: под рекламу
   и под низкочастотку вида «застройщик + название проекта».
   ============================================================ */
.p-hero{position:relative; min-height:82svh; display:flex; align-items:flex-end; padding:130px 0 46px; overflow:hidden; background:var(--night)}
.p-hero .hero-bg::after{background:
  linear-gradient(180deg, rgba(10,17,20,.88) 0%, rgba(10,17,20,.34) 30%, rgba(10,17,20,.62) 70%, rgba(10,17,20,.96) 100%),
  linear-gradient(100deg, rgba(10,17,20,.86) 0%, rgba(10,17,20,.5) 48%, rgba(10,17,20,.1) 78%)}
.p-hero-in{position:relative; z-index:2; color:#fff}
.p-visual-note{position:absolute; right:0; bottom:-29px; padding:6px 10px; border-radius:7px; background:rgba(10,17,20,.56); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(7px); color:rgba(255,255,255,.76); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.crumbs{font-size:13.5px; color:rgba(255,255,255,.62); margin-bottom:20px}
.crumbs a{color:rgba(255,255,255,.82); text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 8px; opacity:.5}
.p-hero h1{font-size:clamp(33px,4.6vw,62px); color:#fff; letter-spacing:-.03em; margin-bottom:14px; max-width:16ch}
.p-hero .p-sub{font-size:18.5px; color:rgba(255,255,255,.76); max-width:660px; margin-bottom:32px}
.p-badges{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px}
.p-badge{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#fff; font-size:13.5px; font-weight:500; padding:8px 15px; border-radius:99px; backdrop-filter:blur(8px)}
.p-key{display:flex; gap:44px; flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(255,255,255,.18)}
.p-key div b{display:block; font-family:'Playfair Display',Georgia,serif; font-size:clamp(24px,2.6vw,34px); font-weight:600; color:#fff; line-height:1}
.p-key div span{font-size:13px; color:rgba(255,255,255,.6); display:block; margin-top:7px}

/* Прямой ответ первым блоком: этот кусок вырезают в ответ нейросети */
.answer{background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:0 var(--r-s) var(--r-s) 0; padding:24px 26px; margin-bottom:34px}
.answer p{font-size:17px; color:var(--ink)}
.answer .upd{display:block; margin-top:12px; font-size:12.5px; color:var(--ink-3)}

.p-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:44px; align-items:start}
.p-side{position:sticky; top:96px}
.p-side .formcard{background:var(--night-2); border-color:rgba(255,255,255,.14)}
.facts-table{width:100%; border-collapse:collapse; margin:8px 0 30px; font-size:15.5px}
.facts-table th,.facts-table td{padding:14px 4px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.facts-table th{color:var(--ink-3); font-weight:500; width:44%}
.facts-table td{font-weight:600}
.p-block{margin-bottom:40px}
.p-block h2{font-size:clamp(25px,2.7vw,34px); margin-bottom:18px}
.p-block h3{font-size:19px; margin:24px 0 10px}
.p-list{list-style:none; padding:0; margin:0}
.p-list li{padding:13px 0 13px 30px; position:relative; border-bottom:1px solid var(--line); font-size:16.5px; color:var(--ink-2)}
.p-list li::before{content:''; position:absolute; left:4px; top:22px; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.p-note{font-size:13.5px; color:var(--ink-3); padding:16px 18px; background:var(--bg-2); border-radius:var(--r-s); margin-top:18px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%; text-align:left; background:transparent; border:0; padding:20px 40px 20px 0; font:inherit; font-size:17.5px; font-weight:600; color:var(--ink); cursor:pointer; position:relative}
.faq-q::after{content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:400; color:var(--accent); transition:transform .2s}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{display:none; padding:0 40px 22px 0; color:var(--ink-2); font-size:16px}
.faq-item.open .faq-a{display:block}
.other{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px}
.other a{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); padding:20px; text-decoration:none; transition:border-color .2s, transform .2s}
.other a:hover{border-color:var(--accent); transform:translateY(-3px)}
.other .o-dev{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:7px}
.other .o-name{font-size:19px; font-weight:700; display:block; margin-bottom:4px}
.other .o-area{font-size:13.5px; color:var(--ink-3); display:block; margin-bottom:12px}
.other .o-price{font-family:'Playfair Display',Georgia,serif; font-size:20px; font-weight:600}
/* Сводная таблица каталога: главный цитируемый блок сайта */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.tbl-hint{display:none; margin:0 0 10px; color:var(--ink-3); font-size:13px}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px; min-width:840px}
.tbl th,.tbl td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl th{background:var(--bg-2); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.tbl a{font-weight:600; text-decoration:none; color:var(--ink)}
.tbl a:hover{color:var(--accent)}
.tbl .num{font-weight:700}
@media (max-width:1080px){ .p-grid{grid-template-columns:1fr; gap:34px} .p-side{position:static} }
@media (max-width:760px){
  .p-hero{min-height:auto; padding:104px 0 40px}
  .p-key{gap:24px}
  .p-hero h1{max-width:none}
  .p-visual-note{position:static; display:inline-block; margin-top:18px}
  .tbl-hint{display:block}
}


/* ============================================================
   БЛОКИ ВОРОНКИ. Добавлены после разбора: на странице не хватало
   расчёта полной стоимости, доверия, отработки возражений и
   легитимации звонка. Каждый блок закрывает свой стоп-фактор.
   ============================================================ */

/* Калькулятор входа: закрывает вопрос «сколько сверх цены» */
.calc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--sh-lg)}
.calc-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:26px}
.calc-field label{display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px}
.calc-field select{
  width:100%; font:inherit; font-size:16px; padding:15px 16px; border-radius:var(--r-s);
  border:1px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer;
}
.calc-field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.calc-out{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; border-top:1px solid var(--line)}
.calc-cell{padding:20px 20px 20px 0; border-right:1px solid var(--line)}
.calc-cell:last-child{border-right:0; padding-right:0}
.calc-cell b{display:block; font-family:'Playfair Display',Georgia,serif; font-size:clamp(22px,2.4vw,30px); font-weight:600; line-height:1.05}
.calc-cell.hl b{color:var(--accent)}
.calc-cell span{font-size:12.5px; color:var(--ink-3); display:block; margin-top:7px; line-height:1.35}
.calc-note{font-size:13px; color:var(--ink-3); margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}

/* Доверие: у конкурентов на посадках этого места пусто */
.trust-layout{display:grid; grid-template-columns:minmax(300px,.92fr) 1.08fr; gap:24px; align-items:stretch}
.trust-visual{position:relative; min-height:100%; margin:0; border-radius:var(--r); overflow:hidden; background:var(--night); box-shadow:var(--sh-lg)}
.trust-visual img{width:100%; height:100%; min-height:520px; object-fit:cover}
.trust-visual figcaption{position:absolute; left:16px; bottom:16px; padding:7px 11px; border-radius:8px; background:rgba(10,17,20,.7); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.8); backdrop-filter:blur(8px); font-size:11px}
.trust-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.trust-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px}
.trust-card b{display:block; font-family:'Playfair Display',Georgia,serif; font-size:30px; font-weight:600; line-height:1; margin-bottom:12px; color:var(--accent)}
.trust-card h3{font-size:17px; margin-bottom:8px; letter-spacing:-.01em}
.trust-card p{font-size:14.5px; color:var(--ink-2)}

/* Визуальный вход в справочник */
.info-hero{position:relative; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; padding:142px 0 70px; background:var(--night); color:#fff}
.info-hero-bg{position:absolute; inset:0}
.info-hero-bg img{width:100%; height:100%; object-fit:cover}
.info-hero-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,17,20,.82),rgba(10,17,20,.18) 42%,rgba(10,17,20,.9)),linear-gradient(90deg,rgba(10,17,20,.78),rgba(10,17,20,.1) 72%)}
.info-hero-in{position:relative; z-index:2}
.info-hero h1{max-width:15ch; font-size:clamp(38px,5.2vw,68px); color:#fff}
.info-hero .sec-sub{max-width:690px; color:rgba(255,255,255,.78)}
.info-hero .crumbs{margin-bottom:42px}
.info-grid-sec{padding-top:70px}

/* Возражения: формулировки взяты из того, как их произносят покупатели */
.obj-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px}
.obj-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; border-left:3px solid var(--accent)}
.obj-card h3{font-size:17.5px; margin-bottom:10px; letter-spacing:-.01em}
.obj-card h3::before{content:'«'; color:var(--accent); font-family:'Playfair Display',Georgia,serif}
.obj-card h3::after{content:'»'; color:var(--accent); font-family:'Playfair Display',Georgia,serif}
.obj-card p{font-size:15px; color:var(--ink-2)}

/* Что после заявки: звонок легитимируем заранее, приём с лучшей страницы клиента */
.after{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; counter-reset:step}
.after-item{padding:26px 24px 26px 0; border-right:1px solid rgba(255,255,255,.14); position:relative}
.after-item:last-child{border-right:0}
.after-time{display:inline-block; font-family:'Playfair Display',Georgia,serif; font-size:15px; color:var(--accent-l); border:1px solid rgba(63,184,166,.4); border-radius:99px; padding:5px 13px; margin-bottom:15px}
.after-item h3{font-size:17px; color:#fff; margin-bottom:8px; letter-spacing:-.01em}
.after-item p{font-size:14.5px; color:rgba(255,255,255,.66)}

/* Честный разговор: подготовленный покупатель уже читал новости про падение рынка */
.honest{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r); padding:34px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 30px}
.honest h3{font-size:20px; margin-bottom:0; grid-column:1/-1}
.honest p{color:var(--ink-2); margin-bottom:0; font-size:15.5px; padding-top:18px; border-top:1px solid var(--line-2)}
.honest p:last-child{margin-bottom:0}
.honest .src{font-size:12.5px; color:var(--ink-3); grid-column:1/-1; padding-top:16px}

/* Финальный захват */
.final{background:linear-gradient(135deg,var(--night),#12262A); border-radius:var(--r); padding:52px; text-align:center; position:relative; overflow:hidden; box-shadow:0 24px 70px rgba(10,17,20,.13)}
.final::before{content:''; position:absolute; width:460px; height:460px; left:50%; top:-330px; transform:translateX(-50%); border-radius:50%; background:rgba(63,184,166,.18); filter:blur(70px); pointer-events:none}
.final>*{position:relative; z-index:1}
.final h2{color:#fff; margin-bottom:16px}
.final p{color:rgba(255,255,255,.72); font-size:17.5px; max-width:640px; margin:0 auto 30px}
.final-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.final .btn-line{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.3)}
.final .btn-line:hover{background:rgba(255,255,255,.16)}

@media (max-width:760px){
  .calc{padding:22px}
  .calc-row{grid-template-columns:1fr}
  .calc-cell{border-right:0; border-bottom:1px solid var(--line); padding:16px 0}
  .calc-cell:last-child{border-bottom:0}
  .after-item{border-right:0; border-bottom:1px solid rgba(255,255,255,.14); padding:22px 0}
  .after-item:last-child{border-bottom:0}
  .final{padding:32px 22px}
  .honest{padding:24px; display:block}
  .honest h3{margin-bottom:14px}
  .honest p{margin-bottom:16px; padding-top:16px}
  .trust-layout{grid-template-columns:1fr}
  .trust-visual img{min-height:360px}
  .trust-grid{grid-template-columns:1fr}
  .info-hero{min-height:560px; padding:112px 0 48px}
  .info-hero .crumbs{margin-bottom:48px}
  .info-hero h1{font-size:36px}
}

/* ============================================================
   КОНСУЛЬТАНТ. Живой человек в углу: разбирает запрос, подбирает
   объекты из каталога и подсвечивает их прямо на странице.
   Панель на настоящем стекле: под ней видно страницу.
   ============================================================ */
.cons-btn{
  position:fixed; right:24px; bottom:24px; z-index:190; display:flex; align-items:center; gap:13px;
  background:rgba(16,26,30,.72); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.18); border-radius:99px; padding:8px 22px 8px 8px; cursor:pointer;
  box-shadow:0 18px 44px rgba(6,12,14,.42), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s; font:inherit; color:#fff;
}
.cons-btn:hover{transform:translateY(-3px); box-shadow:0 24px 56px rgba(6,12,14,.5), inset 0 1px 0 rgba(255,255,255,.18); border-color:rgba(63,184,166,.5)}
/* Аватар не обрезает индикатор: круг с фотографией лежит внутри,
   а зелёная точка сидит на его границе снаружи. */
.cons-ava{position:relative; width:44px; height:44px; flex-shrink:0}
.cons-ava-img{
  display:block; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:linear-gradient(150deg, #17635C, #0B3A36); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.cons-ava img{width:100%; height:100%; object-fit:cover}
.cons-ava-fallback{display:grid; place-items:center; width:100%; height:100%;
  font-family:'Playfair Display',Georgia,serif; font-size:16px; letter-spacing:.04em; color:rgba(255,255,255,.92)}
.cons-live{
  position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%;
  background:#3DDC84; border:2px solid #0E171B; box-shadow:0 0 0 0 rgba(61,220,132,.55);
  animation:live 2.6s ease-out infinite;
}
@keyframes live{70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.cons-btn-txt{text-align:left; line-height:1.3}
.cons-btn-txt b{display:block; font-size:14px; font-weight:600; letter-spacing:.005em}
.cons-btn-txt span{display:block; font-size:11.5px; color:rgba(61,220,132,.9); letter-spacing:.01em}

/* Панель */
.cons{
  position:fixed; right:24px; bottom:24px; z-index:195; width:min(100vw - 32px, 388px);
  max-height:min(76vh, 640px); display:none; flex-direction:column; overflow:hidden;
  background:rgba(14,23,27,.74); backdrop-filter:blur(38px) saturate(190%); -webkit-backdrop-filter:blur(38px) saturate(190%);
  border:1px solid rgba(255,255,255,.15); border-radius:22px;
  box-shadow:0 40px 90px rgba(4,9,11,.58), inset 0 1px 0 rgba(255,255,255,.14);
}
.cons.open{display:flex}
.cons-head{display:flex; align-items:center; gap:12px; padding:15px 16px; border-bottom:1px solid rgba(255,255,255,.09)}
.cons-head .cons-ava{width:42px; height:42px}
.cons-head-txt{flex:1; min-width:0}
.cons-head-txt b{
  display:block; font-family:'Playfair Display',Georgia,serif; font-size:17px; font-weight:600;
  color:#fff; letter-spacing:.01em; line-height:1.2;
}
.cons-head-txt span{display:block; font-size:11.5px; color:rgba(255,255,255,.5); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cons-head-txt .on{color:#3DDC84; font-weight:500}
.cons-x{
  width:30px; height:30px; border:0; background:rgba(255,255,255,.06); color:rgba(255,255,255,.55);
  font-size:17px; line-height:1; cursor:pointer; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; transition:background .18s, color .18s;
}
.cons-x:hover{background:rgba(255,255,255,.14); color:#fff}

.cons-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px}
.cons-body::-webkit-scrollbar{width:5px}
.cons-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:4px}
.msg{
  max-width:86%; font-size:14px; line-height:1.52; padding:11px 14px; border-radius:16px;
  flex-shrink:0; letter-spacing:.005em;
}
.msg-in{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.88); border-bottom-left-radius:6px; align-self:flex-start;
}
.msg-out{
  background:linear-gradient(140deg, #169086, #0F6E66); color:#fff; border:1px solid rgba(255,255,255,.14);
  border-bottom-right-radius:6px; align-self:flex-end; box-shadow:0 6px 18px rgba(10,80,74,.34);
}
.msg-typing{display:flex; gap:4px; padding:14px 15px}
.msg-typing i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); animation:typing 1.2s infinite}
.msg-typing i:nth-child(2){animation-delay:.15s}
.msg-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}

/* Подобранные объекты. flex-shrink:0 обязателен: в колоночном флексе
   контейнер сжимал этот блок до пары пикселей, и подбор был не виден. */
.cons-pick{
  align-self:stretch; flex-shrink:0; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11); border-radius:16px; overflow:hidden;
}
.cons-pick a{
  display:block; padding:12px 14px; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.07); transition:background .16s;
}
.cons-pick a:last-child{border-bottom:0}
.cons-pick a:hover{background:rgba(255,255,255,.08)}
.cons-pick .p-dev{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-l); display:block}
.cons-pick .p-name{font-family:'Playfair Display',Georgia,serif; font-size:16px; font-weight:600; color:#fff; display:block; margin:4px 0 3px}
.cons-pick .p-meta{font-size:12px; color:rgba(255,255,255,.55); display:block}

.cons-quick{display:flex; gap:6px; flex-wrap:wrap; padding:0 16px 12px}
.cons-quick button{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.8);
  border-radius:99px; padding:7px 13px; font:inherit; font-size:12.5px; line-height:1.3; cursor:pointer;
  white-space:nowrap; transition:background .16s, border-color .16s, color .16s;
}
.cons-quick button:hover{background:rgba(63,184,166,.16); border-color:rgba(63,184,166,.5); color:#fff}

.cons-foot{padding:13px 16px 16px; border-top:1px solid rgba(255,255,255,.09)}
.cons-form{display:flex; gap:8px}
.cons-form input{
  flex:1; font:inherit; font-size:14.5px; padding:12px 14px; border-radius:13px; min-width:0;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff;
  transition:border-color .18s, background .18s;
}
.cons-form input::placeholder{color:rgba(255,255,255,.38)}
.cons-form input:focus{outline:none; border-color:rgba(63,184,166,.65); background:rgba(255,255,255,.1)}
.cons-form button{
  width:44px; height:44px; flex-shrink:0; border:1px solid rgba(255,255,255,.14); border-radius:13px;
  background:linear-gradient(140deg, #169086, #0F6E66); color:#fff; cursor:pointer; display:grid; place-items:center;
  transition:filter .18s, transform .18s;
}
.cons-form button:hover{filter:brightness(1.12); transform:translateY(-1px)}
.cons-hint{font-size:11px; color:rgba(255,255,255,.36); margin-top:8px; text-align:center; letter-spacing:.005em}

/* Подсветка подобранных карточек в каталоге.
   Плашку вешаем на саму карточку, а не на .card-media: там уже живёт
   псевдоэлемент с подписью о концептуальной визуализации, и свойства
   двух правил складываются в один растянутый блок. */
.card.match{position:relative; border-color:var(--accent); box-shadow:0 0 0 3px rgba(18,133,122,.22), var(--sh-lg)}
.card.match::after{
  content:'Подходит по запросу'; position:absolute; z-index:4; right:14px; top:52px;
  width:auto; height:auto; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:7px 12px; border-radius:99px;
  box-shadow:0 6px 18px rgba(10,17,20,.35); pointer-events:none;
}

/* Плашка куки лежит по низу и перехватывала клики по чату. */
body.cookie-on .cons-btn{bottom:calc(24px + var(--cookie-h, 76px))}
body.cookie-on .cons{bottom:calc(24px + var(--cookie-h, 76px)); max-height:min(68vh, 580px)}

@media (max-width:760px){
  .cons-btn{right:14px; bottom:14px; gap:8px; padding:7px 14px 7px 7px}
  .cons-btn .cons-ava{width:42px; height:42px}
  .cons-btn-txt b{font-size:13.5px}
  .cons-btn-txt span{display:none}
  .cons{right:8px; left:8px; bottom:8px; width:auto; max-height:82vh}
  body.cookie-on .cons-btn{display:none}
  body.cookie-on .cons{bottom:calc(8px + var(--cookie-h, 140px)); max-height:60vh}
}
@media (prefers-reduced-motion:reduce){
  .cons-live, .msg-typing i{animation:none}
}

/* ============================================================
   ПАНЕЛЬ КАТАЛОГА. Отбор и сортировка вместо простыни карточек,
   таблица уходит под спойлер, чтобы не дублировать выдачу.
   ============================================================ */
.cat-bar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap;
  padding:22px 24px; margin-bottom:30px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh);
}
.cat-filters{display:flex; gap:14px; flex-wrap:wrap; flex:1}
.cat-field{display:flex; flex-direction:column; gap:7px; min-width:150px; flex:1}
.cat-field span{font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.cat-field select{
  font:inherit; font-size:15px; padding:12px 34px 12px 14px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line-2); background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C868B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center/11px;
  color:var(--ink); appearance:none; -webkit-appearance:none; transition:border-color .18s, box-shadow .18s;
}
.cat-field select:hover{border-color:var(--accent)}
.cat-field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.cat-meta{display:flex; align-items:center; gap:16px; flex-shrink:0}
.cat-count{font-size:15px; color:var(--ink-2); white-space:nowrap}
.cat-count b{font-family:'Playfair Display',Georgia,serif; font-size:27px; color:var(--ink); margin-right:5px}
.cat-reset{
  background:transparent; border:0; padding:0; font:inherit; font-size:14px; color:var(--accent);
  cursor:pointer; border-bottom:1px solid currentColor; line-height:1.3;
}
.cat-reset:hover{color:var(--accent-d)}

.cat-table{margin-top:38px; text-align:center}
.cat-toggle{
  background:transparent; border:1px solid var(--line-2); border-radius:99px; padding:14px 28px;
  font:inherit; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:border-color .18s, background .18s, color .18s;
}
.cat-toggle:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.cat-table #tblWrap{margin-top:24px; text-align:left}
.tbl-hint{display:none; font-size:12.5px; color:var(--ink-3); margin-bottom:10px}

@media (max-width:760px){
  .cat-bar{flex-direction:column; align-items:stretch; gap:18px; padding:18px}
  .cat-filters{flex-direction:column; gap:14px}
  .cat-field{min-width:0}
  .cat-meta{justify-content:space-between}
  .tbl-hint{display:block}
}