/* ============================================================
   КАТЕРИНА САВКА — рієлтор
   Фірмовий стиль: монограма SK (у дусі CK), нежно-рожевий + червоний + синій
   ============================================================ */

:root{
  /* Палітра */
  --paper:   #FCF8FA;   /* теплий «папір» */
  --white:   #ffffff;
  --ink:     #16121A;   /* майже чорний */
  --ink-2:   #4A4350;

  --pink-50:  #FBEAF1;
  --pink-100: #F7D6E4;
  --pink-300: #EFA3C6;
  --pink-500: #E0589B;  /* брендовий рожевий (з логотипу візитки) */
  --pink-600: #CE3F86;

  --red:   #E63148;
  --red-2: #FF2D4A;
  --blue:  #1E3FD0;
  --blue-2:#16299E;

  --radius:   22px;
  --radius-sm:14px;
  --shadow:   0 18px 50px rgba(206, 63, 134, .14);
  --shadow-sm:0 8px 24px rgba(22, 18, 26, .08);

  --maxw: 1180px;
  --ff-display:'Unbounded', system-ui, sans-serif;
  --ff-body:'Manrope', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   ТЕМНА ТЕМА — перевизначення змінних (вмикається data-theme="dark")
   ============================================================ */
:root[data-theme="dark"]{
  --paper:   #131019;
  --white:   #1E1825;   /* поверхні / картки */
  --ink:     #F2ECF6;
  --ink-2:   #ADA2BC;

  --pink-50:  #2A1C29;  /* темна рожева поверхня (фон чіпів/бейджів) */
  --pink-100: #3A2839;  /* бордюри */
  --pink-300: #B6749C;
  --pink-500: #E86FAC;  /* трохи яскравіше для контрасту */
  --pink-600: #F49AC8;  /* світліший акцент-текст на темному */

  --red:   #FF5268;
  --red-2: #FF6076;
  --blue:  #7C92FF;
  --blue-2:#5E76F0;

  --shadow:    0 18px 50px rgba(0,0,0,.55);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.45);

  /* скло у темряві */
  --glass-bg:        rgba(40,32,48,.60);
  --glass-bg-strong: rgba(28,22,35,.88);
  --glass-brd:       rgba(255,255,255,.10);
  --glass-shadow:    0 12px 34px rgba(0,0,0,.5);

  color-scheme: dark;
}
/* темні версії жорстко заданого скла/поверхонь */
:root[data-theme="dark"] .nav{
  background:rgba(20,15,26,.66);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 2px 22px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .nav__links{ background:rgba(20,15,26,.94); border-bottom-color:var(--glass-brd); }
:root[data-theme="dark"] .lb__close,
:root[data-theme="dark"] .lb__prev,
:root[data-theme="dark"] .lb__next{
  background:rgba(44,36,52,.72); border-color:rgba(255,255,255,.18); color:var(--ink);
}
:root[data-theme="dark"] .lst-chip.is-active{ background:var(--pink-500); border-color:var(--pink-500); color:#fff; }
:root[data-theme="dark"] .lb__desc{ border-top-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .lst-card__count{ border-color:rgba(255,255,255,.12); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-theme="dark"] .nav,
  :root[data-theme="dark"] .nav__links,
  :root[data-theme="dark"] .eyebrow,
  :root[data-theme="dark"] .lst-chip,
  :root[data-theme="dark"] .lb__dialog{ background:var(--white); }
}
/* герой / світлі блоки у темряві */
:root[data-theme="dark"] .hero{
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(232,111,172,.16) 0%, transparent 55%),
    radial-gradient(90% 70% at -10% 110%, rgba(124,146,255,.12) 0%, transparent 50%),
    var(--paper);
}
:root[data-theme="dark"] .hero__bgmark{ color:rgba(255,255,255,.045); }
:root[data-theme="dark"] .stat:nth-child(2){ background:#1B2233; border-color:#2A3350; }

/* перемикач теми (iOS-стиль) + контейнер інструментів навбару */
.nav__tools{ display:flex; align-items:center; gap:10px; }
.theme-tgl{
  position:relative; width:52px; height:29px; flex:none; border-radius:999px;
  border:1px solid var(--glass-brd); background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  cursor:pointer; padding:0; transition:background .3s, transform .12s ease;
  box-shadow:inset 0 1px 3px rgba(22,18,26,.10);
}
.theme-tgl:active{ transform:scale(.9); }
.theme-tgl__thumb{
  position:absolute; top:2px; left:2px; width:23px; height:23px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.28);
  display:grid; place-items:center; font-size:12px; line-height:1;
  transition:transform .34s cubic-bezier(.4,1.45,.5,1), background .3s;
}
:root[data-theme="dark"] .theme-tgl__thumb{ transform:translateX(23px); background:#3a2f44; }
.lang-tgl{
  flex:none; height:29px; min-width:42px; padding:0 11px; border-radius:999px;
  border:1px solid var(--glass-brd); background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  font-family:var(--ff-display); font-weight:800; font-size:12.5px; letter-spacing:.04em;
  color:var(--ink); cursor:pointer; transition:transform .12s ease, color .2s;
}
.lang-tgl:active{ transform:scale(.9); }
.lang-tgl:hover{ color:var(--pink-600); }
#curMenu{ display:none; }   /* валюта в бургер-меню — лише на мобільному */

/* ---------- Reset / база ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }   /* hidden на html (а не лише body) кліпає і fixed-елементи (Булку) на iOS Safari; overflow-y лишається auto → вертикальний скрол працює, sticky-шапка теж */
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Типографіка ---------- */
.h2{
  font-family:var(--ff-display);
  font-weight:800;
  font-size:clamp(28px, 4.2vw, 46px);
  line-height:1.05;
  letter-spacing:-.01em;
}
.kicker{
  display:inline-block;
  font-weight:800;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pink-600);
  margin-bottom:14px;
}
.kicker--light{ color:var(--pink-300); }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ff-body); font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--lg{ padding:16px 30px; font-size:16px; }
.btn--block{ width:100%; }
.btn--pink{ background:var(--pink-500); color:#fff; box-shadow:0 10px 26px rgba(224,88,155,.36); }
.btn--pink:hover{ background:var(--pink-600); transform:translateY(-2px); }
.btn--blue{ background:var(--blue); color:#fff; box-shadow:0 10px 26px rgba(30,63,208,.30); }
.btn--blue:hover{ background:var(--blue-2); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }

/* ============================================================
   ШАПКА
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(252,248,250,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--pink-100);
}
.nav__inner{ display:flex; align-items:center; gap:20px; height:74px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background:var(--ink); color:#fff;
  font-family:var(--ff-display); font-weight:900; font-size:18px;
  letter-spacing:-.06em; flex:none;
}
.brand__word{
  font-family:var(--ff-display); font-weight:800; font-size:15px; line-height:1.1;
  display:flex; flex-direction:column;
}
.brand__word small{
  font-family:var(--ff-body); font-weight:600; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--pink-600);
}
.brand--light .brand__mark{ background:var(--pink-500); }

.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-weight:600; font-size:15px; color:var(--ink-2);
  position:relative; padding:4px 0; transition:color .2s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--pink-500); transition:width .2s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.nav__cta{ font-size:14px; padding:11px 18px; }
.nav__burger{
  display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:8px; margin-left:auto;
}
.nav__burger span{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:.25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, var(--pink-100) 0%, transparent 55%),
    radial-gradient(90% 70% at -10% 110%, #E7ECFF 0%, transparent 50%),
    var(--paper);
}
.hero__bgmark{
  position:absolute; right:-4vw; bottom:-14vh; z-index:0;
  font-family:var(--ff-display); font-weight:900;
  font-size:48vw; line-height:.8; color:#fff;
  opacity:.55; letter-spacing:-.08em; pointer-events:none; user-select:none;
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding:64px 24px 80px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); border:1px solid var(--pink-100);
  padding:8px 15px; border-radius:999px;
  font-weight:700; font-size:13px; color:var(--ink-2);
  box-shadow:var(--shadow-sm); margin-bottom:22px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 4px rgba(230,49,72,.18); }

.hero__title{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(40px, 7vw, 82px); line-height:.98; letter-spacing:-.025em;
  margin-bottom:22px;
}
.mark-red{ position:relative; color:var(--red); white-space:nowrap; }
.mark-red::after{
  content:''; position:absolute; left:-2%; right:-2%; bottom:8%; height:34%;
  background:rgba(230,49,72,.16); z-index:-1; border-radius:6px; transform:rotate(-1.5deg);
}
.hero__lead{ font-size:clamp(16px,1.5vw,19px); color:var(--ink-2); max-width:30em; margin-bottom:30px; }
.hero__lead b{ color:var(--ink); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }

.hero__trust{ display:flex; gap:30px; list-style:none; flex-wrap:wrap; }
.hero__trust li{ display:flex; align-items:baseline; gap:10px; }
.hero__trust strong{ font-family:var(--ff-display); font-weight:800; font-size:30px; color:var(--pink-600); }
.hero__trust span{ font-size:12.5px; line-height:1.15; color:var(--ink-2); font-weight:600; }

/* Фото героя */
.hero__media{ display:flex; justify-content:center; }
.hero__photo{ position:relative; width:min(440px,100%); }
.hero__photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:30px; box-shadow:var(--shadow);
  border:6px solid #fff;
}
.sticker{
  position:absolute; font-family:var(--ff-display); font-weight:800;
  font-size:14px; line-height:1.05; text-align:center; color:#fff;
  padding:12px 16px; border-radius:16px; box-shadow:var(--shadow-sm);
}
.sticker--top{ top:18px; left:-18px; background:var(--red); transform:rotate(-7deg); }
.sticker--mid{ top:104px; right:-20px; background:var(--pink-500); transform:rotate(6deg); }
.sticker--bottom{ bottom:24px; right:-16px; background:var(--blue); transform:rotate(5deg); }

/* ============================================================
   БІГУЧИЙ БАНЕР (наляписта фішка)
   ============================================================ */
.marquee{
  background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap;
  padding:16px 0; border-top:4px solid var(--pink-500); border-bottom:4px solid var(--pink-500);
}
.marquee__track{ display:inline-flex; animation:scroll 28s linear infinite; }
.marquee__track span{
  font-family:var(--ff-display); font-weight:800; font-size:20px;
  text-transform:uppercase; letter-spacing:.02em; padding-right:0;
}
.marquee__track span:nth-child(even){ color:var(--pink-300); }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   СЕКЦІЇ — загальне
   ============================================================ */
.section{ padding:88px 0; }
.section__head{ max-width:680px; margin-bottom:46px; }
.section__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; }
.section__sub{ color:var(--ink-2); font-size:17px; margin-top:14px; }
.note-hint{
  margin-top:26px; font-size:13.5px; color:var(--pink-600);
  background:var(--pink-50); border:1px dashed var(--pink-300);
  display:inline-block; padding:9px 16px; border-radius:12px;
}

/* ============================================================
   ПРО МЕНЕ
   ============================================================ */
.about{ background:var(--white); }
.about__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.about__media{ position:relative; }
.about__photo{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.about__badge{
  position:absolute; right:-14px; bottom:-14px;
  background:var(--pink-500); color:#fff; border-radius:20px;
  padding:16px 20px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow); border:4px solid #fff;
}
.about__badge-num{ font-family:var(--ff-display); font-weight:900; font-size:34px; line-height:1; }
.about__badge-txt{ font-weight:700; font-size:12.5px; line-height:1.1; }
.about__text p{ color:var(--ink-2); font-size:17px; margin-top:16px; }
.about__text p b{ color:var(--ink); }
.quote{
  margin-top:26px; padding:20px 24px; border-left:4px solid var(--pink-500);
  background:var(--pink-50); border-radius:0 16px 16px 0;
  font-family:var(--ff-display); font-weight:600; font-size:17px; line-height:1.35;
}
.quote span{ display:block; margin-top:10px; font-family:var(--ff-body); font-weight:600; font-size:13px; color:var(--ink-2); }

/* ============================================================
   ПІДХІД — картки
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.card{
  background:var(--white); border:1px solid var(--pink-100); border-radius:var(--radius);
  padding:30px 26px; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--pink-300); }
.card__ico{
  display:grid; place-items:center; width:52px; height:52px; border-radius:14px;
  background:var(--pink-50); color:var(--pink-600); font-size:24px; margin-bottom:18px;
}
.card:nth-child(2) .card__ico{ background:#FDE7EA; color:var(--red); }
.card:nth-child(3) .card__ico{ background:#E7ECFF; color:var(--blue); }
.card h3{ font-family:var(--ff-display); font-weight:700; font-size:20px; margin-bottom:8px; }
.card p{ color:var(--ink-2); font-size:15px; }

/* ============================================================
   ОБ'ЄКТИ
   ============================================================ */
.listings{ background:var(--white); }
.grid-listings{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.listing{
  background:var(--white); border:1px solid var(--pink-100); border-radius:var(--radius);
  overflow:hidden; transition:transform .2s, box-shadow .2s;
}
.listing:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.listing__img{ position:relative; aspect-ratio:4/3; }
.listing__img--ph{
  background:
    repeating-linear-gradient(135deg, var(--pink-50) 0 14px, #fff 14px 28px);
  display:flex; align-items:flex-end;
}
.listing__tag{
  position:absolute; top:12px; left:12px;
  background:var(--blue); color:#fff; font-weight:700; font-size:12px;
  padding:6px 12px; border-radius:999px;
}
.listing__tag--sale{ background:var(--pink-500); }
.listing__body{ padding:18px 18px 20px; }
.listing__body h3{ font-family:var(--ff-display); font-weight:700; font-size:18px; }
.listing__meta{ color:var(--ink-2); font-size:14px; margin:6px 0 16px; }
.listing__foot{ display:flex; align-items:center; justify-content:space-between; }
.listing__price{ font-family:var(--ff-display); font-weight:800; font-size:17px; color:var(--pink-600); }
.listing__link{ font-weight:700; font-size:14px; color:var(--blue); }

.listing--cta{
  background:linear-gradient(160deg, var(--ink), #2a2230); color:#fff; display:flex;
}
.listing--cta__inner{ padding:26px 24px; display:flex; flex-direction:column; height:100%; }
.listing--cta__ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); font-size:26px; margin-bottom:16px;
}
.listing--cta h3{ font-family:var(--ff-display); font-weight:800; font-size:21px; line-height:1.1; }
.listing--cta p{ color:rgba(255,255,255,.74); font-size:14px; margin:10px 0 20px; }
.listing--cta .btn{ margin-top:auto; align-self:flex-start; }

/* ============================================================
   ВІДЕО
   ============================================================ */
.grid-videos{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.vid__frame{
  position:relative; aspect-ratio:9/16; border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, var(--pink-100), #DCE3FF);
  display:grid; place-items:center; transition:transform .2s, box-shadow .2s;
  border:1px solid var(--pink-100);
}
.vid:hover .vid__frame{ transform:translateY(-6px) scale(1.01); box-shadow:var(--shadow); }
.vid__play{
  width:62px; height:62px; border-radius:50%; background:var(--white); color:var(--pink-600);
  display:grid; place-items:center; font-size:22px; padding-left:4px;
  box-shadow:var(--shadow-sm);
}
.vid__wm{
  position:absolute; right:10px; bottom:10px;
  font-family:var(--ff-display); font-weight:900; font-size:14px;
  color:rgba(255,255,255,.85); letter-spacing:-.05em;
  text-shadow:0 1px 6px rgba(0,0,0,.25);
}
/* картка з реальною обкладинкою */
.vid__frame--cover{ background:#222; }
.vid__frame--cover::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.45)); }
.vid__frame--cover .vid__play, .vid__frame--cover .vid__plat, .vid__frame--cover .vid__wm{ z-index:1; }
/* плашка платформи */
.vid__plat{
  position:absolute; left:10px; top:10px; z-index:1;
  font-family:var(--ff-body); font-weight:800; font-size:11.5px; line-height:1;
  color:#fff; padding:6px 9px; border-radius:999px; letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.vid__plat--tt{ background:linear-gradient(135deg,#111,#3a3a3a); }
.vid__plat--ig{ background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); }
.vid__plat--yt{ background:#FF0000; }
.vid__plat--fb{ background:#1877F2; }
.vid__plat--web{ background:var(--pink-500); }
.vid__plat--file{ background:linear-gradient(135deg,var(--pink-600),var(--pink-500)); }
.vid__label{ display:block; margin-top:9px; font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.3; }
.vid--play{ border:0; padding:0; background:none; cursor:pointer; font:inherit; text-align:left; width:100%; }

/* лайтбокс-плеєр для завантажених відео */
.vidlb{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px; }
.vidlb[hidden]{ display:none; }
.vidlb__bd{ position:absolute; inset:0; background:rgba(10,8,12,.86); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.vidlb__box{ position:relative; z-index:1; width:min(430px,100%); }
.vidlb__v{ width:100%; max-height:90vh; border-radius:18px; background:#000; display:block; box-shadow:var(--shadow); }
.vidlb__x{ position:absolute; top:-16px; right:-6px; width:40px; height:40px; border-radius:50%; background:var(--white); color:var(--ink); border:0; font-size:17px; cursor:pointer; box-shadow:var(--shadow-sm); z-index:2; }

.socials{ display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }
.social{
  flex:1 1 200px; display:flex; flex-direction:column; gap:2px;
  padding:20px 24px; border-radius:18px; color:#fff;
  font-family:var(--ff-display); font-weight:800; font-size:20px;
  transition:transform .2s, box-shadow .2s;
}
.social small{ font-family:var(--ff-body); font-weight:600; font-size:13px; opacity:.85; }
.social:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.social--tt{ background:linear-gradient(135deg,#111,#3a3a3a); }
.social--ig{ background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); }
.social--tg{ background:linear-gradient(135deg,#2AABEE,#229ED9); }

/* ============================================================
   КОНТАКТИ
   ============================================================ */
.contact{ background:linear-gradient(160deg, var(--ink) 0%, #241B2A 100%); color:#fff; }
.contact__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.contact__lead{ color:rgba(255,255,255,.74); font-size:17px; margin-top:14px; max-width:30em; }
.contact__list{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.contact__item{
  display:flex; align-items:center; gap:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:16px 20px; border-radius:16px; transition:background .2s, transform .2s;
}
.contact__item:hover{ background:rgba(255,255,255,.12); transform:translateX(4px); }
.contact__ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--pink-500); font-size:20px; flex:none;
}
.contact__item span{ display:flex; flex-direction:column; font-family:var(--ff-display); font-weight:700; font-size:18px; }
.contact__item small{ font-family:var(--ff-body); font-weight:600; font-size:12px; color:var(--pink-300); }

.contact__form{ background:var(--white); color:var(--ink); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.contact__form h3{ font-family:var(--ff-display); font-weight:800; font-size:23px; margin-bottom:18px; }
.contact__form label{ display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:13.5px; margin-bottom:16px; }
.contact__form input, .contact__form textarea{
  font-family:var(--ff-body); font-size:15px; font-weight:500;
  padding:13px 15px; border:1.5px solid var(--pink-100); border-radius:12px;
  background:var(--paper); transition:border-color .2s, box-shadow .2s; resize:vertical;
}
.contact__form input:focus, .contact__form textarea:focus{
  outline:none; border-color:var(--pink-500); box-shadow:0 0 0 4px rgba(224,88,155,.14);
}
.form-note{ display:block; margin-top:12px; font-size:12px; color:var(--ink-2); font-weight:600; }

/* ============================================================
   ПІДВАЛ
   ============================================================ */
.footer{ background:var(--paper); padding:48px 0; border-top:1px solid var(--pink-100); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer__links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer__links a{ font-weight:600; color:var(--ink-2); font-size:15px; transition:color .2s; }
.footer__links a:hover{ color:var(--pink-600); }
.footer__copy{ font-size:13px; color:var(--ink-2); width:100%; padding-top:8px; }

/* ============================================================
   АНІМАЦІЇ ПОЯВИ
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; gap:36px; padding-top:40px; }
  .hero__media{ order:-1; }
  .hero__photo{ width:min(360px,86%); }
  .about__grid{ grid-template-columns:1fr; gap:60px; }
  .about__media{ max-width:380px; }
  .contact__grid{ grid-template-columns:1fr; gap:32px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .grid-listings{ grid-template-columns:repeat(2,1fr); }
  .grid-videos{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav__links{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0;
    background:var(--white); border-bottom:1px solid var(--pink-100);
    padding:8px 24px 18px; transform:translateY(-120%); transition:transform .3s ease;
    box-shadow:var(--shadow-sm);
  }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--pink-50); font-size:17px; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  /* щоб шапка вмістилась у вузький екран: компактний бренд, валюта — в меню */
  .nav__inner{ gap:8px; padding-left:16px; padding-right:14px; }
  .brand{ gap:7px; }
  .brand__mark{ width:32px; height:32px; font-size:13px; border-radius:9px; }
  .brand__word{ font-size:11.5px; }
  .brand__word small{ display:none; }
  .nav__tools{ gap:8px; }
  #curNav{ display:none; }
  #curMenu{ display:flex; justify-content:center; margin:14px 0 2px; }
  .section{ padding:64px 0; }
  .section__head--row{ flex-direction:column; align-items:flex-start; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px){
  .cards{ grid-template-columns:1fr; }
  .grid-listings{ grid-template-columns:1fr; }
  .grid-videos{ grid-template-columns:repeat(2,1fr); }
  .hero__trust{ gap:18px; }
  .sticker--top{ left:-6px; }
  .sticker--mid{ right:-6px; }
  .sticker--bottom{ right:-6px; }
  .marquee__track span{ font-size:16px; }
}

/* ============================================================
   КАТАЛОГ ОБ'ЄКТІВ (фільтри + картки + лайтбокс)
   ============================================================ */
.lst-filters{ display:flex; flex-wrap:wrap; gap:10px; margin:-8px 0 30px; }
.lst-chip{
  font-family:var(--ff-body); font-weight:700; font-size:14px; cursor:pointer;
  padding:9px 16px; border-radius:999px; background:var(--white); color:var(--ink-2);
  border:1.5px solid var(--pink-100); transition:.18s;
}
.lst-chip span{ opacity:.6; font-weight:700; }
.lst-chip:hover{ border-color:var(--pink-300); color:var(--ink); }
.lst-chip.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.lst-chip.is-active span{ opacity:.7; }

.lst-card{
  background:var(--white); border:1px solid var(--pink-100); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s;
  display:flex; flex-direction:column;
}
.lst-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--pink-300); }
.lst-card:focus-visible{ outline:3px solid var(--pink-300); outline-offset:2px; }
.lst-card__img{ position:relative; aspect-ratio:4/3; background:var(--pink-50); overflow:hidden; }
.lst-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.lst-card:hover .lst-card__img img{ transform:scale(1.04); }
.lst-card__deal{
  position:absolute; top:12px; left:12px; z-index:1;
  background:var(--pink-500); color:#fff; font-weight:700; font-size:12px;
  padding:6px 12px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.lst-card__deal.is-rent{ background:var(--blue); }
.lst-card__count{
  position:absolute; bottom:10px; right:10px;
  background:rgba(22,18,26,.72); color:#fff; font-weight:600; font-size:11.5px;
  padding:4px 10px; border-radius:999px; backdrop-filter:blur(2px);
}
.lst-card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.lst-card__cat{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pink-600); }
.lst-card__body h3{
  font-family:var(--ff-display); font-weight:700; font-size:16.5px; line-height:1.2; margin:7px 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lst-card__loc{ color:var(--ink-2); font-size:13px; margin-bottom:14px; }
.lst-card__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:auto; }
.lst-card__price{ font-family:var(--ff-display); font-weight:800; font-size:18px; color:var(--pink-600); white-space:nowrap; }
.lst-card__specs{ font-size:12.5px; color:var(--ink-2); text-align:right; }
.lst-more-wrap{ text-align:center; margin-top:34px; }

/* ---- Бейдж єОселя на картці ---- */
.lst-card__gov{ position:absolute; top:12px; right:12px; z-index:1; background:rgba(30,63,208,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-weight:700; font-size:11.5px;
  padding:5px 10px; border-radius:999px; box-shadow:var(--shadow-sm); border:1px solid rgba(255,255,255,.3); }
.lst-card__inst{ position:absolute; bottom:10px; left:10px; z-index:1; background:rgba(224,88,155,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-weight:700; font-size:11.5px;
  padding:5px 10px; border-radius:999px; box-shadow:var(--shadow-sm); border:1px solid rgba(255,255,255,.3); }

/* ---- Coverflow-карусель (центр більший, боки менші + glass, нескінченна) ---- */
.lst-carousel{ position:relative; height:clamp(358px, 92vw, 392px); margin-bottom:34px; touch-action:pan-y; overflow:hidden; }
.lst-carousel__track{ position:absolute; inset:0; }
.cf-card{ position:absolute; top:50%; left:50%; width:clamp(218px, 64vw, 276px); cursor:pointer;
  user-select:none; -webkit-user-select:none; transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .4s ease; will-change:transform; }
.cf-card img{ -webkit-user-drag:none; user-drag:none; }
.cf-card .lst-card{ box-shadow:var(--shadow); transition:box-shadow .4s ease; }
.cf-card .lst-card:hover{ transform:none; }
.cf-card .lst-card:hover .lst-card__img img{ transform:none; }
.cf-card.is-center .lst-card{ box-shadow:0 26px 60px rgba(206,63,134,.34); }
.cf-card__glass{ position:absolute; inset:0; border-radius:var(--radius); background:rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(5px) saturate(115%); backdrop-filter:blur(5px) saturate(115%);
  opacity:0; transition:opacity .4s ease; pointer-events:none; }
.lst-carousel__nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:0; background:var(--white); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; font-size:24px; line-height:1; z-index:50; display:none; }
.lst-carousel__nav:hover{ background:var(--pink-50); }
.lst-carousel__nav--prev{ left:6px; } .lst-carousel__nav--next{ right:6px; }
@media (min-width:700px){ .lst-carousel__nav{ display:grid; place-items:center; } }

/* ---- Заголовок "Усі об'єкти" + контролі (ціна / єОселя) ---- */
.lst-allhead{ margin:6px 0 16px; }
.lst-allhead h3{ font-family:var(--ff-display); font-weight:800; font-size:clamp(20px,2.6vw,26px); }
.lst-allhead span{ color:var(--ink-2); font-weight:600; font-size:15px; font-family:var(--ff-body); }
.lst-controls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 22px; }
.lst-price{ padding:10px 16px; border:1.5px solid var(--pink-100); border-radius:999px; background:var(--white);
  font-family:var(--ff-body); font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; }
.lst-gov{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
  border:1.5px solid var(--pink-100); background:var(--white); font-weight:700; font-size:14px; color:var(--ink-2); cursor:pointer; transition:.18s; }
.lst-gov:hover{ border-color:var(--blue); }
.lst-gov.is-on{ background:var(--blue); color:#fff; border-color:var(--blue); }
.lst-gov--inst.is-on{ background:var(--pink-500); border-color:var(--pink-500); }

/* ---- Перемикач валют ---- */
.cur-switch{ display:inline-flex; gap:2px; background:var(--pink-50); border:1px solid var(--pink-100); border-radius:999px; padding:3px; flex:none; }
.cur-btn{ border:0; background:none; cursor:pointer; font-family:var(--ff-body); font-weight:800; font-size:13px; color:var(--ink-2); min-width:30px; height:28px; padding:0 6px; border-radius:999px; transition:background .15s, color .15s, transform .12s; }
.cur-btn:hover{ color:var(--ink); }
.cur-btn:active{ transform:scale(.9); }
.cur-btn.is-on{ background:var(--pink-500); color:#fff; }
.lb__pricerow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width:760px){ .nav .cur-switch{ margin-left:auto; } }

/* ---- Селекти фільтрів (оренда/ЖК/етап) ---- */
.lst-sel{ padding:10px 14px; border:1.5px solid var(--pink-100); border-radius:999px; background:var(--white); font-family:var(--ff-body); font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; max-width:200px; }
.lst-sel:focus{ outline:none; border-color:var(--pink-500); }

/* ---- Фільтр ціни (двоповзунковий) ---- */
.lst-price-filter{ max-width:430px; margin:4px 0 24px; }
.prng-head{ display:flex; justify-content:space-between; align-items:baseline; font-weight:700; font-size:13.5px; color:var(--ink-2); margin-bottom:14px; }
.prng-head #prLbl{ color:var(--pink-600); font-size:14px; }
.prng{ position:relative; height:24px; }
.prng__track{ position:absolute; top:9px; left:0; right:0; height:6px; background:var(--pink-100); border-radius:6px; }
.prng__fill{ position:absolute; height:100%; background:var(--pink-500); border-radius:6px; }
.prng input[type=range]{ position:absolute; top:0; left:0; width:100%; height:24px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.prng input[type=range]::-webkit-slider-runnable-track{ background:none; border:none; }
.prng input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:22px; height:22px; border-radius:50%; background:var(--white); border:3px solid var(--pink-500); box-shadow:var(--shadow-sm); cursor:grab; }
.prng input[type=range]::-moz-range-track{ background:none; }
.prng input[type=range]::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%; background:var(--white); border:3px solid var(--pink-500); cursor:grab; }
.prng-inputs{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.prng-inputs input{ width:120px; padding:9px 13px; border:1.5px solid var(--pink-100); border-radius:10px; font-family:var(--ff-body); font-weight:700; font-size:14px; color:var(--ink); }
.prng-inputs input:focus{ outline:none; border-color:var(--pink-500); }
.prng-inputs span{ color:var(--ink-2); font-weight:700; }

/* ---------- Лайтбокс ---------- */
.lb{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
.lb[hidden]{ display:none; }
.lb__backdrop{ position:absolute; inset:0; background:rgba(16,12,20,.74); backdrop-filter:blur(4px); }
.lb__dialog{
  position:relative; z-index:1; width:100%; max-width:1000px; max-height:92vh;
  background:var(--white); border-radius:24px; overflow:hidden; display:grid;
  grid-template-columns:1.25fr 1fr; box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.lb__close{
  position:absolute; top:14px; right:14px; z-index:5; width:40px; height:40px; border:0;
  border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); font-size:24px;
  line-height:1; cursor:pointer; box-shadow:var(--shadow-sm); transition:.15s;
}
.lb__close:hover{ background:var(--white); transform:scale(1.06); }
.lb__gallery{ position:relative; background:#0c0a0e; display:grid; place-items:center; min-height:300px; }
.lb__img{ width:100%; height:100%; max-height:92vh; object-fit:contain; }
.lb__prev, .lb__next{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px;
  border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink);
  font-size:28px; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm); transition:.15s;
}
.lb__prev{ left:14px; } .lb__next{ right:14px; }
.lb__prev:hover, .lb__next:hover{ background:var(--white); }
.lb__counter{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(16,12,20,.7); color:#fff; font-size:12.5px; font-weight:600;
  padding:5px 12px; border-radius:999px;
}
.lb__info{ padding:30px 28px; overflow-y:auto; max-height:92vh; }
.lb__cat{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pink-600); }
.lb__title{ font-family:var(--ff-display); font-weight:800; font-size:23px; line-height:1.15; margin:8px 0 14px; }
.lb__price{ font-family:var(--ff-display); font-weight:800; font-size:26px; color:var(--pink-600); }
.lb__specs{ color:var(--ink-2); font-size:14px; font-weight:600; margin:8px 0 18px; }
.lb__desc{
  white-space:pre-wrap; color:var(--ink-2); font-size:14.5px; line-height:1.6;
  border-top:1px solid var(--pink-100); padding-top:16px; margin-bottom:22px;
}
.lb__cta{ width:100%; }
/* кнопка «на весь екран» поверх фото */
.lb__zoom{
  position:absolute; top:14px; left:14px; z-index:4; width:40px; height:40px; border:0;
  border-radius:50%; background:rgba(16,12,20,.55); color:#fff; font-size:20px; line-height:1;
  cursor:zoom-in; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:.15s;
}
.lb__zoom:hover{ background:rgba(16,12,20,.8); transform:scale(1.06); }
.lb__img{ cursor:zoom-in; }

/* повноекранний перегляд фото */
.lbfull{ position:fixed; inset:0; z-index:120; background:rgba(8,6,10,.96); display:flex; align-items:center; justify-content:center; }
.lbfull[hidden]{ display:none; }
.lbfull__img{ max-width:100%; max-height:100%; object-fit:contain; -webkit-user-select:none; user-select:none; }
.lbfull__x{ position:absolute; top:16px; right:16px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); color:#16121A; border:0; font-size:22px; line-height:1; cursor:pointer; z-index:2; }
.lbfull__nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.85); color:#16121A; border:0; font-size:30px; line-height:1; cursor:pointer; }
.lbfull__prev{ left:12px; } .lbfull__next{ right:12px; }
.lbfull__counter{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.6); color:#fff; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; }

@media (max-width:760px){
  .lb{ padding:0; align-items:stretch; }
  /* весь діалог — одна колонка, що скролиться; фото менше, опис нижче */
  .lb__dialog{ display:block; grid-template-columns:1fr; height:100vh; height:100dvh; max-height:100dvh; border-radius:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .lb__gallery{ min-height:0; aspect-ratio:4/3; }
  .lb__img{ max-height:none; object-fit:cover; }
  .lb__info{ max-height:none; overflow:visible; padding:22px 20px 36px; }
  .lb__prev, .lb__next{ width:40px; height:40px; font-size:24px; }
}

/* ============================================================
   GLASS — фростед-скло (glassmorphism)
   ============================================================ */
:root{
  --glass-bg:        rgba(255,255,255,.55);
  --glass-bg-strong: rgba(255,255,255,.82);
  --glass-brd:       rgba(255,255,255,.65);
  --glass-blur:      saturate(180%) blur(16px);
  --glass-shadow:    0 10px 34px rgba(31,38,135,.14);
}

/* Шапка */
.nav{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 2px 22px rgba(31,38,135,.07);
}

/* Плашка eyebrow у герої */
.eyebrow{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}

/* Чіпи фільтрів */
.lst-chip{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
}
.lst-chip.is-active{
  background:rgba(22,18,26,.82);
  border-color:rgba(22,18,26,.82);
}

/* Бейджі поверх фото об'єкта */
.lst-card__deal{
  background:rgba(224,88,155,.78);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  backdrop-filter:blur(8px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);
}
.lst-card__deal.is-rent{ background:rgba(30,63,208,.74); }
.lst-card__count{
  background:rgba(22,18,26,.50);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
}

/* Контактні плитки поверх темного градієнта */
.contact__item{
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  border:1px solid rgba(255,255,255,.18);
}

/* Лайтбокс — фростед-діалог + скляні кнопки */
.lb__dialog{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--glass-brd);
}
.lb__close, .lb__prev, .lb__next{
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  border:1px solid rgba(255,255,255,.5);
}
.lb__desc{ border-top-color:rgba(22,18,26,.12); }

/* Мобільне меню — скло */
@media (max-width:760px){
  .nav__links{
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--glass-brd);
  }
}

/* Фолбек для браузерів без backdrop-filter — лишаємо читабельність */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{ background:rgba(252,248,250,.97); }
  .lb__dialog{ background:var(--white); }
  .eyebrow, .lst-chip{ background:var(--white); }
  .nav__links{ background:var(--white); }
  .contact__item{ background:rgba(255,255,255,.10); }
}

/* ============================================================
   БУЛКА — талісман 🐾
   ============================================================ */
.bulka{
  position:fixed; left:0; bottom:6px; z-index:60;
  width:118px; height:106px; pointer-events:none;
  transform:translateX(-150px);
  will-change:transform;
}
.bulka__svg{ width:100%; height:100%; overflow:visible; display:block;
  filter:drop-shadow(0 8px 10px rgba(120,70,30,.22)); }
.bulka__sprite{
  pointer-events:auto; cursor:pointer; background:none; border:0; padding:0;
  width:100%; height:100%; display:block; -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease; /* плавний розворот (фліп лише собачки, не хмарки) */
}
.bulka__sprite:focus-visible{ outline:3px solid var(--pink-300); outline-offset:4px; border-radius:50%; }

/* біг — підстрибування корпусу */
.bulka.is-walking .bulka__svg{ animation:bk-bob .42s ease-in-out infinite; }
@keyframes bk-bob{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-7px) rotate(1deg); } }

/* лапки тупотять */
.bulka.is-walking .bulka__paw--1{ animation:bk-step .42s ease-in-out infinite; }
.bulka.is-walking .bulka__paw--2{ animation:bk-step .42s ease-in-out infinite .21s; }
@keyframes bk-step{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* вуха та хвіст */
.bulka__ear--l, .bulka__ear--r{ transform-box:fill-box; transform-origin:bottom center; }
.bulka.is-walking .bulka__ear--l{ animation:bk-ear .42s ease-in-out infinite; }
.bulka.is-walking .bulka__ear--r{ animation:bk-ear .42s ease-in-out infinite reverse; }
@keyframes bk-ear{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(6deg); } }
.bulka__tail{ transform-box:fill-box; transform-origin:30% 90%; animation:bk-tail 1s ease-in-out infinite; }
@keyframes bk-tail{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(8deg); } }

/* блимання (повіко з'їжджає вниз) */
.bulka__lid{ transform-box:fill-box; transform-origin:top center; transform:scaleY(0); }
.bulka__sprite.is-blink .bulka__lid{ transform:scaleY(1); }

/* стрибок по кліку (на SVG, щоб не конфліктувати з розворотом спрайта) */
.bulka__svg.is-hop{ animation:bk-hop .5s ease; }
@keyframes bk-hop{ 0%{ transform:translateY(0); } 35%{ transform:translateY(-26px); } 60%{ transform:translateY(0); } 75%{ transform:translateY(-8px); } 100%{ transform:translateY(0); } }

/* іскринка біля особливого ока */
.bulka__spark{ transform-box:fill-box; transform-origin:center; animation:bk-spark 3.4s ease-in-out infinite; }
@keyframes bk-spark{ 0%,70%,100%{ transform:scale(.6); opacity:.4; } 82%{ transform:scale(1.15); opacity:1; } }

/* хмарка з фразою */
.bulka__bubble{
  position:absolute; left:50%; bottom:104px; transform:translateX(-50%) translateY(8px);
  background:var(--white); color:var(--ink); font-family:var(--ff-body); font-weight:700; font-size:13px;
  white-space:nowrap; padding:9px 14px; border-radius:14px; border:2px solid var(--pink-200, #F7D6E4);
  box-shadow:var(--shadow-sm); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none;
}
.bulka__bubble::after{
  content:''; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:#fff; border-bottom:0;
}
.bulka__bubble.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* кнопка вмикача 🐾 */
.bulka-toggle{
  position:fixed; left:14px; bottom:14px; z-index:61; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--pink-100); background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px);
  box-shadow:var(--shadow-sm); cursor:pointer; font-size:19px; line-height:1; transition:.18s;
}
.bulka-toggle:hover{ transform:translateY(-2px) scale(1.05); }
.bulka-toggle.is-off{ opacity:.6; filter:grayscale(.6); }

.bulka.is-sitting .bulka__svg{ animation:bk-breathe 3.5s ease-in-out infinite; }
@keyframes bk-breathe{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.985); } }

@media (max-width:600px){ .bulka{ width:92px; height:84px; } .bulka__bubble{ bottom:84px; font-size:12px; } }

@media (prefers-reduced-motion:reduce){
  .bulka__tail, .bulka__spark{ animation:none; }
}

/* ============================================================
   МАНІФЕСТ + ЦИФРИ + КЕЙС (у секції «Про мене»)
   ============================================================ */
.about__manifest{
  font-family:var(--ff-display); font-weight:700; line-height:1.35;
  font-size:clamp(18px,2vw,22px); color:var(--ink); margin-top:22px;
}
.about__manifest b{ color:var(--red); }

.stats{ list-style:none; display:flex; flex-wrap:wrap; gap:16px; margin-top:60px; }
.stat{
  flex:1 1 150px; background:var(--pink-50); border:1px solid var(--pink-100);
  border-radius:18px; padding:24px 18px; text-align:center;
  transition:transform .2s, box-shadow .2s;
}
.stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.stat:nth-child(2){ background:#E7ECFF; border-color:#D5DEFF; }
.stat strong{ display:block; font-family:var(--ff-display); font-weight:800; line-height:1; color:var(--pink-600); font-size:clamp(28px,3vw,38px); }
.stat:nth-child(2) strong{ color:var(--blue); }
.stat span{ display:block; margin-top:9px; font-size:13px; font-weight:600; color:var(--ink-2); }

.case{
  margin-top:22px; background:linear-gradient(135deg, var(--ink), #2a2230);
  color:#fff; border-radius:var(--radius); padding:34px 32px; position:relative; overflow:hidden;
}
.case::after{
  content:'🏡'; position:absolute; right:-10px; bottom:-18px; font-size:120px; opacity:.06; pointer-events:none;
}
.case__head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.case__tag{ background:var(--pink-500); color:#fff; font-weight:800; font-size:13px; padding:7px 14px; border-radius:999px; white-space:nowrap; }
.case__head h3{ font-family:var(--ff-display); font-weight:800; line-height:1.15; font-size:clamp(19px,2.4vw,26px); }
.case p{ color:rgba(255,255,255,.82); font-size:16px; line-height:1.6; max-width:62ch; position:relative; }
.case p b{ color:#fff; }
.case__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; position:relative; }
.case__chips li{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:8px 15px; border-radius:999px; font-size:13.5px; font-weight:700;
}

/* ============================================================
   БУЛКА визирає на картках об'єктів 🐾
   ============================================================ */
.card-bulka{
  position:fixed; z-index:59; width:78px; height:72px; pointer-events:none;
  opacity:0; transform:translateY(12px) scale(.7); transform-origin:bottom center;
  transition:opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.card-bulka.is-on{ opacity:1; transform:translateY(0) scale(1); }
.card-bulka .bulka__svg{ width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 6px 8px rgba(120,70,30,.25)); }
.card-bulka__bubble{
  position:absolute; left:50%; bottom:66px; transform:translateX(-50%); white-space:nowrap;
  background:var(--white); color:var(--ink); font-family:var(--ff-body); font-weight:700; font-size:12px;
  padding:6px 11px; border-radius:12px; border:2px solid var(--pink-100); box-shadow:var(--shadow-sm);
}
.card-bulka__bubble::after{
  content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#fff; border-bottom:0;
}
@media (max-width:600px){
  .card-bulka__bubble{ white-space:normal; max-width:168px; text-align:center; line-height:1.25; }
}
@media (prefers-reduced-motion:reduce){ .card-bulka{ transition:opacity .2s ease; } }

/* ============================================================
   БУЛКА — жарт збоку екрана
   ============================================================ */
.bulka-side{
  position:fixed; bottom:22%; z-index:62; width:120px; pointer-events:none; opacity:0;
  transition:transform .5s cubic-bezier(.34,1.45,.55,1), opacity .35s ease;
}
.bulka-side__fig{ width:120px; height:110px; }
.bulka-side__fig .bulka__svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 8px 10px rgba(120,70,30,.22)); }
.bulka-side__bubble{
  position:absolute; bottom:44%; white-space:normal; max-width:min(250px, 62vw);
  background:var(--white); color:var(--ink); font-family:var(--ff-body); font-weight:700; font-size:13.5px; line-height:1.3;
  padding:10px 14px; border-radius:14px; border:2px solid var(--pink-100); box-shadow:var(--shadow);
}
.bulka-side__bubble::after{ content:''; position:absolute; top:62%; border:8px solid transparent; }

.bulka-side--left{ left:0; transform:translateX(-74%); }
.bulka-side--left.is-on{ transform:translateX(-22%); opacity:1; }
.bulka-side--left .bulka-side__bubble{ left:108px; }
.bulka-side--left .bulka-side__bubble::after{ left:-8px; border-right-color:#fff; border-left:0; }

.bulka-side--right{ left:auto; right:0; transform:translateX(74%); }
.bulka-side--right.is-on{ transform:translateX(22%); opacity:1; }
.bulka-side--right .bulka-side__fig{ transform:scaleX(-1); }
.bulka-side--right .bulka-side__bubble{ right:108px; }
.bulka-side--right .bulka-side__bubble::after{ right:-8px; border-left-color:#fff; border-right:0; }

@media (prefers-reduced-motion:reduce){ .bulka-side{ display:none !important; } }

/* ============================================================
   ЧАТ-ВІДЖЕТ
   ============================================================ */
.chat-fab{
  position:fixed; right:18px; bottom:18px; z-index:90; width:60px; height:60px; border-radius:50%;
  border:0; background:var(--pink-500); color:#fff; font-size:25px; cursor:pointer;
  box-shadow:0 12px 30px rgba(224,88,155,.45); display:grid; place-items:center; transition:transform .2s, opacity .2s;
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.05); }
.chat-fab.is-hidden{ transform:scale(0); opacity:0; pointer-events:none; }
.chat-fab__dot{ position:absolute; top:9px; right:11px; width:13px; height:13px; border-radius:50%; background:var(--red); border:2px solid #fff; }

.chat{
  position:fixed; right:18px; bottom:18px; z-index:91; width:min(372px, calc(100vw - 24px));
  height:min(560px, calc(100vh - 36px)); background:var(--white); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; border:1px solid var(--pink-100); box-shadow:0 24px 64px rgba(0,0,0,.28);
}
.chat[hidden]{ display:none; }
.chat__head{ background:linear-gradient(135deg, var(--pink-500), var(--pink-600)); color:#fff; padding:15px 16px; display:flex; align-items:center; gap:12px; }
.chat__ava{ width:42px; height:42px; border-radius:50%; background:var(--white) center/cover no-repeat; border:2px solid rgba(255,255,255,.6); flex:none; }
.chat__head b{ font-family:var(--ff-display); font-size:16px; display:block; line-height:1.1; }
.chat__head small{ font-size:11.5px; opacity:.92; }
.chat__close{ margin-left:auto; background:rgba(255,255,255,.22); border:0; color:#fff; width:32px; height:32px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; flex:none; }
.chat__ctx{ margin:12px 14px 0; background:var(--pink-50); border:1px solid var(--pink-100); border-left:3px solid var(--pink-500); border-radius:10px; padding:8px 12px; font-size:13px; }
.chat__ctx small{ color:var(--ink-2); display:block; margin-bottom:2px; }
.chat__ctx b{ color:var(--ink); }
.chat__ctx-price{ color:var(--pink-600); font-weight:700; }
.chat__body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
.chat__msg{ max-width:82%; padding:10px 13px; border-radius:16px; font-size:14.5px; line-height:1.4; }
.chat__msg--in{ background:var(--pink-50); border:1px solid var(--pink-100); align-self:flex-start; border-bottom-left-radius:5px; }
.chat__msg--out{ background:var(--pink-500); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.chat__foot{ display:flex; gap:8px; padding:11px; border-top:1px solid var(--pink-100); }
.chat__input{ flex:1; resize:none; border:1.5px solid var(--pink-100); border-radius:12px; padding:10px 12px; font-family:var(--ff-body); font-size:14px; line-height:1.3; }
.chat__input:focus{ outline:none; border-color:var(--pink-500); }
.chat__send{ background:var(--pink-500); color:#fff; border:0; border-radius:12px; width:46px; cursor:pointer; font-size:17px; flex:none; }
.chat__send:hover{ background:var(--pink-600); }
@media (max-width:480px){
  .chat{ right:0; bottom:0; width:100vw; height:100vh; height:100dvh; border-radius:0; }
  .chat-fab{ right:14px; bottom:14px; }
}

/* ============================================================
   СТОРІС (кружечки + переглядач)
   ============================================================ */
.stories-sec{ background:var(--white); padding:24px 0 4px; }
.stories-row{ display:flex; gap:16px; overflow-x:auto; padding:6px 2px 14px; scrollbar-width:none; -ms-overflow-style:none; }
.stories-row::-webkit-scrollbar{ display:none; }
.story{ flex:0 0 auto; background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; width:78px; padding:0; }
.story__ring{ width:72px; height:72px; border-radius:50%; padding:3px; display:block; transition:transform .15s;
  background:linear-gradient(45deg, var(--pink-500), var(--red), var(--blue)); }
.story.is-seen .story__ring{ background:var(--pink-100); }
.story:hover .story__ring{ transform:scale(1.05); }
.story__img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #fff; }
.story__label{ font-size:12px; font-weight:600; color:var(--ink-2); max-width:78px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sv{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; }
.sv[hidden]{ display:none; }
.sv__backdrop{ position:absolute; inset:0; background:rgba(10,8,12,.92); }
.sv__stage{ position:relative; z-index:1; width:min(440px,100vw); height:min(92vh,880px); background:#000;
  border-radius:18px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
@media (max-width:600px){ .sv__stage{ width:100vw; height:100vh; border-radius:0; } }
.sv__img{ width:100%; height:100%; object-fit:cover; }
.sv__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.sv__bars{ position:absolute; top:10px; left:10px; right:10px; z-index:3; display:flex; gap:4px; }
.sv__bar{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.35); overflow:hidden; }
.sv__bar i{ display:block; height:100%; width:0; background:var(--white); }
.sv__head{ position:absolute; top:22px; left:12px; right:12px; z-index:3; display:flex; align-items:center; gap:10px; }
.sv__ava{ width:34px; height:34px; border-radius:50%; background-size:cover; background-position:center; border:2px solid #fff; flex:none; }
.sv__label{ color:#fff; font-weight:700; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.5); flex:1; }
.sv__close{ background:rgba(0,0,0,.35); border:0; color:#fff; font-size:24px; width:36px; height:36px; border-radius:50%; cursor:pointer; line-height:1; flex:none; }
.sv__cap{ position:absolute; left:16px; right:16px; bottom:86px; z-index:3; color:#fff; font-weight:600; font-size:16px;
  text-shadow:0 1px 6px rgba(0,0,0,.65); line-height:1.35; }
.sv__link{ position:absolute; left:16px; right:16px; bottom:24px; z-index:3; display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--ink); font-weight:700; font-size:15px; padding:13px; border-radius:999px; text-decoration:none; }
.sv__zone{ position:absolute; top:60px; bottom:0; z-index:2; background:none; border:0; cursor:pointer; }
.sv__zone--prev{ left:0; width:33%; } .sv__zone--next{ right:0; width:67%; }