/* ═══════════════════════════════════════════
   REZIDENCE MORAVANY — style.css
   Fonty: Cinzel (serif nadpisy) + Poppins (UI)
   ═══════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  --white:   #FFFFFF;
  --off:     #FAF8F5;
  --anthracite: #2B2B2B;
  --gold:    #B8956A;
  --gold-dk: #9E7A52;
  --gold-lt: rgba(184,149,106,.12);
  --green:   #1D4D36;
  --text:    #2B2B2B;
  --muted:   #7A7A7A;
  --border:  rgba(184,149,106,.28);

  --serif: 'Cinzel', Georgia, serif;
  --sans:  'Poppins', system-ui, sans-serif;
  --ease:  cubic-bezier(.25,.46,.45,.94);
  --w:     1200px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ─── TYPE ─── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.8rem); letter-spacing: .02em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: .04em; }
h3 { font-size: 1rem; letter-spacing: .06em; }

/* ─── LAYOUT ─── */
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 2rem; }
.sec  { padding: 6rem 0; }
.sec-sm { padding: 4rem 0; }

/* ─── SCROLL REVEAL ─── */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }
.d5 { transition-delay: .5s; }

/* ─── EYEBROW ─── */
.ey {
  display: block;
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
/* Na světlém pozadí — zelená pro lepší čitelnost */
#projekt .ey,
#standard .ey,
#galerie .ey,
#harm .ey,
#domy .ey,
#faq .ey { color: var(--green); }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .82rem 1.9rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: background .3s var(--ease), color .3s, border-color .3s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold  { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dk); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-line  { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-line:hover { background: var(--gold); color: #fff; }
.btn-white { background: #fff; color: var(--gold-dk); }
.btn-white:hover { background: var(--anthracite); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: #163d2a; }


/* ════════════════════════════════════════════
   PRELOADER
════════════════════════════════════════════ */
#pre {
  position: fixed;
  inset: 0;
  background: var(--anthracite);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .55s;
}
#pre.out { opacity: 0; pointer-events: none; }

.pre-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: .28em;
}
.pre-logo .bar { width: 56px; height: 1px; background: var(--gold); }
.pre-logo .sub { font-size: .6rem; letter-spacing: .38em; color: var(--gold); }


/* ════════════════════════════════════════════
   HEADER — 2026 glass morphism
════════════════════════════════════════════ */
#hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.4rem 0;
  border-bottom: 1px solid transparent;
  transition:
    padding        .44s ease,
    background     .44s ease,
    backdrop-filter .44s ease,
    -webkit-backdrop-filter .44s ease,
    border-color   .4s ease;
}

#hdr.sc {
  padding: .78rem 0;
  background: rgba(12, 11, 9, 0.74);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  border-bottom-color: rgba(184, 149, 106, 0.14);
}

/* scroll progress bar — thin gold line at header bottom */
.progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, var(--gold), rgba(184,149,106,.35));
  transition: width .12s linear, opacity .35s;
  opacity: 0;
}
#hdr.sc .progress-bar { opacity: 1; }

.hdr-in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

/* ── logo ── */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .16rem;
  line-height: 1.1;
  flex-shrink: 0;
}
.logo-t {
  font-family: var(--serif);
  font-size: 1.08rem;
  letter-spacing: .3em;
  color: #fff;
  font-weight: 400;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.logo-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
}
.logo-row::before, .logo-row::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
}
.logo-s {
  font-family: var(--serif);
  font-size: .55rem;
  letter-spacing: .36em;
  color: var(--gold);
  white-space: nowrap;
}

/* ── nav ── */
.nav {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
}
.nav a {
  position: relative;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  padding-bottom: 3px;
  transition: color .3s;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }
.nav a.active { color: #fff; }
.nav a.active::after { transform: scaleX(1); }

/* ── header right ── */
.hdr-r {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  justify-content: flex-end;
  flex-shrink: 0;
}
.tel-lnk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255,255,255,.9);
  transition: color .3s, background-color .3s;
}
.tel-lnk:hover { color: var(--gold); background-color: rgba(255,255,255,.08); }
.tel-ico {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
  transition: color .3s;
}
.tel-lnk:hover .tel-ico { color: var(--gold); }

/* ── CTA pill button — filled green ── */
.btn-cta-hdr {
  display: inline-flex;
  align-items: center;
  padding: .58rem 1.5rem;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: 100px;
  white-space: nowrap;
  transition: background .3s, transform .2s, box-shadow .3s;
}
.btn-cta-hdr:hover {
  background: #163d2a;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(29,77,54,.4);
}

/* ── hamburger (ikona + popisek MENU, aby to poznal i laik) ── */
#ham {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: .7rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px 6px 8px;
  margin-left: auto;
  color: #fff;
}
#ham .ham-txt {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
#ham .ham-bars { display: flex; flex-direction: column; gap: 5px; }
#ham .ham-bars i {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #fff;
  transition: transform .35s var(--ease), opacity .35s;
}
#ham.on .ham-bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#ham.on .ham-bars i:nth-child(2) { opacity: 0; }
#ham.on .ham-bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── mobile nav ── */
#mnav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16,14,12,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 90;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
}
#mnav.on { display: flex; }
#mnav a {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: rgba(255,255,255,.82);
  letter-spacing: .1em;
  transition: color .3s;
}
#mnav a:hover { color: var(--gold); }
#mnav .btn-gold { font-size: .76rem; margin-top: .5rem; }
#mnav .mnav-tel {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--gold);
  margin-top: .4rem;
}
#mnav .mnav-tel svg { flex-shrink: 0; }
#mnav-close {
  position: absolute;
  top: 1.4rem;
  right: 1.8rem;
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color .3s;
}
#mnav-close:hover { color: #fff; }


/* ════════════════════════════════════════════
   HERO — full-width crossfade slideshow
════════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}

/* slides */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.active { opacity: 1; }

/* gradient overlay */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,8,6,.78) 0%, transparent 42%),
    linear-gradient(to top,    rgba(10,8,6,.90) 0%, rgba(10,8,6,.70) 35%, rgba(10,8,6,.30) 60%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 6rem;
  text-align: center;
}

.hero-cnt { max-width: 680px; }

.hero-ey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-bottom: 1.6rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}
.hero-ey::before,
.hero-ey::after {
  content: '';
  width: 22px;
  height: 1px;
  background: rgba(255,255,255,.5);
  flex-shrink: 0;
}
#hero h1 { color: #fff; margin-bottom: 1.3rem; text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 6px rgba(0,0,0,.5); }
.hero-p {
  font-size: .95rem;
  color: rgba(255,255,255,.88);
  margin-bottom: 2.4rem;
  font-weight: 300;
  line-height: 1.9;
}
.hero-btns { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; }

/* scroll hint */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
}
.hero-scroll svg {
  width: 12px;
  height: 8px;
  color: rgba(255,255,255,.3);
  animation: scroll-hint 2s ease infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: translateY(0);   opacity: .3; }
  50%       { transform: translateY(5px); opacity: .7;  }
}

/* slide dots */
.hero-dots {
  position: absolute;
  bottom: 2.2rem;
  right: 3rem;
  z-index: 3;
  display: flex;
  gap: .5rem;
}
.hero-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s;
}
.hero-dot.active {
  background: var(--gold);
  transform: scale(1.3);
}


/* ════════════════════════════════════════════
   USP PÁS
════════════════════════════════════════════ */
#usp {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 0;
}
.usp-label {
  text-align: center;
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.8rem;
}
.usp-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.usp-it {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.4rem 1rem;
  border-right: 1px solid var(--border);
}
.usp-it:last-child { border-right: none; }
.usp-ico { width: 34px; height: 34px; color: var(--gold); margin-bottom: .9rem; flex-shrink: 0; }
.usp-t { font-family: var(--serif); font-size: .8rem; letter-spacing: .05em; color: var(--anthracite); margin-bottom: .4rem; }
.usp-d { font-size: .74rem; color: var(--muted); line-height: 1.55; }


/* ════════════════════════════════════════════
   O PROJEKTU
════════════════════════════════════════════ */
#projekt .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.5rem;
  align-items: center;
}
.split-txt .lead {
  font-size: 1rem;
  color: var(--muted);
  margin: 1.4rem 0 .8rem;
  line-height: 1.9;
}
.split-sub {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--anthracite);
  letter-spacing: .04em;
  margin: 1.6rem 0 .5rem;
}

.split-img { position: relative; }
.split-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split-img::after {
  content: '';
  position: absolute;
  bottom: -1.4rem; right: -1.4rem;
  width: 65%; height: 65%;
  border: 1px solid var(--gold);
  z-index: -1;
}


/* ─── PROJEKT — druhý blok ─── */
.proj-sub {
  margin-top: 4.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--border);
  max-width: 680px;
}
.proj-sub h3 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: .03em;
  margin-bottom: 1.3rem;
  color: var(--anthracite);
}
.proj-sub .lead {
  font-size: 1rem;
  color: var(--muted);
  margin: 0 0 .9rem;
  line-height: 1.9;
}
.proj-sub .btn { margin-top: .8rem; }


/* ════════════════════════════════════════════
   LOKALITA
════════════════════════════════════════════ */
#lokalita { background: var(--off); }
.lok-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 5rem;
  margin-top: 3rem;
  align-items: start;
}
.lok-cols { display: flex; flex-direction: column; gap: 2.2rem; }
.lok-blk h3 {
  font-family: var(--serif);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
}
.lok-blk ul { list-style: none; }
.lok-blk li {
  font-size: .88rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: .7rem;
  line-height: 1.55;
}
.lok-blk li::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: .65rem;
}
.lok-blk li strong { color: var(--anthracite); font-weight: 600; }
.map-w { height: 440px; overflow: hidden; }
.map-w iframe { width: 100%; height: 100%; border: none; filter: grayscale(15%) contrast(105%); }


/* ════════════════════════════════════════════
   STANDARD
════════════════════════════════════════════ */
#standard .sec-hd {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 3.8rem;
}
#standard .sec-hd p { font-size: .92rem; color: var(--muted); margin-top: .9rem; line-height: 1.8; }
.std-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.std-tile {
  background: var(--off);
  padding: 2.8rem;
  border: 1px solid var(--border);
  transition: background .35s, border-color .35s;
}
.std-tile:hover { background: #fff; border-color: var(--gold); }
.std-n {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--gold);
  opacity: .28;
  line-height: 1;
  margin-bottom: 1.4rem;
}
.std-tile h3 { font-size: .96rem; letter-spacing: .04em; margin-bottom: .65rem; }
.std-tile p { font-size: .84rem; color: var(--muted); line-height: 1.72; }
.std-cta { text-align: center; margin-top: 2.8rem; }


/* ════════════════════════════════════════════
   WELLNESS
════════════════════════════════════════════ */
#wellness {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: 6rem 0;
}
.w-bg {
  position: absolute;
  inset: 0;
  background-image: url('../fotky/pozadi-zahrada.jpg');
  background-size: cover;
  background-position: center;
}
.w-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(29,77,54,.93) 45%,
    rgba(29,77,54,.55) 100%
  );
}
.w-cnt { position: relative; z-index: 1; max-width: 600px; }
.w-cnt h2 { color: #fff; margin-bottom: 1.4rem; }
.w-cnt p { font-size: .95rem; color: rgba(255,255,255,.82); line-height: 1.88; margin-bottom: 2.4rem; }
.w-icons { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.w-ico { display: flex; flex-direction: column; align-items: center; gap: .42rem; }
.w-ico svg { width: 30px; height: 30px; color: var(--gold); }
.w-ico span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.58); }


/* ════════════════════════════════════════════
   DOMY / CENÍK
════════════════════════════════════════════ */
#domy { background: var(--off); }
.domy-hd { max-width: 680px; margin-bottom: 3rem; }
.domy-p { font-size: .9rem; color: var(--muted); margin-top: .9rem; }
.domy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.dk {
  background: #fff;
  border: 1px solid var(--border);
  transition: border-color .35s, box-shadow .35s, transform .35s, outline-color .3s;
  overflow: hidden;
  scroll-margin-top: 110px;
}
.dk.jump-hl { outline: 2px solid var(--gold); outline-offset: 3px; }
.dk:not(.zm):hover {
  border-color: var(--gold);
  box-shadow: 0 8px 36px rgba(184,149,106,.14);
  transform: translateY(-4px);
}
.zm { opacity: .72; }
.dk-plan { aspect-ratio: 16 / 9; background: #f0ece5; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.dk-plan svg { width: 100%; height: 100%; }
.dk-plan-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-mask { position: absolute; top: 0; bottom: 0; background: rgba(28,25,21,.6); pointer-events: none; }
.dk-pin {
  position: absolute; top: .7rem; transform: translateX(-50%);
  background: var(--green); color: #fff; font-family: var(--serif);
  font-size: .68rem; letter-spacing: .08em; padding: .32rem .65rem;
  border-radius: 2px; box-shadow: 0 3px 10px rgba(0,0,0,.28); white-space: nowrap;
}
.dk-pin-muted { background: var(--muted); }

.domy-overview { margin-bottom: 2.6rem; }
.domy-ov-img { position: relative; overflow: hidden; border-radius: 2px; box-shadow: 0 10px 40px rgba(43,43,43,.1); }
.domy-ov-img img { width: 100%; height: auto; display: block; }
.ov-pin {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--green); color: #fff; font-family: var(--serif);
  font-size: .7rem; letter-spacing: .06em; padding: .3rem .6rem;
  border-radius: 2px; box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
/* zvýraznění domu (přesně dle fotky/zakres) se prolíná po najetí; SVG polygony jsou klikací plochy */
.domy-ov-img .ov-base { width: 100%; height: auto; display: block; }
.domy-ov-img .ov-lay {
  position: absolute; max-width: none; object-fit: fill; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
}
.domy-ov-img .ov-lay.on { opacity: 1; }
.ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ov-poly { fill: transparent; stroke: none; cursor: pointer; }
.ov-a:focus-visible { outline: none; }
.ov-sold-poly { fill: rgba(25,23,20,.5); pointer-events: none; }
.ov-pin { pointer-events: none; transition: background .3s, transform .3s, box-shadow .3s; }
.ov-pin.on { background: var(--gold); transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 5px 14px rgba(0,0,0,.35); }
.ov-sold-tag {
  pointer-events: none;
  position: absolute; transform: translate(-50%, -50%);
  background: rgba(28,25,21,.85); color: #fff; font-family: var(--serif);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .42rem .9rem; border-radius: 2px; white-space: nowrap;
}
.domy-ov-cap { font-size: .8rem; color: var(--muted); margin-top: .8rem; text-align: center; }
@media (max-width: 600px) {
  .ov-pin { font-size: .6rem; padding: .24rem .48rem; }
  .ov-sold-tag { font-size: .58rem; padding: .32rem .6rem; }
}
.dk-body { padding: 1.4rem; }
.dk-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .85rem; }
.dk-name { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .05em; }
.badge { font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 2px; }
.bd-ok  { background: rgba(29,77,54,.1);  color: var(--green); }
.bd-zm  { background: rgba(0,0,0,.07);    color: var(--muted); }
.dk-price { font-family: var(--serif); font-size: 1.08rem; color: var(--anthracite); margin-bottom: .9rem; }
.dk-params { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; margin-bottom: 1.3rem; }
.dk-param { font-size: .74rem; color: var(--muted); }
.dk-param strong { display: block; font-size: .82rem; color: var(--anthracite); font-weight: 500; }
.dk-btns { display: flex; flex-direction: column; gap: .45rem; }
.dk-btns .btn { width: 100%; justify-content: center; font-size: .7rem; padding: .6rem .9rem; }

.domy-ft {
  text-align: center;
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}
.domy-ft p {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}


/* ════════════════════════════════════════════
   HARMONOGRAM
════════════════════════════════════════════ */
#harm { background: var(--white); }
.harm-hd { max-width: 660px; margin-bottom: 3.8rem; }
.harm-hd p { font-size: .9rem; color: var(--muted); margin-top: .8rem; }

.tl-wrap { overflow-x: auto; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.tl {
  display: flex;
  min-width: 700px;
  position: relative;
}
.tl::before {
  content: '';
  position: absolute;
  top: 22px; left: 0; right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.tl-track {
  position: absolute;
  top: 22px; left: 0;
  width: 13%;
  height: 1px;
  background: var(--gold);
  z-index: 1;
}
.tl-yr { flex: 1; padding-right: 1rem; }
.tl-yr:last-child { padding-right: 0; }
.tl-yr-lbl {
  font-family: var(--serif);
  font-size: .72rem;
  letter-spacing: .2em;
  margin-bottom: 3rem;
  display: block;
}
.lbl-past { color: var(--muted); }
.lbl-now  { color: var(--gold); }
.lbl-fut  { color: var(--green); }

.tl-items { display: flex; gap: 0; }
.tl-item { flex: 1; position: relative; padding-right: .5rem; }
.tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.dot-done  { background: var(--gold); box-shadow: 0 0 0 3px rgba(184,149,106,.2); }
.dot-now   { background: var(--gold); box-shadow: 0 0 0 4px rgba(184,149,106,.18); width: 18px; height: 18px; margin-top: -2px; }
.dot-soon  { background: #fff; border: 1px solid var(--border); }
.dot-final { background: var(--green); box-shadow: 0 0 0 4px rgba(29,77,54,.18); width: 18px; height: 18px; margin-top: -2px; }

.tl-q { font-size: .66rem; font-weight: 600; letter-spacing: .08em; color: var(--gold); margin-bottom: .2rem; }
.tl-q.gn { color: var(--green); }
.tl-desc { font-size: .76rem; color: var(--muted); line-height: 1.5; }
.tl-desc.hl { color: var(--green); font-weight: 600; }

.harm-note {
  margin-top: 2.8rem;
  padding: 1.4rem 1.8rem;
  background: var(--off);
  border-left: 2px solid var(--gold);
  max-width: 580px;
}
.harm-note p { font-size: .84rem; color: var(--muted); line-height: 1.7; }
.harm-note strong { color: var(--anthracite); }


/* ════════════════════════════════════════════
   FINANCOVÁNÍ
════════════════════════════════════════════ */
#fin { background: var(--gold); padding: 3.8rem 0; }
#fin .wrap { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.fin-t h2 { color: #fff; font-size: 1.55rem; }
.fin-t p { color: rgba(255,255,255,.85); margin-top: .65rem; font-size: .92rem; }


/* ════════════════════════════════════════════
   GALERIE
════════════════════════════════════════════ */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
  margin-top: 2.8rem;
}
.gal-it { overflow: hidden; cursor: zoom-in; }
.gal-it:first-child { grid-column: span 2; grid-row: span 2; }
.gal-it img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
  aspect-ratio: 1/1;
}
.gal-it:first-child img { aspect-ratio: auto; }
.gal-it:hover img { transform: scale(1.05); }
.gal-cta { text-align: center; margin-top: 2.8rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ─── GALERIE — celostránkový výpis po kategoriích ─── */
.glr-cat { margin-top: 3.6rem; }
.glr-cat:first-child { margin-top: 0; }
.glr-cat-hd { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.4rem; }
.glr-cat-hd h3 { font-family: var(--serif); font-size: 1.15rem; letter-spacing: .04em; color: var(--anthracite); }
.glr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
}
.glr-it { overflow: hidden; cursor: zoom-in; }
.glr-it img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform .55s var(--ease);
}
.glr-it:hover img { transform: scale(1.05); }


/* ════════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════════ */
#lb {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#lb.on { display: flex; }
#lb img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
#lb-x {
  position: absolute;
  top: 1.8rem; right: 1.8rem;
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color .3s;
}
#lb-x:hover { color: #fff; }
#lb-prev, #lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: .5rem 1rem;
  transition: color .3s;
}
#lb-prev:hover, #lb-next:hover { color: #fff; }
#lb-prev { left: .6rem; }
#lb-next { right: .6rem; }
#lb-count {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.55);
  font-size: .75rem;
  letter-spacing: .08em;
}


/* ════════════════════════════════════════════
   FAQ
════════════════════════════════════════════ */
#faq { background: var(--off); }
.faq-hd { max-width: 660px; margin-bottom: 2.8rem; }
.faq-list { max-width: 740px; }
.faq-it { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: color .3s;
}
.faq-q:hover { color: var(--gold); }
.faq-ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  color: var(--gold);
}
.faq-ic::before, .faq-ic::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform .35s, opacity .35s;
}
.faq-ic::before { width: 11px; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-ic::after  { width: 1px; height: 11px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-q.op .faq-ic::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a-in { padding-bottom: 1.4rem; font-size: .86rem; color: var(--muted); line-height: 1.82; }


/* ════════════════════════════════════════════
   KONTAKT
════════════════════════════════════════════ */
#kontakt { background: var(--anthracite); }
.kon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5.5rem; align-items: start; }
#kontakt .ey { color: var(--gold); }
#kontakt h2 { color: #fff; margin-bottom: 1.4rem; }
.kon-perex { font-size: .92rem; color: rgba(255,255,255,.65); margin-bottom: 2.8rem; }

.mak-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem;
  border: 1px solid rgba(255,255,255,.1);
}
.mak-av {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gold);
  flex-shrink: 0;
}
.mak-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mak-name { font-family: var(--serif); font-size: .9rem; color: #fff; margin-bottom: .15rem; }
.mak-role { font-size: .62rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .7rem; }
.mak-con a {
  display: block;
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  transition: color .3s;
  margin-top: .15rem;
}
.mak-con a:hover { color: var(--gold); }

/* developer logo */



/* form */
.fg { margin-bottom: 1.1rem; }
.fg label {
  display: block;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: .38rem;
}
.fg input,
.fg textarea {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  padding: .72rem .95rem;
  font-family: var(--sans);
  font-size: .88rem;
  color: #fff;
  outline: none;
  transition: border-color .3s;
  -webkit-appearance: none;
  border-radius: 0;
}
.fg input:focus,
.fg textarea:focus { border-color: var(--gold); }
.fg input::placeholder,
.fg textarea::placeholder { color: rgba(255,255,255,.25); }
.fg textarea { resize: vertical; min-height: 80px; }
.fg .em { font-size: .72rem; color: #e5604a; display: none; margin-top: .3rem; }

.int-show {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: .5rem .95rem;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
}
.int-show button {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-size: .75rem;
  font-family: var(--sans);
}

.fg-chk { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.4rem; }
.fg-chk input[type=checkbox] { width: auto; margin-top: 3px; flex-shrink: 0; accent-color: var(--gold); }
.fg-chk label { font-size: .76rem; color: rgba(255,255,255,.45); text-transform: none; letter-spacing: 0; }
.fg-chk label a { color: var(--gold); text-decoration: underline; }

.btn-sub {
  width: 100%;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-size: .76rem;
  padding: .92rem 1.8rem;
  border: none;
  cursor: pointer;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .3s;
  display: flex;
  align-items: center;
}
.btn-sub:hover { background: #163d2a; }
.form-note { font-size: .66rem; color: rgba(255,255,255,.28); margin-top: .7rem; text-align: center; }

#form-ok {
  display: none;
  text-align: center;
  padding: 2.8rem 2rem;
  border: 1px solid var(--gold);
}
#form-ok .ok-ic { font-size: 1.6rem; color: var(--gold); margin-bottom: .9rem; }
#form-ok p { color: #fff; font-family: var(--serif); font-size: 1rem; margin-bottom: .4rem; }
#form-ok small { color: rgba(255,255,255,.5); font-size: .82rem; }


/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
footer { background: var(--green); padding: 4rem 0 2.2rem; }
.ft-logos {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.ft-dev { display: flex; flex-direction: column; gap: .5rem; }
.ft-dev .dev-label {
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  display: block;
}
.ft-dev img { width: 130px; opacity: .78; transition: opacity .3s; }
.ft-dev img:hover { opacity: 1; }

.ft-in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3.5rem;
  align-items: start;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 1.4rem;
}
.ft-nav { display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; align-self: center; }
.ft-nav a {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  transition: color .3s;
}
.ft-nav a:hover { color: var(--gold); }
.ft-r { text-align: right; }
.ft-r p { font-size: .75rem; color: rgba(255,255,255,.45); line-height: 1.8; }
.ft-r a { color: rgba(255,255,255,.6); transition: color .3s; }
.ft-r a:hover { color: var(--gold); }
.ft-bot { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.ft-bot p,
.ft-bot a { font-size: .65rem; color: rgba(255,255,255,.3); }
.ft-bot a:hover { color: rgba(255,255,255,.6); }


/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
  .usp-it { border-right: none; border-bottom: 1px solid var(--border); }
  .usp-it:nth-child(3n) { border-right: none; }
  .domy-grid { grid-template-columns: repeat(2, 1fr); }
  .std-grid { grid-template-columns: repeat(2, 1fr); }
  .kon-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
  .nav, .hdr-r { display: none; }
  .hdr-in { grid-template-columns: 1fr auto; }
  #ham { display: flex; }

  .sec { padding: 4rem 0; }

  /* hero — mobile */
  #hero { height: 100svh; min-height: 520px; background-position: 58% 38%; }
  .hero-inner { padding: 0 1.6rem; padding-bottom: 5rem; }
  .hero-cnt { max-width: 100%; }

  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-it { border-right: none; border-bottom: 1px solid var(--border); }
  .usp-it:nth-child(even) { border-left: 1px solid var(--border); }
  .usp-it:last-child { border-bottom: none; }

  #projekt .split { grid-template-columns: 1fr; gap: 3rem; }
  .split-img { order: -1; }
  .split-img::after { display: none; }

  .lok-grid { grid-template-columns: 1fr; gap: 2rem; }
  .map-w { height: 280px; }

  .std-grid { grid-template-columns: 1fr; }

  .domy-grid { grid-template-columns: 1fr; }

  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .gal-it:first-child { grid-column: span 2; }
  .glr-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  #lb-prev, #lb-next { font-size: 1.8rem; padding: .4rem .6rem; }

  #fin .wrap { flex-direction: column; text-align: center; }

  .ft-in { grid-template-columns: 1fr; text-align: center; gap: 1.8rem; }
  .ft-logos { align-items: center; }
  .ft-dev { align-items: center; }
  .ft-r { text-align: center; }
  .ft-nav { justify-content: center; }
  .ft-bot { flex-direction: column; text-align: center; }

  .hero-btns .btn { flex: 1; justify-content: center; }

  .tl { min-width: 560px; }
}

@media (max-width: 480px) {
  .glr-grid { grid-template-columns: 1fr; }
}