/* ============================================================
   The Towers — Design system
   Cinematic gold-on-near-black. Clean grotesk. Premium minimal.
   ============================================================ */

:root {
  /* canvas */
  --bg:        #0b0b0d;
  --bg-2:      #101013;
  --bg-3:      #15151a;
  --ink:       #ece7dd;   /* warm off-white */
  --ink-soft:  #b6b0a4;
  --ink-mute:  #847e72;
  --ink-faint: #56514a;

  /* gold (from logo) */
  --gold:      #c2a06b;
  --gold-lt:   #ddc18d;
  --gold-dp:   #9c7d4e;
  --gold-glow: rgba(194,160,107,0.55);

  /* lines & glass */
  --line:      rgba(236,231,221,0.10);
  --line-2:    rgba(236,231,221,0.06);
  --glass:     rgba(255,255,255,0.035);
  --glass-2:   rgba(255,255,255,0.06);
  --glass-brd: rgba(255,255,255,0.09);

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 64px);

  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   LIGHT THEME — warm ivory canvas, bronze accent, graphite ink
   ============================================================ */
:root { --pre-bg: #060607; }
[data-theme="light"] {
  --bg:        #f4f0e7;
  --bg-2:      #ece7da;
  --bg-3:      #e3dccb;
  --ink:       #1a160f;
  --ink-soft:  #4b4436;
  --ink-mute:  #79705e;
  --ink-faint: #a89e89;

  --line:      rgba(26,22,15,0.14);
  --line-2:    rgba(26,22,15,0.07);
  --glass:     rgba(255,255,255,0.55);
  --glass-2:   rgba(255,255,255,0.72);
  --glass-brd: rgba(26,22,15,0.10);

  --pre-bg: #f4f0e7;
}
[data-theme="light"] .vignette {
  background: radial-gradient(120% 90% at 50% 30%, transparent 60%, rgba(120,108,84,0.10) 100%);
}
[data-theme="light"] .grain { mix-blend-mode: multiply; opacity: 0.035; }
[data-theme="light"] .btn-gold { color: #fdf7ec; box-shadow: 0 10px 30px -12px var(--gold-glow); }
[data-theme="light"] .btn-ghost { border-color: var(--line); }
[data-theme="light"] ::selection { background: var(--gold); color: #fff; }
[data-theme="light"] .vcard,
[data-theme="light"] .infra-item { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset; }
[data-theme="light"] .glass::before { background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%); }
[data-theme="light"] .hero-scrim {
  background:
    linear-gradient(90deg, rgba(244,240,231,0.94) 0%, rgba(244,240,231,0.6) 34%, rgba(244,240,231,0.06) 62%),
    linear-gradient(180deg, rgba(244,240,231,0.12) 0%, rgba(244,240,231,0) 30%, rgba(244,240,231,0.55) 74%, rgba(244,240,231,0.98) 100%),
    radial-gradient(38% 26% at 100% 100%, rgba(244,240,231,0.97) 0%, rgba(244,240,231,0.7) 44%, transparent 74%),
    radial-gradient(70% 60% at 18% 78%, rgba(154,117,54,0.10), transparent 60%);
}
[data-theme="light"] .nav.scrolled {
  background: rgba(244,240,231,0.7);
  border-bottom: 1px solid var(--line-2);
}
[data-theme="light"] .lang button.on { color: #fff; }
[data-theme="light"] .contact-scrim {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(244,240,231,0.7) 40%, rgba(244,240,231,0.92) 100%),
  radial-gradient(60% 50% at 80% 20%, rgba(154,117,54,0.12), transparent 60%);
}
[data-theme="light"] .inv { background: linear-gradient(180deg, var(--bg) 0%, #efe9da 50%, var(--bg) 100%); }
[data-theme="light"] .cform input, [data-theme="light"] .cform select { background: rgba(255,255,255,0.6); }
[data-theme="light"] .cform select option { background: #f4f0e7; color: #1a160f; }
[data-theme="light"] .metric { background: var(--bg); }
[data-theme="light"] .hero-stats { background: transparent; }
[data-theme="light"] .pre-logo { filter: drop-shadow(0 0 24px rgba(154,117,54,0.4)); }

html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.lenis, html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

::selection { background: var(--gold); color: #1a1408; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- atmosphere: grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("noise.svg");
  background-size: 220px 220px;
  animation: grainShift 0.6s steps(2) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); } 50% { transform: translate(-6px,4px); } 100% { transform: translate(4px,-3px); }
}
.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---------- fx: liquid background (replaces the old flat .aurora) ---------- */
.fx-liquid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100vw; height: 100vh;
  /* canvas already renders at ~1/4 res and gets upscaled — that alone
     gives a soft liquid look; a light blur rounds it off without the
     cost of re-blurring a full-res layer every frame. */
  filter: blur(6px) saturate(1.25);
  image-rendering: -webkit-optimize-contrast;
  opacity: 0.6; mix-blend-mode: normal;
}
[data-theme="light"] .fx-liquid-bg { opacity: 0.4; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { .fx-liquid-bg { display: none; } }

/* ---------- fx: shiny sweep text (React Bits ShinyText) ----------
   Base paint only — the actual sweep motion is driven by JS
   (lib/fx.jsx, "shine sweep engine" at the bottom of the file), NOT a
   CSS @keyframes. Reason: this class is applied per word/line (.w > i,
   .ln), never on the block/inline-block PARENT — background-clip:text
   on a parent with inline-block children renders fully invisible in
   Chromium (found the hard way). But per-element also means per-element
   background-position is relative to THAT element's own width, so a
   plain synced CSS animation makes every word/line flash on its own
   timer — reads as choppy, not one wave through the sentence. The JS
   engine measures each word's real pixel offset inside its heading
   (accounting for line-wraps) and computes one shared sweep position
   in pixels, so the highlight visibly travels first letter → last
   letter in true reading order, across words AND wrapped lines, then
   holds and resets — see the engine for the actual math. */
.fx-shiny {
  background-image: linear-gradient(90deg,
    var(--gold-dp) 0%, var(--gold-dp) 44%,
    #fff6df 50%,
    var(--gold-dp) 56%, var(--gold-dp) 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
}
@media (prefers-reduced-motion: reduce) { .fx-shiny { background-position: 50% 0 !important; } }

/* same gold-shine language as .fx-shiny, but self-contained for single numbers
   (no multi-word sweep engine needed — one CSS animation is enough here) */
.fx-shine-num {
  background-image: linear-gradient(90deg,
    var(--gold-dp) 0%, var(--gold-dp) 42%,
    #fff6df 50%,
    var(--gold-dp) 58%, var(--gold-dp) 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: fxShineNum 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes fxShineNum {
  /* position must stay within [0%, 100%] — background-size is 260%, so any
     position outside that range slides the whole gradient image clear of
     the element and leaves it with zero coverage (invisible text) during
     the held phase. 0%/100% both land in the gradient's dark tail, so the
     number reads as solid gold at rest and only brightens mid-sweep. */
  0%, 15% { background-position: 100% 0; }
  65%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) { .fx-shine-num { animation: none; background-position: 50% 0; } }

/* ---------- BrandLogo — real PNG + soft power-on / gold shift ---------- */
.brand-logo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  aspect-ratio: 1 / 1;
  line-height: 0;
  opacity: 0;
  transform: scale(0.92);
  overflow: visible !important;
  clip-path: none !important;
}
.brand-logo img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  display: block;
  object-fit: contain;
  object-position: center center;
  overflow: visible !important;
  clip-path: none !important;
}
.brand-logo-full {
  width: clamp(168px, 28vw, 248px);
  overflow: visible !important;
  padding: 0;
}
.brand-logo.is-on {
  animation: logoPowerOn 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
.brand-logo.is-on img {
  animation: logoGoldShift 8s ease-in-out 1.1s infinite;
}
@keyframes logoPowerOn {
  0%   { opacity: 0; transform: scale(0.92); filter: brightness(0.65); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes logoGoldShift {
  0%, 100% { filter: brightness(1) saturate(1); }
  25% { filter: brightness(1.14) saturate(1.08); }
  50% { filter: brightness(0.94) saturate(1.04); }
  75% { filter: brightness(1.08) saturate(1.06); }
}
[data-theme="light"] .brand-logo.is-on img {
  animation-name: logoGoldShiftLight;
}
@keyframes logoGoldShiftLight {
  0%, 100% { filter: brightness(0.4) saturate(0.85); }
  25% { filter: brightness(0.55) saturate(1); }
  50% { filter: brightness(0.36) saturate(0.9); }
  75% { filter: brightness(0.65) sepia(0.15) saturate(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .brand-logo.is-on { opacity: 1; transform: none; filter: none; animation: none; }
  .brand-logo img { animation: none !important; filter: none !important; }
}

/* ---------- fx: circular spinning text ---------- */
.fx-circular-text { position: relative; flex: 0 0 auto; overflow: visible !important; }
.fx-circular-text-spin { position: absolute; inset: 0; overflow: visible; }
.fx-circular-text-ch {
  position: absolute; left: 50%; top: 50%; transform-origin: 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--gold);
}
.fx-circular-text-logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: visible !important;
}
.fx-circular-text-logo {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.fx-circular-text-logo.is-on {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.fx-circular-text-logo img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  animation: logoGoldShift 8s ease-in-out infinite !important;
}


/* ---------- fx: proximity weight text (React Bits VariableProximity) ---------- */
.fx-proximity { font-variation-settings: "wght" 400; }

/* ---------- fx: electric glowing border (React Bits ElectricBorder, CSS-only) ---------- */
@property --fx-eb-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fx-electric-border { position: relative; isolation: isolate; }
.fx-electric-border::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--fx-eb-angle),
    transparent 0%, var(--gold-lt) 6%, #fff6df 10%, var(--gold) 16%, transparent 26%,
    transparent 74%, var(--gold-dp) 84%, var(--gold-lt) 90%, transparent 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px var(--gold-glow));
  animation: fxElectricSpin 3.2s linear infinite;
  pointer-events: none; z-index: 5;
}
@keyframes fxElectricSpin { to { --fx-eb-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .fx-electric-border::after { animation: none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 10000; background: var(--pre-bg);
  display: grid; place-items: center; overflow: hidden;
  transition: opacity 1s var(--ease), filter 1s var(--ease), visibility 1s;
}
.preloader.done { opacity: 0; visibility: hidden; filter: blur(18px); pointer-events: none; }
.pre-inner { position: relative; display: grid; place-items: center; text-align: center; overflow: visible; }
.pre-glow {
  position: absolute; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(194,160,107,0.40), rgba(194,160,107,0) 62%);
  filter: blur(12px); opacity: 0; animation: preGlow 3s var(--ease) forwards;
}
@keyframes preGlow { 0%{opacity:0; transform:scale(.4);} 35%{opacity:1;} 100%{opacity:.5; transform:scale(1.25);} }
.pre-logo {
  width: clamp(168px, 28vw, 248px) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  filter: drop-shadow(0 0 28px var(--gold-glow));
}
.pre-logo img {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center center;
}
.pre-word {
  margin-top: 26px; font-weight: 700; letter-spacing: .42em; text-indent: .42em;
  font-size: clamp(20px, 3.4vw, 34px); color: var(--ink); display: flex; gap: 0;
}
.pre-word span {
  display: inline-block; opacity: 0; transform: translateY(120%);
  animation: preChar .9s var(--ease) forwards;
}
@keyframes preChar { to { opacity: 1; transform: translateY(0); } }
.pre-sub {
  margin-top: 14px; font-size: 11px; letter-spacing: .5em; text-indent: .5em;
  text-transform: uppercase; color: var(--gold); opacity: 0;
  animation: preSub 1s var(--ease) 1.5s forwards;
}
@keyframes preSub { to { opacity: 1; } }
.pre-bar {
  margin-top: 28px; width: 160px; height: 1px; background: var(--line); overflow: hidden;
  opacity: 0; animation: preSub .6s var(--ease) 1.2s forwards;
}
.pre-bar i { display: block; height: 100%; width: 0; background: var(--gold);
  animation: preFill 1.6s var(--ease) 1.2s forwards; }
@keyframes preFill { to { width: 100%; } }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gut); transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(11,11,13,0.6); backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line-2); padding-top: 12px; padding-bottom: 12px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; overflow: visible; }
.nav-brand .brand-logo { width: 40px; height: 40px; overflow: visible !important; }
.nav-brand .brand-logo img { overflow: visible !important; width: 100%; height: 100%; object-fit: contain; }
.nav-brand b { font-weight: 700; letter-spacing: .22em; font-size: 15px; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); position: relative; padding: 4px 0; transition: color .3s; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background: var(--gold); transition: width .35s var(--ease); }
.nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; align-items: center; gap: 2px; font-size: 12px; letter-spacing: .1em; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
.lang button { background: transparent; color: var(--ink-mute); border: none; padding: 7px 12px; font-size: 12px; letter-spacing: .12em; transition: color .3s, background .3s; }
.lang button.on { color: #1a1408; background: var(--gold); }
.theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .25s, color .25s, transform .25s var(--ease); flex: 0 0 auto; }
.theme-btn:hover { border-color: var(--gold); color: var(--gold-lt); transform: rotate(-12deg); }
.nav-menu-btn { display: none; }

/* mobile dropdown menu — themed, clean */
.nav-mobile {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 84px var(--gut) 28px; z-index: 490;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 2px; opacity: 1;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  animation: navDrop .32s var(--ease);
}
@keyframes navDrop { from { transform: translateY(-12px); } to { transform: none; } }
.nav-mobile-close {
  position: absolute; top: 22px; right: var(--gut); width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  background: var(--glass-2); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .2s, color .2s, transform .25s var(--ease); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nav-mobile-close:hover { border-color: var(--gold); color: var(--gold-lt); transform: rotate(90deg); }
.nav-mobile-link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); border-bottom: 1px solid var(--line-2); transition: color .2s, padding .25s var(--ease);
}
.nav-mobile-link svg { color: var(--ink-faint); transition: transform .25s var(--ease), color .2s; }
.nav-mobile-link:hover, .nav-mobile-link:active { color: var(--gold-lt); padding-left: 10px; }
.nav-mobile-link:hover svg { color: var(--gold); transform: translateX(3px); }
.nav-mobile-cta { margin-top: 18px; width: 100%; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 100px; padding: 14px 26px; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  transition: transform .3s var(--ease), background .3s, color .3s, box-shadow .3s; white-space: nowrap;
}
.btn-gold { background: var(--gold); color: #181206; box-shadow: 0 8px 30px -10px var(--gold-glow); }
.btn-gold:hover { background: var(--gold-lt); box-shadow: 0 14px 40px -10px var(--gold-glow); }
/* green = "select / fix / book" actions, static across themes */
.btn-green { background: #1f8a5b; color: #fff; box-shadow: 0 8px 30px -12px rgba(31,138,91,0.6); }
.btn-green:hover { background: #25a06b; box-shadow: 0 14px 40px -12px rgba(31,138,91,0.7); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lt); background: rgba(194,160,107,0.06); }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
section { position: relative; z-index: 3; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.block { padding: clamp(90px, 13vh, 170px) 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 26px;
}
.eyebrow::before { content:""; width: 26px; height: 1px; background: var(--gold); opacity: .7; }
.h-display {
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.02;
  font-size: clamp(38px, 6vw, 78px);
}
.h-sec {
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
  font-size: clamp(30px, 4.4vw, 56px);
}
.lead { color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; max-width: 60ch; text-wrap: pretty; }
.muted { color: var(--ink-mute); }

/* fx: every section heading shines fully — bronze sweep across every
   word. Has to live on .w/i (the actual per-word elements), not on
   .h-sec itself: .w is inline-block, and background-clip:text on a
   parent with inline-block/block descendants renders fully invisible
   in Chromium (see .fx-shiny comment above) — learned that the hard
   way testing this in-browser. Same animation with no per-word delay
   keeps every word in phase, reads as one continuous sweep. */
/* Базовая покраска — само движение считает JS (см. .fx-shiny выше и
   движок в конце lib/fx.jsx): реальные пиксельные координаты каждого
   слова на странице, с учётом переносов строк, чтобы волна шла строго
   от первой буквы первого слова до последней буквы последнего — не
   "слова вспыхивают по очереди", а один непрерывный проход. */
.h-sec .w i {
  background-image: linear-gradient(90deg,
    var(--gold-dp) 0%, var(--gold-dp) 44%,
    #fff6df 50%,
    var(--gold-dp) 56%, var(--gold-dp) 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .h-sec .w i { background-position: 50% 0 !important; }
}

/* fx: "остальной текст" — все .lead-параграфы плотнеют под курсором
   (вариативный вес шрифта), тот же принцип, что и proximity-эффект в
   hero, но по всему блоку разом — легче и надёжнее при пересборке
   React на смене языка/аудитории. */
.lead {
  font-variation-settings: "wght" 400;
  transition: font-variation-settings .35s ease, color .3s ease;
}
.lead:hover { font-variation-settings: "wght" 640; color: var(--ink); }
.gold { color: var(--gold-lt); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* glass card */
.glass {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 20px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: relative; overflow: hidden;
}
.glass::before {
  content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%);
  opacity: .8;
}

/* image slot styling hook */
image-slot { display: block; background: var(--bg-3); }
.slot-label {
  position: absolute; left: 16px; bottom: 14px; z-index: 4; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); pointer-events: none;
  background: rgba(11,11,13,0.5); padding: 5px 10px; border-radius: 100px; backdrop-filter: blur(6px);
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-main { overflow: visible; }
.hero-circular { overflow: visible; position: relative; z-index: 2; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-reel { position: absolute; inset: 0; background: #0a0a0c; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; overflow: hidden; transition: opacity 1.3s ease-in-out; will-change: opacity; }
.hero-slide.on { opacity: 1; }
.hero-slide img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover;
  transform: scale(1.04); transition: transform 6s ease-out; will-change: transform; }
.hero-slide.on img { transform: scale(1.16); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* frosted patch over the bottom-right corner to hide the source watermark */
.hero-wm { position: absolute; right: 0; bottom: 0; width: 260px; height: 78px; z-index: 3; pointer-events: none;
  -webkit-backdrop-filter: blur(18px) brightness(1.18); backdrop-filter: blur(18px) brightness(1.18);
  -webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 38%, transparent 76%);
  mask-image: radial-gradient(135% 135% at 100% 100%, #000 38%, transparent 76%); }
.hero-video.xfade { opacity: 0; transition: opacity 1.6s cubic-bezier(.4,0,.2,1); }
.hero-video.xfade.on { opacity: 1; }
.hero-reel-grain { position: absolute; inset: -20px; z-index: 2; pointer-events: none; opacity: 0.05;
  background-image: url("noise.svg"); background-size: 200px 200px; mix-blend-mode: overlay; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,11,13,0.55) 0%, rgba(11,11,13,0.15) 30%, rgba(11,11,13,0.55) 68%, rgba(11,11,13,0.96) 100%),
    radial-gradient(38% 26% at 100% 100%, rgba(8,8,10,0.96) 0%, rgba(8,8,10,0.72) 42%, transparent 72%),
    radial-gradient(70% 60% at 20% 80%, rgba(194,160,107,0.12), transparent 60%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 1; opacity: .25; pointer-events: none;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
}
.hero-inner { position: relative; z-index: 3; width: 100%; padding-bottom: clamp(48px, 8vh, 96px); padding-top: 120px; }
.hero h1 { margin: 18px 0 0; }
.hero h1 .ln { display: block; padding-bottom: 0.05em; will-change: transform, opacity; }
.hero h1 .ln.gold { color: var(--gold-lt); }

@keyframes heroSwap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero h1[key], .hero-main h1 { animation: heroSwap .6s var(--ease); }
.hero-sub { margin-top: 26px; }
.hero-cta { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.hero-stats {
  margin-top: clamp(40px, 6vh, 70px); display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); 
}
.hero-stats .st { padding: 22px 22px 0 0; border-right: 1px solid var(--line-2); }
.hero-stats .st:last-child { border-right: none; }
.hero-stats .st .v { font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.hero-stats .st .k { font-size: 12px; letter-spacing: .08em; color: var(--ink-mute); margin-top: 4px; text-transform: uppercase; }
.scroll-cue {
  position: absolute; right: var(--gut); bottom: 36px; z-index: 4; display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute);
  writing-mode: vertical-rl;
}
.scroll-cue i { display: block; width: 1px; height: 54px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content:""; position: absolute; top:-30%; left:0; width:100%; height:30%; background: var(--gold-lt); animation: cueRun 1.8s var(--ease) infinite; }
@keyframes cueRun { to { top: 110%; } }

/* hero variant: split */
.hero.v-split .hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; }
.hero.v-split .hero-side { padding-bottom: 6px; }

/* hero variant: centered */
.hero.v-center { align-items: center; text-align: center; }
.hero.v-center .hero-inner { padding-top: 130px; }
.hero.v-center .eyebrow { justify-content: center; }
.hero.v-center .hero-cta { justify-content: center; }
.hero.v-center .lead { margin-left: auto; margin-right: auto; }
.hero.v-center .hero-stats { max-width: 880px; margin-left: auto; margin-right: auto; }

/* ============================================================
   INTRO
   ============================================================ */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.vcard { padding: 28px 26px 30px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2);
  transition: transform .5s var(--ease), border-color .5s, background .5s; position: relative; overflow: hidden; }
.vcard:hover { transform: translateY(-6px); border-color: rgba(194,160,107,0.4); background: var(--bg-3); }
.vcard .n { font-size: 13px; letter-spacing: .2em; color: var(--gold); font-weight: 600; }
.vcard h4 { margin: 18px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.vcard p { font-size: 14.5px; color: var(--ink-mute); line-height: 1.55; }

/* ============================================================
   LOCATION
   ============================================================ */
.loc-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: stretch; }
.loc-map { position: relative; border-radius: 22px; overflow: hidden; min-height: 480px; border: 1px solid var(--line); }
.loc-leaflet { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--bg-3); z-index: 1; }
.loc-map-note { position: absolute; left: 16px; bottom: 16px; z-index: 500; display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink);
  background: rgba(11,11,13,0.7); border: 1px solid var(--glass-brd); border-radius: 100px; padding: 9px 16px;
  backdrop-filter: blur(10px); pointer-events: none; }
[data-theme="light"] .loc-map-note { background: rgba(255,255,255,0.82); }
.loc-map-note .lmn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }
/* leaflet chrome theming */
.loc-leaflet .leaflet-control-zoom a { background: rgba(11,11,13,0.8); color: var(--ink); border: 1px solid var(--glass-brd); }
.loc-leaflet .leaflet-control-zoom a:hover { background: var(--gold); color: #1a1206; }
[data-theme="light"] .loc-leaflet .leaflet-control-zoom a { background: rgba(255,255,255,0.9); color: #1a160f; }
.loc-leaflet .leaflet-control-attribution { background: rgba(11,11,13,0.6); color: var(--ink-mute); font-size: 10px; }
[data-theme="light"] .loc-leaflet .leaflet-control-attribution { background: rgba(255,255,255,0.7); }
.loc-leaflet .leaflet-control-attribution a { color: var(--gold-lt); }
/* markers */
.map-main { position: relative; transform: translate(-50%, -50%); }
.map-pulse { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%);
  border-radius: 50%; background: var(--gold); opacity: .55; animation: mapPulse 2s ease-out infinite; }
@keyframes mapPulse { 0% { box-shadow: 0 0 0 0 rgba(194,160,107,.5); } 70% { box-shadow: 0 0 0 26px rgba(194,160,107,0); } 100% { box-shadow: 0 0 0 0 rgba(194,160,107,0); } }
.map-core { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%);
  border-radius: 50%; background: var(--gold-lt); border: 3px solid #1a1206; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.map-tag { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); white-space: nowrap;
  font-size: 15px; font-weight: 800; letter-spacing: .14em; color: #1a1206; background: var(--gold);
  padding: 5px 11px; border-radius: 100px; box-shadow: 0 6px 18px -6px var(--gold-glow); }
.loc-points { display: grid; gap: 0; }
.loc-points .lp { display: flex; align-items: center; gap: 20px; padding: 26px 4px; border-bottom: 1px solid var(--line); }
.loc-points .lp:first-child { border-top: 1px solid var(--line); }
.loc-points .lp .lpi { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold);
  display: grid; place-items: center; flex: 0 0 auto; font-size: 16px; }
.loc-points .lp h4 { font-size: 18px; font-weight: 600; line-height: 1.25; margin-bottom: 4px; }
.loc-points .lp p { font-size: 14px; color: var(--ink-mute); line-height: 1.4; }
.loc-points .lpi-dot { width: 12px; height: 12px; border-radius: 50%; }
.map-cat-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); transform: translate(-50%, -50%); }
[data-theme="dark"] .map-cat-dot { border-color: rgba(255,255,255,.85); }
.map-ring-lbl { transform: translate(-50%, -50%); white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--gold-lt); background: rgba(11,11,13,.66); border: 1px solid var(--glass-brd); border-radius: 100px; padding: 3px 10px; backdrop-filter: blur(6px); }
[data-theme="light"] .map-ring-lbl { background: rgba(255,255,255,.82); color: #8a6a2e; }
/* named-landmark markers: static label + slow-blinking coloured dot */
.map-lm { transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.map-lm-lbl { white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--ink);
  background: rgba(11,11,13,.72); border: 1px solid var(--glass-brd); border-radius: 7px; padding: 3px 9px; backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
[data-theme="light"] .map-lm-lbl { background: rgba(255,255,255,.88); color: #20242c; }
.map-lm-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--lmc, #c2a06b); border: 2px solid #fff;
  box-shadow: 0 0 0 0 var(--lmc, #c2a06b); animation: mapDotPulse 2.4s ease-in-out infinite; }
[data-theme="dark"] .map-lm-dot { border-color: rgba(255,255,255,.9); }
.map-cat-dot.editable, .map-lm.editable { cursor: grab; }
.map-cat-dot.editable { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(194,160,107,.5); }
.map-lm.editable .map-lm-dot { outline: 2px solid var(--gold); outline-offset: 2px; }
.map-main { cursor: inherit; }
.map-main.editable { cursor: grab; }

/* custom lines (LRT branch etc.) */
.map-line-lbl { transform: translate(-50%, -50%); white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: #fff; background: var(--llc, #2a6fdb); border-radius: 100px; padding: 3px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }

.map-custom .map-lm-dot { animation: none; }
@keyframes mapDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lmc, #c2a06b) 70%, transparent); opacity: 1; }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--lmc, #c2a06b) 0%, transparent); opacity: .55; }
}

/* ============================================================
   INFRASTRUCTURE
   ============================================================ */
.infra-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.infra-item { padding: 30px 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2);
  transition: transform .5s var(--ease), border-color .5s; }
.infra-item:hover { transform: translateY(-5px); border-color: rgba(194,160,107,0.4); }
.infra-item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold-glow); }
.infra-item h4 { margin: 20px 0 8px; font-size: 19px; font-weight: 600; }
.infra-item p { font-size: 14.5px; color: var(--ink-mute); }

/* ============================================================
   APARTMENTS
   ============================================================ */
/* horizontal carousel, same drag/scroll-snap language as the photo gallery —
   one plan at a time instead of a tall stacked grid */
.apt-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 6px 0 20px; cursor: grab; scrollbar-width: none; }
.apt-track::-webkit-scrollbar { display: none; }
.apt-track.drag { cursor: grabbing; scroll-snap-type: none; }
.apt-pad { flex: 0 0 calc(var(--gut) - 20px); }
.apt {
  position: relative; border-radius: 22px; overflow: hidden; flex: 0 0 min(82vw, 360px); scroll-snap-align: center;
  display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.apt .apt-shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 2;
  background: radial-gradient(280px 280px at var(--mx,50%) var(--my,0%), rgba(221,193,141,0.16), transparent 60%);
}
.apt:hover .apt-shine { opacity: 1; }
.apt:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55); border-color: rgba(194,160,107,0.45); }
.apt-plan {
  position: relative; background: #fbfaf7; aspect-ratio: 4 / 3.4; display: grid; place-items: center; padding: 22px;
  border-bottom: 1px solid var(--line);
}
.apt-plan img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.apt-area-badge {
  position: absolute; left: 16px; top: 16px; z-index: 3; font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: #1a160f; background: rgba(255,255,255,0.82); border: 1px solid rgba(26,22,15,0.1);
  padding: 7px 13px; border-radius: 100px; backdrop-filter: blur(6px); font-variant-numeric: tabular-nums;
}
.apt-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.apt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.apt h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.apt .tag { flex: 0 0 auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lt);
  border: 1px solid rgba(194,160,107,0.4); border-radius: 100px; padding: 5px 12px; white-space: nowrap; }
.apt .rooms { margin-top: 16px; display: grid; gap: 0; }
.apt .rooms .rm { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.apt .rooms .rm span:first-child { color: var(--ink-soft); }
.apt .rooms .rm span:last-child { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.apt .apt-foot { margin-top: auto; padding-top: 18px; }
.apt-click { cursor: pointer; }
.apt-click:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.apt-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gold-lt); }
.apt-link .ar2 { transition: transform .3s var(--ease); }
.apt:hover .apt-link .ar2 { transform: translateX(5px); }

/* ============================================================
   INVESTMENT
   ============================================================ */
.inv { background: linear-gradient(180deg, var(--bg) 0%, #0e0d0a 50%, var(--bg) 100%); }
.inv-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-top: 14px; }
.metric { background: var(--bg); padding: clamp(28px,3.5vw,46px) 28px; position: relative; overflow: hidden; }
.metric .num { font-size: clamp(40px, 5.5vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.metric .num .suf { color: var(--ink); }
.metric .mk { margin-top: 14px; font-size: 14px; color: var(--ink-soft); max-width: 22ch; }
.metric::after { content:""; position: absolute; left:0; bottom:0; width:100%; height:2px; background: linear-gradient(90deg, var(--gold), transparent); opacity:.6; }
.magnets { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.magnet { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-2); font-size: 15px; font-weight: 500;
  transition: transform .4s var(--ease), border-color .4s, background .4s; }
.magnet:hover { transform: translateY(-4px); border-color: var(--gold); background: var(--bg-3); }
.magnet .mi { color: var(--gold); }

/* ============================================================
   ABOUT
   ============================================================ */
/* was inline-styled grid-template-columns:"1fr 1fr" with no responsive
   escape hatch (inline styles beat any external media query outright) —
   at mobile widths both columns were forced to ~50%, squeezing the
   heading/lead text until it overflowed its box. */
.about-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
/* a slim inline stat strip (not a boxed grid) sits right under the lead
   text in the left column — distinct from the "header + boxed-card grid"
   template every other section uses, and pairs naturally with the values
   list on the right instead of stacking a second grid below it. */
.about-trust { display: flex; margin-top: 34px; }
.about-trust .tr { flex: 1 1 0; padding: 0 24px; border-left: 1px solid var(--line); }
.about-trust .tr:first-child { padding-left: 0; border-left: none; }
.about-trust .tr .v { font-size: clamp(24px, 2.4vw, 28px); font-weight: 700; color: var(--gold-lt); letter-spacing: -0.02em; }
.about-trust .tr .k { font-size: 12.5px; color: var(--ink-mute); margin-top: 6px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
.about-val { padding-left: 18px; border-left: 2px solid var(--line); transition: border-color .3s var(--ease); }
.about-val:hover { border-left-color: var(--gold); }
.about-val h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.about-val p { color: var(--ink-mute); font-size: 14.5px; }
.doc { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--line);
  border-radius: 100px; font-size: 13.5px; color: var(--ink-soft); transition: border-color .3s, color .3s; }
.doc:hover { border-color: var(--gold); color: var(--gold-lt); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { position: relative; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; z-index: 0; }
.contact-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(11,11,13,0.7) 40%, rgba(11,11,13,0.9) 100%),
  radial-gradient(60% 50% at 80% 20%, rgba(194,160,107,0.14), transparent 60%); }
.contact .wrap { position: relative; z-index: 3; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.cform { padding: clamp(28px, 3vw, 44px); border-radius: 26px; }
.cform .frow { margin-bottom: 16px; }
.cform label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 9px; }
.cform input, .cform select { width: 100%; background: rgba(0,0,0,0.25); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; color: var(--ink); font-family: inherit; font-size: 15px; transition: border-color .3s, background .3s; }
.cform input:focus, .cform select:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,0.4); }
.cform select option { background: #14140f; }
.cform .submit { width: 100%; margin-top: 6px; }
.cform .privacy { font-size: 12px; color: var(--ink-faint); margin-top: 14px; line-height: 1.5; }
.cform .okmsg { color: var(--gold-lt); font-size: 14px; margin-top: 14px; opacity: 0; transition: opacity .4s; }
.cform .okmsg.show { opacity: 1; }
/* shared lead-form error state — sendLead() now resolves false when Telegram
   genuinely rejects the message, so every form needs a visible failure path
   instead of always showing the success message regardless of outcome */
.leadmsg-err { color: #e2453a; font-size: 14px; margin-top: 14px; opacity: 0; transition: opacity .4s; }
.leadmsg-err.show { opacity: 1; }
.leadmsg-err a { color: inherit; text-decoration: underline; }
.contact-side .cmethods { display: grid; gap: 14px; margin-top: 30px; }
.cmethod { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); transition: transform .4s var(--ease), border-color .4s; }
.cmethod:hover { transform: translateX(6px); border-color: var(--gold); }
.cmethod .cmi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--line); color: var(--gold); }
.cmethod .cmt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.cmethod .cmv { font-size: 17px; font-weight: 600; white-space: nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: 70px var(--gut) 40px; position: relative; z-index: 3; }
.footer .fwrap { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.footer .fbrand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer .fbrand .brand-logo { width: 44px; height: 44px; }
.footer .fbrand b { font-size: 19px; letter-spacing: .2em; font-weight: 700; }
.footer .fnav { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.footer .fnav a { font-size: 14px; color: var(--ink-mute); transition: color .3s; }
.footer .fnav a:hover { color: var(--gold-lt); }
.fsocial { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fsoc { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: 100px;
  overflow: visible; line-height: 1;
  border: 1px solid var(--line); color: var(--ink-soft); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: border-color .25s, color .25s, transform .25s var(--ease); }
.fsoc:hover { border-color: var(--gold); color: var(--gold-lt); transform: translateY(-2px); }
.fsoc svg { color: var(--gold); overflow: visible; flex-shrink: 0; }

/* ============================================================
   CONSTRUCTION NOW (live site photos)
   ============================================================ */
.constr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.constr-head > div { max-width: 640px; }
.constr-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.constr-ig { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; }
.constr-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 6px 0 8px; cursor: grab; scrollbar-width: none; }
.constr-track::-webkit-scrollbar { display: none; }
.constr-track.drag { cursor: grabbing; scroll-snap-type: none; }
.constr-pad { flex: 0 0 calc(var(--gut) - 22px); }
.constr-card { flex: 0 0 min(78vw, 440px); scroll-snap-align: center; margin: 0; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2); transition: transform .5s var(--ease), border-color .5s; }
.constr-card:hover { transform: translateY(-5px); border-color: rgba(194,160,107,0.4); }
.constr-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg-3); }
.constr-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.constr-card:hover .constr-img img { transform: scale(1.05); }
.constr-live { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #fff; background: rgba(12,12,14,0.72); white-space: nowrap;
  padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(6px); }
.constr-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2453a;
  box-shadow: 0 0 0 0 rgba(226,69,58,0.6); animation: galLive 1.6s ease-out infinite; }
.constr-tag { position: absolute; right: 14px; top: 14px; z-index: 3; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: #1a1206; background: var(--gold); padding: 6px 13px; border-radius: 100px; }
.constr-tag.done { background: rgba(12,12,14,0.72); color: #fff; }
[data-theme="light"] .constr-tag { color: #fff; }
[data-theme="light"] .constr-tag.done { background: rgba(26,22,15,0.72); }
.constr-card figcaption { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 5px; }
.constr-date { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.constr-t { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

@media (max-width: 760px) {
  .constr-head { flex-direction: column; align-items: flex-start; }
  .constr-head-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 460px) {
  .constr-head-actions { flex-wrap: wrap; gap: 12px; }
  .constr-head-actions .constr-ig { flex: 1 1 100%; justify-content: center; }
  .constr-head-actions .gal-nav { flex: 0 0 auto; margin-left: auto; }
}

/* ============================================================
   INSTAGRAM phone
   ============================================================ */
.insta-grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(40px, 6vw, 90px); align-items: center; }
.insta-copy .insta-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; }
.insta-handle { display: block; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--gold-lt); }
.insta-handle:hover { text-decoration: underline; }

.insta-phone-wrap { display: flex; justify-content: center; }
.insta-phone { position: relative; width: 340px; height: 690px; border-radius: 46px; padding: 12px; cursor: pointer;
  background: linear-gradient(155deg, #2a2a30, #0c0c0e); border: none;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7), inset 0 0 0 2px rgba(255,255,255,0.06);
  transition: transform .5s var(--ease); }
.insta-phone:hover { transform: translateY(-8px) rotate(-1deg); }
.insta-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 120px; height: 26px;
  background: #050506; border-radius: 100px; z-index: 5; }
.insta-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; }
.insta-topbar { display: flex; align-items: center; gap: 10px; padding: 38px 16px 12px; border-bottom: 1px solid #efefef; color: #14141a; }
.insta-topbar .flip { color: #14141a; }
.insta-topname { font-weight: 700; font-size: 15px; flex: 1; }
.insta-dots { font-weight: 700; letter-spacing: 1px; color: #14141a; }
.insta-prof { display: flex; align-items: center; gap: 18px; padding: 14px 16px 8px; }
.insta-ava { width: 66px; height: 66px; border-radius: 50%; flex: 0 0 auto; padding: 3px;
  background: linear-gradient(45deg, #f0a73f, #d6306e, #8a3ab9); display: grid; place-items: center; position: relative;
  overflow: hidden; }
.insta-ava::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: transparent;
  z-index: 0;
  border: 2px solid #fff;
  box-sizing: border-box;
  pointer-events: none;
}
.insta-ava img,
.insta-ava .brand-logo {
  position: relative;
  z-index: 1;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.insta-ava .brand-logo { width: 56%; height: auto; border-radius: 0; object-fit: contain; }
.insta-stats { display: flex; gap: 18px; flex: 1; justify-content: space-around; }
.ist { text-align: center; color: #14141a; }
.ist b { display: block; font-size: 17px; font-weight: 700; }
.ist span { font-size: 12px; color: #6a6a72; }
.insta-bio { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 2px; color: #14141a; }
.insta-bio b { font-size: 14px; font-weight: 700; }
.insta-bio span { font-size: 13px; color: #2a2a30; }
.insta-link { color: #2a6fdb !important; font-weight: 600; }
.insta-follow { display: flex; gap: 8px; padding: 0 16px 14px; }
.insta-fbtn { flex: 1; text-align: center; background: #c2a06b; color: #fff; font-size: 14px; font-weight: 700;
  padding: 9px; border-radius: 9px; }
.insta-mbtn { width: 44px; text-align: center; background: #efefef; color: #14141a; font-weight: 700; padding: 9px; border-radius: 9px; }
.insta-grid-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; flex: 1; }
.insta-tile { position: relative; overflow: hidden; background: #e3dccb; }
.insta-tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s var(--ease); }
.insta-phone:hover .insta-tile img { transform: scale(1.06); }
.insta-tap { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 100px;
  background: rgba(12,12,14,0.86); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
  backdrop-filter: blur(6px); box-shadow: 0 10px 26px -8px rgba(0,0,0,0.6); opacity: 0; transition: opacity .35s var(--ease); }
.insta-phone:hover .insta-tap { opacity: 1; }
.insta-tap svg { color: #e2c891; }

@media (max-width: 920px) {
  .insta-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .insta-copy { max-width: 560px; }
  .insta-copy .eyebrow { justify-content: center; }
  .insta-copy .insta-cta { margin-left: auto; margin-right: auto; }
}
.footer .fbar { max-width: var(--maxw); margin: 46px auto 0; padding-top: 26px; border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint); }

/* sticky mobile CTA */
.mobicta { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .infra-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: inline-flex; }
  .loc-grid, .contact-grid, .about-grid, .about-top, .hero.v-split .hero-inner { grid-template-columns: 1fr; }
  .footer .fwrap { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2,1fr); }
  .hero-stats .st:nth-child(2) { border-right: none; }
  .inv-metrics { grid-template-columns: repeat(2,1fr); }
  .loc-map { min-height: 320px; }
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {
  /* the plan artwork itself is near-square (~689x726) — squeezing its box
     to 16:9 (tried that first) left it "contain"-fitted into a narrow
     strip in the middle of a wide short box, with dead margins on both
     sides and the room labels baked into the drawing shrunk to unreadable.
     Now that the carousel (not this ratio) is what keeps the section
     short, there's no need to fight the artwork's own proportions —
     close to square lets it fill the box properly and stay legible.
     min-height:0 still matters: .apt-plan is a flex item inside .apt
     (column flex), and its <img width:100% height:100%> child makes the
     default content-based auto-minimum fall back to the image's intrinsic
     size, silently overriding aspect-ratio, without this reset. */
  .apt-plan { aspect-ratio: 1 / 1; min-height: 0; padding: 16px; }
  .apt-body { padding: 16px 18px 18px; }
  .apt .rooms .rm { padding: 6px 0; font-size: 13px; }
  .infra-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .inv-metrics { grid-template-columns: 1fr; }
  .about-trust { flex-wrap: wrap; row-gap: 20px; }
  .about-trust .tr { flex: 1 1 40%; }
  .about-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .nav-right .btn { display: none; }
  /* floating dark-glass capsule, always dark regardless of site theme —
     same material language as a MacBook Touch Bar: an island, not a
     shore-to-shore bar, slim (one row, icon beside label — not stacked,
     which read as a regular chunky tab bar instead of a slim strip),
     rounded, thin separators between buttons instead of full dividers. */
  .mobicta { display: flex; position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom));
    transform: translateX(-50%); z-index: 480; width: calc(100% - 20px); max-width: 400px; gap: 1px;
    padding: 5px; border-radius: 16px; background: rgba(20,17,12,0.92);
    backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 26px -10px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25); }
  .mobicta-btn { flex: 1; position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 5px; padding: 12px 1px; border-radius: 12px; min-width: 0;
    background: none; border: none; color: rgba(255,255,255,.72); font-family: inherit; font-size: 10px; font-weight: 600;
    letter-spacing: -0.005em; cursor: pointer; transition: background .15s ease, transform .12s ease, color .15s ease; }
  .mobicta-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobicta-btn svg { flex: 0 0 auto; width: 15px; height: 15px; }
  .mobicta-btn:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px;
    background: rgba(255,255,255,.09); }
  .mobicta-btn svg { color: var(--gold-lt); }
  .mobicta-btn:active { background: rgba(255,255,255,.12); color: #fff; transform: scale(.97); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
  .grain, .scroll-cue i::after { animation: none; }
  .split .w i { transform: none !important; opacity: 1 !important; }
  .marquee__row { animation: none !important; }
}

/* ============================================================
   ANIMATIONS — split text, clip reveal, marquee, scroll progress
   ============================================================ */

/* scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 600;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-dp), var(--gold), var(--gold-lt));
  box-shadow: 0 0 14px var(--gold-glow);
}

/* split-text word reveal */
.split { }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; }
.split .w > i {
  display: inline-block; font-style: normal; transform: translateY(108%);
  opacity: 0; transition: transform .95s var(--ease), opacity .95s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
  will-change: transform;
}
.split.in .w > i { transform: translateY(0); opacity: 1; }

/* clip-path wipe reveal (images / slots) */
.clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); will-change: clip-path; }
.clip-reveal.in { clip-path: inset(0 0 0% 0); }
.clip-reveal > * { transform: scale(1.12); transition: transform 1.4s var(--ease); will-change: transform; }
.clip-reveal.in > * { transform: scale(1); }

/* line draw under section heads */
.rule { height: 1px; width: 100%; background: var(--line); position: relative; overflow: hidden; }
.rule::after { content:""; position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); }
.rule.in::after { transform: scaleX(1); }

/* marquee */
.marquee {
  position: relative; z-index: 3; overflow: hidden; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 26px 0; background: var(--bg-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__row { display: flex; gap: 0; width: max-content; animation: marqueeMove 38s linear infinite; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 30px; padding: 0 30px;
  font-size: clamp(20px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.marquee__item .md { width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow); flex: 0 0 auto; }
.marquee__item.alt { color: transparent; -webkit-text-stroke: 1px var(--gold); }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ============================================================
   ШАХМАТКА — unit availability matrix
   ============================================================ */
.shm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 44px 0 26px; }
.shm-seg { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line); }
.shm-seg-lab { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); padding: 0 8px 0 6px; }
.shm-seg-btn { border: none; background: transparent; color: var(--ink-soft); font-family: inherit;
  font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 10px; cursor: pointer; transition: .18s var(--ease); }
.shm-seg-btn:hover { color: var(--gold-lt); }
.shm-seg-btn.on { background: var(--gold); color: #1a1206; box-shadow: 0 6px 16px -8px var(--gold-glow); }
[data-theme="light"] .shm-seg-btn.on { color: #fff; }
.shm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
.shm-leg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.shm-leg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.shm-dot { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; }
.shm-dot.s-free { background: var(--gold); }
.shm-dot.s-reserved { background: #d8a24a; opacity: .9; }
.shm-dot.s-sold { background: var(--ink-faint); }

.shm-main { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }

/* sunny-apartments filter (from insolation «подобрать солнечную») */
.shm-sunbar { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 18px; border-radius: 14px;
  background: rgba(194,160,107,0.10); border: 1px solid var(--gold-dp); }
.shm-sunbar-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #1a1206; flex: 0 0 auto;
  background: radial-gradient(circle, #ffe7a8, #f2b94e); box-shadow: 0 0 16px var(--gold-glow); }
.shm-sunbar-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shm-sunbar-txt b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.shm-sunbar-txt span { font-size: 13px; color: var(--ink-mute); }
.shm-sunbar-x { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 100px; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-soft); font-family: inherit; font-size: 13px; cursor: pointer; transition: .2s; }
.shm-sunbar-x:hover { border-color: var(--gold); color: var(--gold-lt); }
.shm-cell.s-sundim { opacity: .3; filter: grayscale(.55); }
.shm-cell.s-sunlit { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 18px -3px var(--gold-glow); }
.shm-cell.s-sunlit::before { background: var(--gold) !important; }
.shm-grid-wrap { overflow-x: auto; padding-bottom: 8px; border-radius: 18px; }
.shm-block + .shm-block { margin-top: 22px; }
.shm-block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.shm-block-head h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.shm-block-head span { font-size: 12.5px; color: var(--ink-mute); }
.shm-rows { display: flex; flex-direction: column; gap: 6px; width: max-content; min-width: 100%; }
.shm-row { display: grid; grid-template-columns: 40px repeat(var(--cols), minmax(58px, 1fr)); gap: 6px; }
.shm-floor { display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--bg-3); color: var(--ink-soft); font-weight: 700; font-size: 13px; min-height: 52px; }
.shm-floor-btn { gap: 3px; border: 1px solid var(--line); cursor: pointer; font-family: inherit; transition: border-color .2s, color .2s, background .2s; }
.shm-floor-btn:hover { border-color: var(--gold); color: var(--gold-lt); background: rgba(194,160,107,.08); }
.shm-floor-ico { opacity: .5; }
.shm-floor-btn:hover .shm-floor-ico { opacity: 1; }

/* typical-floor plan modal */
.fp-overlay { position: fixed; inset: 0; z-index: 8600; display: grid; place-items: center; padding: 18px;
  background: rgba(6,6,8,.74); backdrop-filter: blur(7px); animation: fpFade .3s var(--ease); }
@keyframes fpFade { from { opacity: 0; } to { opacity: 1; } }
.fp-modal { position: relative; width: min(1000px, 100%); max-height: 92vh; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 24px; padding: clamp(20px, 3vw, 30px); animation: quizPop .4s var(--ease); }
.fp-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; z-index: 5;
  border: 1px solid var(--line); background: var(--glass); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: .2s; }
.fp-close:hover { border-color: var(--gold); color: var(--gold-lt); }
.fp-head { flex: 0 0 auto; padding-right: 50px; margin-bottom: 16px; }
.fp-head h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.fp-head p { color: var(--ink-mute); font-size: 14px; margin-top: 6px; }
.fp-body { display: grid; grid-template-columns: 1fr 300px; gap: 22px; min-height: 0; overflow: hidden; }
.fp-stage { position: relative; background: #f3efe7; border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
  display: grid; place-items: center; min-height: 0; }
.fp-img { max-width: 100%; max-height: 64vh; object-fit: contain; display: block; }
.fp-spot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 9px; border-radius: 11px; cursor: pointer; font-family: inherit; line-height: 1.05; white-space: nowrap;
  border: 1.5px solid; transition: transform .18s var(--ease), box-shadow .18s; }
.fp-spot.s-free { background: rgba(194,160,107,.92); border-color: #fff; color: #1a1206; box-shadow: 0 4px 14px -4px rgba(0,0,0,.5); }
.fp-spot.s-free:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 8px 22px -6px var(--gold-glow); z-index: 3; }
.fp-spot.s-sold { background: rgba(40,40,46,.82); border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.7); cursor: not-allowed; }
.fp-spot.s-reserved { background: rgba(216,162,74,.9); border-color: #fff; color: #1a1206; }
.fp-spot-area { font-size: 12px; font-weight: 800; }
.fp-spot-num { font-size: 9px; font-weight: 600; opacity: .8; letter-spacing: .02em; }
.fp-list { display: flex; flex-direction: column; min-height: 0; }
.fp-list-h { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin-bottom: 12px; }
.fp-list-scroll { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.fp-li { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: 13.5px; transition: .18s; }
.fp-li.s-free:hover { border-color: var(--gold); background: rgba(194,160,107,.08); transform: translateX(3px); }
.fp-li.s-sold { opacity: .5; cursor: not-allowed; }
.fp-li-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fp-li-dot.s-free { background: var(--gold); }
.fp-li-dot.s-sold { background: var(--ink-faint); }
.fp-li-dot.s-reserved { background: #d8a24a; }
.fp-li-main { flex: 1; }
.fp-li-num { font-size: 12px; color: var(--ink-mute); font-weight: 600; }
.fp-tap { font-size: 12px; color: var(--ink-mute); line-height: 1.45; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* floor-plan spot editor */
.fp-spot.editable { cursor: grab; touch-action: none; }
.fp-spot.editable:active { cursor: grabbing; }
.fp-spot.editable.s-sold { background: rgba(40,40,46,.92); color: #fff; opacity: .85; }
@media (max-width: 760px) {
  .fp-body { grid-template-columns: 1fr; gap: 14px; }
  .fp-img { max-height: 42vh; }
  .fp-list-scroll { max-height: 26vh; }
}
.shm-cell { position: relative; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; user-select: none;
  padding: 6px 9px; min-height: 52px; cursor: pointer; font-family: inherit; transition: transform .15s var(--ease), box-shadow .15s, border-color .15s; overflow: hidden; }
.shm-cell .shm-num { font-size: 10px; color: var(--ink-mute); letter-spacing: .02em; }
.shm-cell .shm-area { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.shm-cell::before { content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.shm-cell.s-free { border-color: rgba(194,160,107,0.45); background: rgba(194,160,107,0.10); }
.shm-cell.s-free::before { background: var(--gold); }
.shm-cell.s-free:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px var(--gold-glow); border-color: var(--gold); }
.shm-cell.s-reserved { border-color: rgba(216,162,74,0.4); background: rgba(216,162,74,0.10); }
.shm-cell.s-reserved::before { background: #d8a24a; }
.shm-cell.s-reserved:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(216,162,74,0.5); }
.shm-cell.s-sold { background: var(--bg-3); cursor: not-allowed; }
.shm-cell.s-sold .shm-area { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.shm-cell.s-sold .shm-num { color: var(--ink-faint); }
.shm-cell.s-sold::before { background: var(--ink-faint); opacity: .5; }
.shm-cell.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-glow), 0 14px 28px -14px var(--gold-glow); }
.shm-cell.muted { opacity: .26; pointer-events: none; }

.shm-detail { position: sticky; top: 90px; }
.shm-detail-card { border-radius: 22px; overflow: hidden; }
.shm-detail-card.empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 50px 32px; gap: 16px; min-height: 320px; }
.shm-detail-card.empty p { color: var(--ink-mute); font-size: 14.5px; max-width: 26ch; }
.shm-detail-ico { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold);
  display: grid; place-items: center; }
.shm-detail-plan { background: #fbfaf7; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 18px; border-bottom: 1px solid var(--line); }
.shm-detail-plan img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.shm-detail-body { padding: 22px 22px 24px; }
.shm-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shm-detail-kick { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.shm-detail-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; }
.shm-pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 6px 11px; border-radius: 100px; white-space: nowrap; }
.shm-pill.s-free { background: rgba(194,160,107,0.16); color: var(--gold-lt); border: 1px solid rgba(194,160,107,0.4); }
.shm-pill.s-reserved { background: rgba(216,162,74,0.16); color: #c98f2f; border: 1px solid rgba(216,162,74,0.4); }
.shm-pill.s-sold { background: rgba(120,112,98,0.14); color: var(--ink-mute); border: 1px solid var(--line); }
.shm-detail-rows { margin: 18px 0 20px; }
.shm-dr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.shm-dr span { font-size: 13.5px; color: var(--ink-mute); }
.shm-dr b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.shm-dr.total { border-bottom: none; padding-top: 14px; }
.shm-dr.total span { color: var(--ink-soft); font-weight: 600; }
.shm-dr.total b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--gold-lt); }
.shm-detail-cta { display: grid; gap: 10px; }
.shm-detail-cta .btn { width: 100%; }
.shm-soldnote { text-align: center; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-mute); font-size: 13.5px; }

/* ============================================================
   GALLERY carousel
   ============================================================ */
.gal { overflow: hidden; }
.gal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.gal-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.gal-arr { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass);
  color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: .25s var(--ease); }
.gal-arr:hover { border-color: var(--gold); color: var(--gold-lt); background: rgba(194,160,107,0.08); }
.gal-arr .flip { transform: rotate(180deg); }
.gal-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 6px 0 20px; cursor: grab; scrollbar-width: none; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track.drag { cursor: grabbing; scroll-snap-type: none; }
.gal-pad { flex: 0 0 calc(var(--gut) - 18px); }
.gal-item { flex: 0 0 min(72vw, 560px); scroll-snap-align: center; margin: 0; transition: transform .35s var(--ease); will-change: transform; }
@media (prefers-reduced-motion: reduce), (hover: none) { .gal-item { transition: none; } }
.gal-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--bg-3); position: relative; }
.gal-item { cursor: pointer; }
.gal-zoom { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-lt); background: rgba(11,11,13,0.55); border: 1px solid var(--glass-brd);
  backdrop-filter: blur(8px); opacity: 0; transform: scale(.8); transition: .3s var(--ease); pointer-events: none; }
.gal-item:hover .gal-zoom { opacity: 1; transform: scale(1); }
[data-theme="light"] .gal-zoom { background: rgba(255,255,255,0.7); }
.gal-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal-item:hover .gal-img img { transform: scale(1.05); }
.gal-item figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 15px; color: var(--ink-soft); }
.gal-idx { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--gold); border: 1px solid var(--line); border-radius: 100px; padding: 4px 10px; }
.gal-live { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(12,12,14,0.72); white-space: nowrap;
  padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(6px); }
.gal-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2453a; box-shadow: 0 0 0 0 rgba(226,69,58,0.6); animation: galLive 1.6s ease-out infinite; }
@keyframes galLive { 0% { box-shadow: 0 0 0 0 rgba(226,69,58,0.55); } 100% { box-shadow: 0 0 0 9px rgba(226,69,58,0); } }

@media (max-width: 1080px) {
  .shm-main { grid-template-columns: 1fr; }
  .shm-detail { position: static; }
  .shm-detail-card.empty { min-height: 0; padding: 32px; }
}
@media (max-width: 640px) {
  .shm-controls { gap: 12px; }
  .shm-legend { margin-left: 0; width: 100%; }
  .gal-head { flex-direction: column; align-items: flex-start; }
  /* mobile шахматка: compact cells, keep horizontal scroll usable */
  .shm-rows { gap: 4px; }
  .shm-row { grid-template-columns: 30px repeat(var(--cols), minmax(46px, 1fr)); gap: 4px; }
  .shm-floor { min-height: 44px; font-size: 11px; border-radius: 8px; }
  .shm-cell { min-height: 44px; padding: 5px 6px; border-radius: 9px; }
  .shm-cell .shm-num { font-size: 9px; }
  .shm-cell .shm-area { font-size: 12px; }
  .shm-grid-wrap { -webkit-overflow-scrolling: touch; position: relative; }
  .shm-grid-wrap::after { content: "→"; position: sticky; right: 0; bottom: 0; }
}

/* ============================================================
   QUIZ — modal + band
   ============================================================ */
.quiz-overlay { position: fixed; inset: 0; z-index: 8000; display: grid; place-items: center; padding: 20px;
  background: rgba(6,6,8,0.7); backdrop-filter: blur(8px); animation: quizFade .3s var(--ease); }
@keyframes quizFade { from { opacity: 0; } to { opacity: 1; } }
.quiz-modal { position: relative; width: min(680px, 100%); max-height: 92vh; overflow-y: auto;
  border-radius: 26px; padding: clamp(26px,4vw,44px); animation: quizPop .4s var(--ease); }
@keyframes quizPop { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.quiz-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass); color: var(--ink); display: grid; place-items: center; z-index: 5; transition: .2s; }
.quiz-close:hover { border-color: var(--gold); color: var(--gold-lt); }
.quiz-prog-top { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.quiz-bar { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.quiz-bar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; transition: width .4s var(--ease); }
.quiz-q { font-size: clamp(24px,3.2vw,34px); font-weight: 700; letter-spacing: -0.02em; margin: 26px 0 22px; line-height: 1.15; }
.quiz-opts { display: grid; gap: 12px; }
.quiz-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left;
  padding: 19px 22px; border-radius: 15px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 500; transition: .22s var(--ease); }
.quiz-opt:hover, .quiz-opt.on { border-color: var(--gold); background: rgba(194,160,107,0.08); transform: translateX(4px); }
.quiz-opt-ar { color: var(--gold); opacity: 0; transform: translateX(-6px); transition: .22s var(--ease); }
.quiz-opt:hover .quiz-opt-ar, .quiz-opt.on .quiz-opt-ar { opacity: 1; transform: none; }
.quiz-back, .quiz-restart { margin-top: 20px; background: none; border: none; color: var(--ink-mute);
  font-family: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.quiz-back:hover, .quiz-restart:hover { color: var(--gold-lt); }
.flip { transform: rotate(180deg); }

.quiz-result { }
.quiz-res-kick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.quiz-res-price { font-size: 17px; color: var(--ink-soft); margin-top: 6px; }
.quiz-res-price b { color: var(--gold-lt); font-weight: 700; }
.quiz-res-cards { display: grid; gap: 10px; margin: 22px 0; }
.quiz-res-card { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-2); }
.qrc-plan { width: 64px; height: 64px; border-radius: 10px; background: #fbfaf7; display: grid; place-items: center; padding: 6px; flex: 0 0 auto; }
.qrc-plan img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.qrc-title { font-size: 16px; font-weight: 700; }
.qrc-meta { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.qrc-price { font-size: 15px; font-weight: 600; color: var(--gold-lt); margin-top: 4px; }
.quiz-form { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.quiz-form-head h4 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.quiz-form-head p { font-size: 14px; color: var(--ink-mute); margin: 6px 0 18px; }
.quiz-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.quiz-form input { background: rgba(0,0,0,0.2); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; color: var(--ink); font-family: inherit; font-size: 15px; transition: border-color .2s; }
[data-theme="light"] .quiz-form input { background: rgba(255,255,255,0.6); }
.quiz-form input:focus { outline: none; border-color: var(--gold); }
.quiz-ok { text-align: center; padding: 26px 0 6px; }
.quiz-ok-ico { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  background: rgba(194,160,107,0.14); border: 1px solid var(--gold); color: var(--gold-lt); }
.quiz-ok p { font-size: 17px; color: var(--ink-soft); max-width: 32ch; margin: 0 auto 18px; }

/* ============================================================
   TOOL LAUNCHER + TOOL MODAL
   Shared shell for "big" interactive tools (shahmatka, installment
   calculator, referral) that used to sit permanently open in the main
   scroll — now a compact preview card in-flow, full tool on demand in
   an overlay. Reuses the site's existing glass/gold language rather
   than inventing a new visual system.
   ============================================================ */
.tool-launcher { margin-top: 44px; border-radius: 26px; border: 1px solid var(--line); background: var(--bg-2);
  padding: clamp(28px, 4vw, 44px); display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap; position: relative; overflow: hidden; }
.tool-launcher::after { content: ""; position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  opacity: .5; pointer-events: none; }
.tool-launcher-stat { position: relative; z-index: 1; }
.tool-launcher-stat .v { font-size: clamp(38px, 5vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tool-launcher-stat .k { margin-top: 10px; font-size: 14px; color: var(--ink-soft); max-width: 32ch; }
.tool-launcher-cta { position: relative; z-index: 1; flex: 0 0 auto; }
@media (max-width: 640px) {
  .tool-launcher { flex-direction: column; align-items: stretch; text-align: left; gap: 22px; padding: 26px; }
  .tool-launcher-cta { width: 100%; justify-content: center; }
}

.tool-modal-overlay { position: fixed; inset: 0; z-index: 590; overflow-y: auto; padding: 28px 20px;
  background: rgba(6,6,8,0.74); backdrop-filter: blur(8px); animation: quizFade .3s var(--ease); }
.tool-modal { position: relative; width: 100%; max-width: var(--tm-w, 1160px); margin: 0 auto; border-radius: 28px;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 60px 120px -30px rgba(0,0,0,.55);
  animation: cmpUp .35s var(--ease); overflow: hidden; }
.tool-modal-close { position: fixed; top: 22px; right: 22px; z-index: 591; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); background: rgba(11,11,13,.75); backdrop-filter: blur(10px); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.tool-modal-close:hover { background: rgba(11,11,13,.92); transform: scale(1.06); }
@media (max-width: 760px) {
  .tool-modal-overlay { padding: 0; }
  .tool-modal { max-width: 100%; min-height: 100dvh; border-radius: 0; }
  .tool-modal-close { top: 14px; right: 14px; }
}

/* shared pill tab-switcher for sections that used to stack two full
   header+grid blocks (Infrastructure, Investment) — same segmented-control
   look as .shm-seg, generalized so it isn't coupled to shahmatka markup */
.sec-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line); margin-top: 30px; }
.sec-tab { border: none; background: transparent; color: var(--ink-soft); font-family: inherit;
  font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 10px; cursor: pointer; transition: .18s var(--ease); }
.sec-tab:hover { color: var(--gold-lt); }
.sec-tab.on { background: var(--gold); color: #1a1206; box-shadow: 0 6px 16px -8px var(--gold-glow); }
[data-theme="light"] .sec-tab.on { color: #fff; }
@media (max-width: 520px) {
  .sec-tabs { width: 100%; }
  .sec-tab { flex: 1 1 0; text-align: center; padding: 10px 12px; }
}

/* ============================================================
   BOOKING modal (unified promo / installment / fix)
   ============================================================ */
.book-overlay { position: fixed; inset: 0; z-index: 8400; display: grid; place-items: center; padding: 20px;
  background: rgba(6,6,8,0.7); backdrop-filter: blur(8px); animation: quizFade .3s var(--ease); }
.book-modal { position: relative; width: min(460px, 100%); border-radius: 24px; padding: clamp(26px,4vw,40px);
  animation: quizPop .4s var(--ease); }
.book-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: .2s; }
.book-close:hover { border-color: #1f8a5b; color: #25a06b; }
.book-kick { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #1f8a5b; font-weight: 700; }
.book-title { font-size: clamp(20px,2.6vw,26px); font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 12px; line-height: 1.15; }
.book-summary { font-size: 14px; color: var(--ink-soft); background: rgba(31,138,91,0.08); border: 1px solid rgba(31,138,91,0.25);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; line-height: 1.5; }
.book-form { display: grid; gap: 12px; }
.book-form input { background: rgba(0,0,0,0.2); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px;
  color: var(--ink); font-family: inherit; font-size: 15px; transition: border-color .2s; }
[data-theme="light"] .book-form input { background: rgba(255,255,255,0.6); }
.book-form input:focus { outline: none; border-color: #1f8a5b; }
.book-note { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin-top: 2px; }
.book-ok { text-align: center; padding: 16px 0 6px; }
.book-ok-ico { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  background: rgba(31,138,91,0.14); border: 1px solid #1f8a5b; color: #25a06b; }
.book-ok p { font-size: 16px; color: var(--ink-soft); max-width: 30ch; margin: 0 auto 18px; }

/* ============================================================
   INSTALLMENT calculator
   ============================================================ */
.inst-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; margin-top: 50px; align-items: stretch; }
.inst-controls { display: flex; flex-direction: column; gap: 30px; padding: clamp(26px,3vw,38px);
  border-radius: 22px; border: 1px solid var(--line); background: var(--bg-2); }
.inst-field label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.inst-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.inst-bf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inst-bf .cmp-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 11px; background: var(--bg-3); border: 1px solid var(--line); }
.inst-bf .cmp-seg button { border: none; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 8px; cursor: pointer; transition: .18s; }
.inst-bf .cmp-seg button.on { background: var(--gold); color: #1a1206; }
[data-theme="light"] .inst-bf .cmp-seg button.on { color: #fff; }
.inst-bf .cmp-floor select { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; cursor: pointer; }
.inst-bf .cmp-floor select:focus { outline: none; border-color: var(--gold); }

/* selectable controls use a static GREEN accent when chosen (select/fix logic) */
.shm-seg-btn.on,
.inst-chip.on,
.inst-bf .cmp-seg button.on,
.cmp-seg button.on { background: #1f8a5b !important; color: #fff !important; border-color: #1f8a5b !important; box-shadow: 0 6px 16px -8px rgba(31,138,91,0.5) !important; }
.inst-chip:hover, .shm-seg-btn:hover { color: #25a06b; }
.inst-chip { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-3);
  color: var(--ink-soft); font-family: inherit; font-size: 14px; font-weight: 500; transition: .2s var(--ease); }
.inst-chip:hover { border-color: var(--gold); color: var(--gold-lt); }
.inst-chip.on { background: var(--gold); color: #1a1206; border-color: var(--gold); }
[data-theme="light"] .inst-chip.on { color: #fff; }
.inst-meta { display: grid; gap: 12px; padding-top: 6px; }
.inst-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.inst-meta-row span { font-size: 14px; color: var(--ink-mute); white-space: nowrap; }
.inst-meta-row b { font-size: 15px; font-weight: 600; white-space: nowrap; }

.inst-result { padding: clamp(26px,3vw,38px); border-radius: 22px; display: flex; flex-direction: column; position: relative; }
.inst-badge { position: absolute; top: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: #1a1206; display: grid; place-items: center; font-size: 18px; font-weight: 800;
  box-shadow: 0 10px 26px -10px var(--gold-glow); z-index: 2; }
[data-theme="light"] .inst-badge { color: #fff; }
.inst-res-rows { display: grid; gap: 4px; margin-bottom: auto; }
.inst-res-rows .inst-rr:first-child { padding-right: 64px; }
.inst-rr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.inst-rr span { font-size: 14px; color: var(--ink-mute); }
.inst-rr b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inst-monthly { margin: 24px 0; padding: 22px; border-radius: 16px; background: rgba(194,160,107,0.08); border: 1px solid rgba(194,160,107,0.25); text-align: center; }
.inst-monthly-k { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.inst-monthly-v { display: block; font-size: clamp(30px,4vw,44px); font-weight: 700; letter-spacing: -0.03em; color: var(--gold-lt); margin: 6px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inst-monthly-x { font-size: 14px; color: var(--ink-soft); }
.inst-note { font-size: 12px; color: var(--ink-faint); margin-top: 14px; text-align: center; }

/* ============================================================
   REVIEWS + cases
   ============================================================ */
/* horizontal carousel — same drag/scroll-snap language as the photo
   gallery and apartment plans, instead of a tall stacked grid */
.rev-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 6px 0 8px; margin-top: 50px; cursor: grab; scrollbar-width: none; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-track.drag { cursor: grabbing; scroll-snap-type: none; }
.rev-pad { flex: 0 0 calc(var(--gut) - 16px); }
.rev-card { flex: 0 0 min(80vw, 340px); scroll-snap-align: center;
  padding: 30px 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2);
  display: flex; flex-direction: column; transition: transform .5s var(--ease), border-color .5s;
  position: relative; overflow: hidden; }
.rev-card:hover { transform: translateY(-5px); border-color: rgba(194,160,107,0.4); }
/* spotlight: soft glow tracking the cursor, driven by --mx/--my set on mousemove */
.rev-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(194,160,107,.14), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease); }
.rev-card:hover::before { opacity: 1; }
.rev-card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .rev-card::before { display: none; } }
.rev-case { background: linear-gradient(150deg, rgba(194,160,107,0.10), var(--bg-2)); border-color: rgba(194,160,107,0.3); }
.rev-quote { font-family: Georgia, serif; font-size: 60px; line-height: .6; color: var(--gold); height: 30px; }
.rev-metric { margin-bottom: 16px; }
.rev-metric-v { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; color: var(--gold-lt); }
.rev-metric-k { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.rev-text { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 16px 0 22px; flex: 1; text-wrap: pretty; }
.rev-author { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.rev-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 18px; font-weight: 700; color: var(--gold-lt); flex: 0 0 auto; }
.rev-name { font-size: 15px; font-weight: 600; }
.rev-role { font-size: 13px; color: var(--ink-mute); }

@media (max-width: 980px) {
  .inst-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .quiz-form-row { grid-template-columns: 1fr; }
  .inst-monthly-v { font-size: 36px; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb { position: fixed; inset: 0; z-index: 9500; display: grid;
  grid-template-columns: 64px 1fr 64px; grid-template-rows: 1fr auto;
  align-items: center; gap: 0; padding: 30px clamp(12px,3vw,48px) 22px;
  background: rgba(5,5,7,0.94); backdrop-filter: blur(14px); animation: lbFade .3s var(--ease); }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lb-close { position: absolute; top: 22px; right: 24px; z-index: 5; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: #ece7dd; display: grid; place-items: center; transition: .22s var(--ease); }
.lb-close:hover { border-color: var(--gold); color: var(--gold-lt); transform: rotate(90deg); }
.lb-arr { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05); color: #ece7dd; display: grid; place-items: center; cursor: pointer; transition: .22s var(--ease); justify-self: center; }
.lb-arr:hover { border-color: var(--gold); color: var(--gold-lt); background: rgba(194,160,107,0.12); }
.lb-prev { grid-column: 1; grid-row: 1; }
.lb-next { grid-column: 3; grid-row: 1; }
.lb-stage { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 0; gap: 18px; }
.lb-img { max-width: 100%; max-height: calc(100vh - 200px); object-fit: contain; border-radius: 14px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8); animation: lbImg .4s var(--ease); }
@keyframes lbImg { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lb-cap { display: flex; align-items: center; gap: 18px; color: #ece7dd; }
.lb-counter { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.lb-counter i { color: rgba(236,231,221,0.4); font-style: normal; margin: 0 2px; }
.lb-text { font-size: 16px; color: rgba(236,231,221,0.85); }
.lb-thumbs { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.lb-thumb { width: 72px; height: 50px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14);
  background: #15151a; cursor: pointer; opacity: .5; transition: .22s var(--ease); padding: 0; }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(194,160,107,0.4); }
@media (max-width: 700px) {
  .lb { grid-template-columns: 44px 1fr 44px; padding: 20px 8px 16px; }
  .lb-arr { width: 42px; height: 42px; }
  .lb-img { max-height: calc(100vh - 230px); }
  .lb-thumb { width: 54px; height: 38px; }
}

/* ============================================================
   EXIT-INTENT popup
   ============================================================ */
.exit { position: fixed; inset: 0; z-index: 9100; display: grid; place-items: center; padding: 20px;
  background: rgba(5,5,7,0.74); backdrop-filter: blur(10px); animation: lbFade .35s var(--ease); }
.exit-card { width: min(840px, 100%); max-height: 92vh; overflow-x: hidden; overflow-y: auto; border-radius: 26px;
  display: grid; grid-template-columns: 0.92fr 1.08fr; animation: quizPop .45s var(--ease); position: relative; }
.exit-close { position: absolute; top: 16px; right: 16px; z-index: 6; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--glass-brd); background: rgba(11,11,13,0.5); color: #ece7dd; display: grid; place-items: center; transition: .22s var(--ease); }
.exit-close:hover { border-color: var(--gold); color: var(--gold-lt); transform: rotate(90deg); }
.exit-visual { position: relative; min-height: 320px; }
.exit-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exit-visual-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8,8,10,0.1), rgba(8,8,10,0.5)),
  linear-gradient(0deg, rgba(8,8,10,0.6), transparent 50%); }
.exit-badge { position: absolute; left: 20px; top: 20px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #1a1206; background: var(--gold); padding: 7px 14px; border-radius: 100px; }
.exit-body { padding: clamp(28px, 3.4vw, 46px); display: flex; flex-direction: column; }
.exit-title { font-size: clamp(24px, 2.6vw, 31px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.exit-lead { font-size: 15px; color: var(--ink-soft); margin: 14px 0 18px; line-height: 1.55; }
.exit-perks { list-style: none; display: grid; gap: 11px; margin: 0 0 24px; }
.exit-perks li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-soft); }
.exit-check { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: rgba(194,160,107,0.14); border: 1px solid rgba(194,160,107,0.4); color: var(--gold-lt); }
.exit-form { display: flex; gap: 10px; }
.exit-form input { flex: 1; min-width: 0; background: rgba(0,0,0,0.22); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; color: var(--ink); font-family: inherit; font-size: 15px; transition: border-color .2s; }
[data-theme="light"] .exit-form input { background: rgba(255,255,255,0.6); }
.exit-form input:focus { outline: none; border-color: var(--gold); }
.exit-form .btn { flex: 0 0 auto; }
.exit-skip { margin-top: 14px; background: none; border: none; color: var(--ink-mute); font-family: inherit;
  font-size: 14px; align-self: flex-start; transition: color .2s; }
.exit-skip:hover { color: var(--gold-lt); }
.exit-privacy { font-size: 12px; color: var(--ink-faint); margin-top: 14px; line-height: 1.5; }
.exit-ok { text-align: center; padding: 24px 0; margin: auto 0; }
.exit-ok-ico { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  background: rgba(194,160,107,0.14); border: 1px solid var(--gold); color: var(--gold-lt); }
.exit-ok p { font-size: 16px; color: var(--ink-soft); max-width: 32ch; margin: 0 auto 18px; }
@media (max-width: 720px) {
  .exit-card { grid-template-columns: 1fr; max-width: 440px; }
  .exit-visual { min-height: 150px; }
  .exit-form { flex-direction: column; }
  .exit-form .btn { width: 100%; }
}

/* ============================================================
   COMPARE planировки
   ============================================================ */
.cmp-grid { margin-top: 50px; display: grid; grid-template-columns: 168px repeat(var(--cols), minmax(170px, 1fr)) auto;
  gap: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--bg-2); }
.cmp-labels, .cmp-col, .cmp-addcol { display: flex; flex-direction: column; }
.cmp-col { border-left: 1px solid var(--line); transition: background .3s; }
.cmp-col.cmp-best { background: rgba(194,160,107,0.06); }
.cmp-head-cell { position: relative; padding: 20px 18px; min-height: 396px; height: 396px; display: flex; flex-direction: column; }
.cmp-corner { min-height: 396px; height: 396px; }
.cmp-labels .cmp-lbl, .cmp-cell { padding: 0 18px; border-top: 1px solid var(--line-2); display: flex; align-items: center; height: 60px; min-height: 60px; box-sizing: border-box; }
.cmp-lbl { font-size: 13px; color: var(--ink-mute); letter-spacing: .02em; }
.cmp-cell { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-cell.big { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.cmp-cell.strong { font-size: 17px; font-weight: 700; }
.cmp-cell.accent { color: var(--gold-lt); font-weight: 700; }
.cmp-lbl-cta, .cmp-cell-cta { min-height: 64px; height: 64px; box-sizing: border-box; border-top: 1px solid var(--line); }
.cmp-cell-cta .btn { width: 100%; }

.cmp-card { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.cmp-plan { width: 100%; height: 240px; background: #fbfaf7; border-radius: 12px; display: block; padding: 12px; overflow: hidden; transition: transform .3s var(--ease); }
.cmp-plan img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cmp-card:hover .cmp-plan { transform: scale(1.03); }
.cmp-name { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.cmp-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lt); margin-top: 6px; display: block; }
.cmp-sel { display: flex; align-items: center; gap: 8px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.cmp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); }
.cmp-seg button { border: none; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 6px; cursor: pointer; transition: .18s; }
.cmp-seg button.on { background: var(--gold); color: #1a1206; }
[data-theme="light"] .cmp-seg button.on { color: #fff; }
.cmp-floor select { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.cmp-floor select:focus { outline: none; border-color: var(--gold); }
.cmp-badge { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #1a1206; background: var(--gold); padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
[data-theme="light"] .cmp-badge { color: #fff; }
.cmp-remove { position: absolute; top: 12px; right: 12px; z-index: 4; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--ink-mute); display: grid; place-items: center; transition: .2s; }
.cmp-remove:hover { border-color: var(--gold); color: var(--gold-lt); }
.cmp-addcol { border-left: 1px solid var(--line); }
.cmp-add { flex: 1; min-width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: none; border: none; cursor: pointer; color: var(--ink-mute); font-family: inherit; font-size: 12px;
  letter-spacing: .04em; padding: 18px 12px; transition: color .25s, background .25s; writing-mode: vertical-rl; }
.cmp-add:hover { color: var(--gold-lt); background: rgba(194,160,107,0.05); }
.cmp-add-ico { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; writing-mode: horizontal-tb; }

/* picker sheet */
.cmp-picker { position: fixed; inset: 0; z-index: 8200; display: grid; place-items: end center; padding: 0;
  background: rgba(5,5,7,0.7); backdrop-filter: blur(8px); animation: lbFade .3s var(--ease); }
.cmp-picker-sheet { width: 100%; max-width: 880px; border-radius: 26px 26px 0 0; padding: 26px clamp(20px,3vw,36px) 36px;
  animation: cmpUp .4s var(--ease); max-height: 80vh; overflow-y: auto; }
@keyframes cmpUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.cmp-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cmp-picker-head h4 { font-size: 20px; font-weight: 700; }
.cmp-picker-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass);
  color: var(--ink); display: grid; place-items: center; transition: .2s; }
.cmp-picker-close:hover { border-color: var(--gold); color: var(--gold-lt); }
.cmp-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cmp-pick { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg-2); cursor: pointer; font-family: inherit; text-align: left; transition: .2s var(--ease); }
.cmp-pick:hover { border-color: var(--gold); transform: translateY(-2px); }
.cmp-pick.used { opacity: .5; }
.cmp-pick-plan { width: 56px; height: 56px; border-radius: 10px; background: #fbfaf7; display: grid; place-items: center; padding: 5px; flex: 0 0 auto; }
.cmp-pick-plan img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cmp-pick-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.cmp-pick-area { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }

@media (max-width: 760px) {
  .cmp-grid { grid-template-columns: 116px repeat(var(--cols), minmax(120px, 1fr)) auto; overflow-x: auto; }
  .cmp-labels { position: sticky; left: 0; z-index: 2; background: var(--bg-2); }
  .cmp-head-cell, .cmp-corner { min-height: 300px; height: 300px; padding: 14px 12px; }
  .cmp-plan { height: 168px; }
  .cmp-name { font-size: 14px; }
  /* .cmp-labels .cmp-lbl (base rule, higher specificity) would otherwise
     beat a bare .cmp-lbl here and keep the desktop 60px height, drifting
     the label column out of sync with the .cmp-cell value column row by
     row -- match its specificity so this override actually wins. */
  .cmp-cell, .cmp-labels .cmp-lbl { padding: 0 12px; min-height: 54px; height: 54px; box-sizing: border-box; font-size: 13.5px; }
  .cmp-cell.big { font-size: 16px; }
  .cmp-picker-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BUY STEPS
   ============================================================ */
.steps-track { position: relative; margin-top: 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.steps-line { position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: var(--line); }
.step { position: relative; }
.step-node { width: 54px; height: 54px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line);
  display: grid; place-items: center; position: relative; z-index: 2; transition: border-color .4s, background .4s; }
.step-node span { font-size: 15px; font-weight: 700; color: var(--gold-lt); letter-spacing: .02em; }
.step:hover .step-node { border-color: var(--gold); background: rgba(194,160,107,0.08); }
.step-t { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 22px 0 8px; }
.step-d { font-size: 14px; color: var(--ink-mute); line-height: 1.55; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.faq-intro { position: sticky; top: 100px; }
.faq-ask { margin-top: 28px; }
.faq-list { display: flex; flex-direction: column; color: var(--ink); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left;
  padding: 26px 4px; cursor: pointer; font-family: inherit;
  font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; letter-spacing: -0.01em; }
.faq-q:hover span:first-child { color: var(--gold-lt); }
.faq-ico { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.faq-ico i { position: absolute; background: var(--gold); border-radius: 2px; transition: transform .35s var(--ease), opacity .35s; }
.faq-ico i:nth-child(1) { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-ico i:nth-child(2) { top: 0; left: 8px; width: 2px; height: 18px; }
.faq-item.open .faq-ico i:nth-child(2) { transform: scaleY(0); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease); }
.faq-item.open .faq-a { max-height: 360px; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); padding: 0 40px 26px 4px; max-width: 60ch; text-wrap: pretty; }

@media (max-width: 900px) {
  .steps-track { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
  .steps-line { display: none; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
}
@media (max-width: 520px) {
  /* stays 2-up rather than collapsing to a single stacked column — each
     step is just a node + short title + a line or two of text, plenty
     legible at ~half width, and 2-up turns 5 stacked screens into 3 */
  .steps-track { gap: 24px 16px; }
  .step-node { width: 46px; height: 46px; }
  .step-t { font-size: 16.5px; margin: 16px 0 6px; }
  .step-d { font-size: 13.5px; }
}

/* ============================================================
   NUMBERS BAND (animated counters)
   ============================================================ */
.numbers { position: relative; z-index: 3; padding: clamp(40px,6vh,72px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numbers-head { margin-bottom: 34px; }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.numbers-cell { background: var(--bg); padding: clamp(26px,3vw,40px) 28px; text-align: center; }
.numbers-v { font-size: clamp(44px,5.5vw,72px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--gold-lt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.numbers-v .suf { color: var(--ink); }
.numbers-k { margin-top: 12px; font-size: 14px; color: var(--ink-soft); letter-spacing: .02em; }

@media (max-width: 760px) {
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  /* the 5.5vw/44px-floor scale was sized for a single-column desktop cell —
     on a 2-col mobile grid "12 мес"/"15 мин" has under half that width and
     was wrapping the unit onto its own line. Give mobile its own, smaller floor. */
  .numbers-cell { padding: clamp(18px,4vw,26px) 14px; }
  .numbers-v { font-size: clamp(26px, 8vw, 40px); }
}

/* ============================================================
   SECTION DOTS + BACK TO TOP
   ============================================================ */
.snav { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 470;
  display: flex; flex-direction: column; gap: 16px; }
.snav-dot { position: relative; width: 26px; height: 14px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-end; padding: 0; }
.snav-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint);
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.snav-dot:hover .snav-pt { background: var(--gold); transform: scale(1.25); }
.snav-dot.on .snav-pt { background: var(--gold); transform: scale(1.5); box-shadow: 0 0 0 4px rgba(194,160,107,0.18); }
.snav-lbl { position: absolute; right: 22px; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink); background: rgba(11,11,13,0.78); border: 1px solid var(--glass-brd); padding: 6px 12px; border-radius: 100px;
  backdrop-filter: blur(8px); opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease); }
[data-theme="light"] .snav-lbl { background: rgba(255,255,255,0.9); }
.snav-dot:hover .snav-lbl { opacity: 1; transform: translateX(0); }

.to-top { position: fixed; right: 24px; bottom: 26px; z-index: 470; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--glass-brd); background: var(--gold); color: #1a1206; display: grid; place-items: center;
  cursor: pointer; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  box-shadow: 0 12px 30px -10px var(--gold-glow);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease); }
[data-theme="light"] .to-top { color: #fff; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold-lt); }
.up-ico { transform: rotate(-90deg); }

@media (max-width: 1180px) { .snav { display: none; } }

/* ============================================================
   FAVORITES (подборка)
   ============================================================ */
.shm-cell { position: relative; }
.shm-fav { position: absolute; top: 4px; right: 4px; z-index: 3; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; border: none; background: none; color: var(--ink-faint);
  opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s, color .2s; cursor: pointer; }
.shm-cell:hover .shm-fav { opacity: .8; transform: scale(1); }
.shm-fav:hover { color: var(--gold); opacity: 1; }
.shm-fav.on { opacity: 1; transform: scale(1); color: var(--gold); }
.fav-detail-btn { display: inline-flex; align-items: center; gap: 8px; }
.fav-detail-btn.on { border-color: var(--gold); color: var(--gold-lt); background: rgba(194,160,107,0.08); }

.fav-pill { position: fixed; left: 24px; bottom: 26px; z-index: 472; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px 13px 16px; border-radius: 100px; border: 1px solid var(--glass-brd);
  background: var(--bg-2); color: var(--ink); cursor: pointer; box-shadow: 0 14px 34px -12px rgba(0,0,0,0.5);
  transition: transform .25s var(--ease), border-color .25s; }
.fav-pill:hover { transform: translateY(-2px); border-color: var(--gold); }
.fav-pill.pulse { animation: favPulse .5s var(--ease); }
@keyframes favPulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.09); } }
.fav-pill-heart { color: var(--gold); display: grid; place-items: center; }
.fav-pill-txt { font-size: 14px; font-weight: 600; }
.fav-pill-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px; background: var(--gold); color: #1a1206;
  font-size: 13px; font-weight: 800; display: grid; place-items: center; }
[data-theme="light"] .fav-pill-n { color: #fff; }

.fav-overlay { position: fixed; inset: 0; z-index: 8200; background: rgba(6,6,8,0.6); backdrop-filter: blur(6px);
  display: flex; justify-content: flex-end; animation: quizFade .3s var(--ease); }
.fav-panel { width: min(440px, 100%); height: 100%; background: var(--bg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; animation: favSlide .4s var(--ease); }
@keyframes favSlide { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.fav-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 26px 18px; border-bottom: 1px solid var(--line); }
.fav-head h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.fav-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass);
  color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: .2s; }
.fav-x:hover { border-color: var(--gold); color: var(--gold-lt); }
.fav-empty { flex: 1; display: grid; place-items: center; padding: 40px; text-align: center; }
.fav-empty p { color: var(--ink-mute); max-width: 28ch; }
.fav-list { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.fav-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); position: relative; }
.fav-item-plan { width: 62px; height: 62px; border-radius: 10px; background: #fbfaf7; display: grid; place-items: center; padding: 6px; flex: 0 0 auto; }
.fav-item-plan img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fav-item-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.fav-item-meta { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.fav-item-price { font-size: 14px; font-weight: 600; color: var(--gold-lt); margin-top: 3px; }
.fav-item-x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-mute); display: grid; place-items: center; cursor: pointer; transition: .2s; }
.fav-item-x:hover { border-color: var(--gold); color: var(--gold-lt); }
.fav-foot { padding: 20px 22px 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.fav-sum { display: flex; align-items: baseline; justify-content: space-between; }
.fav-sum span { font-size: 14px; color: var(--ink-mute); }
.fav-sum b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--gold-lt); }
.fav-foot-meta { font-size: 13px; color: var(--ink-mute); }
.fav-clear { background: none; border: none; color: var(--ink-mute); font-family: inherit; font-size: 13px; cursor: pointer; transition: color .2s; }
.fav-clear:hover { color: var(--gold-lt); }

@media (max-width: 640px) {
  .fav-pill { left: 16px; bottom: 86px; }
}
@media (max-width: 640px) {
  /* stacked well clear of the chat FAB (60px tall, bottom:90px on this same
     breakpoint) — they used to sit almost exactly on top of each other */
  .to-top { right: 16px; bottom: 164px; width: 46px; height: 46px; }
}

/* ============================================================
   КВАРТИРА МЕСЯЦА (offer + countdown)
   ============================================================ */
.offer-card { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 3vw, 40px); border-radius: 26px; align-items: center;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3)); border: 1px solid var(--line); position: relative; overflow: hidden; }
.offer-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 85% 15%, rgba(194,160,107,0.14), transparent 60%); }
.offer-plan { position: relative; border-radius: 18px; overflow: hidden; background: #fbfaf7; aspect-ratio: 4 / 3.4;
  display: grid; place-items: center; padding: 22px; border: 1px solid var(--line); }
.offer-plan img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.offer-badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #fff; background: rgba(12,12,14,0.78); padding: 6px 12px; border-radius: 100px; }
.offer-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.offer-body { position: relative; z-index: 2; }
.offer-title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.03em; margin: 12px 0 10px; line-height: 1.05; }
.offer-sub { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; max-width: 52ch; }
.offer-rooms { margin-top: 14px; font-size: 13px; letter-spacing: .04em; color: var(--ink-mute);
  display: inline-flex; padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; }
.offer-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin: 22px 0 8px; }
.offer-old { font-size: 18px; color: var(--ink-mute); text-decoration: line-through; white-space: nowrap; }
.offer-new { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: var(--gold-lt); white-space: nowrap; }
.offer-save { font-size: 13px; font-weight: 700; color: #1a1206; background: var(--gold); padding: 6px 12px; border-radius: 100px; white-space: nowrap; }
[data-theme="light"] .offer-save { color: #fff; }
.offer-install { font-size: 14px; color: var(--ink-soft); }
.offer-count { margin: 22px 0; }
.offer-count-lab { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.offer-count-grid { display: inline-flex; align-items: center; gap: 8px; }
.offer-cell { min-width: 62px; text-align: center; padding: 12px 8px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line); }
.offer-cell b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.offer-cell span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 5px; }
.offer-colon { font-size: 22px; font-weight: 700; color: var(--ink-faint); }
.offer-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.offer-left { margin-top: 18px; font-size: 13.5px; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 9px; }
.offer-left b { color: var(--ink-soft); }
.offer-left-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2453a;
  box-shadow: 0 0 0 0 rgba(226,69,58,0.6); animation: galLive 1.6s ease-out infinite; }

@media (max-width: 860px) {
  .offer-card { grid-template-columns: 1fr; }
  .offer-cell { min-width: 54px; }
}
@media (max-width: 420px) {
  .offer-cell { min-width: 46px; padding: 10px 6px; }
  .offer-cell b { font-size: 23px; }
  .offer-colon { font-size: 18px; }
}

/* ============================================================
   VISUAL POLISH — contrast, section rhythm, accents
   ============================================================ */
/* slightly stronger contrast for small labels in light theme */
[data-theme="light"] { --ink-mute: #6b6253; --ink-faint: #978c78; }

/* section rhythm: tinted bands (tone differs from card bg, so cards stay legible) */
:root { --band: #101015; }
[data-theme="light"] { --band: #efeae0; }
#infrastructure, #reviews, #faq, #steps { background: var(--band); }
#infrastructure, #reviews, #faq, #steps { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }

/* lead-magnet icons get accent tint + subtle bg */
.magnet .mi { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(194,160,107,0.12); color: var(--gold); flex: 0 0 auto; }
.magnet { gap: 14px; }

/* installment: extra plan note line */
.inst-note { line-height: 1.5; }

/* ============================================================
   BOOSTS
   ============================================================ */

/* 2. Rent vs */
.rv-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 48px; }
.rv-card { padding: clamp(26px,3vw,40px); border-radius: 22px; border: 1px solid var(--line); text-align: center; background: var(--bg-2); }
.rv-bad { opacity: .82; }
.rv-good { border-color: rgba(31,138,91,.4); background: linear-gradient(160deg, rgba(31,138,91,.10), var(--bg-2)); }
.rv-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; font-size: 20px; background: rgba(226,69,58,.12); color: #e2453a; }
.rv-ico.ok { background: rgba(31,138,91,.14); color: #25a06b; }
.rv-t { font-size: 15px; color: var(--ink-soft); }
.rv-v { font-size: clamp(22px,2.6vw,30px); font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 6px; }
.rv-sub { font-size: 13.5px; color: var(--ink-mute); }
.rv-vs { font-size: 18px; font-weight: 700; color: var(--ink-faint); }
.rv-note { margin-top: 26px; padding: 20px 24px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }


/* 6. numbers */
@media (max-width: 860px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-vs { display: none; }
}

/* ============================================================
   BOOSTS II
   ============================================================ */
/* lazy-load preview: shared "click to open" placeholder for heavy embeds
   (360 tour iframe, insolation map) — purely visual, caller supplies sizing */
.lazy-preview { position: relative; width: 100%; padding: 0; margin: 0; cursor: pointer; font-family: inherit;
  background-color: #0a0a0c; background-size: cover; background-position: 50% 50%; }
.lazy-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,13,.1), rgba(11,11,13,.6)); }
.lazy-preview-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.35); color: #fff;
  transition: transform .3s var(--ease), background .3s; }
.lazy-preview:hover .lazy-preview-play { transform: translate(-50%,-50%) scale(1.08); background: rgba(255,255,255,.24); }
.lazy-preview-label { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  font-size: 13.5px; font-weight: 600; color: #fff; background: rgba(11,11,13,.55); padding: 9px 18px;
  border-radius: 100px; backdrop-filter: blur(6px); white-space: nowrap; }

/* 1. 360 tour */
.tour-stage { position: relative; margin-top: 44px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); }
.tour-frame { width: 100%; height: clamp(360px, 60vh, 620px); border: 0; display: block; background: #0a0a0c; }
.tour-cta { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); }

/* 5. referral */
.ref-result { margin-top: 24px; }

/* 5b. referral lock-in modal */
.ref-modal { width: min(520px, 100%); max-height: 92vh; overflow-y: auto; }
.ref-mform { gap: 16px; }
.ref-fieldset { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(194,160,107,.05); }
.ref-fs-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold-lt); }
.ref-result { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 8px; }
.ref-card-img { width: 100%; max-width: 340px; border-radius: 18px; border: 1px solid rgba(194,160,107,.35); box-shadow: 0 22px 50px -22px rgba(0,0,0,.7); }
.ref-proof { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); text-align: center; max-width: 380px;
  background: rgba(31,138,91,.08); border: 1px solid rgba(31,138,91,.25); border-radius: 14px; padding: 14px 16px; text-wrap: pretty; }
.ref-proof-ok { display: flex; align-items: center; gap: 8px; justify-content: center; color: #1f8a5b; font-weight: 600;
  background: rgba(31,138,91,.12); border-color: rgba(31,138,91,.4); }
.ref-result-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.ref-result-btns .btn { flex: 1; min-width: 150px; justify-content: center; }

/* 3. chatbot */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 472; width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: #1f8a5b; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px -10px rgba(31,138,91,.6); transition: transform .25s var(--ease), opacity .25s; }
.chat-fab:hover { transform: scale(1.08); }
.chat-fab.hide { opacity: 0; pointer-events: none; transform: scale(.6); }
.chat-fab-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1f8a5b; animation: chatPulse 2s ease-out infinite; }
@keyframes chatPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
.chat-win { position: fixed; right: 22px; bottom: 22px; z-index: 473; width: min(360px, calc(100vw - 32px)); max-height: min(560px, 80vh); display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 30px 70px -24px rgba(0,0,0,.6); animation: chatIn .3s var(--ease); }
@keyframes chatIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, #1f8a5b, #176b46); color: #fff; }
.chat-ava { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.25); display: grid; place-items: center; flex: 0 0 auto; }
.chat-ava .brand-logo { width: 26px; }
.chat-meta { flex: 1; } .chat-meta b { display: block; font-size: 15px; } .chat-meta span { font-size: 12px; opacity: .85; }
.chat-x { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: grid; place-items: center; }
.chat-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.chat-msg { max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.chat-msg.bot { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg.me { align-self: flex-end; background: #1f8a5b; color: #fff; border-bottom-right-radius: 4px; }
.chat-qs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.chat-q { font-family: inherit; font-size: 12.5px; padding: 8px 13px; border-radius: 100px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-soft); cursor: pointer; transition: .2s; }
.chat-q:hover { border-color: #1f8a5b; color: #25a06b; }
.chat-wa { margin: 0 14px 14px; }
.chat-input { display: flex; gap: 8px; padding: 0 14px 10px; }
.chat-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 100px; padding: 11px 16px;
  color: var(--ink); font-family: inherit; font-size: 14px; }
[data-theme="light"] .chat-input input { background: rgba(255,255,255,.7); }
.chat-input input:focus { outline: none; border-color: #1f8a5b; }
.chat-input button { width: 42px; height: 42px; border-radius: 50%; border: none; background: #1f8a5b; color: #fff; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; transition: background .2s; }
.chat-input button:hover { background: #25a06b; }
.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); animation: chatDot 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 860px) {
  .chat-fab { bottom: 90px; }
}

/* 10. animated infra dots (icons "breathe" / draw-in on reveal) */
.infra-item .dot { position: relative; }
.infra-item .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; }
.infra-item.in .dot::after { animation: dotRing 2.4s ease-out infinite; }
@keyframes dotRing { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.infra-item:hover .dot { transform: scale(1.25); transition: transform .3s var(--ease); }

/* 6. hero day→night gentle light cycle over the reel */
.hero-daynight { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,30,55,0) 0%, rgba(15,20,40,.0) 100%);
  animation: dayNight 24s ease-in-out infinite alternate; }
@keyframes dayNight {
  0% { background: linear-gradient(200deg, rgba(255,210,150,.08), transparent 55%); }
  100% { background: linear-gradient(200deg, rgba(20,30,60,.34), rgba(10,12,28,.20) 60%, transparent 80%); }
}
@media (prefers-reduced-motion: reduce) { .hero-daynight, .infra-item.in .dot::after { animation: none; } }

/* ============================================================
   AI MATCH
   ============================================================ */
.ai-box { margin-top: 40px; max-width: 860px; }
.ai-input { display: flex; gap: 12px; flex-wrap: wrap; }
.ai-input input { flex: 1; min-width: 220px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 17px 18px; color: var(--ink); font-family: inherit; font-size: 16px; transition: border-color .2s; }
[data-theme="light"] .ai-input input { background: rgba(255,255,255,.7); }
.ai-input input:focus { outline: none; border-color: #1f8a5b; }
.ai-input .btn { flex: 0 0 auto; }
.ai-input .btn[disabled] { opacity: .7; cursor: default; }
.ai-examples { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.ai-chip { font-family: inherit; font-size: 13px; padding: 9px 14px; border-radius: 100px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-soft); cursor: pointer; transition: .2s; }
.ai-chip:hover { border-color: #1f8a5b; color: #25a06b; }
.ai-status { margin-top: 22px; display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 15px; }
.ai-status.err { color: #c0603c; }
.ai-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: #1f8a5b; animation: aiSpin .8s linear infinite; flex: 0 0 auto; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-link { background: none; border: none; color: #25a06b; font-size: 18px; cursor: pointer; }
.ai-results { margin-top: 26px; }
.ai-found { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #1f8a5b; font-weight: 700; margin-bottom: 14px; }
.ai-found.ai-alt { color: var(--gold-dp); letter-spacing: .04em; text-transform: none; font-size: 14px; }
.ai-cards { display: grid; gap: 12px; }
.ai-card { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); }
.ai-plan { width: 70px; height: 70px; border-radius: 12px; background: #fbfaf7; display: grid; place-items: center; padding: 7px; flex: 0 0 auto; }
.ai-plan img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ai-info { flex: 1; min-width: 0; }
.ai-title { font-size: 16px; font-weight: 700; }
.ai-meta { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.ai-price { font-size: 15px; font-weight: 600; color: var(--gold-lt); margin-top: 3px; }
@media (max-width: 560px) { .ai-card { flex-wrap: wrap; } .ai-card .btn { width: 100%; } }


/* ============================================================
   POLISH v2 — living buttons, section rhythm, depth
   ============================================================ */
/* buttons: press feedback + subtle sheen sweep on hover (kills "dead" feel) */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg);
  opacity: 0; transition: opacity .2s; }
.btn:hover::after { opacity: 1; animation: btnSheen .7s var(--ease); }
@keyframes btnSheen { from { left: -60%; } to { left: 130%; } }
.btn:active { transform: scale(.96); }
.btn-gold:active, .btn-green:active { transform: scale(.96) translateY(1px); }

/* gold hairline dividers between major sections for cinematic rhythm */
.block + .block::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), calc(100% - var(--gut) * 2)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); opacity: .7; }
.block { position: relative; }
#infrastructure::before, #reviews::before, #faq::before, #steps::before, .inv::before { display: none; }

/* richer card hover depth across the site */
.vcard, .infra-item, .apt, .rev-card, .gal-img, .cmp-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.vcard:hover, .infra-item:hover { box-shadow: 0 24px 50px -28px rgba(0,0,0,.45); }

/* heading entrance: slightly bolder reveal for section titles */
.reveal { will-change: transform, opacity; }

/* focus-visible accessibility ring (keyboard nav) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { .btn:hover::after { animation: none; } }

/* ============================================================
   UNIVERSAL DEVICE ADAPTATION (any screen, phone → desktop)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
* { min-width: 0; }
/* respect notches / safe areas (Telegram Mini App, iPhone) */
.nav { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
/* safe-area handled via the floating capsule's own `bottom` offset, see mobile .mobicta rule */

/* small phones */
@media (max-width: 480px) {
  :root { --gut: 16px; }
  .h-display { font-size: clamp(30px, 11vw, 46px); }
  .h-sec { font-size: clamp(25px, 8vw, 38px); }
  .lead { font-size: 15px; }
  .pre-word { font-size: clamp(18px, 7vw, 28px); letter-spacing: .3em; text-indent: .3em; }
  .pre-sub { letter-spacing: .34em; text-indent: .34em; font-size: 10px; }
  .chat-win { right: 10px; left: 10px; width: auto; bottom: 84px; }
  .fav-pill { left: 12px; }
  .to-top { right: 12px; }
}
/* very small / older devices */
@media (max-width: 360px) {
  :root { --gut: 13px; }
  .btn { padding: 12px 18px; font-size: 13px; }
}
/* large desktops — keep content from stretching too wide */
@media (min-width: 1700px) { :root { --maxw: 1440px; } }
/* short landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 560px; }
}
/* coarse pointers: bigger tap targets, no custom cursor */
@media (hover: none), (pointer: coarse) {
  .btn-sm { padding: 11px 16px; }
  /* these close/remove buttons are sized for a mouse-precision hover
     target (24-26px); WCAG's minimum tap target is 24px but the
     recommended comfortable minimum is ~36-40px — bump them up for touch. */
  .cmp-remove { width: 38px; height: 38px; }
  .fav-item-x { width: 38px; height: 38px; }
  .pwa-x { width: 36px; height: 36px; }
}

/* ============================================================
   PREMIUM POLISH PASS  (isolated layer — safe to remove as a block)
   Refines motion, depth, button feedback, focus, scrollbar, type.
   ============================================================ */
:root {
  --shadow-1: 0 1px 2px rgba(0,0,0,.18), 0 6px 16px -10px rgba(0,0,0,.35);
  --shadow-2: 0 18px 50px -28px rgba(0,0,0,.62), 0 4px 14px -8px rgba(0,0,0,.4);
  --shadow-gold: 0 22px 60px -30px var(--gold-glow);
}
[data-theme="light"] {
  --shadow-1: 0 1px 2px rgba(90,72,40,.08), 0 8px 22px -16px rgba(90,72,40,.28);
  --shadow-2: 0 22px 56px -30px rgba(90,72,40,.34), 0 4px 14px -10px rgba(90,72,40,.22);
}

/* 1 — crisper, lighter scroll-reveal (less blur drag, tighter travel) */
.reveal { transform: translateY(24px); filter: blur(3px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.reveal[data-d="1"] { transition-delay: .06s; }
.reveal[data-d="2"] { transition-delay: .12s; }
.reveal[data-d="3"] { transition-delay: .18s; }
.reveal[data-d="4"] { transition-delay: .24s; }
.reveal[data-d="5"] { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; filter: none; transition: opacity .4s ease; }
}

/* 2 — editorial heading rhythm: balanced wrapping + optical sizing */
.h-display, .h-sec, .hero h1 { text-wrap: balance; font-optical-sizing: auto; }
.h-display { letter-spacing: -0.035em; }
.eyebrow { margin-bottom: 24px; }
.eyebrow::before { transition: width .5s var(--ease); }
.reveal.in .eyebrow::before, .eyebrow:hover::before { width: 40px; }

/* 3 — ambient depth on resting cards, richer lift on hover */
.vcard, .infra-item, .constr-card, .rev-card, .apt {
  box-shadow: var(--shadow-1);
}
.vcard:hover, .infra-item:hover, .constr-card:hover, .rev-card:hover {
  box-shadow: var(--shadow-2);
}
.apt:hover { box-shadow: var(--shadow-2), 0 30px 70px -30px rgba(0,0,0,0.55); }
.glass { box-shadow: var(--shadow-2); }

/* 4 — button micro-feedback: light sheen sweep + tactile press */
.btn { overflow: hidden; }
.btn-gold::after, .btn-green::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .6s var(--ease); opacity: .0;
}
.btn-gold:hover::after, .btn-green:hover::after { transform: translateX(130%); opacity: 1; }
.btn:active { transform: scale(.97); }
.btn-gold, .btn-green, .btn-ghost { transition: transform .18s var(--ease), background .3s, color .3s, box-shadow .3s, border-color .3s; }

/* 5 — refined focus-visible ring (a11y + polish), only for keyboard nav */
:where(a, button, input, select, textarea, .magnetic):focus-visible {
  outline: 2px solid var(--gold-lt); outline-offset: 3px; border-radius: 8px;
}
:where(input, select, textarea):focus-visible { outline-offset: 1px; }

/* 6 — input fields: softer rest state, gold focus glow */
.book-form input, .quiz-form-row input, .exit-form input,
.ref-fieldset input, .cform input, .cform select {
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.book-form input:focus, .quiz-form-row input:focus, .exit-form input:focus,
.ref-fieldset input:focus, .cform input:focus, .cform select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(194,160,107,.16); outline: none;
}

/* 7 — premium custom scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--gold-dp) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gold-dp); border-radius: 100px;
  border: 3px solid var(--bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); border-color: var(--bg); background-clip: padding-box; }

/* 8 — gallery / construction imagery: smoother cinematic zoom on hover */
.constr-img img, .gal-img img { transition: transform .9s var(--ease); }
.constr-card:hover .constr-img img { transform: scale(1.06); }

/* 9 — section eyebrow + heading enter together more gracefully on cards */
.eyebrow { will-change: auto; }

/* ============================================================
   INSOLATION (sun in your flat)
   ============================================================ */
.insol-grid { display: grid; grid-template-columns: 360px 1fr; gap: 30px; margin-top: 46px; align-items: stretch; }
.insol-controls { display: flex; flex-direction: column; gap: 20px; background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: 26px; }
.insol-field label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin-bottom: 12px; }
.insol-dates { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.insol-date { display: flex; flex-direction: column; gap: 2px; padding: 11px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font-family: inherit; cursor: pointer; transition: .2s; }
.insol-date b { font-size: 13.5px; font-weight: 600; } .insol-date span { font-size: 11px; color: var(--ink-mute); }
.insol-date:hover { border-color: var(--gold-dp); }
.insol-date.on { background: rgba(194,160,107,.14); border-color: var(--gold); }
.insol-date.on b, .insol-date.on span { color: var(--gold-lt); }
.insol-time-head { display: flex; align-items: baseline; justify-content: space-between; }
.insol-clock { font-size: 18px; font-weight: 700; color: var(--gold-lt); }
.insol-field input[type=range] { width: 100%; accent-color: var(--gold); margin-top: 4px; }
.insol-play { margin-top: 14px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-soft);
  font-family: inherit; font-size: 13.5px; cursor: pointer; transition: .2s; }
.insol-play:hover { border-color: var(--gold-dp); color: var(--ink); }
.insol-play.on { border-color: var(--gold); color: var(--gold-lt); background: rgba(194,160,107,.1); }
.insol-status { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-mute);
  padding: 11px 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); }
.insol-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); transition: .3s; flex: 0 0 auto; }
.insol-status.lit { color: var(--gold-lt); border-color: var(--gold-dp); background: rgba(194,160,107,.08); }
.insol-status.lit .insol-status-dot { background: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }
.insol-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.insol-ro { background: var(--bg-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.insol-ro span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.insol-ro b { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.insol-ro-wide { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; }
.insol-ro-wide b { color: var(--gold-lt); }
.insol-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.insol-legend span { display: inline-flex; align-items: center; gap: 9px; }
.ilg { width: 16px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.ilg-bld { background: rgba(194,160,107,.5); border: 1px solid var(--gold); }
.ilg-sh { background: rgba(11,11,18,.34); border: 1px solid var(--line); }
.ilg-sun { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #ffe7a8, #f2b94e); box-shadow: 0 0 8px rgba(242,185,78,.8); }
.insol-note { font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.insol-cta { width: 100%; justify-content: center; }

.insol-mapwrap { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); min-height: 563px; }
.insol-map { position: absolute; inset: -14%; width: 128%; height: 128%; background: var(--bg-3); z-index: 1; transform: rotate(15deg); transform-origin: center; }
.insol-compass { position: absolute; top: 14px; right: 14px; z-index: 500; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(11,11,13,.72); border: 1px solid var(--glass-brd); backdrop-filter: blur(8px); display: grid; place-items: center; pointer-events: none; }
.insol-compass span { font-size: 13px; font-weight: 800; color: var(--gold-lt); }
.insol-compass::before { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--gold); }
[data-theme="light"] .insol-compass { background: rgba(255,255,255,.82); }
/* leaflet bits inside insolation map */
.insol-map .leaflet-control-zoom a { background: rgba(11,11,13,0.8); color: var(--ink); border: 1px solid var(--glass-brd); }
[data-theme="light"] .insol-map .leaflet-control-zoom a { background: rgba(255,255,255,0.9); color: #14141a; }
.ins-sunmark { position: relative; }
.ins-sunmark-core { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff3cf, #f2b94e); box-shadow: 0 0 16px 4px rgba(242,185,78,.85); }
.ins-sunmark-glow { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, rgba(242,185,78,.45), transparent 70%); animation: insSunPulse 2.4s ease-in-out infinite; }
@keyframes insSunPulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.5); opacity: .3; } }

/* photoreal 3D render of the complex pinned on the insolation map */
.ins-3d { position: absolute; pointer-events: none; will-change: transform;
  transform-origin: 50% 60%;
  transform: translate(calc(-50% + var(--v3x, 0px)), calc(-54% + var(--v3y, 0px))) rotate(var(--v3r, -8deg)) scale(var(--v3s, 1)); }
.insol-map .ins-3d .ins-3d-img { position: relative; z-index: 1; width: 470px !important; max-width: none !important; height: auto !important;
  display: block; filter: drop-shadow(0 8px 10px rgba(0,0,0,.32)); }
.ins-3d-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: var(--glop, 0);
  background: radial-gradient(circle at var(--glx, 50%) var(--gly, 32%), rgba(255,236,190,.6), rgba(255,236,190,0) 58%); }
/* apartment orientation roses */
.insol-orient { margin-top: 30px; border: 1px solid var(--line); border-radius: 22px; padding: 30px clamp(20px,3vw,34px); background: var(--bg-2); }
.insol-orient-head h3 { font-size: clamp(20px,2.6vw,26px); font-weight: 700; letter-spacing: -0.02em; }
.insol-orient-head p { color: var(--ink-mute); font-size: 14.5px; margin-top: 6px; max-width: 640px; line-height: 1.5; }
.insol-roses { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 28px; }
.insrose { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.insrose-stage { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; }
.insrose-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed var(--line); }
.insrose-axis { position: absolute; background: var(--line-2); }
.insrose-axis-v { left: 50%; top: 8%; bottom: 8%; width: 1px; transform: translateX(-0.5px); }
.insrose-axis-h { top: 50%; left: 8%; right: 8%; height: 1px; transform: translateY(-0.5px); }
.insrose-nlab { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: var(--gold-lt); }
.insrose-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%;
  background: rgba(194,160,107,.12); border: 1px solid var(--gold-dp); display: grid; place-items: center; }
.insrose-core b { font-size: 15px; font-weight: 700; color: var(--gold-lt); }
.insrose-pill { position: absolute; transform: translate(-50%,-50%); white-space: nowrap; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 100px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-mute); transition: .3s var(--ease); }
.insrose-pill.lit { background: var(--gold); border-color: var(--gold); color: #1a1206; box-shadow: 0 0 16px var(--gold-glow); }
[data-theme="light"] .insrose-pill.lit { color: #fff; }
.insrose-sun { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%;
  background: radial-gradient(circle, #fff3cf, #f2b94e); box-shadow: 0 0 14px 3px rgba(242,185,78,.8); transition: left .15s linear, top .15s linear; }
.insrose-foot { display: flex; gap: 18px; }
.insrose-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-mute); }
.insrose-key i { width: 13px; height: 13px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line); }
.insrose-key i.lit { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }

/* collapsible "more" panel + toggle */
.insol-more-toggle { display: none; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 12px 16px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, color .2s; }
.insol-more-toggle:hover { border-color: var(--gold); color: var(--gold-lt); }
.insol-more { display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 860px) {
  .insol-grid { grid-template-columns: 1fr; }
  .insol-roses { grid-template-columns: 1fr; gap: 36px; }
  .insrose-stage { max-width: 280px; }
  /* map first so the sun stays visible while dragging the slider */
  .insol-mapwrap { order: -1; min-height: 56vh; position: sticky; top: 64px; }
  .insol-controls { gap: 16px; }
  .insol-more-toggle { display: flex; }
  .insol-more { display: none; }
  .insol-more.open { display: flex; }
}

/* ============================================================
   PWA INSTALL (boost #9)
   ============================================================ */
.pwa-card { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 7600;
  width: min(440px, calc(100vw - 28px)); display: flex; align-items: center; gap: 13px;
  background: rgba(16,16,20,.92); border: 1px solid var(--glass-brd); border-radius: 18px; padding: 13px 14px;
  backdrop-filter: blur(16px); box-shadow: 0 22px 60px -22px #000, 0 0 0 1px rgba(194,160,107,.18) inset;
  animation: pwaUp .5s var(--ease) both; }
[data-theme="light"] .pwa-card { background: rgba(255,255,255,.96); }
@keyframes pwaUp { from { opacity: 0; transform: translate(-50%, 22px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pwa-ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(194,160,107,.22), rgba(194,160,107,.05)); border: 1px solid var(--gold-dp); }
.pwa-ico .brand-logo { width: 30px; }
.pwa-ico.lg { width: 64px; height: 64px; border-radius: 16px; }
.pwa-ico.lg .brand-logo { width: 42px; }
.pwa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-txt b { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pwa-txt span { font-size: 12px; color: var(--ink-mute); line-height: 1.35; }
.pwa-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; border-radius: 100px;
  border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; background: var(--gold); color: #1a1206; transition: transform .15s, background .2s; }
.pwa-go:hover { background: var(--gold-lt); transform: translateY(-1px); }
.pwa-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--ink-mute); cursor: pointer; border-radius: 7px; transition: color .2s, background .2s; }
.pwa-x:hover { color: var(--ink); background: var(--glass-2); }

.pwa-ios-overlay { position: fixed; inset: 0; z-index: 9300; display: grid; place-items: end center; padding: 16px;
  background: rgba(6,6,8,.66); backdrop-filter: blur(6px); animation: pgIn .3s var(--ease) both; }
.pwa-ios { position: relative; width: min(440px, 100%); background: var(--bg-2); border: 1px solid var(--glass-brd);
  border-radius: 22px; padding: 26px 22px 24px; box-shadow: 0 30px 70px -28px #000; animation: pwaUp .4s var(--ease) both; }
.pwa-ios-h { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; margin-bottom: 22px; }
.pwa-ios-h b { font-size: 19px; font-weight: 800; color: var(--ink); }
.pwa-ios-h span { font-size: 13.5px; color: var(--ink-mute); }
.pwa-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.pwa-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.pwa-steps li b { color: var(--ink); }
.pwa-step-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(194,160,107,.14); border: 1px solid var(--gold-dp); color: var(--gold-lt); font-size: 13px; font-weight: 800; }
.pwa-share { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 7px;
  background: rgba(42,111,219,.16); border: 1px solid rgba(42,111,219,.4); color: #6ea2f0; font-weight: 600; white-space: nowrap; }
.pwa-share svg { color: #6ea2f0; }

/* presentation download bar (under apartment types) */
.apt-presentation { display: flex; align-items: center; gap: 20px; margin-top: 30px; padding: 26px 30px; border-radius: 20px;
  background: linear-gradient(120deg, rgba(194,160,107,.16), rgba(194,160,107,.05)); border: 1.5px solid var(--gold-dp); text-decoration: none; color: var(--ink);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; position: relative; overflow: hidden; }
.apt-presentation::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation: presShine 4.5s var(--ease) infinite; }
@keyframes presShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.apt-presentation:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 26px 54px -28px var(--gold-glow); }
.apt-pres-ic { flex-shrink: 0; width: 60px; height: 60px; border-radius: 15px; display: grid; place-items: center;
  background: var(--gold); color: #1a1206; box-shadow: 0 10px 28px -10px var(--gold-glow); }
.apt-pres-txt { flex: 1; display: flex; flex-direction: column; gap: 5px; position: relative; }
.apt-pres-txt b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.apt-pres-txt span { font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.apt-pres-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 100px; background: var(--gold); color: #1a1206; font-weight: 700; font-size: 14px; transition: transform .3s var(--ease); }
.apt-presentation:hover .apt-pres-go { transform: translateY(2px); }
@media (max-width: 620px) { .apt-presentation { padding: 18px; gap: 14px; flex-wrap: wrap; } .apt-pres-txt b { font-size: 16px; } .apt-pres-go { width: 100%; justify-content: center; } }

@media (max-width: 560px) {
  .pwa-card { bottom: 84px; padding: 12px; gap: 10px; }
  .pwa-txt b { font-size: 13.5px; }
  .pwa-go span, .pwa-go { font-size: 12.5px; }
}

/* ============================================================
   КВАРТИРНЫЙ ЛИСТ — editorial light fact-sheet
   ============================================================ */
.kv-overlay { position: fixed; inset: 0; z-index: 9400; background: rgba(8,8,10,.72); backdrop-filter: blur(7px);
  display: grid; place-items: start center; padding: 22px 16px; overflow-y: auto; animation: kvIn .3s ease; }
@keyframes kvIn { from { opacity: 0; } to { opacity: 1; } }
.kv-modal { width: min(840px, 100%); display: flex; flex-direction: column; }
.kv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px;
  background: #2a2620; border: 1px solid #3a352c; border-bottom: none; border-radius: 16px 16px 0 0; flex-wrap: wrap; }
.kv-tb-left { display: flex; align-items: center; gap: 14px; }
.kv-tb-id { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #ddc18d; }
.kv-tb-actions { display: flex; align-items: center; gap: 10px; }
.kv-plan-seg { display: inline-flex; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; padding: 3px; }
.kv-plan-opt { border: none; background: transparent; color: #cfc7b6; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 100px; cursor: pointer; transition: .2s; }
.kv-plan-opt.on { background: #c2a06b; color: #1a1206; }
.kv-print { display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; background: #1f8a5b; color: #fff; padding: 9px 15px; border-radius: 100px; }
.kv-print:hover { background: #25a06b; }
.kv-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #ece7dd; display: grid; place-items: center; cursor: pointer; }
.kv-close:hover { border-color: #c2a06b; color: #ddc18d; }

/* the sheet — pure light editorial */
.kv-sheet { background: #ffffff; color: #1f1b14; border-radius: 0 0 16px 16px; padding: 44px 48px 34px; box-shadow: 0 50px 100px -34px rgba(0,0,0,.6); }
.kv-mast { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.kv-mast-brand { display: flex; align-items: center; gap: 13px; }
.kv-mast-brand .brand-logo { width: 40px; }
.kv-mast-name b { display: block; font-size: 18px; font-weight: 800; letter-spacing: .16em; color: #1f1b14; }
.kv-mast-name span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #b08b5b; }
.kv-mast-doc { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.kv-mast-kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #9a907c; }
.kv-mast-id { font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700; color: #1f1b14; letter-spacing: .04em; }
.kv-rule { height: 2px; background: #1f1b14; margin: 16px 0 0; }
.kv-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 0 26px; border-bottom: 1px solid #e7e0d2; }
.kv-title h2 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; color: #1f1b14; }
.kv-title-area { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #1f1b14; }
.kv-title-area span { font-size: 18px; font-weight: 600; color: #9a907c; }

.kv-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 0; }
.kv-plan { margin: 0; }
.kv-plan img { width: 100%; max-height: 300px; object-fit: contain; mix-blend-mode: multiply; }
.kv-plan figcaption { margin-top: 10px; font-size: 11px; letter-spacing: .04em; color: #b3a890; text-align: center; }
.kv-spec { margin: 0; display: flex; flex-direction: column; }
.kv-spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #efe9dd; }
.kv-spec dt { font-size: 13px; color: #7d745f; }
.kv-spec dd { font-size: 14.5px; font-weight: 600; color: #1f1b14; text-align: right; font-variant-numeric: tabular-nums; }
.kv-spec .kv-dim { color: #b3a890; font-weight: 400; }
.kv-spec .kv-status { color: #1f8a5b; }

.kv-pricerow { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; border: 1px solid #e7e0d2; border-radius: 14px; overflow: hidden; }
.kv-price-cell { padding: 18px 18px; border-left: 1px solid #efe9dd; display: flex; flex-direction: column; gap: 5px; }
.kv-price-cell:first-child { border-left: none; }
.kv-price-hero { background: #faf6ec; }
.kv-price-accent { background: #f4efe2; }
.kv-cell-lbl { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #9a907c; }
.kv-cell-big { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: #1f1b14; font-variant-numeric: tabular-nums; }
.kv-cell-big::after { content: ""; display: block; width: 34px; height: 2px; background: #c2a06b; margin-top: 8px; }
.kv-cell-mid { font-size: 19px; font-weight: 700; color: #1f1b14; font-variant-numeric: tabular-nums; }
.kv-cell-note { font-size: 12px; color: #9a907c; }
.kv-zero { color: #1f8a5b; font-weight: 600; }

.kv-sched { margin-top: 30px; }
.kv-sched-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.kv-sched-h > span:first-child { font-size: 15px; font-weight: 700; color: #1f1b14; }
.kv-sched-sub { font-size: 12px; color: #9a907c; letter-spacing: .02em; }
.kv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv-table th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #9a907c; font-weight: 700; padding: 10px 12px; border-bottom: 2px solid #1f1b14; }
.kv-table td { padding: 9px 12px; border-bottom: 1px solid #efe9dd; font-variant-numeric: tabular-nums; color: #36301f; }
.kv-table th:nth-child(3), .kv-table th:nth-child(4), .kv-table td:nth-child(3), .kv-table td:nth-child(4) { text-align: right; }
.kv-row-down td { font-weight: 700; color: #b08b5b; border-bottom: 1px solid #e7e0d2; }

.kv-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid #e7e0d2; display: flex; flex-direction: column; gap: 14px; }
.kv-foot-note { font-size: 10.5px; line-height: 1.55; color: #9a907c; }
.kv-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.kv-foot-contact { display: flex; gap: 20px; font-size: 13px; font-weight: 600; color: #1f1b14; }
.kv-fc-phone { color: #b08b5b; }
.kv-foot-date { font-size: 12px; color: #b3a890; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .kv-body { grid-template-columns: 1fr; gap: 22px; }
  .kv-pricerow { grid-template-columns: 1fr 1fr; }
  .kv-price-cell:nth-child(3) { border-left: none; }
  .kv-price-cell:nth-child(3), .kv-price-cell:nth-child(4) { border-top: 1px solid #efe9dd; }
  .kv-title-area { font-size: 32px; }
  .kv-sheet { padding: 28px 20px; }
}

/* PRINT — only the sheet */
@media print {
  body { background: #fff !important; }
  body > *:not(.kv-overlay) { display: none !important; }
  .kv-overlay { position: static; padding: 0; background: #fff; backdrop-filter: none; display: block; overflow: visible; }
  .kv-modal { width: 100%; }
  .kv-toolbar { display: none !important; }
  .kv-sheet { box-shadow: none; border-radius: 0; padding: 8px 0; }
  .kv-price-hero, .kv-price-accent, .kv-cell-big::after, .kv-table { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}