/* ============================================================
   TT CITY — 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"] .aurora { opacity: 0.5; }
[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,
[data-theme="light"] .about-val { 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"] .about-trust .tr,
[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%; }

/* hide native cursor on desktop where custom cursor is active */
@media (hover: hover) and (pointer: fine) {
  body.cursor-on, body.cursor-on * { cursor: none !important; }
}

/* ---------- atmosphere: grain + aurora ---------- */
.atmos { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.aurora {
  position: fixed; inset: -20% -10% auto -10%; height: 90vh; z-index: 0;
  pointer-events: none; opacity: 0.6;
  background:
    radial-gradient(60% 50% at 22% 18%, rgba(194,160,107,0.16), transparent 60%),
    radial-gradient(50% 60% at 82% 0%, rgba(120,140,180,0.10), transparent 60%),
    radial-gradient(40% 40% at 60% 40%, rgba(194,160,107,0.06), transparent 70%);
  filter: blur(20px);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
.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%);
}

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 2147483647; pointer-events: none;
  border-radius: 50%; mix-blend-mode: normal;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--gold-lt); }
.cursor-ring {
  width: 38px; height: 38px; border: 1px solid rgba(221,193,141,0.5);
  transition: width .25s var(--ease), height .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease);
}
.cursor-ring.hov { width: 64px; height: 64px; background: rgba(194,160,107,0.10); border-color: rgba(221,193,141,0.85); }
.cursor-ring.down { width: 30px; height: 30px; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: 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; }
.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(76px, 11vw, 132px); opacity: 0; filter: drop-shadow(0 0 28px var(--gold-glow));
  animation: preLogo 2.6s var(--ease) forwards;
}
@keyframes preLogo {
  0%   { opacity: 0; transform: scale(.6) translateY(8px); filter: blur(14px) drop-shadow(0 0 40px var(--gold-glow)); }
  40%  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) drop-shadow(0 0 28px var(--gold-glow)); }
  78%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1.12); }
}
.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; }
.nav-brand img { width: 30px; }
.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; }
.btn .ico { width: 16px; height: 16px; }

/* ============================================================
   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); }
.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-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); }

/* hero audience switcher */
.hero-aud { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-aud-lab { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.hero-aud-seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 100px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(8px); }
.hero-aud-btn { border: none; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: .2s var(--ease); white-space: nowrap; }
.hero-aud-btn:hover { color: var(--gold-lt); }
.hero-aud-btn.on { background: var(--gold); color: #1a1206; box-shadow: 0 6px 16px -8px var(--gold-glow); }
[data-theme="light"] .hero-aud-btn.on { color: #fff; }
@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
   ============================================================ */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.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); }
.map-poi { position: relative; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; }
.map-poi-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); flex: 0 0 auto; }
.map-poi-lbl { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; background: rgba(11,11,13,0.72);
  padding: 3px 9px; border-radius: 100px; border: 1px solid var(--glass-brd); backdrop-filter: blur(6px); }
[data-theme="light"] .map-poi-lbl { background: rgba(255,255,255,0.86); }
[data-theme="light"] .map-poi-dot { background: #fff; }
.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 h5 { 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); }
/* location drag-to-edit mode */
.loc-edit-btn { position: absolute; top: 14px; left: 14px; z-index: 600; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 100px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  background: rgba(11,11,13,.78); border: 1px solid var(--glass-brd); color: var(--ink); backdrop-filter: blur(8px); transition: border-color .2s, color .2s; }
[data-theme="light"] .loc-edit-btn { background: rgba(255,255,255,.9); }
.loc-edit-btn:hover { border-color: var(--gold); color: var(--gold-lt); }
.loc-edit-btn.on { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.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-line-vx { transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: var(--llc, #2a6fdb); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* FULLSCREEN edit */
.loc-map.editing { position: fixed !important; inset: 0; z-index: 9000; border-radius: 0; min-height: 0; height: 100vh; height: 100dvh; margin: 0;
  transform: none !important; filter: none !important; will-change: auto !important; opacity: 1 !important; background: var(--bg-3); }
.loc-map.editing .loc-leaflet { position: absolute; inset: 0; height: 100%; width: 100%; }
.loc-map.editing .loc-edit-btn { top: 16px; left: 16px; }
.loc-map.editing .loc-map-note { display: none; }

.loc-edit-panel { position: absolute; right: 14px; top: 14px; z-index: 600; width: min(330px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow-y: auto;
  background: rgba(11,11,13,.92); border: 1px solid var(--glass-brd); border-radius: 16px; padding: 16px; backdrop-filter: blur(14px); box-shadow: 0 18px 50px -20px #000; }
[data-theme="light"] .loc-edit-panel { background: rgba(255,255,255,.95); }
.loc-edit-h { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-lt); }
.loc-edit-hint { font-size: 12px; line-height: 1.45; color: var(--ink-mute); margin: 8px 0 14px; }
.loc-edit-sec { border-top: 1px solid var(--line); padding-top: 13px; margin-bottom: 13px; }
.loc-edit-sech { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.loc-line-add { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; background: rgba(42,111,219,.14); border: 1px solid rgba(42,111,219,.5); color: #6ea2f0; transition: background .2s; }
.loc-line-add:hover { background: rgba(42,111,219,.24); }
.loc-point-add { background: rgba(31,138,91,.14); border-color: rgba(31,138,91,.5); color: #4cc38a; }
.loc-point-add:hover { background: rgba(31,138,91,.24); }
.loc-point-add.on { background: var(--gold); border-color: var(--gold); color: #1a1206; }
.loc-point-co { font-size: 11px; color: var(--ink-mute); flex: 1; text-align: right; white-space: nowrap; }
.map-custom .map-lm-dot { animation: none; }
.loc-draw { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.loc-draw-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.loc-draw-cnt { font-size: 13px; font-weight: 700; color: var(--ink); }
.loc-draw-tip { font-size: 11px; color: var(--ink-mute); }
.loc-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.loc-swatches.sm { gap: 4px; margin-bottom: 0; }
.loc-sw { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line); transition: transform .15s; }
.loc-swatches.sm .loc-sw { width: 16px; height: 16px; }
.loc-sw:hover { transform: scale(1.12); }
.loc-sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.loc-weight { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.loc-weight span { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.loc-weight input { flex: 1; accent-color: var(--gold); }
.loc-weight b { font-size: 12px; color: var(--gold-lt); min-width: 34px; text-align: right; }
.loc-draw-btns { display: flex; gap: 6px; }
.loc-draw-btns button { flex: 1; padding: 9px 6px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--glass); color: var(--ink-soft); transition: .2s; }
.loc-draw-btns button:disabled { opacity: .4; cursor: default; }
.loc-draw-done { background: #1f8a5b !important; color: #fff !important; border-color: #1f8a5b !important; }
.loc-draw-done:disabled { background: var(--glass) !important; color: var(--ink-soft) !important; }
.loc-line-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.loc-line-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }
.loc-line-name { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; padding: 2px 0 6px; margin-bottom: 8px; }
.loc-line-name:focus { outline: none; border-color: var(--gold); }
.loc-line-ctrls { display: flex; align-items: center; gap: 8px; }
.loc-line-w { flex: 1; min-width: 40px; accent-color: var(--gold); }
.loc-line-dash { width: 26px; height: 24px; border-radius: 7px; cursor: pointer; border: 1px solid var(--line); background: var(--glass); color: var(--ink-soft); font-size: 13px; }
.loc-line-dash.on { border-color: var(--gold); color: var(--gold-lt); }
.loc-line-del { width: 24px; height: 24px; border-radius: 7px; cursor: pointer; border: 1px solid var(--line); background: var(--glass); color: var(--ink-mute); display: grid; place-items: center; }
.loc-line-del:hover { border-color: #e2453a; color: #e2453a; }
.loc-edit-rows { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.loc-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-2); padding: 9px 12px; font-size: 12.5px; }
.loc-edit-row span { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.loc-edit-row .lerc { width: 10px; height: 10px; border-radius: 50%; }
.loc-edit-row b { color: var(--ink); }
.loc-edit-foot { display: flex; gap: 8px; margin-top: 12px; }
.loc-edit-save { flex: 1; padding: 11px 12px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; background: #1f8a5b; color: #fff; transition: background .2s; }
.loc-edit-save:hover { background: #25a06b; }
.loc-edit-reset { padding: 11px 14px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13px; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); transition: .2s; }
.loc-edit-reset:hover { border-color: #e2453a; color: #e2453a; }
@media (max-width: 620px) {
  .loc-edit-panel { right: 10px; left: 10px; width: auto; bottom: 10px; top: auto; max-height: 56%; }
  .loc-map.editing .loc-edit-btn { top: 12px; }
}
@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; }
}

/* ============================================================
   ARCHITECTURE
   ============================================================ */
.arch { position: relative; }
.arch-stage { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); min-height: 70vh; }
.arch-over { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(26px,4vw,56px); pointer-events: none; }
.arch-specs { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 28px; }
.arch-specs .sp { background: rgba(11,11,13,0.72); backdrop-filter: blur(10px); padding: 22px 20px; }
.arch-specs .sp .v { font-size: 17px; font-weight: 600; }
.arch-specs .sp .k { font-size: 12px; color: var(--ink-mute); letter-spacing: .06em; margin-top: 6px; text-transform: uppercase; }

/* ============================================================
   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
   ============================================================ */
.apt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.apt {
  position: relative; border-radius: 22px; overflow: hidden;
  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); }

/* ============================================================
   PROGRESS — horizontal scroll
   ============================================================ */
.prog-pin { height: 320vh; position: relative; }
.prog-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.prog-head { padding: 0 var(--gut); max-width: var(--maxw); margin: 0 auto; width: 100%; }
.prog-track { display: flex; gap: 26px; padding: 40px var(--gut); will-change: transform; }
.prog-card { flex: 0 0 min(78vw, 460px); border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-2); position: relative; }
.prog-card .pc-img { position: relative; height: 300px; }
.prog-card .pc-body { padding: 24px 26px 28px; }
.prog-card .pc-q { font-size: 13px; letter-spacing: .16em; color: var(--gold); font-weight: 600; }
.prog-card h4 { margin: 12px 0 14px; font-size: 23px; font-weight: 600; }
.prog-card .pc-status { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px; }
.prog-card .pc-status .pd { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.prog-prog { display: flex; align-items: center; gap: 16px; padding: 0 var(--gut); max-width: var(--maxw); margin: 0 auto; width: 100%; }
.prog-prog .bar { flex: 1; height: 2px; background: var(--line); position: relative; }
.prog-prog .bar i { position: absolute; left:0; top:0; height:100%; background: var(--gold); width: 0; }
.prog-prog .lbl { font-size: 12px; letter-spacing: .12em; color: var(--ink-mute); text-transform: uppercase; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-val { padding: 30px 30px 34px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.about-val h4 { font-size: 20px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.about-val h4 .bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.about-val p { color: var(--ink-mute); font-size: 15px; }
.about-trust { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; margin-top: 16px; }
.about-trust .tr { background: var(--bg); padding: 30px 26px; }
.about-trust .tr .v { font-size: 30px; font-weight: 700; color: var(--gold-lt); letter-spacing: -0.02em; }
.about-trust .tr .k { font-size: 13px; color: var(--ink-mute); margin-top: 6px; }
.docrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.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; }
.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 img { width: 38px; }
.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;
  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); }

/* ============================================================
   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-ig { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; }
.constr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.constr-card { 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-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   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; }
.insta-ava img { width: 100%; height: 100%; border-radius: 50%; background: #0c0c0e; padding: 8px; object-fit: contain; border: 2px solid #fff; }
.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) {
  .apt-grid { grid-template-columns: repeat(2,1fr); }
  .infra-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: inline-flex; }
  .intro-grid, .loc-grid, .contact-grid, .about-grid, .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; }
  .arch-specs, .inv-metrics, .about-trust { grid-template-columns: repeat(2,1fr); }
  .loc-map { min-height: 320px; }
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {
  .apt-grid { grid-template-columns: 1fr; }
  .infra-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .arch-specs, .inv-metrics, .about-trust { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .nav-right .btn { display: none; }
  .mobicta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 480; gap: 4px; padding: 8px var(--gut);
    background: rgba(11,11,13,0.9); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  [data-theme="light"] .mobicta { background: rgba(244,240,231,0.94); }
  .mobicta-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px;
    background: none; border: none; color: var(--ink-soft); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: color .2s; }
  .mobicta-btn svg { color: var(--gold); }
  .mobicta-btn:active { color: var(--gold-lt); transform: scale(.94); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
  .aurora, .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; }
.fp-stage.editing { cursor: crosshair; outline: 2px dashed var(--gold-dp); outline-offset: -2px; }
.fp-edit-bar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.fp-edit-toggle { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px;
  border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink-soft); transition: .2s; }
.fp-edit-toggle:hover { border-color: var(--gold); color: var(--gold-lt); }
.fp-edit-actions { display: flex; flex-direction: column; gap: 7px; }
.fp-edit-save { padding: 11px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; background: #1f8a5b; color: #fff; transition: background .2s; }
.fp-edit-save:hover { background: #25a06b; }
.fp-edit-reset, .fp-edit-done { padding: 9px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 12.5px; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); transition: .2s; }
.fp-edit-done { border-color: var(--gold-dp); color: var(--gold-lt); }
.fp-edit-reset:hover { border-color: #e2453a; color: #e2453a; }
@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; }
.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-band { padding: clamp(40px,6vh,72px) 0; position: relative; z-index: 3; }
.quiz-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: clamp(30px,4vw,52px); border-radius: 26px; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line); }
.quiz-band-inner::before { content:""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 90% 20%, rgba(194,160,107,0.16), transparent 60%); }
.quiz-band-inner > div { position: relative; z-index: 2; max-width: 640px; }
.quiz-band-btn { position: relative; z-index: 2; font-size: 17px; padding: 19px 34px; flex: 0 0 auto; }

.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; }

/* ============================================================
   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-slider-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.inst-slider-top label { margin-bottom: 0; }
.inst-slider-val { font-size: 15px; font-weight: 700; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.inst-slider { -webkit-appearance: none; appearance: none; accent-color: var(--gold); width: 100%; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--gold) var(--p,40%), var(--line) var(--p,40%)); outline: none; }
.inst-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold-lt); border: 3px solid var(--bg); box-shadow: 0 4px 14px -4px var(--gold-glow); cursor: pointer; transition: transform .15s; }
.inst-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.inst-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-lt); border: 3px solid var(--bg); cursor: pointer; }
.inst-slider-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-faint); margin-top: 10px; }
.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
   ============================================================ */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.rev-card { 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; }
.rev-card:hover { transform: translateY(-5px); border-color: rgba(194,160,107,0.4); }
.rev-card:nth-child(1) { grid-row: span 1; }
.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; }
  .rev-grid { grid-template-columns: 1fr 1fr; }
  .quiz-band-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .rev-grid { grid-template-columns: 1fr; }
  .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: hidden; 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-empty { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 1.5px dashed var(--line); border-radius: 14px; background: none; cursor: pointer; color: var(--ink-mute);
  font-family: inherit; font-size: 14px; transition: .25s var(--ease); }
.cmp-empty:hover { border-color: var(--gold); color: var(--gold-lt); background: rgba(194,160,107,0.05); }
.cmp-empty-plus { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; }

.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-cell, .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) {
  .steps-track { grid-template-columns: 1fr; }
}

/* ============================================================
   DAY IN LIFE
   ============================================================ */
.day-track { position: relative; margin-top: 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.day-line { position: absolute; left: 0; right: 0; top: 64px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #d8a24a 0%, var(--gold-lt) 28%, var(--gold) 55%, var(--gold-dp) 82%, #4a4660 100%);
  opacity: .8; }
.day-moment { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.day-time { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--gold); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.day-node { width: 50px; height: 50px; border-radius: 50%; background: var(--bg); border: 1px solid var(--gold);
  color: var(--gold); display: grid; place-items: center; position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--bg);
  transition: transform .4s var(--ease), background .4s, color .4s; }
.day-moment:hover .day-node { transform: translateY(-4px) scale(1.06); background: var(--gold); color: #1a1206; }
[data-theme="light"] .day-moment:hover .day-node { color: #fff; }
.day-t { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 22px 0 8px; }
.day-d { font-size: 14px; color: var(--ink-mute); line-height: 1.55; }

@media (max-width: 900px) {
  .day-track { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .day-line { display: none; }
}
@media (max-width: 520px) {
  .day-track { grid-template-columns: 1fr; }
}

/* ============================================================
   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; }
.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; }
}

/* ============================================================
   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) {
  .to-top { right: 16px; bottom: 86px; 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
   ============================================================ */
/* 1. Price in a minute */
.pm-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; margin-top: 48px; align-items: stretch; }
.pm-controls { display: flex; flex-direction: column; gap: 26px; padding: clamp(24px,3vw,36px); border-radius: 22px; border: 1px solid var(--line); background: var(--bg-2); }
.pm-field label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; }
.pm-field label .pm-fl { color: var(--gold-lt); font-size: 15px; }
.pm-seg { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-segb { padding: 12px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-3); color: var(--ink-soft); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: .2s var(--ease); }
.pm-segb:hover { color: #25a06b; }
.pm-segb.on { background: #1f8a5b; color: #fff; border-color: #1f8a5b; }
.pm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #1f8a5b var(--p,40%), var(--line) var(--p,40%)); outline: none; }
.pm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #25a06b; border: 3px solid var(--bg); cursor: pointer; box-shadow: 0 4px 14px -4px rgba(31,138,91,.5); }
.pm-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #25a06b; border: 3px solid var(--bg); cursor: pointer; }
.pm-result { padding: clamp(24px,3vw,36px); border-radius: 22px; display: flex; flex-direction: column; justify-content: center; }
.pm-rr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.pm-rr span { font-size: 14px; color: var(--ink-mute); white-space: nowrap; }
.pm-rr b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pm-price { text-align: center; padding: 18px 0; }
.pm-price-k { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.pm-price-v { display: block; font-size: clamp(30px,4vw,44px); font-weight: 700; letter-spacing: -0.03em; color: var(--gold-lt); margin-top: 6px; white-space: nowrap; }

/* 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; }

/* 3. Catalog */
.cat-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px,4vw,60px); align-items: center; padding: clamp(28px,4vw,52px); border-radius: 26px; background: linear-gradient(135deg, var(--bg-2), var(--bg-3)); border: 1px solid var(--line); overflow: hidden; }
.cat-list { list-style: none; margin: 22px 0 28px; display: grid; gap: 12px; }
.cat-list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ink-soft); }
.cat-list li svg { color: #25a06b; flex: 0 0 auto; }
.cat-cta { display: inline-flex; align-items: center; gap: 10px; }
.cat-visual { position: relative; height: 280px; display: grid; place-items: center; }
.cat-doc { position: absolute; width: 200px; height: 250px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -20px rgba(0,0,0,.4); }
.cat-doc-3 { transform: rotate(-12deg) translateX(-30px); background: #e8e2d4; }
.cat-doc-2 { transform: rotate(-6deg) translateX(-12px); background: #f2ede2; }
.cat-doc-1 { position: relative; transform: rotate(3deg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cat-doc-1 img { width: 100%; height: 150px; object-fit: contain; mix-blend-mode: multiply; }
.cat-doc-bar { height: 10px; border-radius: 4px; background: #d8cfbd; }
.cat-doc-bar.short { width: 60%; }

/* 4. toasts */
.toast { position: fixed; left: 24px; bottom: 96px; z-index: 471; display: flex; align-items: center; gap: 12px; max-width: 320px;
  padding: 13px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.5); animation: toastIn .5s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.toast-dot { width: 9px; height: 9px; border-radius: 50%; background: #25a06b; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(37,160,107,.5); animation: galLive 1.6s ease-out infinite; }
.toast-txt { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.toast-ago { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* 5. sticky bar */
.stickybar { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 30px); z-index: 469; display: flex; align-items: center; gap: 16px;
  padding: 12px 12px 12px 22px; border-radius: 100px; background: rgba(11,11,13,.86); border: 1px solid var(--glass-brd);
  backdrop-filter: blur(14px); box-shadow: 0 18px 44px -16px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
[data-theme="light"] .stickybar { background: rgba(255,255,255,.92); }
.stickybar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sb-info { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.sb-price { font-weight: 700; }
.sb-dot { color: var(--ink-faint); }
.sb-rass { color: var(--gold-lt); font-weight: 600; }
@media (max-width: 560px) { .sb-rass, .sb-dot { display: none; } .stickybar { left: 12px; right: 12px; transform: translateY(30px); width: auto; justify-content: space-between; } .stickybar.show { transform: translateY(0); } }

/* 6. numbers */
.num-grid { 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: 44px; }
.num-cell { background: var(--bg); padding: clamp(28px,3.5vw,46px) 24px; text-align: center; }
.num-v { font-size: clamp(38px,5vw,64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.num-k { font-size: 14px; color: var(--ink-mute); margin-top: 12px; }
@media (max-width: 720px) { .num-grid { grid-template-columns: 1fr 1fr; } }

/* 9. cinematic divider */
.cinematic { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; z-index: 3; }
.cin-bg { position: absolute; inset: 0; }
.cin-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); will-change: transform; }
.cin-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.55) 45%, rgba(8,8,10,.25) 75%), linear-gradient(0deg, rgba(8,8,10,.7), transparent 60%); }
.cin-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); width: 100%; }
.cin-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 22px; }
.cin-title { font-size: clamp(34px,5.4vw,72px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.03; color: #fff; max-width: 16ch; }
.cin-sub { margin-top: 22px; font-size: clamp(16px,1.6vw,21px); color: rgba(255,255,255,.78); max-width: 44ch; }

@media (max-width: 860px) {
  .pm-grid, .cat-card { grid-template-columns: 1fr; }
  .rv-grid { grid-template-columns: 1fr; }
  .rv-vs { display: none; }
}

/* ============================================================
   BOOSTS II
   ============================================================ */
/* 1. 360 tour */
.tour-stage { position: relative; margin-top: 44px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); }
.tour-pano { height: clamp(340px, 56vh, 560px); background-size: auto 130%; background-position: 50% 50%; background-repeat: repeat-x; cursor: grab; filter: saturate(1.05); }
.tour-pano.grab { cursor: grabbing; }
.tour-frame { width: 100%; height: clamp(360px, 60vh, 620px); border: 0; display: block; background: #0a0a0c; }
.tour-stage:has(.tour-frame) .tour-hint { display: none; }
.tour-hint { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 100px; background: rgba(11,11,13,.6); color: #fff; font-size: 13px; backdrop-filter: blur(6px); pointer-events: none; }
.tour-cta { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); }

/* 2. cutaway */
.cut-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; margin-top: 44px; align-items: stretch; }
.cut-tower { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); }
.cut-floor { display: flex; align-items: center; gap: 14px; background: none; border: none; cursor: pointer; padding: 0; }
.cut-fn { width: 30px; font-size: 12px; font-weight: 700; color: var(--ink-mute); text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cut-bar { flex: 1; height: 14px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); transition: background .2s, transform .2s var(--ease); }
.cut-floor:hover .cut-bar, .cut-floor.on .cut-bar { background: linear-gradient(90deg, var(--gold), var(--gold-lt)); border-color: var(--gold); }
.cut-floor:hover .cut-fn, .cut-floor.on .cut-fn { color: var(--gold-lt); }
.cut-base { height: 16px; margin-top: 6px; border-radius: 0 0 8px 8px; background: var(--ink-faint); opacity: .4; }
.cut-panel { padding: 28px 26px; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; }
.cut-floor-big { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--gold-lt); display: flex; align-items: baseline; gap: 8px; }
.cut-floor-big span { font-size: 16px; font-weight: 600; color: var(--ink-mute); }
.cut-tier { font-size: 14px; color: var(--ink-soft); margin: 8px 0 18px; }
.cut-rows { display: grid; gap: 2px; margin-bottom: 18px; }
.cut-rr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.cut-rr span { font-size: 13.5px; color: var(--ink-mute); } .cut-rr b { font-size: 14.5px; font-weight: 600; white-space: nowrap; }

/* 4. progress slider */
.ps-stage { margin-top: 44px; }
.ps-imgwrap { position: relative; border-radius: 22px; overflow: hidden; height: clamp(300px, 52vh, 520px); border: 1px solid var(--line); background: var(--bg-3); }
.ps-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.ps-img.on { opacity: 1; }
.ps-badge { position: absolute; right: 20px; top: 20px; z-index: 2; text-align: center; padding: 14px 18px; border-radius: 16px; background: rgba(11,11,13,.66); color: #fff; backdrop-filter: blur(8px); }
.ps-badge b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--gold-lt); }
.ps-badge span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ps-cap { position: absolute; left: 20px; bottom: 20px; z-index: 2; }
.ps-cap-m { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--gold-lt); }
.ps-cap-t { font-size: clamp(20px,2.6vw,30px); font-weight: 700; color: #fff; margin-top: 4px; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.ps-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; margin: 26px 0 14px; background: linear-gradient(90deg, var(--gold) var(--p,40%), var(--line) var(--p,40%)); outline: none; }
.ps-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-lt); border: 3px solid var(--bg); cursor: pointer; box-shadow: 0 4px 14px -4px var(--gold-glow); }
.ps-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-lt); border: 3px solid var(--bg); cursor: pointer; }
.ps-ticks { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.ps-tick { background: none; border: none; font-family: inherit; font-size: 12.5px; color: var(--ink-mute); cursor: pointer; transition: color .2s; padding: 4px; }
.ps-tick.on { color: var(--gold-lt); font-weight: 700; }

/* 5. referral */
.ref-card { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px,4vw,56px); align-items: center; padding: clamp(28px,4vw,52px); border-radius: 26px; background: linear-gradient(135deg, var(--bg-2), var(--bg-3)); border: 1px solid var(--line); overflow: hidden; }
.ref-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ref-form input { flex: 1; min-width: 180px; background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; color: var(--ink); font-family: inherit; font-size: 15px; }
[data-theme="light"] .ref-form input { background: rgba(255,255,255,.6); }
.ref-form input:focus { outline: none; border-color: #1f8a5b; }
.ref-form .btn { flex: 0 0 auto; }
.ref-result { margin-top: 24px; }
.ref-lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.ref-link { font-size: 15px; font-weight: 600; color: var(--gold-lt); word-break: break-all; padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line); }
.ref-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ref-visual { display: grid; place-items: center; }
.ref-gift { width: 130px; height: 130px; border-radius: 32px; display: grid; place-items: center; color: var(--gold-lt); background: radial-gradient(circle at 30% 30%, rgba(194,160,107,.22), transparent 70%); border: 1px solid rgba(194,160,107,.3); animation: refFloat 5s ease-in-out infinite; }
@keyframes refFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

/* 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 img { 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) {
  .cut-grid, .ref-card { grid-template-columns: 1fr; }
  .ref-visual { display: none; }
  .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); }

/* 9. cursor flashlight — soft glow follows cursor on dark theme premium areas */
.flashlight { position: fixed; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, rgba(194,160,107,.10), transparent 70%); transform: translate(-50%, -50%); opacity: 0;
  transition: opacity .4s ease; mix-blend-mode: screen; will-change: left, top; }
[data-theme="dark"] .flashlight.on { opacity: 1; }
@media (hover: none) { .flashlight { display: none; } }

/* 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%; } }

/* ATMOSPHERE */
.atmos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.atmos-card { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid var(--line); }
.atmos-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.atmos-card:hover img { transform: scale(1.07); }
.atmos-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,8,10,.85)); }
.atmos-card figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.atmos-t { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.atmos-s { font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.35; }
@media (max-width: 860px) { .atmos-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .atmos-grid { grid-template-columns: 1fr; } .atmos-card { aspect-ratio: 16 / 10; } }

/* ============================================================
   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)); }
.mobicta { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* 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) {
  .flashlight { display: none; }
  .btn-sm { padding: 11px 16px; }
}

/* ============================================================
   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); }
/* geometry tuner */
.insol-tuner-btn { position: absolute; top: 14px; left: 14px; z-index: 600; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 100px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  background: rgba(11,11,13,.78); color: var(--ink); border: 1px solid var(--glass-brd); backdrop-filter: blur(8px); transition: .2s; }
.insol-tuner-btn:hover { border-color: var(--gold-dp); color: var(--gold-lt); }
.insol-tuner-btn.on { background: var(--gold); color: #1a1206; border-color: var(--gold); }
[data-theme="light"] .insol-tuner-btn { background: rgba(255,255,255,.86); }
.insol-tuner { position: absolute; top: 56px; left: 14px; z-index: 600; width: 268px; max-height: calc(100% - 72px); overflow-y: auto;
  background: rgba(11,11,13,.92); border: 1px solid var(--glass-brd); border-radius: 16px; padding: 16px; backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -22px #000; }
[data-theme="light"] .insol-tuner { background: rgba(255,255,255,.95); }
.insol-tuner-h { font-size: 13px; font-weight: 800; letter-spacing: .02em; margin-bottom: 12px; color: var(--gold-lt); }
.insol-tuner-blk { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.insol-tuner-blkt { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.tunerow { margin-bottom: 9px; }
.tunerow-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-mute); margin-bottom: 3px; }
.tunerow-h b { color: var(--ink); font-weight: 700; }
.tunerow input[type=range] { width: 100%; accent-color: var(--gold); height: 16px; }
.insol-tuner-foot { display: flex; gap: 8px; margin-top: 16px; }
.insol-tuner-save { flex: 1; padding: 9px; border-radius: 10px; border: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--gold); color: #1a1206; transition: .2s; }
.insol-tuner-save:hover { filter: brightness(1.06); }
.insol-tuner-reset { padding: 9px 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px;
  background: transparent; color: var(--ink-mute); border: 1px solid var(--line); transition: .2s; }
.insol-tuner-reset:hover { color: var(--ink); border-color: var(--gold-dp); }
.insol-tuner-hint { font-size: 11px; line-height: 1.45; color: var(--ink-mute); margin-top: 10px; }
/* 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-bld-tip { background: transparent; border: none; box-shadow: none; color: #1a1206; font-weight: 800; font-size: 13px; }
[data-theme="dark"] .ins-bld-tip { color: #1a1206; }
.ins-bld-tip::before { display: none; }
.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 */
.insol-map .leaflet-div-icon { background: transparent; border: none; }
.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%); }
.ins-3d.editing { pointer-events: auto; cursor: grab; }
.ins-3d.editing:active { cursor: grabbing; }
.ins-3d.editing .ins-3d-img { outline: 2px dashed var(--gold); outline-offset: 4px; border-radius: 4px; }

/* 3D render editor */
.ins3d-edit-btn { position: absolute; top: 12px; left: 12px; z-index: 600; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 100px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
  background: rgba(11,11,13,.78); border: 1px solid var(--glass-brd); color: var(--ink); backdrop-filter: blur(8px); transition: border-color .2s, color .2s; }
[data-theme="light"] .ins3d-edit-btn { background: rgba(255,255,255,.9); }
.ins3d-edit-btn:hover { border-color: var(--gold); color: var(--gold-lt); }
.ins3d-edit-btn.on { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.ins3d-panel { position: absolute; left: 12px; bottom: 12px; z-index: 600; width: min(290px, calc(100% - 24px));
  background: rgba(11,11,13,.92); border: 1px solid var(--glass-brd); border-radius: 14px; padding: 14px; backdrop-filter: blur(14px); box-shadow: 0 16px 44px -18px #000; }
[data-theme="light"] .ins3d-panel { background: rgba(255,255,255,.95); }
.ins3d-h { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-lt); }
.ins3d-hint { font-size: 11.5px; line-height: 1.4; color: var(--ink-mute); margin: 7px 0 12px; }
.ins3d-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-soft); }
.ins3d-row span { width: 56px; flex-shrink: 0; }
.ins3d-row input { flex: 1; accent-color: var(--gold); }
.ins3d-row b { width: 44px; text-align: right; color: var(--gold-lt); }
.ins3d-foot { display: flex; gap: 8px; margin-top: 4px; }
.ins3d-save { flex: 1; padding: 9px; border-radius: 9px; border: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; background: #1f8a5b; color: #fff; }
.ins3d-save:hover { background: #25a06b; }
.ins3d-reset { padding: 9px 12px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 12.5px; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.ins3d-reset:hover { border-color: #e2453a; color: #e2453a; }

/* 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); }

/* ============================================================
   LOCATION ACCESS (walk-time score per block)
   ============================================================ */
.acc { margin-top: 40px; border: 1px solid var(--line); border-radius: 22px; padding: 30px clamp(20px,3vw,34px); background: var(--bg-2); }
.acc-head h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.acc-head p { color: var(--ink-mute); font-size: 15px; margin-top: 6px; }
.acc-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.acc-block { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--bg); }
.acc-block-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.acc-gauge { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--gold) var(--p), var(--line) 0); }
.acc-gauge::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg); }
.acc-gauge span { position: relative; z-index: 1; font-size: 19px; font-weight: 800; color: var(--gold-lt); }
.acc-block-meta b { font-size: 18px; font-weight: 700; display: block; }
.acc-block-meta span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.acc-items { display: flex; flex-direction: column; gap: 2px; }
.acc-item { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-top: 1px solid var(--line-2); }
.acc-item:first-child { border-top: none; }
.acc-ic { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-dp); color: var(--gold-lt); display: grid; place-items: center; flex: 0 0 auto; }
.acc-t { flex: 1; font-size: 14.5px; color: var(--ink); }
.acc-min { font-size: 14px; font-weight: 700; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.acc-note { font-size: 12.5px; color: var(--ink-mute); margin-top: 18px; }

/* 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; }
  .acc-blocks { 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 img { width: 30px; height: 30px; object-fit: contain; }
.pwa-ico.lg { width: 64px; height: 64px; border-radius: 16px; }
.pwa-ico.lg img { width: 42px; height: 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 img { 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; }
}