/* =============================================================
   Milan Břečka a partneři – landing page pro majitele nemovitostí
   Postaveno na Liquid Glass (css/glass.css), pozadí bílé.
   ============================================================= */

:root {
  --lg-bg: #ffffff;                 /* výslovné přání: bílá, ne šedomodrá */
  --ink: var(--lg-ink);
  --ink-soft: var(--lg-ink-soft);
  --dim: #5b6579;                   /* sekundární text, 6.2:1 na bílé */
  --line: rgba(120,137,164,.24);
  /* Barvy značky – tyrkysová z loga (#378A93) a tmavý pás z jejich webu (#1B6567).
     Akcent #378A93 má s bílou jen 4,02:1, proto tlačítka a vybrané dlaždice
     používají tmavší #2c747c (5,39:1) a přeliv při hoveru #1B6567 (6,77:1). */
  --teal: #378A93;
  --teal-dark: #1B6567;
  --teal-btn: #2c747c;
  --teal-text: #2c747c;             /* malý barevný text na světlém pozadí */
  --teal-on-dark: #cfe9eb;          /* kurzíva v nadpisu na tmavém pásu, 5,3:1 */
  --teal-tint: #eef5f6;             /* světlý pás sekcí */
  --teal-tint-2: #e2eff0;
  --lg-blue: var(--teal);
  --lg-blue-deep: var(--teal-dark);
  --lg-blue-on-dark: var(--teal-on-dark);
  --blue: var(--teal);
  --blue-soft: rgba(55,138,147,.10);
  --amber: #b45309;                 /* štítky „doplní klient“ */
  --amber-bg: #fff7e6;
  --amber-line: #f0c27a;
  --ok: #158a48;
  --err: #c93b3b;
  --r-field: 14px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --section: clamp(4rem, 9vw, 7rem);
}

/* ---------- Povrchy prohlížeče – ať i to, co nekreslíme, patří k návrhu ---------- */
::selection { background: rgba(55,138,147,.16); color: var(--ink); }
:where(a, button, summary, input, select, textarea, [tabindex]) {
  outline: 2px solid transparent; outline-offset: 3px;
  transition: outline-color .25s cubic-bezier(.2,.7,.2,1);
}
/* Fokus se rozsvítí plynule: obrys je vždy nakreslený, mění se jen barva
   (a `outline-color` je v transition každého interaktivního prvku). */
:focus-visible { outline-color: var(--blue); border-radius: 6px; }
html { scrollbar-color: rgba(114,124,146,.45) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(114,124,146,.38); border-radius: 999px; border: 3px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: rgba(114,124,146,.62); }
body { caret-color: var(--blue); background: #fff; overflow-x: clip; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { margin: 0; overflow-wrap: anywhere; }
h1, h2 { text-wrap: balance; }
section[id] { scroll-margin-top: 4.5rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .6rem 1rem; background: #fff; border-radius: 999px; box-shadow: var(--lg-glass-shadow); font-weight: 600; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }

/* ---------- Typografie ---------- */
h1 {
  font-size: clamp(2.125rem, 2.6vw + 1.2rem, 3.4rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--ink);
}
h2 {
  font-size: clamp(1.625rem, 1.6vw + 1rem, 2.5rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--ink);
}
h1 em, h2 em { font-style: italic; color: var(--blue); }
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }

.sec_head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec_head p { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }

/* Štítek „Doplní klient“ – jediné místo, kde je na stránce jiná barva než modrá */
.dn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 6px;
  background: var(--amber-bg); border: 1px dashed var(--amber-line);
  color: var(--amber); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
}
.dn-line { font-size: .875rem; color: var(--dim); }
.dn-line .dn { margin-right: .35rem; }

/* ---------- Tlačítka ----------
   Tlačítka: normální písmo místo verzálek
   a při hoveru se zleva přelije tmavší barva – tlačítko samo se nehýbe.
   Světelný pruh a levandulová záře z kitu jsou vypnuté. ::after má z-index -1,
   aby přeliv šel pod text i u tlačítek, kde text není zabalený ve <span>. */
.lg-btn {
  --btn-fill: var(--teal-dark);
  background-color: var(--teal-btn);
  padding: .875rem 1.5rem;
  border: 1px solid rgba(255,255,255,.30);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  outline-offset: 4px;
  box-shadow: 0 0 0 0 rgba(55,138,147,0), 0 10px 22px -12px rgba(27,101,103,0);
  transition: color .28s ease, border-color .28s ease, outline-color .25s ease,
    transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s cubic-bezier(.2,.7,.2,1);
}
.lg-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(55,138,147,.16), 0 16px 30px -12px rgba(27,101,103,.6); }
.lg-btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.lg-btn::before { content: none; animation: none; }
.lg-btn::after {
  inset: 0;
  z-index: -1;
  border-radius: 0;
  background: var(--btn-fill);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.65,0,.35,1);
}
.lg-btn:hover::after,
.lg-btn:focus-visible::after { transform: scaleX(1); }
.lg-btn.is-big { padding: 1rem 1.75rem; font-size: 1rem; }
.lg-btn.is-ghost {
  background-color: rgba(255,255,255,.70);
  border: 1px solid rgba(43,63,88,.16);
  color: var(--ink);
}
.lg-btn.is-ghost { --btn-fill: var(--ink); }
.lg-btn.is-ghost:hover { color: #fff; border-color: var(--ink); }
.lg-btn.is-muted { background-color: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); --btn-fill: #fff; }
.lg-btn.is-muted:hover { color: #060812; border-color: #fff; }
/* Plné světlé CTA na tmavém pásu – bílá s tmavě tyrkysovým textem, hover přelije světlý tyrkys. */
.lg-btn.is-light { background-color: #fff; border-color: #fff; color: var(--teal-dark); --btn-fill: var(--teal-tint-2); box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 14px 30px -10px rgba(0,0,0,.35); }
.lg-btn.is-light:hover { color: var(--teal-dark); box-shadow: 0 0 0 5px rgba(255,255,255,.22), 0 20px 36px -10px rgba(0,0,0,.45); }
.lg-btn.is-ghost:hover { box-shadow: 0 0 0 4px rgba(16,24,40,.08), 0 16px 30px -12px rgba(16,24,40,.45); }
@media (prefers-reduced-motion: reduce) { .lg-btn::after { transition: none; } .lg-btn:hover, .lg-btn:active { transform: none; } }
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .9375rem; color: var(--ink); text-decoration: none;
}
.link-arrow svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--blue); }

/* ---------- Hlavička ---------- */
.top { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.top.is-scrolled { border-color: var(--line); }
.top_in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand_logo { display: block; height: 2.35rem; width: auto; }
.brand_logo.is-foot { height: 2.75rem; margin-bottom: 1rem; }
@media (max-width: 479px) { .top .brand_logo { height: 2rem; } }
.brand_mark { width: 1.75rem; height: 1.75rem; border-radius: 8px; background: linear-gradient(145deg, var(--blue), var(--lg-blue-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(55,138,147,.25); position: relative; }
.brand_mark::after { content: ""; position: absolute; inset: 30%; border-radius: 3px; background: rgba(255,255,255,.92); clip-path: polygon(0 100%, 0 45%, 50% 0, 100% 45%, 100% 100%, 65% 100%, 65% 65%, 35% 65%, 35% 100%); }
.brand_name { font-weight: 700; font-size: .9375rem; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; }
@media (max-width: 479px) { .top .brand_name span { display: none; } }
.brand_name span { font-weight: 500; color: var(--dim); }
.top_nav { display: none; gap: 1.75rem; }
.top_nav a { font-size: .875rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color .2s ease, outline-color .25s ease; }
.top_nav a:hover { color: var(--blue); }
.top_cta { padding: 11px 16px; font-size: .75rem; white-space: nowrap; }
.top_cta .long { display: none; }
@media (min-width: 480px) { .top_cta .long { display: inline; } }
@media (min-width: 860px) { .top_nav { display: flex; } .top_cta { padding: 12px 22px; font-size: .8125rem; } }

/* ---------- Hero: nadpis → video → CTA → social proof ---------- */
.hero { position: relative; padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); overflow: clip; text-align: center; }
.hero_wash {
  position: absolute; inset: -30% -10% auto; height: 110%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 45% at 50% 30%, rgba(55,138,147,.10), rgba(55,138,147,0) 70%),
    radial-gradient(40% 35% at 12% 85%, rgba(27,101,103,.06), rgba(27,101,103,0) 70%),
    radial-gradient(40% 35% at 90% 80%, rgba(55,138,147,.06), rgba(55,138,147,0) 70%);
}
.hero_in { display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 20ch; }
.hero_lead { margin-top: 1rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.hero_video { position: relative; width: 100%; max-width: 56rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); isolation: isolate; }
/* Záře za videem: rozmazaný tyrkysový ovál pod rámečkem. Rozostření je statické
   (filter se neanimuje), dýchá jen opacity a transform – to je levné. */
.hero_video::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 3% -5% -8% -5%; border-radius: 40%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(55,138,147,.85) 0%, rgba(55,138,147,.6) 65%, rgba(55,138,147,.28) 100%);
  filter: blur(40px);
  animation: glow-breathe 5s ease-in-out infinite;
}
/* Druhá vrstva záře: rozsvítí se, když se kurzor přiblíží k videu. */
.hero_video::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -2% -7% -10% -7%; border-radius: 40%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(55,138,147,.55), rgba(55,138,147,0) 70%);
  filter: blur(30px); opacity: 0;
  transition: opacity .45s cubic-bezier(.2,.7,.2,1);
}
.hero_video:hover::after { opacity: 1; }
@keyframes glow-breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@media (max-width: 640px) { .hero_video::before { inset: 4% -4% -6% -4%; filter: blur(26px); } .coverflow figure[data-pos="-1"] { transform: translateX(-34%) scale(.74) rotateY(28deg); } .coverflow figure[data-pos="1"] { transform: translateX(34%) scale(.74) rotateY(-28deg); } }
@media (prefers-reduced-motion: reduce) { .hero_video::before { animation: none; opacity: .9; } }
.hero .video_frame { width: 100%; }
.hero_actions { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hero_proof { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hero_facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hero_facts li { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--ink-soft); padding: .45rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(82,99,130,.06); }
.hero_facts li::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(55,138,147,.14); }
.hero_chip {
  display: inline-flex; align-items: center; gap: .75rem; text-align: left;
  padding: .7rem 1rem .7rem .8rem; border-radius: 16px;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 14px 34px rgba(82,99,130,.18), inset 0 1px 0 #fff;
  font-size: .8125rem; line-height: 1.3; color: var(--ink-soft);
}
.hero_chip b { color: var(--ink); font-size: .9375rem; }
.hero_chip small { color: var(--dim); font-size: .6875rem; }
.hero_chip_stars { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: #fff4d6; }
.hero_chip_stars svg { width: 1.1rem; height: 1.1rem; fill: #e8a317; }
@media (min-width: 640px) {
  .hero_actions { flex-direction: row; gap: 1rem 1.75rem; }
  .hero_proof { flex-direction: row; gap: 1.25rem; }
}

/* ---------- Video rámeček (v hero) ---------- */
.video_frame {
  position: relative; overflow: hidden; border-radius: 26px;
  aspect-ratio: 16 / 9;
  background: #0c1322;
  box-shadow: 0 30px 70px -20px rgba(12,17,29,.45), 0 0 0 8px rgba(225,234,247,.55), 0 0 0 9px rgba(255,255,255,.8);
  isolation: isolate; cursor: pointer;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1);
}
.hero_video:hover .video_frame { transform: translateY(-3px); box-shadow: 0 38px 80px -22px rgba(12,17,29,.5), 0 0 0 8px rgba(214,236,238,.75), 0 0 0 9px rgba(255,255,255,.95); }
/* Pomalý světelný přejezd přes náhled videa – jen transform, každých 7 s. */
.video_shine {
  position: absolute; inset: -20% auto -20% -40%; z-index: 1; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.16) 50%, rgba(255,255,255,0));
  transform: translateX(0) skewX(-12deg); animation: video-shine 7s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes video-shine { 0%, 55% { transform: translateX(0) skewX(-12deg); } 100% { transform: translateX(560%) skewX(-12deg); } }
.video_frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.video_frame picture, .video_frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.video_frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,18,.05), rgba(6,8,18,.55) 100%); }
.video_play {
  position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%;
  width: 5.25rem; height: 5.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(55,138,147,0), 0 20px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .4s var(--ease-out), background .3s ease, color .3s ease, box-shadow .35s cubic-bezier(.2,.7,.2,1), outline-color .25s ease;
}
/* Dvě vlny kolem tlačítka, posunuté o půl periody – táhnou oko k videu. */
.video_play::before, .video_play::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(255,255,255,.55); animation: pulse 2.8s var(--ease-out) infinite;
}
.video_play::after { animation-delay: 1.4s; }
.video_play svg { width: 2rem; height: 2rem; fill: currentColor; translate: 2px 0; }
.video_play:hover, .hero_video:hover .video_play { transform: scale(1.08); background: rgba(255,255,255,.95); color: var(--teal-dark); box-shadow: 0 0 0 10px rgba(255,255,255,.18), 0 24px 46px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5); }
.video_label {
  position: absolute; left: 50%; top: calc(50% + 4.4rem); z-index: 2; translate: -50% 0; pointer-events: none;
  padding: .4rem .85rem; border-radius: 999px; white-space: nowrap;
  font-size: .8125rem; font-weight: 600; color: #fff;
  background: rgba(6,8,18,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
}
@keyframes pulse { 0% { transform: scale(.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
.video_note {
  position: absolute; z-index: 2; left: .75rem; right: .75rem; bottom: .75rem; text-align: left;
  padding: .7rem .85rem; border-radius: 12px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.9);
  font-size: .8125rem; line-height: 1.5; color: var(--ink-soft);
}
.video_note .dn { margin-right: .4rem; }
/* Video ještě není dodané: poster s klidným popiskem, bez tlačítka, které by nic nespustilo. */
.video_frame.is-pending { cursor: default; }
.hero_video:hover .video_frame.is-pending { transform: none; box-shadow: 0 30px 70px -20px rgba(12,17,29,.45), 0 0 0 8px rgba(225,234,247,.55), 0 0 0 9px rgba(255,255,255,.8); }
.video_soon {
  position: absolute; z-index: 2; left: .75rem; right: .75rem; bottom: .75rem; margin: 0;
  display: flex; align-items: center; gap: .85rem; text-align: left;
  padding: .8rem 1rem .8rem .85rem; border-radius: 16px;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 14px 34px rgba(12,17,29,.22), inset 0 1px 0 #fff;
  font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--ink);
}
.video_soon svg { flex: none; box-sizing: content-box; width: 1.1rem; height: 1.1rem; padding: .6rem; border-radius: 50%; background: var(--teal-btn); fill: #fff; }
.video_soon small { display: block; margin-top: .15rem; font-size: .8125rem; font-weight: 500; color: var(--dim); }
@media (max-width: 640px) {
  .video_frame { aspect-ratio: 4 / 5; border-radius: 22px; }
}
@media (min-width: 900px) {
  .video_note { left: 1.5rem; right: auto; bottom: 1.5rem; max-width: 30rem; }
  .video_soon { left: 1.5rem; right: auto; bottom: 1.5rem; max-width: 26rem; }
}

/* ---------- O nás ---------- */
.about { padding-block: var(--section); background: linear-gradient(180deg, var(--teal-tint) 0%, var(--teal-tint-2) 100%); }
.about_grid { display: grid; gap: 2.5rem; align-items: center; }
.about_visual { position: relative; margin: 0; }
.about_frame {
  padding: 8px; border-radius: 28px;
  background: linear-gradient(145deg, rgba(225,234,247,.7), rgba(210,221,238,.9) 50%, rgba(198,211,230,.7));
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--lg-glass-shadow), 0 40px 80px -30px rgba(12,17,29,.28);
}
.about_frame img { border-radius: 21px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.about_chip { position: absolute; left: 1rem; bottom: -1.1rem; }
.about_story h2 { max-width: 16ch; }
.about_story p { margin-top: 1.1rem; font-size: .9688rem; line-height: 1.7; color: var(--ink-soft); max-width: 36rem; }
.about_story h2 + p { margin-top: 1.5rem; font-size: 1.0625rem; color: var(--ink); }
.about_story strong { color: var(--ink); font-weight: 700; }
.about_sign { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8125rem !important; color: var(--teal-text) !important; }
.why_list { margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; list-style: none; display: grid; }
.why_list li { padding: 1.5rem 0; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.why_list li:last-child { border-bottom: 1px solid var(--line); }
.why_list h3 { font-size: 1.125rem; letter-spacing: -.02em; }
.why_list p { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); }
@media (min-width: 900px) {
  .about_grid { grid-template-columns: .95fr 1.05fr; gap: 4.5rem; }
  .about_visual { transform: rotate(-1.2deg); }
  .about_chip { left: -1.25rem; bottom: 2rem; }
  .why_list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; border-top: 1px solid var(--line); }
  .why_list li { border: 0; padding: 2rem 0 0; align-content: start; }
  .why_list li:last-child { border: 0; }
}

/* ---------- Problém: proč kalkulačka neodpoví ---------- */
.problem { padding-block: var(--section); }
.problem_grid { display: grid; gap: 2rem; }
.problem_head p { margin-top: 1rem; max-width: 26rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.problem_beats { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.problem_beats li {
  position: relative; display: grid; gap: .5rem; padding: 1.5rem 1.5rem 1.5rem 4.5rem;
  border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 14px 34px -18px rgba(82,99,130,.35);
}
.problem_num {
  position: absolute; left: 1.25rem; top: 1.4rem; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--blue-soft); color: var(--teal-text);
}
.problem_num svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.problem_beats h3 { font-size: 1.0625rem; letter-spacing: -.015em; }
.problem_beats p { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); }
.problem_beats li:last-child { background: linear-gradient(145deg, rgba(225,234,247,.55), rgba(210,221,238,.8) 50%, rgba(198,211,230,.55)); border-color: rgba(255,255,255,.7); box-shadow: var(--lg-glass-shadow); }
.problem_beats li:last-child p { color: var(--ink); font-weight: 500; }
.problem_quote {
  margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 44rem; text-align: center;
  padding: 0 1rem;
}
.problem_quote p { font-size: clamp(1.25rem, 1.2vw + .9rem, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.problem_quote footer { margin-top: 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-text); }
@media (min-width: 900px) {
  .problem_grid { grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
  .problem_head { position: sticky; top: 6rem; }
}

/* ---------- Jak odhad probíhá (full-bleed tmavě tyrkysový pás) ---------- */
.steps {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--section);
  background: linear-gradient(160deg, #1f6f72 0%, var(--teal-dark) 55%, #154f52 100%);
  color: #fff;
}
.steps::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -12%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(207,233,235,.22) 0%, rgba(207,233,235,.06) 45%, transparent 70%);
  filter: blur(30px);
}
.steps_in { display: grid; gap: 2.5rem; }
.steps h2 { color: #fff; }
.steps h2 em { color: var(--teal-on-dark); }
.steps_head p { margin-top: 1rem; max-width: 26rem; font-size: 1.0625rem; line-height: 1.65; color: rgba(255,255,255,.82); }
.steps_cta { margin-top: 1.75rem; }
.steps_list { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 1rem; }
/* Propojovací linka mezi kartami */
.steps_list::before { content: ""; position: absolute; left: 2.1rem; top: 2.5rem; bottom: 2.5rem; width: 2px; background: linear-gradient(180deg, rgba(207,233,235,.0), rgba(207,233,235,.55) 12%, rgba(207,233,235,.55) 88%, rgba(207,233,235,0)); }
.steps_list li {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: 3rem 1fr; gap: .35rem 1.1rem; align-items: start;
  padding: 1.35rem 1.35rem 1.35rem 1.1rem; border-radius: 20px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -22px rgba(0,0,0,.5);
}
.steps_list li::before {
  content: counter(step, decimal-leading-zero); grid-row: 1 / span 2;
  font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--teal-on-dark); padding-top: .1rem;
}
.steps_list li::after {
  content: ""; position: absolute; left: .95rem; top: 1.65rem; width: .6rem; height: .6rem; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18); display: none;
}
.steps_list h3 { color: #fff; font-size: 1.0625rem; }
.steps_list p { font-size: .9375rem; line-height: 1.65; color: rgba(255,255,255,.8); max-width: 34rem; }
@media (min-width: 900px) {
  .steps_in { grid-template-columns: 1fr 1.35fr; gap: 4.5rem; }
  .steps_head { position: sticky; top: 6rem; align-self: start; }
  .steps_list { padding-left: 1.75rem; }
  .steps_list::before { left: .55rem; }
  .steps_list li::after { display: block; left: -1.55rem; }
}

/* ---------- Co pro vás uděláme ---------- */
.what { padding-block: var(--section); }
.what_list li { font-size: .9375rem; }
.what_grid { display: grid; gap: 2.5rem; }
.what_list { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.what_list li { position: relative; padding-left: 2rem; font-size: .9688rem; line-height: 1.55; color: var(--ink-soft); }
.what_list li::before {
  content: ""; position: absolute; left: 0; top: .1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23378A93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .7rem no-repeat;
}
/* Mini cover flow: prostřední fotka vpředu, sousedi natočení za ní.
   Pozice řídí JS přes data-pos (-1, 0, 1, 2); do .is-ready jsou všechny 4 fotky dekódované. */
.what_visual { overflow: clip; padding-bottom: 2.25rem; margin-inline: -1rem; padding-inline: 1rem; }
/* Boční fotky se na okraji nesekají natvrdo, ale zmizí přechodem. */
.what_visual {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.coverflow { position: relative; aspect-ratio: 4 / 3; perspective: 1200px; }
.coverflow figure {
  position: absolute; inset: 6% 12%; margin: 0; overflow: hidden; border-radius: 18px;
  box-shadow: 0 24px 50px -18px rgba(12,17,29,.45);
  transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform .9s var(--ease-out), opacity .9s var(--ease-out), filter .9s var(--ease-out);
  will-change: transform, opacity;
}
.coverflow img { width: 100%; height: 100%; object-fit: cover; }
.coverflow figure[data-pos="0"]  { transform: translateX(0) scale(1) rotateY(0); z-index: 3; opacity: 1; filter: none; }
.coverflow figure[data-pos="-1"] { transform: translateX(-42%) scale(.78) rotateY(28deg); z-index: 2; opacity: .85; filter: brightness(.85); }
.coverflow figure[data-pos="1"]  { transform: translateX(42%) scale(.78) rotateY(-28deg); z-index: 2; opacity: .85; filter: brightness(.85); }
.coverflow figure[data-pos="2"]  { transform: translateX(0) scale(.6) translateZ(-200px); z-index: 1; opacity: 0; filter: brightness(.7); }
.coverflow:not(.is-ready) figure { transition: none; }
.coverflow figcaption { position: absolute; left: 0; right: 10%; bottom: -1.9rem; font-size: .8125rem; font-weight: 600; color: var(--dim); text-align: right; }
.coverflow_note { margin-top: 2.5rem; padding-right: 10%; font-size: .75rem; color: var(--dim); text-align: right; }
@media (prefers-reduced-motion: reduce) { .coverflow figure { transition: none; } }
.coverflow { touch-action: pan-y; cursor: grab; outline: none; }
.coverflow figure[data-pos="1"], .coverflow figure[data-pos="-1"] { cursor: pointer; }
.coverflow:focus-visible figure[data-pos="0"] { box-shadow: 0 24px 50px -18px rgba(12,17,29,.45), 0 0 0 3px var(--blue); }
.coverflow figure { transition: transform .9s var(--ease-out), opacity .9s var(--ease-out), filter .9s var(--ease-out), box-shadow .28s cubic-bezier(.2,.7,.2,1); }
.cf_nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.6rem; }
.what_visual .coverflow figcaption { right: 0; text-align: center; }
.cf_count { min-width: 3.5rem; text-align: center; font-size: .8125rem; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.cf_btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid rgba(120,137,164,.32); background: rgba(255,255,255,.9); color: var(--ink); cursor: pointer;
  box-shadow: 0 0 0 0 rgba(55,138,147,0), 0 6px 16px -10px rgba(12,17,29,.0);
  transition: background .28s cubic-bezier(.2,.7,.2,1), border-color .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1);
}
.cf_btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cf_btn:hover { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(55,138,147,.12), 0 6px 16px -10px rgba(12,17,29,.35); }
.cf_btn:active { transform: scale(.94); }
.cf_btn:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(55,138,147,.22), 0 6px 16px -10px rgba(12,17,29,.35); }
@media (prefers-reduced-motion: reduce) { .coverflow figure, .cf_btn { transition: none; } }
@media (min-width: 900px) {
  .what_grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
  .what_visual { margin-inline: 0; padding-inline: 1rem; }
}

.numbers {
  position: relative; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 1.75rem 1.5rem;
  display: grid; gap: 1.5rem; border-radius: 22px;
  background: linear-gradient(145deg, rgba(225,234,247,.5), rgba(210,221,238,.72) 50%, rgba(198,211,230,.5));
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--lg-glass-shadow);
}
.numbers > div { display: grid; gap: .25rem; }
.numbers dt { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--blue); }
.numbers dd { margin: 0; font-size: .875rem; font-weight: 500; color: var(--ink-soft); }
.numbers_note { grid-column: 1 / -1; font-size: .8125rem; line-height: 1.5; color: var(--dim); padding-top: 1rem; border-top: 1px solid rgba(120,137,164,.22); }
.numbers_note .dn { margin-right: .4rem; }
/* Kompaktní pás na střed – ostatní sekce taky nedrží obsah u okrajů. */
.numbers { max-width: 46rem; margin-inline: auto; text-align: center; padding: 1.5rem 1.25rem; }
.numbers > div { justify-items: center; }
.numbers dd { max-width: 13rem; line-height: 1.4; }
@media (min-width: 700px) { .numbers { grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.75rem 2rem; } }

/* ---------- Recenze ---------- */
.reviews { padding-block: var(--section); background: #f5f7f9; }
.reviews_grid { display: grid; gap: 1.25rem; align-items: start; }
.reviews_ph {
  padding: 1.75rem; border-radius: 22px; border: 1.5px dashed var(--amber-line); background: var(--amber-bg);
  display: grid; gap: .75rem; align-content: start;
}
.reviews_ph p { font-size: .9375rem; line-height: 1.6; color: var(--ink-soft); }
.reviews_ph strong { color: var(--ink); font-size: 1.0625rem; }
.reviews_links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.reviews_links .lg-btn { padding: 10px 16px; font-size: .75rem; }
.review {
  margin: 0; padding: 1.75rem; border-radius: 22px; display: grid; gap: 1rem; align-content: space-between;
  background: linear-gradient(145deg, rgba(225,234,247,.5), rgba(210,221,238,.72) 50%, rgba(198,211,230,.5));
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--lg-glass-shadow);
}
.review p { font-size: .9688rem; line-height: 1.65; color: var(--ink-soft); }
.review footer { font-size: .8125rem; font-weight: 600; color: var(--dim); }
.review.is-ghost { opacity: .55; }
.review.is-ghost p, .review.is-ghost footer { color: var(--dim); }
.reviews_meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.reviews_meta .lg-btn { padding: 14px 22px; font-size: .9375rem; }
@media (max-width: 759px) { .reviews_meta { flex-direction: column; align-items: stretch; } .reviews_meta .lg-btn { width: 100%; } }
/* Na mobilu se karty recenzí posouvají do strany – sekce zůstane krátká a formulář je hned pod ní. */
@media (max-width: 759px) {
  .reviews_grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .85rem; margin-inline: -1rem; padding: .25rem 1rem 1rem; scrollbar-width: none; }
  .reviews_grid::-webkit-scrollbar { display: none; }
  .reviews_grid .review { flex: 0 0 86%; scroll-snap-align: center; }
  .reviews_grid .review p { font-size: .9375rem; }
}

/* Hodnocení z Googlu: pět hvězd, celé jako odkaz na recenze. */
.rating {
  display: inline-flex; align-items: center; gap: .9rem; text-align: left; text-decoration: none;
  padding: .85rem 1.25rem; border-radius: 18px; color: var(--ink-soft);
  background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 0 rgba(55,138,147,0), 0 14px 34px rgba(82,99,130,.18), inset 0 1px 0 #fff;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s cubic-bezier(.2,.7,.2,1);
}
.rating:hover, .rating:focus-visible { transform: translateY(-2px); border-color: rgba(55,138,147,.35); box-shadow: 0 0 0 4px rgba(55,138,147,.12), 0 18px 38px rgba(82,99,130,.24), inset 0 1px 0 #fff; outline: none; }
.rating_stars { display: inline-flex; gap: 2px; }
.rating_stars svg { width: 1.3rem; height: 1.3rem; fill: #e8a317; }
.rating_txt { display: grid; line-height: 1.25; font-size: .9375rem; }
.rating_txt b { font-size: 1.5rem; margin-right: .2rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.rating_txt small { font-size: .8125rem; color: var(--dim); text-decoration: underline; text-decoration-color: rgba(91,101,121,.35); text-underline-offset: 3px; }
.rating.is-hero { padding: 1rem 1.5rem; }
.rating.is-hero .rating_stars svg { width: 1.5rem; height: 1.5rem; }
.rating_txt small { margin-top: .15rem; }
@media (max-width: 479px) { .rating { flex-direction: column; align-items: center; text-align: center; gap: .5rem; } .rating_txt { justify-items: center; } }
@media (prefers-reduced-motion: reduce) { .rating, .rating:hover { transition: none; transform: none; } }
.reviews_note { margin-top: 1.25rem; font-size: .75rem; line-height: 1.55; color: var(--dim); max-width: 60rem; }
@media (min-width: 760px) { .reviews_grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Odhad ceny – vícekrokový formulář ---------- */
.estimate { position: relative; padding-block: var(--section); scroll-margin-top: 4rem; background: linear-gradient(180deg, #fff, var(--teal-tint)); }
.estimate::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 50% at 15% 20%, rgba(55,138,147,.09), rgba(55,138,147,0) 70%),
    radial-gradient(50% 45% at 90% 85%, rgba(27,101,103,.07), rgba(27,101,103,0) 70%);
}
.estimate_grid { display: grid; gap: 2.5rem; }
.estimate_copy p { margin-top: 1rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.estimate_points { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.estimate_points li { position: relative; padding-left: 1.75rem; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.estimate_points li::before {
  content: ""; position: absolute; left: 0; top: .15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .6rem no-repeat;
}
@media (min-width: 900px) {
  .estimate_grid { grid-template-columns: .85fr 1.15fr; gap: 4.5rem; align-items: start; }
  .estimate_copy { position: sticky; top: 6rem; }
}

.est { padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 26px; }
.est_progress { height: 4px; border-radius: 999px; background: rgba(120,137,164,.2); overflow: hidden; }
.est_progress_bar { display: block; height: 100%; width: 100%; transform: scaleX(.3334); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--lg-blue-deep)); transition: transform .6s var(--ease-out); }
.est_step_label { margin-top: .9rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

.est_step { margin: 1rem 0 0; padding: 0; border: 0; min-width: 0; display: none; }
.est_step.is-active { display: block; animation: stepin .55s var(--ease-out); }
/* Návrhy ulice se kreslí přes navigaci formuláře. */
.est_step.is-active { position: relative; z-index: 2; }
.est_nav { position: relative; z-index: 1; }
@keyframes stepin { from { opacity: 0; transform: translateX(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.est_step.is-back { animation-name: stepback; }
@keyframes stepback { from { opacity: 0; transform: translateX(-18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.est_step legend { padding: 0; margin-bottom: 1rem; max-width: 100%; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.q { margin: 1.5rem 0 .75rem; font-size: .9375rem; font-weight: 600; color: var(--ink); }

/* Dlaždice s rádiem */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tiles.is-compact { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tile span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.25rem;
  padding: .75rem .9rem; border-radius: var(--r-field);
  background: rgba(255,255,255,.75); border: 1px solid rgba(120,137,164,.3);
  font-size: .9375rem; font-weight: 600; color: var(--ink);
  outline: 2px solid transparent; outline-offset: 3px;
  box-shadow: 0 10px 24px -8px rgba(55,138,147,0), inset 0 1px 0 #fff; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s var(--ease-out), outline-color .25s ease;
}
.tile:hover span { border-color: rgba(55,138,147,.5); }
.tile input:checked + span { background: var(--teal-btn); border-color: var(--teal-btn); color: #fff; box-shadow: 0 10px 24px -8px rgba(55,138,147,.55), inset 0 1px 0 rgba(255,255,255,.3); }
.tile input:focus-visible + span { outline-color: var(--blue); }
.tile input:active + span { transform: scale(.98); }
.tiles.is-zamer .tile:last-child { grid-column: 1 / -1; }
.tiles.is-two { grid-template-columns: 1fr 1fr; }
/* Stav: první tři ve třech sloupcích, poslední dva ve dvou – žádný zubatý řádek. */
.tiles.is-stav { grid-template-columns: repeat(6, 1fr); }
.tiles.is-stav .tile { grid-column: span 2; }
.tiles.is-stav .tile:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 480px) { .tiles.is-stav .tile span { font-size: .8125rem; padding: .7rem .5rem; } }

/* Čipy (checkbox) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; padding: .5rem .85rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--ink-soft); background: rgba(255,255,255,.75); border: 1px solid rgba(120,137,164,.3); outline: 2px solid transparent; outline-offset: 2px; transition: all .2s ease; }
.chip input:checked + span { background: var(--blue-soft); border-color: var(--teal); color: var(--teal-text); }
.chip input:focus-visible + span { outline-color: var(--blue); }

/* Pole */
.field { display: grid; gap: .45rem; margin-top: 1.1rem; }
.field label, .field_label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.opt { font-weight: 500; color: var(--dim); }
.opt::before { content: "· "; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .85rem 1rem; border-radius: var(--r-field);
  background: rgba(255,255,255,.85); border: 1px solid rgba(120,137,164,.32);
  box-shadow: 0 0 0 0 rgba(55,138,147,0), inset 0 1px 0 #fff; transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: #7b8497; }
/* Našeptávač ulice */
.suggest { position: relative; z-index: 30; }
.suggest_list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .35rem); margin: 0; padding: .35rem; list-style: none;
  border-radius: var(--r-field); background: #fff; border: 1px solid rgba(120,137,164,.32);
  box-shadow: 0 18px 40px -18px rgba(12,17,29,.35);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .22s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s linear .22s;
}
.suggest.is-open .suggest_list { opacity: 1; visibility: visible; transform: none; transition: opacity .22s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.suggest_list li {
  padding: .65rem .75rem; border-radius: 10px; font-size: .9375rem; line-height: 1.35; color: var(--ink); cursor: pointer;
  background: rgba(55,138,147,0); transition: background .22s cubic-bezier(.2,.7,.2,1);
}
.suggest_list li:hover, .suggest_list li[aria-selected="true"] { background: rgba(55,138,147,.10); }
@media (prefers-reduced-motion: reduce) { .suggest_list, .suggest.is-open .suggest_list, .suggest_list li { transition: none; } }
.field input:focus, .field textarea:focus, .field select:focus { outline-color: transparent; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(55,138,147,.14), inset 0 1px 0 #fff; }
.field textarea { resize: vertical; min-height: 5rem; }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .6rem; height: .6rem; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select { padding-right: 2.5rem; cursor: pointer; }
.unit { position: relative; }
.unit input { padding-right: 3.25rem; }
.unit > span { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; font-weight: 600; color: var(--dim); }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }

.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--err); box-shadow: 0 0 0 4px rgba(201,59,59,.12), inset 0 1px 0 #fff; }
.err { display: none; margin-top: .4rem; font-size: .8125rem; font-weight: 500; color: var(--err); }
.err.is-visible { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

.gdpr { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(120,137,164,.22); }
.gdpr p { font-size: .75rem; line-height: 1.55; color: var(--dim); }
.gdpr strong { color: var(--ink-soft); }
.gdpr a { color: var(--ink-soft); }

.est_nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.est_back { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .4rem; border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 600; color: var(--dim); cursor: pointer; border-radius: 8px; }
.est_back svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.est_back:hover { color: var(--ink); }
.est_next, .est_submit { margin-left: auto; padding: 14px 26px; }
.est_submit { transition: color .28s ease, border-color .28s ease, outline-color .25s ease, opacity .25s cubic-bezier(.2,.7,.2,1); }
.est_submit:disabled { opacity: .6; cursor: progress; }
.est_fail { margin-top: 1rem; font-size: .875rem; font-weight: 500; color: var(--err); }
.est_foot { margin-top: 1rem; font-size: .75rem; color: var(--dim); text-align: right; }
.est.is-done .est_progress, .est.is-done .est_step_label, .est.is-done .est_step, .est.is-done .est_nav, .est.is-done .est_foot { display: none; }
.est_done { text-align: center; padding: 2rem .5rem 1rem; display: grid; justify-items: center; gap: .75rem; animation: stepin .6s var(--ease-out); }
.est_done_icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(21,138,72,.12); color: var(--ok); }
.est_done_icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.est_done h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.est_done p { max-width: 26rem; font-size: .9688rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { padding-block: var(--section) var(--section); }
.faq_in { max-width: 48rem; }
.faq_list { display: grid; }
.faq_list details { border-top: 1px solid var(--line); }
.faq_list details:last-child { border-bottom: 1px solid var(--line); }
.faq_list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); transition: color .2s ease, outline-color .25s ease;
}
.faq_list summary::-webkit-details-marker { display: none; }
.faq_list summary::after {
  content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c111d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / .8rem no-repeat;
  transition: transform .4s var(--ease-out), background-color .2s ease;
}
.faq_list summary:hover { color: var(--blue); }
.faq_list details[open] summary::after { transform: rotate(45deg); background-color: var(--blue-soft); }
.faq_body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.faq_body > div { overflow: hidden; min-height: 0; }
details.is-open .faq_body { grid-template-rows: 1fr; }
.faq_a { padding: 0 0 1.4rem; max-width: 42rem; display: grid; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .faq_body { transition: none; } }
.faq_a p { font-size: .9688rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------- Závěrečné CTA (full-bleed fotka s tyrkysovým překryvem) ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: clamp(4.5rem, 10vw, 8rem); color: #fff; }
.final_bg { position: absolute; inset: 0; z-index: -2; }
.final_bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: brightness(.55) saturate(.7); }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(27,101,103,.78), rgba(21,79,82,.86)); mix-blend-mode: multiply; }
.final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 100%, rgba(55,138,147,.35), transparent 70%); }
.final h2 { color: #fff; max-width: 30rem; margin-inline: auto; }
.final h2 em { color: var(--teal-on-dark); }
.final p { margin-top: 1rem; color: rgba(255,255,255,.85); font-size: 1.0625rem; }
.final .lg-btn { margin-top: 1.75rem; }

/* ---------- Patička ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 3rem 2rem; }
.foot_grid { display: grid; gap: 2rem; }
.foot_brand p { margin-top: .75rem; max-width: 22rem; font-size: .875rem; line-height: 1.6; color: var(--dim); }
.foot_col { display: grid; gap: .4rem; align-content: start; font-size: .875rem; color: var(--ink-soft); }
.foot_col h3 { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .35rem; }
.foot_col a { text-decoration: none; }
.foot_col a:hover { color: var(--blue); }
.foot_bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: .75rem; color: var(--dim); }
.foot_bottom a { text-decoration: none; }
.foot_draft { margin-left: auto; }
@media (min-width: 760px) { .foot_grid { grid-template-columns: 1.3fr 1fr 1fr; } }

/* ---------- Plovoucí CTA (jen mobil) ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95) 40%);
  transform: translateY(110%); transition: transform .5s var(--ease-out);
}
.sticky.is-visible { transform: none; }
.sticky .lg-btn { width: 100%; padding: 15px 20px; box-shadow: 0 14px 30px -8px rgba(27,101,103,.5); }
@media (min-width: 860px) { .sticky { display: none !important; } }

/* ---------- Jeden autorský pohyb: obsah se zvedne a doostří ---------- */
.rise { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.rise.seen { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.hero_in > .rise:nth-child(2) { transition-delay: .08s; }
.hero_in > .rise:nth-child(3) { transition-delay: .16s; }
.hero_in > .rise:nth-child(4) { transition-delay: .24s; }
.hero_in > .rise:nth-child(5) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .rise, .rise.seen { opacity: 1; transform: none; filter: none; transition: none; }
  .est_step.is-active, .est_done { animation: none; }
  .video_play::before, .video_play::after, .video_shine { animation: none; }
  .video_shine { display: none; }
  .video_frame, .hero_video:hover .video_frame { transition: none; transform: none; }
  .what_mosaic img, .link-arrow svg, .sticky { transition: none; }
  html { scroll-behavior: auto; }
}

.foot_who { margin-top: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.foot_who:first-of-type { margin-top: 0; }
.foot_web { margin-top: .5rem; }

/* ---------- Zásady ochrany osobních údajů ---------- */
.legal { padding-block: clamp(2rem, 5vw, 4rem) var(--section); }
.legal_in { max-width: 48rem; }
.legal_back { margin-bottom: 1.5rem; font-size: .875rem; }
.legal_back a { color: var(--teal-text); text-decoration: none; transition: color .25s cubic-bezier(.2,.7,.2,1), outline-color .25s cubic-bezier(.2,.7,.2,1); }
.legal_back a:hover { color: var(--teal-dark); text-decoration: underline; }
.legal h1 { font-size: clamp(1.75rem, 2vw + 1.1rem, 2.75rem); }
.legal_lead { margin-top: 1.1rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.legal section { margin-top: clamp(2rem, 4vw, 2.75rem); }
.legal h2 { font-size: clamp(1.1875rem, .5vw + 1.05rem, 1.5rem); text-transform: none; letter-spacing: -.02em; line-height: 1.25; margin-bottom: .9rem; }
.legal p, .legal li, .legal dd { font-size: .9688rem; line-height: 1.7; color: var(--ink-soft); }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: .8rem; }
.legal ul { margin: .8rem 0 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--teal-text); transition: color .25s cubic-bezier(.2,.7,.2,1), outline-color .25s cubic-bezier(.2,.7,.2,1); }
.legal a:hover { color: var(--teal-dark); }
.legal .lg-btn { color: #fff; }
.legal_dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.legal_dl > div { display: grid; gap: .2rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.legal_dl dt { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.legal_dl dd { margin: 0; }
@media (min-width: 700px) { .legal_dl > div { grid-template-columns: 13rem 1fr; } }
.legal_cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.foot_bottom.is-solo { margin-top: 0; padding-top: 0; border-top: 0; }
.legal_dl + p { margin-top: 1rem; }