/* Vlastní hostování písem, bez závislosti na Google CDN (i kvůli GDPR).
   Variabilní řezy: jeden soubor pokryje všechny tloušťky.
   Latin-ext nese českou diakritiku (ě š č ř ž ů ď ť ň).
   POZOR při úpravách: rozsahy znaků obsahují sekvence jako C5, C6 nebo C60.
   Žádný skript, který dočasně nahrazuje komentáře značkami typu C1, C2,
   sem nesmí sáhnout. Přesně tak se tyto řádky jednou poškodily. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-latin-ext.woff2') format('woff2-variations');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-latin.woff2') format('woff2-variations');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2-variations');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2-variations');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* =========================================================
   APARTHOTEL POLANICA SPORT RESORT — video funnel
   Světlý, klidný vzhled pro investory nad 40 let.

   Tmavá plocha se zlatým světlem a zářícími tlačítky je vizuální
   jazyk kryptoměn a online kurzů a působila jako podvod. Tahle
   verze vychází z toho, co cílová skupina zná od bank a realitních
   kanceláří: světlá plocha, tmavý text, jedna klidná barva značky.
   ========================================================= */

/* Záložní písma se srovnanými metrikami (naměřené, ne odhadnuté).
   Text před načtením webfontu zabere skoro stejné místo, CLS zůstává 0. */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102.9%;
  ascent-override: 94.3%;
  descent-override: 24.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 106%;
  ascent-override: 91.5%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}

/* ---------- 1. TOKENY ---------- */
:root {
  --bg:        #FFFFFF;
  --tint:      #F6F3EE;   /* každá druhá sekce, drží rytmus stránky */
  --card:      #FFFFFF;
  --line:      #E4DED4;
  --line-2:    #D2CABD;

  --text:      #17201B;   /* 16:1 na bílé */
  --text-2:    #45504A;   /* 8,4:1 na bílé, 7,6:1 na --tint */
  --text-3:    #5E6862;   /* 5,8:1 na bílé; nejslabší text na stránce */

  /* Jedna barva značky: tmavá borovicová zelená. Sedí na horské lázně
     a působí stabilně. Bílý text na ní má kontrast 10,7:1. */
  --brand:     #1F4535;
  --brand-h:   #163326;
  --brand-2:   #2C5A46;
  --brand-soft:#EAF0EC;
  --accent:    #8A6A2F;   /* mosaz jako text na světlé, 5:1 na bílé */
  --foot:      #13281E;

  /* Tmavě zelené momenty a mosaz. Kontrasty ověřené:
     --brass-lite na --green-900 8,4:1, --on-dark-2 9:1,
     text --brass-ink na tlačítku 7,6:1. */
  --green-900: #13281E;
  --green-800: #1A3428;
  --brass:     #C9A66B;   /* plocha hlavního tlačítka */
  --brass-h:   #D6B67F;
  --brass-line:#A8864A;   /* obrys tlačítka, 3:1 proti světlé ploše */
  --brass-ink: #1A170F;   /* text na tlačítku */
  --brass-lite:#DCC393;   /* mosazný text na tmavé */
  --on-dark:   #F3F0E8;
  --on-dark-2: #C0CCC3;

  --font-display: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
  --font-body:    "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;

  /* Typografická škála. Nejmenší text na stránce má 14,4 px:
     starší oči potřebují větší písmo, a čitelnost se prokazatelně
     promítá do toho, jak důvěryhodně text působí. */
  --t-h1:    clamp(2.2rem, 1.4rem + 2.8vw, 3.35rem);
  --t-h2:    clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
  --t-stat:  clamp(1.75rem, 1.35rem + 1.3vw, 2.3rem);
  --t-h3:    1.3rem;
  --t-lead:  clamp(1.1rem, 1.02rem + .35vw, 1.25rem);
  --t-body:  1.0625rem;
  --t-small: .975rem;
  --t-micro: .9rem;

  --wrap:    1160px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --sec-y:   clamp(4rem, 7.5vw, 6.5rem);

  /* Hranatější rohy než pilulky. Oblé „pilulkové“ prvky jsou jazyk
     startupů a aplikací, zaoblený obdélník působí usazeněji. */
  --r:       16px;
  --r-sm:    12px;
  --r-btn:   12px;

  --shadow:  0 1px 2px rgba(23, 32, 27, .05), 0 8px 24px rgba(23, 32, 27, .06);
  --ease:    cubic-bezier(.22, .68, .36, 1);
  --nav-h:   72px;
}

/* ---------- 2. ZÁKLAD ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Atribut hidden musí skrýt i prvek, který má v CSS vlastní display.
   Bez !important ho pravidlo jako .consent { display: flex } přebije
   a prvek zůstane vidět (stalo se u lišty se souhlasem). */
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
p { text-wrap: pretty; }
::selection { background: var(--brand); color: #FFF; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: 50%; top: 0; z-index: 400;
  transform: translate(-50%, -120%);
  padding: .8rem 1.3rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--brand); color: #FFF; font-weight: 600; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 3. TYPOGRAFIE ---------- */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.h1 { font-size: var(--t-h1); line-height: 1.08; }
.h2 { font-size: var(--t-h2); line-height: 1.12; }
.h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.012em; }
/* Druhá půlka nadpisu v barvě značky. Klidnější než zlatá a pořád
   odděluje fakt (první půlka) od slibu (druhá). */
.tone { color: var(--brand); }
.h1 .tone, .h2 .tone { display: block; }

.lead { font-size: var(--t-lead); color: var(--text-2); line-height: 1.6; }
.sub  { font-size: var(--t-small); color: var(--text-2); }
/* Nadpisek malými písmeny, ne VERZÁLKAMI s prostrkáním. Verzálky se
   čtou pomaleji a pro starší čtenáře jsou nejhorší variantou. */
.eyebrow {
  font-size: var(--t-small); font-weight: 600;
  color: var(--brand); margin-bottom: .75rem;
}
.fine { font-size: var(--t-micro); color: var(--text-3); line-height: 1.6; margin-top: 1.25rem; }
.fine a { color: var(--brand); font-weight: 600; }

/* ---------- 4. TLAČÍTKA ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 54px; padding: .9rem 1.6rem;
  border-radius: var(--r-btn); border: 1px solid var(--brass-line);
  background: var(--brass); color: var(--brass-ink);
  font-family: var(--font-body); font-size: var(--t-body); font-weight: 600;
  text-decoration: none; text-align: center; line-height: 1.25;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { background: var(--brass-h); }
.btn--ghost { background: #FFF; color: var(--brand); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.btn--sm { min-height: 44px; padding: .55rem 1.2rem; font-size: var(--t-small); white-space: nowrap; }
.btn--lg { min-height: 60px; padding: 1rem 2rem; font-size: 1.1rem; }
.btn--block { width: 100%; }
.btn__arr { width: 18px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn__spin {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(26, 23, 15, .3); border-top-color: var(--brass-ink);
  animation: spin .8s linear infinite;
}
.btn.is-loading .btn__label { opacity: .6; }
.btn.is-loading .btn__spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 5. NAVIGACE ---------- */
.nav {
  position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 2px 16px rgba(23, 32, 27, .05); }
.nav__in {
  max-width: var(--wrap); margin-inline: auto; padding: .7rem var(--gutter);
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand__mark { width: 32px; height: auto; fill: var(--brand); }
.brand__txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand__txt b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; }
.brand__txt i { font-style: normal; font-size: var(--t-micro); color: var(--text-3); }
.nav__act { display: flex; align-items: center; gap: .5rem; }
.nav__tel {
  display: none; align-items: center; gap: .5rem; min-height: 44px; padding-inline: .8rem;
  font-weight: 600; text-decoration: none; color: var(--text);
  border-radius: var(--r-btn);
}
.nav__tel:hover { background: var(--brand-soft); }
.nav__tel svg { width: 16px; height: 16px; fill: var(--brand); }
@media (min-width: 620px) { .nav__tel { display: inline-flex; } }
/* Na telefonu název značky na jeden řádek, jinak se lámal nahodile. */
@media (max-width: 420px) {
  .brand__txt i { display: none; }
  .nav__in { gap: .6rem; }
  .brand { gap: .5rem; }
  .brand__mark { width: 26px; }
  .brand__txt b { font-size: .95rem; white-space: nowrap; }
  .nav .btn--sm { padding-inline: .9rem; }
}
@media (max-width: 374px) { .brand__txt b { font-size: .85rem; } }
/* Nejužší telefony: jeden řádek se nevejde, tak raději zalomit. */
@media (max-width: 359px) { .brand__txt b { white-space: normal; } }

/* ---------- 6. ÚVOD ---------- */
.hero {
  padding-block: calc(var(--nav-h) + clamp(2.25rem, 5vw, 3.5rem)) var(--sec-y);
  text-align: center; color: var(--on-dark);
  /* Večerní fotka resortu pod zeleným závojem: je z ní cítit skutečné místo,
     ale nekřičí. Stačí malá verze, pod závojem ostrost nehraje roli. */
  background:
    linear-gradient(180deg, rgba(19, 40, 30, .9) 0%, rgba(19, 40, 30, .95) 60%, var(--green-900) 100%),
    url("../img/aparthotel-vecer-800.jpg") center 30% / cover no-repeat,
    var(--green-900);
}
.hero .h1 { color: #FFF; }
.hero .tone { color: var(--brass-lite); }
.hero .kicker { color: var(--brass-lite); }
.hero .lead, .hero__risk { color: var(--on-dark-2); }
.kicker { font-size: var(--t-small); font-weight: 600; color: var(--brand); }
.hero .h1 { margin: 1rem auto 0; max-width: 21ch; }
.hero__lead { margin: 1.15rem auto 0; max-width: 48ch; }
.hero__cta { margin-top: clamp(1.75rem, 3.5vw, 2.25rem); display: grid; justify-items: center; gap: .75rem; }
.hero__risk { font-size: var(--t-small); color: var(--on-dark-2); }
/* Na telefonu přes celou šířku a na jeden řádek, dva řádky působily těžkopádně. */
@media (max-width: 559px) {
  .hero__cta .btn { width: 100%; padding-inline: 1.1rem; font-size: 1rem; }
}

.stats {
  list-style: none; padding: 0;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 980px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats li { display: grid; gap: .35rem; align-content: start; padding: 1.3rem 1rem; background: var(--green-800); }
.stats b {
  font-family: var(--font-display); font-size: var(--t-stat); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.05; color: var(--brass-lite);
  font-variant-numeric: tabular-nums lining-nums;
}
.stats li > span { font-size: var(--t-small); color: var(--on-dark-2); line-height: 1.4; }
.stats__disc { margin: 1rem auto 0; max-width: 64ch; font-size: var(--t-micro); color: var(--on-dark-2); }
.stats__disc b { color: #FFF; }

/* ---------- 7. VIDEO ----------
   Náhled je vidět hned, video se stahuje až na klepnutí. Úvodní se po
   načtení rozjede potichu (titulky má zapečené) a klepnutí ho pustí
   od začátku se zvukem. */
.vid {
  position: relative; margin: clamp(2rem, 4vw, 2.5rem) auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden;
  background: #E9E5DE; border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(23, 32, 27, .04), 0 24px 60px -24px rgba(23, 32, 27, .28);
}
.vid--hero { max-width: 940px; }
.vid__el { width: 100%; height: 100%; object-fit: cover; }

.vid__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: .85rem;
  background: linear-gradient(to top, rgba(15, 20, 17, .38), rgba(15, 20, 17, 0) 60%);
  color: var(--text); transition: opacity .3s var(--ease), background .25s var(--ease);
}
.vid__play:hover { background: linear-gradient(to top, rgba(15, 20, 17, .3), rgba(15, 20, 17, 0) 60%); }
/* Šířka i výška zvlášť; samotné aspect-ratio v mřížce nestačilo
   a ikona vyšla na mobilu nesmyslně vysoká. */
.vid__icon {
  --ico: clamp(64px, 7.5vw, 84px);
  display: grid; place-items: center; flex: none;
  width: var(--ico); height: var(--ico); border-radius: 50%;
  background: var(--brass); color: var(--brass-ink);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), 0 12px 30px rgba(15, 20, 17, .3);
  transition: transform .25s var(--ease);
}
.vid__play:hover .vid__icon { transform: scale(1.05); }
.vid__icon svg { width: 38%; height: auto; fill: currentColor; margin-left: 8%; }
.vid__label {
  padding: .45rem 1rem; border-radius: var(--r-sm);
  background: #FFF; color: var(--text);
  font-size: var(--t-small); font-weight: 600;
  box-shadow: 0 4px 14px rgba(15, 20, 17, .18);
}

/* Tichý náhled: velké tlačítko zmizí a v rohu je malé „se zvukem“.
   Dvě tlačítka přepínaná jen průhledností, aby to nebyl posun obsahu. */
.vid__unmute {
  /* Nahoře, protože dole má video zapečené titulky. */
  position: absolute; left: clamp(.75rem, 2vw, 1.25rem); top: clamp(.75rem, 2vw, 1.25rem); z-index: 3;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1.1rem .45rem .45rem; border-radius: var(--r-sm);
  background: #FFF; color: var(--text); font-size: var(--t-small); font-weight: 600;
  box-shadow: 0 6px 20px rgba(15, 20, 17, .22);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.vid__unmute:hover { background: var(--brand-soft); }
.vid__uicon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; background: var(--brass); color: var(--brass-ink);
}
.vid__uicon svg { width: 18px; height: 18px; fill: currentColor; }
.vid__utxt--short { display: none; }
/* Na telefonu je video malé a velký štítek zakrýval půlku obrazu. */
@media (max-width: 559px) {
  .vid__unmute { gap: .45rem; padding: .3rem .85rem .3rem .3rem; font-size: .8125rem; }
  .vid__uicon { width: 30px; height: 30px; }
  .vid__uicon svg { width: 16px; height: 16px; }
  .vid__utxt--long { display: none; }
  .vid__utxt--short { display: inline; }
}
.vid.is-muted .vid__play { opacity: 0; pointer-events: none; }
.vid.is-muted .vid__unmute { opacity: 1; pointer-events: auto; }
.vid.is-playing .vid__play { opacity: 0; pointer-events: none; }
.vid__cap { margin-top: .9rem; font-size: var(--t-small); color: var(--text-2); }

/* ---------- 8. SEKCE A KARTY ---------- */
.sec { padding-block: var(--sec-y); }
.sec--tint { background: var(--tint); }

/* Všechny nadpisy sekcí stejně: vlevo, stejná míra, stejný odstup.
   Jeden vzor opakovaný po celé stránce je to, co ji drží pohromadě. */
.head { margin-bottom: clamp(2rem, 4vw, 2.75rem); max-width: 44ch; }
.head .lead { margin-top: 1rem; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 2.6vw, 1.85rem); box-shadow: var(--shadow);
}
.card p { color: var(--text-2); }
.card .h3 + p { margin-top: .5rem; }
.card__role { font-size: var(--t-small); font-weight: 600; color: var(--brand) !important; margin-bottom: .6rem; }
.card__fact { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.card__fact b { color: var(--text); font-weight: 600; }
.card__fact a { text-decoration: none; color: var(--brand); }
.card__fact a b { color: var(--brand); }

/* Tmavě zelená sekce. Jen dva takové momenty na stránce (úvod a video
   s Tomášem), zbytek je světlý. Víc tmavých bloků by vrátilo dojem
   z tmavé verze, která působila jako podvod. */
.sec--dark { background: var(--green-900); color: var(--on-dark); }
.sec--dark .h2, .sec--dark .h3 { color: #FFF; }
.sec--dark .tone, .sec--dark .eyebrow { color: var(--brass-lite); }
.sec--dark .lead, .sec--dark .sub { color: var(--on-dark-2); }
.sec--dark .ticks li { color: var(--on-dark); }
.sec--dark .ticks li::before {
  background: rgba(220, 195, 147, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.5' fill='none' stroke='%23DCC393' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.sec--dark .who { background: var(--green-800); border-color: rgba(255, 255, 255, .1); }
.sec--dark .who__name { color: #FFF; }
.sec--dark .who__role { color: var(--on-dark-2); }
.sec--dark .who__tel { color: var(--brass-lite); }
.sec--dark .vid, .hero .vid { border-color: rgba(220, 195, 147, .3); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65); }

/* ---------- 9. KDO ZA PROJEKTEM STOJÍ ---------- */
.parties { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .parties { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 10. TŘI KROKY ---------- */
.steps { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step__n {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1.1rem;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
}

/* ---------- 11. VIDEO + TEXT VEDLE SEBE ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
.split .vid { margin: 0; }
.split--pkg { display: block; max-width: 860px; }

.ticks { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: .8rem; }
.ticks li { position: relative; padding-left: 2rem; color: var(--text); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.5' fill='none' stroke='%231F4535' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.ticks--sm { margin-top: 1.25rem; gap: .65rem; }
.ticks--sm li { font-size: var(--t-small); color: var(--text-2); }

.who {
  margin-top: 1.75rem; padding: .85rem 1.1rem .85rem .85rem;
  display: flex; align-items: center; gap: .6rem 1rem;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
}
.who > div { min-width: 0; }
/* Nejužší telefony: číslo pod jméno, jinak karta roztáhla stránku do šířky. */
@media (max-width: 359px) {
  .who { flex-wrap: wrap; }
  .who > div { flex: 1 1 8rem; }
  .who__tel { margin-left: calc(56px + 1rem); }
}
.who__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; flex: none; }
.who__name { font-weight: 600; }
.who__role { font-size: var(--t-micro); color: var(--text-2); }
.who__tel { margin-left: auto; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.who__tel:hover { text-decoration: underline; text-underline-offset: 3px; }
.who--plain { background: transparent; border: 0; padding: 0; margin-top: 2rem; }
.who--plain .who__name { font-weight: 500; color: var(--text-2); font-size: var(--t-small); }
.who__big { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--brand); text-decoration: none; letter-spacing: -.01em; }

/* ---------- 12. PROJEKT ---------- */
.gal { display: grid; gap: 1rem; }
@media (min-width: 860px) {
  .gal { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
  .gal__big { grid-row: 1 / 3; }
}
.gal figure { position: relative; border-radius: var(--r); overflow: hidden; background: var(--tint); }
.gal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
@media (min-width: 860px) { .gal__big img { aspect-ratio: auto; min-height: 100%; } }
.gal figcaption {
  position: absolute; left: .8rem; bottom: .8rem;
  padding: .35rem .75rem; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .94); color: var(--text);
  font-size: var(--t-micro); font-weight: 600;
}

.specs {
  margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 780px) { .specs { grid-template-columns: repeat(4, 1fr); } }
.specs div { background: var(--card); padding: 1.1rem 1.2rem; }
.specs dt { font-size: var(--t-micro); color: var(--text-3); }
.specs dd { margin-top: .2rem; font-weight: 600; color: var(--text); }
.specs dd small { display: block; margin-top: .1rem; font-size: var(--t-micro); font-weight: 500; color: var(--accent); }
#projekt .sub { margin-top: 1rem; }

/* ---------- 13. 3D MODEL ---------- */
.viewer { position: relative; }
.viewer__frame {
  position: relative; aspect-ratio: 16 / 9; min-height: 340px;
  border-radius: var(--r); overflow: hidden; background: #E9E5DE; border: 1px solid var(--line);
}
@media (max-width: 700px) { .viewer__frame { aspect-ratio: 4 / 5; } }
/* Poster, načítání a náhradní odkaz musí ležet NAD kontejnerem widgetu
   (#sm3de je v HTML až za nimi). Jinak prázdný #sm3de spolkne klepnutí
   na „Otevřít 3D model“ a na telefonu se model nikdy nenačte. */
.viewer__poster { position: absolute; inset: 0; z-index: 2; }
.viewer__poster img { width: 100%; height: 100%; object-fit: cover; }
.viewer__launch {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .85rem;
  background: rgba(15, 20, 17, .22);
}
.viewer__launch:hover { background: rgba(15, 20, 17, .14); }
.vid__icon--cube svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; margin-left: 0; width: 44%; }
.viewer__loading, .viewer__fallback {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem;
  text-align: center; color: var(--text-2); background: var(--tint); z-index: 2;
}
.viewer__loading[hidden], .viewer__fallback[hidden], .viewer__poster[hidden] { display: none; }
.spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .9s linear infinite; }
#sm3de { position: absolute; inset: 0; z-index: 1; }
/* Z widgetu jen samotný 3D model. Postranní panel nese loga Aparthotelu
   a 3D Estate, polské ceny v zł a tlačítko poptávky, které by poslalo
   zájemce polskému developerovi mimo náš formulář. Otevírá se i po
   kliknutí na byt, proto schovaný natrvalo a model přes celou šířku.
   Polské právní upozornění nahrazuje česká věta pod modelem. */
#sm3de ._3deoa__retractable-sidebar__sidebar,
._3deoa__initial-popup { display: none !important; }
#sm3de ._3deoa__retractable-sidebar__content { width: 100% !important; }
/* Na telefonu widget otevírá vlastní celou obrazovku mimo náš rámeček:
   logo nahoře, pod modelem seznam bytů s cenami v zł. Necháme jen model
   a křížek na zavření. */
._3deoa__sm-mobile__header ._3deoa__ui-kit-header-logo,
._3deoa__viewer-mobile-logo,
._3deoa__logo-estate-linked { visibility: hidden; }
._3deoa__layout-vertical__content,
._3deoa__sm-mobile-scroll-down-button { display: none !important; }
/* Výška modelu max. 440 px, uprostřed tmavé plochy. NE na celou výšku:
   widget volí velikost snímků 360° podle plochy modelu. Na celé výšce
   stahoval na telefonu velké snímky (přes 34 MB, dekódování trhalo
   otáčením), do 460 px zůstává u malých (asi 8 MB). Měřeno 16. 9. 2026. */
._3deoa__layout-vertical__wrapper { background: #13281E; }
._3deoa__layout-vertical__viewer {
  height: min(440px, 100%) !important;
  top: max(0px, calc(50% - 220px)) !important;
}
._3deoa__layout-vertical__wrapper::after {
  content: "Tažením prstu budovu otočíte, klepnutím přiblížíte.";
  position: absolute; left: 1.5rem; right: 1.5rem;
  bottom: calc(1.75rem + env(safe-area-inset-bottom));
  text-align: center; font: 500 .95rem/1.5 "Inter", "Inter Fallback", system-ui, sans-serif;
  color: #C0CCC3; pointer-events: none;
}
@media (max-height: 620px) { ._3deoa__layout-vertical__wrapper::after { display: none; } }
.viewer__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  padding: .6rem 1.1rem; border-radius: var(--r-sm);
  background: #FFF; color: var(--text); font-weight: 600; box-shadow: var(--shadow);
}
.viewer__close[hidden] { display: none; }
.viewer__bar { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.viewer__hint { font-size: var(--t-small); color: var(--text-2); }
.viewer__hint b { color: var(--text); font-weight: 600; }
.viewer__expand {
  padding: .55rem 1.1rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: #FFF;
  font-size: var(--t-small); font-weight: 600; color: var(--brand);
}
.viewer__expand:hover { border-color: var(--brand); }
.viewer__expand[hidden] { display: none; }
.viewer.is-full .viewer__frame { position: fixed; inset: 0; z-index: 300; aspect-ratio: auto; border-radius: 0; border: 0; }
.no-scroll { overflow: hidden; }

.avail { margin-top: 1.25rem; display: grid; gap: 1rem; align-items: center; }
@media (min-width: 860px) { .avail { grid-template-columns: minmax(0, 1fr) auto; } .avail__bar { grid-column: 1 / -1; } }
.avail__bar { height: 8px; border-radius: 8px; background: var(--brand-soft); overflow: hidden; }
.avail__fill { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width 1s var(--ease); }
.avail p { color: var(--text-2); }
.avail b { color: var(--text); }

/* ---------- 14. SLUŽBY ---------- */
.pkgs { display: grid; gap: 1rem; margin-top: clamp(2.25rem, 4vw, 3rem); }
@media (min-width: 820px) { .pkgs { grid-template-columns: repeat(2, 1fr); } }
.pkg { display: flex; flex-direction: column; }
.pkg--main { border: 2px solid var(--brass-line); }
.pkg__price {
  margin-top: .9rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--t-stat); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1; color: var(--text) !important;
}
.pkg--main .pkg__price { color: var(--accent) !important; }
.pkg--main .card__role { color: var(--accent) !important; }
.pkg__price small { display: block; margin-top: .3rem; font-family: var(--font-body); font-size: var(--t-small); font-weight: 400; letter-spacing: 0; color: var(--text-2); }
/* Tlačítko se v kartě tlačí dolů, obě karty ho mají na stejné výšce. */
.pkg__terms { margin-top: 1.1rem; margin-bottom: 1.5rem; font-size: var(--t-micro); line-height: 1.6; color: var(--text-3) !important; }
.pkg .btn { margin-top: auto; }

/* ---------- 15. DOTAZY ---------- */
.faq-wrap { max-width: 900px; }
.faq { display: grid; gap: .65rem; }
.qa { border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); }
.qa[open] { border-color: var(--line-2); box-shadow: var(--shadow); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; font-weight: 600; font-size: 1.05rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%231F4535' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 60% no-repeat;
  transition: transform .25s var(--ease);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 1.3rem 1.25rem; color: var(--text-2); }
.qa p b { color: var(--text); }

/* ---------- 16. FORMULÁŘ ---------- */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* Co se stane po odeslání. Nejistota odrazuje víc než samotné čekání. */
.next { list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: 1.1rem; counter-reset: krok; }
.next li { position: relative; padding-left: 3rem; color: var(--text-2); counter-increment: krok; }
.next li::before {
  content: counter(krok); position: absolute; left: 0; top: -.05em;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #FFF; font-family: var(--font-display); font-weight: 600;
}
.next b { color: var(--text); font-weight: 600; }

.form { display: grid; gap: 1.05rem; border-top: 4px solid var(--brass); }
.field { display: grid; gap: .4rem; }
.field-row { display: grid; gap: 1.05rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field__label { font-weight: 600; color: var(--text); }
.field__opt { font-weight: 400; color: var(--text-3); }
.field__input {
  width: 100%; min-height: 52px; padding: .8rem 1rem;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: #FFF; color: var(--text); font-size: var(--t-body);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input::placeholder { color: var(--text-3); }
.field__input:hover { border-color: #B9B0A2; }
.field__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31, 69, 53, .16); }
select.field__input {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%231F4535' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat;
}
textarea.field__input { min-height: 80px; resize: vertical; }
.field__err { display: none; font-size: var(--t-micro); color: #A3321C; }
.field.is-invalid .field__input { border-color: #B8452C; }
.field.is-invalid .field__err { display: block; }

.check { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-small); color: var(--text-2); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin-top: .1rem; accent-color: var(--brand); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { text-align: center; font-size: var(--t-micro); color: var(--text-3); }
.form__ok { padding: 1.1rem; border-radius: var(--r-sm); background: var(--brand-soft); text-align: center; }
.form__ok[hidden] { display: none; }
.form__okTitle { font-weight: 600; color: var(--brand); }
.form__err { padding: .9rem 1rem; border-radius: var(--r-sm); background: #FBECE7; color: #8E2A15; font-size: var(--t-small); }
.form__err[hidden] { display: none; }

/* ---------- 17. ZÁPATÍ ---------- */
.foot { background: var(--foot); color: #E9EEEA; padding-block: clamp(2.75rem, 5vw, 3.75rem) calc(clamp(2rem, 4vw, 2.75rem) + env(safe-area-inset-bottom)); }
.foot__top { display: grid; gap: 1.25rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 860px) { .foot__top { grid-template-columns: 1fr auto; align-items: end; } }
.foot__brand { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.foot__sub { font-size: var(--t-small); color: #B6C3BA; }
.foot__addr { font-style: normal; font-size: var(--t-small); color: #B6C3BA; line-height: 1.75; }
.foot__addr b { color: #FFF; }
@media (min-width: 860px) { .foot__addr { text-align: right; } }
/* Kontakty jako samostatné položky, které se smějí zalomit. */
.foot__links { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: .2rem; }
@media (min-width: 860px) { .foot__links { justify-content: flex-end; } }
.foot__addr a { color: #FFF; text-decoration: none; overflow-wrap: anywhere; }
.foot__addr a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__legal { margin-top: 1.5rem; font-size: var(--t-micro); color: #A9B7AE; line-height: 1.65; max-width: 110ch; }
.foot__meta { margin-top: 1rem; font-size: var(--t-micro); color: #A9B7AE; }

/* ---------- 18. MOBILNÍ LIŠTA ---------- */
.mobcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: .6rem; padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(23, 32, 27, .08);
  /* Schovaná lišta musí být opravdu pryč, ne jen těsně pod okrajem.
     Telefon při schování adresního řádku zvětší obrazovku a lišta
     by vykoukla doprostřed úvodu, stejně tak na snímku celé stránky. */
  visibility: hidden;
  transform: translateY(calc(100% + 40px));
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.mobcta.is-visible { visibility: visible; transform: translateY(0); transition: transform .3s var(--ease); }
.mobcta__tel {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: var(--r-btn); border: 1px solid var(--line-2); background: #FFF;
}
.mobcta__tel svg { width: 20px; height: 20px; fill: var(--brand); }
.mobcta__main { flex: 1; }
@media (min-width: 900px) { .mobcta { display: none; } }

/* ---------- 19. NABÍHÁNÍ PŘI SCROLLU ----------
   Skrytí platí jen se spuštěným JS, jinak by obsah zůstal neviditelný. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- KLEPNUTÍ NA TELEFONU ----------
   Samostatné odkazy mají plochu pro prst aspoň 44 px na výšku (WCAG 2.5.5).
   Vnitřní odsazení a stejně velký záporný okraj: plocha se zvětší,
   vzhled ani rozložení se neposunou. */
.brand { padding-block: 13px; margin-block: -13px; }
.card__fact a, .who__tel, .foot__links a {
  display: inline-block; padding-block: 10px; margin-block: -10px;
}

/* ---------- SOUHLAS S COOKIES ---------- */
.consent {
  position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 120;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  max-width: 760px; margin-inline: auto; padding: 1rem 1.1rem;
  background: #FFF; border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 12px 40px rgba(23, 32, 27, .18);
}
.consent__text { flex: 1 1 18rem; font-size: var(--t-small); color: var(--text-2); line-height: 1.5; }
.consent__act { display: flex; gap: .5rem; flex: 1 1 auto; justify-content: flex-end; }
.consent__act .btn { flex: 1 1 0; min-width: 7.5rem; }
.foot__consent { padding: 10px 0; margin-block: -10px; font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }