/* ============================================================
   Viktor Skoczek — web (raw wireframe)
   HP (homepage) — stránkově specifické styly
   Figma: page 127:2 „HP"
   ============================================================ */

/* ---------- Sdílené drobnosti pro tuto stránku ---------- */
.star-gold { color: #8A6200; letter-spacing: 2px; font-size: 15px; }
.accent { background: var(--accent); color: var(--on-accent); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Instagram gradient tlačítko (Terén + IG na bílém) */
.btn--ig {
  background-image: linear-gradient(90deg, #FEDA75 0%, #FA7E1E 28%, #D62976 55%, #962FBF 78%, #4F5BD5 100%);
  color: #fff;
  gap: 10px;
}
.btn--ig svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ============================================================
   1 · HERO
   ============================================================ */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }

.hero-media { position: absolute; inset: 0; }
.hero-video, .hero-photo { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(38,36,31,0.92) 0%, rgba(38,36,31,0.55) 42%, rgba(38,36,31,0) 66%),
    linear-gradient(to bottom, rgba(38,36,31,0) 0%, rgba(38,36,31,0.28) 50%, rgba(38,36,31,0.72) 100%),
    linear-gradient(to bottom, rgba(38,36,31,0.5) 0%, rgba(38,36,31,0) 16%);
}

.hero-inner { position: relative; height: 100%; display: flex; align-items: center; }
.hero-text { max-width: 620px; display: flex; flex-direction: column; gap: 22px; }

.hero-eyebrow { color: var(--on-dark-75); }
.hero-title { color: #fff; }
.hero-highlight { color: var(--accent-40); }
.hero-lead { color: var(--on-dark-75); max-width: 480px; line-height: 1.45; }

.hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-cta__note { font-size: 14px; color: var(--on-dark-60); }
.hero-mm-logo { height: 26px; width: auto; background: #fff; padding: 3px 7px; border-radius: 6px; opacity: 0.95; }

/* accent podtržení klíčové fráze v hero — čistá linka (ne štětec), nakreslí se po entrance */
.hero-title .uline { position: relative; display: inline-block; }
.hero-title .uline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.04em; height: 3px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.hero-anim.ready .hero-title .uline::after { transform: scaleX(1); transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .hero-title .uline::after { transform: scaleX(1); transition: none; }
}

/* Fixed hero header — transparentní přes hero, po scrollu bílá (furt visí) */
.site-header--hero { position: fixed; transition: background .25s ease, border-color .25s ease; }
.site-header--hero.is-scrolled { background: #fff; border-bottom: 1px solid var(--line); }
.site-header--hero.is-scrolled .logo,
.site-header--hero.is-scrolled .header-phone { color: var(--ink); }
.site-header--hero.is-scrolled .site-nav a { color: var(--ink-60); }
.site-header--hero.is-scrolled .site-nav a:hover,
.site-header--hero.is-scrolled .site-nav a[aria-current="page"] { color: var(--ink); }

/* ============================================================
   TRUST BAR — čísla vycentrovaná mezi hero a další sekcí (jako úklid HK)
   ============================================================ */
.trust-bar { padding-block: 56px; }
.trust-bar__row { display: flex; justify-content: space-between; }
.trust-item { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.trust-item__num { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--ink); }
.trust-item__label { font-size: 14px; color: var(--ink-40); }

/* ručně kreslený kroužek kolem „6 měsíců" (dokresluje se podle scrollu) — dost odstupu, ať neprotíná text */
.circled { position: relative; display: inline-block; padding: 8px 22px; }
.circled .circle-svg {
  position: absolute; inset: -14px -24px; width: calc(100% + 48px); height: calc(100% + 28px);
  max-width: none; /* globální svg max-width:100% by kroužek zúžilo a posunulo mimo text */
  pointer-events: none; overflow: visible;
}
.circled .circle-svg path { stroke: var(--ink); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }

/* ============================================================
   ROZCESTNÍK — Co pro vás můžu udělat?
   ============================================================ */
.rozcestnik__head { text-align: center; max-width: 640px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 12px; }
.rozcestnik__head h2 { font-size: 30px; }

.rozcestnik__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.rozcestnik-card { position: relative; height: 400px; border-radius: 24px; overflow: hidden; }
.rozcestnik-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rozcestnik-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(38,36,31,0) 0%, rgba(38,36,31,0.75) 100%);
}
.rozcestnik-card__body {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 28px;
}
.rozcestnik-card__body h3 { font-size: 26px; color: #fff; }
.rozcestnik-card__body p { font-size: 15px; color: var(--on-dark-75); }
.rozcestnik-card__body .btn { align-self: flex-start; }
.rozcestnik-card__body .btn--on-dark { border-color: rgba(255,255,255,0.9); border-width: 1.5px; }

/* hover reveal — text vyjede zespoda (jako web Daniel Šnajdr) */
.rozcestnik-card { transition: transform .35s ease, box-shadow .35s ease; }
.rozcestnik-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px -16px rgba(36,34,35,0.45); }
.rozcestnik-card img { transition: transform .5s ease; }
.rozcestnik-card:hover img { transform: scale(1.05); }
.rozcestnik-card__body { gap: 0; }
.rozcestnik-card__details {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s ease, opacity .4s ease, margin-top .4s ease;
}
.rozcestnik-card:hover .rozcestnik-card__details { max-height: 240px; opacity: 1; margin-top: 14px; }

/* ============================================================
   O MNĚ
   ============================================================ */
.about__row { display: flex; gap: 34px; align-items: center; }
.about__photo { flex: 0 0 480px; }
.about__photo img { width: 100%; height: 540px; object-fit: cover; border-radius: var(--r-card); }
.about__body { flex: 1; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.about__text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.about__text h2 { font-size: 30px; }

/* ============================================================
   NABÍZENÉ NEMOVITOSTI — coverflow (jako předtím) + scroll/swipe navigace
   ============================================================ */
.nv-section { background: #fff; padding: var(--section-y) 0; overflow: hidden; }
.nv-head { max-width: 620px; margin: 0 auto 40px; padding: 0 var(--gutter); text-align: center; }
.nv-title { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px; }
.nv-lead { font-family: var(--font-text); font-size: 17px; line-height: 1.55; color: var(--ink-60); margin: 0; }

/* coverflow — středová karta zvětšená, boční zmenšené; projíždí se šipkami / scrollem / swipem */
.nv-carousel { position: relative; display: flex; align-items: center; justify-content: center; height: 470px; user-select: none; touch-action: pan-y; }
.nv-card {
  position: absolute; display: block; width: 280px; aspect-ratio: 4 / 5; cursor: pointer;
  border-radius: var(--r-card); overflow: hidden; box-shadow: 0 20px 45px -16px rgba(36,34,35,0.28);
  transition: transform 0.5s cubic-bezier(.16,1,.3,1), opacity 0.5s ease, box-shadow 0.3s ease; will-change: transform, opacity; text-decoration: none;
}
.nv-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.nv-card.is-center:hover .nv-card-img { transform: scale(1.04); }
/* boční karty v coverflow nemají is-center zoom (kliknutí je jen přesune do středu) — dostanou aspoň zvýrazněný stín */
@media (hover: hover) {
  .nv-card:hover { box-shadow: 0 26px 55px -14px rgba(36,34,35,0.42); }
}
.nv-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--font-text); font-size: 11px; font-weight: 600; color: #fff;
  padding: 6px 13px; border-radius: var(--r-pill);
}
.nv-badge--sale { background: var(--accent); color: var(--on-accent); }
.nv-badge--reserved { background: var(--ink); }
.nv-badge--rent { background: var(--ink-60); }
.nv-badge--sold { background: var(--ink); }
.nv-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(36,34,35,0.92) 0%, rgba(36,34,35,0.35) 45%, rgba(36,34,35,0) 78%); }
.nv-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; color: #fff; }
.nv-price { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; color: #fff; margin: 0 0 4px; }
.nv-name { font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,0.85); margin: 0; }
/* meta + detail: na středové (aktivní) kartě vždy vidět */
.nv-details { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .4s ease, margin-top .4s ease; }
.nv-card.is-center .nv-details { max-height: 130px; opacity: 1; margin-top: 10px; }
.nv-meta { font-family: var(--font-text); font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.75); margin: 0; }
.nv-detail-link { display: inline-block; margin-top: 8px; font-family: var(--font-text); font-weight: 600; font-size: 13px; color: var(--accent-40); }

/* nv-frame drží coverflow + šipky pohromadě, aby se šipky na desktopu mohly přisát po stranách */
.nv-frame { position: relative; }
.nv-arrows { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; }
.nv-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 16px; }
.nv-nav-btn {
  width: 48px; height: 48px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.nv-nav-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.nv-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nv-counter { font-family: var(--font-text); color: var(--ink-40); font-size: 14px; font-weight: 500; min-width: 48px; text-align: center; }
/* desktop: šipky se odpojí z toku a sednou si těsně vedle bočních karet coverflow
   (ne na okraj sekce) — pozice počítaná od středu, s fallbackem na okraj na užších desktopech */
@media (min-width: 901px) {
  .nv-arrows {
    position: absolute; inset: 0; margin: 0; justify-content: space-between;
    padding: 0 8px; pointer-events: none;
  }
  .nv-arrows .nv-nav-btn {
    pointer-events: auto; box-shadow: 0 8px 20px -8px rgba(36,34,35,0.28);
    position: absolute; top: 50%; transform: translateY(-50%);
  }
  #nv-prev { left: max(8px, calc(50% - 390px)); }
  #nv-next { right: max(8px, calc(50% - 390px)); }
}

.nv-cta-wrap { text-align: center; margin-top: 36px; padding: 0 24px; }
.nv-cta {
  font-family: var(--font-text); display: inline-block; font-weight: 600; font-size: 15px;
  color: var(--accent-text); border: 2px solid var(--accent); padding: 13px 26px; border-radius: var(--r-pill);
  text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nv-cta:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-2px); }
@media (max-width: 900px) {
  .nv-head { padding: 0 24px; }
  .nv-carousel { height: 440px; }
  .nv-card { width: 260px; }
}
@media (max-width: 560px) {
  .nv-title { font-size: 28px; }
  .nv-carousel { height: 380px; }
  .nv-card { width: 210px; }
  .nv-price { font-size: 20px; }
  .nv-controls { gap: 18px; }
}

/* ============================================================
   UVP — Proč prodávat s Viktorem
   ============================================================ */
.uvp__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.uvp__head h2 { font-size: 30px; }

/* bento: řada 1 = showcase přes celou šířku, řada 2 = velká garanční karta vlevo + sloupec 2 karet vpravo */
.uvp-bento {
  display: grid; grid-template-columns: 1.24fr 1fr; gap: 24px; align-items: stretch;
}
.uvp-hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 26px; align-items: flex-start; justify-content: space-between;
  background: var(--ink); color: #fff; border-radius: var(--r-card);
  padding: 40px 42px; min-height: 100%;
}
.uvp-hero-card__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
}
.uvp-hero-card__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(15,14,13,0.95) 0%, rgba(15,14,13,0.9) 42%, rgba(15,14,13,0.74) 100%),
    linear-gradient(0deg, rgba(15,14,13,0.55) 0%, rgba(15,14,13,0) 55%);
}
.uvp-hero-card__text { position: relative; z-index: 2; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.uvp-hero-card__pills { position: relative; z-index: 2; }
.uvp-hero-card__text .eyebrow { color: var(--accent-40); }
.uvp-hero-card__text h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.2; color: #fff; }
.uvp-hero-card__text p { font-size: 15px; color: var(--on-dark-75); }
.uvp-hero-card__pills { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.uvp-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--on-dark-line);
  border-radius: var(--r-pill); padding: 12px 22px;
  font-size: 15px; font-weight: 500; color: #fff; white-space: nowrap;
}
.uvp-pill:nth-child(2) { margin-left: 16px; transform: rotate(0.4deg); }
.uvp-pill:nth-child(3) { margin-left: 32px; transform: rotate(-0.5deg); }
.uvp-pill:nth-child(4) { margin-left: 48px; transform: rotate(0.5deg); }
.uvp-pill svg { width: 17px; height: 17px; color: var(--accent-40); flex-shrink: 0; }

/* pravý sloupec řady 1: dva menší foto-bloky nad sebou */
.uvp-col { display: flex; flex-direction: column; gap: 24px; }
.uvp-col .uvp-item { flex: 1 1 0; min-height: 0; }

.uvp-item {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; min-height: 250px; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 26px 24px;
}
.uvp-item__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transition: transform .6s ease;
}
.uvp-item__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(18,17,16,0.9) 0%, rgba(18,17,16,0.55) 42%, rgba(18,17,16,0.12) 78%, rgba(18,17,16,0.05) 100%);
}
.uvp-item__title { position: relative; z-index: 2; font-size: 19px; font-weight: 700; color: #fff; }
.uvp-item__desc { position: relative; z-index: 2; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.86); }
@media (hover: hover) {
  .uvp-item:hover .uvp-item__bg { transform: scale(1.05); }
}

/* velká vizuální karta „Profesionální prezentace" — reálná ukázka práce; řádek 1 bento, přes celou šířku */
.uvp-showcase {
  position: relative; overflow: hidden; isolation: isolate;
  grid-column: 1 / -1;
  border-radius: var(--r-card); background: var(--ink); color: #fff;
  min-height: 420px; display: flex; align-items: flex-end;
}
.uvp-showcase__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%;
  transition: transform .6s ease;
}
.uvp-showcase:hover .uvp-showcase__bg { transform: scale(1.04); }
.uvp-showcase__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(20,19,19,0.94) 0%, rgba(20,19,19,0.82) 34%, rgba(20,19,19,0.28) 64%, rgba(20,19,19,0.05) 100%),
    linear-gradient(0deg, rgba(20,19,19,0.62) 0%, rgba(20,19,19,0) 42%);
}
.uvp-showcase__body {
  position: relative; z-index: 3; max-width: 560px;
  padding: 44px 46px; display: flex; flex-direction: column; gap: 14px;
}
.uvp-showcase__eyebrow { color: var(--accent-40); }
.uvp-showcase__title {
  font-family: var(--font-display); font-weight: 800; line-height: 1.12; color: #fff;
  font-size: clamp(1.55rem, 2.9vw, 2.1rem);
}
.uvp-showcase__desc { font-size: 15.5px; line-height: 1.55; color: var(--on-dark-75); max-width: 470px; }

/* jemný 3D tilt karty na hover */
@media (hover: hover) {
  .uvp-showcase { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; transform-style: preserve-3d; }
  .uvp-showcase:hover { transform: perspective(1300px) rotateX(1.6deg) rotateY(-1.8deg); box-shadow: 0 30px 60px -24px rgba(36,34,35,0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .uvp-showcase:hover { transform: none; }
}

/* mini-chipy na tmavém: profi foto / video prohlídka / záběry z dronu */
.media-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.media-chips span {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.10);
  border-radius: 999px; padding: 9px 15px;
  font-family: var(--font-text); font-weight: 600; font-size: 13px; color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.media-chips svg { width: 16px; height: 16px; color: var(--accent-40); flex-shrink: 0; }

.uvp-photo-cell { position: relative; margin: 0; }
.uvp-photo-cell img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 22%; border-radius: var(--r-card); display: block; }
.uvp-photo-cell figcaption {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(255,255,255,0.92); border-radius: 10px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-80);
}

/* ============================================================
   SE MNOU V TERÉNU — video coverflow (portováno ze starého webu)
   ============================================================ */
.teren-section { background: #fff; padding: var(--section-y) 0; overflow: hidden; }
.teren-head { max-width: 640px; margin: 0 auto 56px; padding: 0 24px; text-align: center; }
.teren-title { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 16px; }
.teren-lead { font-family: var(--font-text); font-size: 18px; line-height: 1.5; color: var(--ink-60); margin: 0; }

/* coverflow 5 videí — aktivní uprostřed zvětšené, boční škálované, video nikdy nezmizí
   (JS řídí transform/scale/opacity/z-index podle offsetu od středu) */
.teren-carousel {
  position: relative; height: 540px;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.teren-card {
  position: absolute; width: 268px; aspect-ratio: 9 / 16;
  border-radius: 26px; overflow: hidden; background: #000;
  box-shadow: 0 30px 60px -22px rgba(36,34,35,0.45);
  transition: transform .55s cubic-bezier(.5,0,.2,1), opacity .55s ease, box-shadow .4s ease;
  will-change: transform, opacity;
}
.teren-card.is-center { box-shadow: 0 42px 84px -26px rgba(36,34,35,0.55); }
.teren-video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  background: #000; cursor: pointer;
}
.teren-ig-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: 999px; padding: 5px 11px; text-decoration: none; transition: background 0.2s ease;
}
.teren-ig-badge:hover { background: rgba(0,0,0,0.6); }
.teren-ig-badge span { font-family: var(--font-text); color: #fff; font-size: 11px; font-weight: 600; }
.teren-mute-icon {
  position: absolute; bottom: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; border-radius: 999px;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.teren-icon-muted.hidden, .teren-icon-on.hidden { display: none; }

/* teren-frame drží coverflow + šipky pohromadě, aby se šipky na desktopu mohly přisát po stranách */
.teren-frame { position: relative; }
.teren-arrows { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 36px; }
.teren-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; }
.teren-counter { font-family: var(--font-text); color: var(--ink-60); font-size: 14px; font-weight: 600; min-width: 46px; text-align: center; }
.teren-nav-btn {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.teren-nav-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.teren-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* desktop: šipky se odpojí z toku a sednou si těsně vedle bočních karet coverflow
   (ne na okraj sekce) — pozice počítaná od středu, s fallbackem na okraj na užších desktopech */
@media (min-width: 901px) {
  .teren-arrows {
    position: absolute; inset: 0; margin: 0; justify-content: space-between;
    padding: 0 8px; pointer-events: none;
  }
  .teren-arrows .teren-nav-btn {
    pointer-events: auto; box-shadow: 0 8px 20px -8px rgba(36,34,35,0.28);
    position: absolute; top: 50%; transform: translateY(-50%);
  }
  #teren-prev { left: max(8px, calc(50% - 390px)); }
  #teren-next { right: max(8px, calc(50% - 390px)); }
}

.teren-cta-wrap { text-align: center; margin-top: 30px; }
.teren-cta {
  font-family: var(--font-text); color: #fff; font-weight: 600; font-size: 15px; padding: 15px 28px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: linear-gradient(135deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.teren-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(214,41,118,0.55); }

@media (prefers-reduced-motion: reduce) {
  .teren-card { transition: opacity .3s ease; }
}
@media (max-width: 900px) {
  .teren-carousel { height: 480px; }
  .teren-card { width: 228px; }
  .teren-nav-btn { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
  .teren-title { font-size: 26px; }
  .teren-carousel { height: 410px; }
  .teren-card { width: 186px; border-radius: 22px; }
}

/* ============================================================
   RECENZE — Co říkají klienti
   ============================================================ */
.reviews__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 48px; }
.reviews__head h2 { font-size: 32px; }
.reviews__rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-80); }
.reviews__rating .star-gold { font-size: 14px; letter-spacing: 1px; }
.reviews__google-g { width: 16px; height: 16px; display: inline-block; vertical-align: -2px; }

.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.review-card {
  border: 1px solid var(--line); border-radius: 22px; padding: 28px;
  box-shadow: 0 10px 30px -12px rgba(38,36,31,0.18);
  display: flex; flex-direction: column; gap: 20px;
}
.review-card__head { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 16px;
}
.review-avatar--a { background: #E5484D; }
.review-avatar--b { background: #2F6FED; }
.review-avatar--c { background: #F2994A; }
.review-avatar--d { background: #9B51E0; }
.review-name { font-weight: 600; font-size: 16px; color: var(--ink); }
.review-stars { font-size: 12px; letter-spacing: 1px; margin-top: 4px; }
.review-verified { font-size: 12px; color: var(--ink-40); margin-top: 4px; }
.review-text { font-size: 15px; line-height: 1.6; color: var(--ink-80); }

.reviews__foot { display: flex; justify-content: center; }

/* ============================================================
   INSTAGRAM NA BÍLÉM
   ============================================================ */
.ig-white__row { display: flex; align-items: center; justify-content: center; gap: 72px; }
.ig-white__phone { flex: 0 0 540px; position: relative; }
/* velké logo za telefonem — telefon (reveal) projede přes stojící logo */
.ig-white__phone::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; width: 132%; height: 120%; transform: translate(-50%, -50%);
  -webkit-mask: url('../img/logo-bile.png') center / contain no-repeat;
  mask: url('../img/logo-bile.png') center / contain no-repeat;
  background: var(--ink); opacity: 0.12;
}
.ig-white__phone img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 24px; }
.ig-white__text { flex: 0 1 480px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; max-width: 480px; }
.ig-white__text h2 { font-size: 32px; line-height: 1.15; }
.ig-icon { width: 40px; height: 40px; color: var(--ink); }
.ig-icon svg { width: 100%; height: 100%; }

/* ============================================================
   BLOG (výběr na HP)
   ============================================================ */
.blog-teaser__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.blog-teaser__head h2 { font-size: 32px; }

.blog-teaser__filters { display: flex; gap: 12px; margin-bottom: 40px; }

.blog-teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-teaser-card {
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 8px 24px -10px rgba(38,36,31,0.15);
  background: #fff;
}
.blog-teaser-card img { width: 100%; height: 307px; object-fit: cover; }
.blog-teaser-card__body { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.blog-teaser-card__tag {
  align-self: flex-start; background: var(--accent-15); color: var(--accent-text);
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill);
}
.blog-teaser-card__body h3 { font-family: var(--font-text); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--ink); }

.blog-teaser__foot { display: flex; justify-content: center; margin-top: 40px; }


/* ============================================================
   ZÁVĚREČNÉ CTA
   ============================================================ */
/* Celá sekce v jedné světle šedé zaoblené kartě (à la artem-saykin.cz) */
.final-cta__panel {
  max-width: 1100px; margin: 0 auto;
  display: flex; gap: 56px; align-items: center;
  background: #F5F5F7; border-radius: 28px; padding: 48px 52px;
}

.final-cta-card { flex: 0 0 300px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.final-cta-card img { width: 100%; aspect-ratio: 300/340; object-fit: cover; border-radius: 20px; }
.final-cta-card__meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; }
.final-cta-card__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.final-cta-card__role { font-size: 15px; color: var(--ink-60); margin-top: -8px; }
.final-cta-card__contact { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ink-80); width: 100%; }
.final-cta-card__contact a { display: inline-flex; align-items: center; gap: 10px; transition: color .2s ease; }
.final-cta-card__contact svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent-text); }
.final-cta-card__social { display: flex; gap: 20px; }
.final-cta-card__social a { display: inline-flex; transition: transform .2s ease; }
.final-cta-card__social svg { width: 22px; height: 22px; color: var(--ink); transition: color .2s ease; }
@media (hover: hover) {
  .final-cta-card__contact a:hover { color: var(--ink); }
  .final-cta-card__social a:hover { transform: scale(1.12); }
  .final-cta-card__social a:hover svg { color: var(--ink); }
}

.final-cta__form-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
.final-cta__form-col h2 { font-size: 30px; }
.final-cta__form-col .lead { margin-top: -6px; }

.final-cta__form {
  width: 100%; display: flex; flex-direction: column; gap: 14px;
}
.final-cta__form .field { background: #fff; }
.final-cta__form-row { display: flex; gap: 14px; }
.final-cta__form-row .field { flex: 1; width: auto; }
.final-cta__form textarea.field { width: 100%; height: 120px; resize: none; font-family: inherit; }
.final-cta__submit { width: 100%; height: 56px; }
.final-cta__fine { font-size: 12px; color: var(--ink-40); text-align: center; margin-top: 2px; }

/* ============================================================
   Responsive (základní stack, ne bespoke mobil)
   ============================================================ */
@media (max-width: 900px) {
  .hero-inner { padding-top: 72px; }
  /* mobil: text zabere větší část obrazovky (jako web Daniel Šnajdr) */
  .hero-text { gap: 18px; max-width: 100%; }
  .hero-title { font-size: clamp(2.5rem, 9vw, 3rem); line-height: 1.1; }
  .hero-lead { font-size: 17px; max-width: 100%; }

  .trust-bar__row { flex-direction: column; gap: 24px; }

  .rozcestnik__grid,
  .reviews__grid,
  .blog-teaser__grid { grid-template-columns: 1fr; }
  /* mobil: kompaktnější karty rozcestníku (méně scrollování) */
  .rozcestnik-card { height: 300px; }
  .review-card--feature { grid-column: auto; padding: 32px 24px 26px; }
  .review-card--feature::before { font-size: 96px; top: -78px; left: 14px; }
  .review-card--feature .review-text { font-size: 19px; }

  .blog-teaser__filters { flex-wrap: wrap; }

  /* bento se skládá pod sebe */
  .uvp-hero-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px 24px; }
  .uvp-hero-card__pills { width: 100%; }
  .uvp-pill { white-space: normal; }
  .uvp-pill:nth-child(2) { margin-left: 12px; }
  .uvp-pill:nth-child(3) { margin-left: 24px; }
  /* bento se skládá do jednoho sloupce v logickém pořadí */
  .uvp-bento { grid-template-columns: 1fr; }
  .uvp-hero-card { min-height: 0; }
  .uvp-col .uvp-item { min-height: 210px; }
  .uvp-showcase { min-height: 340px; }
  .uvp-showcase__body { padding: 30px 26px; }
  .uvp-showcase__scrim {
    background:
      linear-gradient(96deg, rgba(20,19,19,0.92) 0%, rgba(20,19,19,0.72) 50%, rgba(20,19,19,0.35) 100%),
      linear-gradient(0deg, rgba(20,19,19,0.7) 0%, rgba(20,19,19,0) 55%);
  }
  .uvp-photo-cell img { height: auto; aspect-ratio: 600/448; min-height: 0; }

  .about__row,
  .ig-white__row { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .about__photo, .ig-white__phone { flex-basis: auto; width: 100%; }
  .about__photo img { height: auto; aspect-ratio: 586/732; }
  .ig-white__phone img { width: 100%; }
  /* mobil O mně: text → fotka → rukopisná citace (přes flex order) */
  .about__row { gap: 30px; }
  .about__body { display: contents; }
  .about__text { order: 1; }
  .about__photo { order: 2; }
  .about .hand-note { order: 3; margin-top: 0; }

  /* CTA panel: stack + vizitka (fotka+jméno+role nahoře, kontakty pod tím v plné šířce) */
  .final-cta__panel { flex-direction: column; align-items: stretch; gap: 26px; padding: 30px 22px; border-radius: 24px; }
  .final-cta-card {
    flex: 0 0 auto; width: 100%;
    display: grid; grid-template-columns: 84px 1fr;
    grid-template-areas: "photo name" "photo role" "contact contact";
    column-gap: 16px; row-gap: 4px; align-items: center;
  }
  .final-cta-card img { grid-area: photo; align-self: start; flex: none; width: 84px; height: 84px; aspect-ratio: 1; border-radius: 18px; }
  .final-cta-card__meta { display: contents; }
  .final-cta-card__name { grid-area: name; align-self: end; font-size: 19px; }
  /* role ani e-mail se nesmí lámat — nowrap + menší font */
  .final-cta-card__role { grid-area: role; align-self: start; margin-top: 0; font-size: 13px; white-space: nowrap; }
  .final-cta-card__contact { grid-area: contact; margin-top: 12px; font-size: 14px; }
  .final-cta-card__contact a { max-width: 100%; }
  .final-cta-card__contact span { white-space: nowrap; }
  .final-cta-card__social { display: none; }
  .final-cta__form-col { flex-basis: auto; width: 100%; }
  .final-cta__form-col h2 { font-size: 25px; }

  .final-cta__form-row { flex-direction: column; }
}

/* ============================================================
   HOVER POLISH — karty i fotky reagují na najetí (jako u Dana)
   ============================================================ */
/* blog karty: nadzvednutí + zoom fotky */
.blog-teaser-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); }
.blog-teaser-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -18px rgba(38,36,31,0.28); }
.blog-teaser-card img { transition: transform .6s ease; }
.blog-teaser-card:hover img { transform: scale(1.05); }

/* fotky v zaoblených blocích: jemný zoom (kontejner ořízne) */
.about__photo { overflow: hidden; border-radius: var(--r-card); }
.about__photo img { border-radius: 0; transition: transform .6s ease; }
.about__photo:hover img, .uvp-photo-cell:hover img { transform: scale(1.04); }
.uvp-photo-cell { overflow: hidden; border-radius: var(--r-card); }
.uvp-photo-cell img { transition: transform .6s ease; }

/* ============================================================
   LIDSKÁ VRSTVA — náklon fotek, rukopis, kreslené tahy, pulled quote, stagger
   ============================================================ */
/* portrét v sekci O mně (homepage): jemný hravý náklon zpět, na hover se narovná */
.js .about__photo.reveal-up.active { transform: rotate(1.3deg); }
.js .about__photo.reveal-up.active:hover { transform: rotate(0deg); }

.js .uvp-photo-cell.reveal-up.active { transform: rotate(-1deg); }
.js .uvp-photo-cell.reveal-up.active:hover { transform: rotate(0deg); }

/* popisek pod fotkou O mně */
.photo-cap { margin-top: 10px; font-size: 13px; color: var(--ink-40); }

/* rukopisná poznámka + podpis (Caveat) */
.hand-note { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; transform: rotate(-1deg); }
.hand-note__text { font-family: var(--font-hand); font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--ink-80); }
.hand-note__sign { font-family: var(--font-hand); font-weight: 600; font-size: 30px; color: var(--accent-text); transform: rotate(-1.5deg); align-self: flex-start; }

/* kreslené SVG tahy — dokreslují se ve viewportu (app.js) */
.draw-svg path { stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* pulled quote — první recenze jako velká citace s přesahujícím uvozovkovým znakem */
.reviews__grid { align-items: start; }
.review-card--feature {
  grid-column: span 2; position: relative; overflow: visible;
  padding: 40px 44px 32px; background: #fff;
}
.review-card--feature::before {
  content: "„"; position: absolute; top: -104px; left: 22px;
  font-family: var(--font-display); font-weight: 800; font-size: 130px; line-height: 1;
  color: var(--accent-text); opacity: 0.9; pointer-events: none;
}
.review-card--feature .review-text {
  font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.45; color: var(--ink);
}
/* stagger gridů: sudé karty níž (margin, ne transform — nepere se s hoverem) */
@media (min-width: 901px) {
  .reviews__grid > .review-card:not(.review-card--feature):nth-child(even) { margin-top: 28px; }
  .blog-teaser__grid > article:nth-child(even) { margin-top: 30px; }
}
.final-cta-card img { transition: transform .5s ease; }
.final-cta-card:hover img { transform: scale(1.02); }

/* Dotyková zařízení (bez hoveru) → detaily karty se odkrývají při scrollu (à la úklid);
   bez JS zůstávají viditelné vždy */
@media (hover: none) {
  .rozcestnik-card__details { max-height: 500px; opacity: 1; margin-top: 14px; }
  .js .rozcestnik-card .rozcestnik-card__details {
    max-height: 0; opacity: 0; margin-top: 0;
    transition: max-height .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease .05s, margin-top .45s ease;
  }
  .js .rozcestnik-card.in-view .rozcestnik-card__details { max-height: 240px; opacity: 1; margin-top: 14px; }
  @media (prefers-reduced-motion: reduce) {
    .js .rozcestnik-card .rozcestnik-card__details { transition: none; }
  }
}

/* mobil: feature recenze zpět na 1 sloupec — MUSÍ být poslední (přebíjí span 2) */
@media (max-width: 900px) {
  .review-card--feature { grid-column: auto; }
}

/* ===== Kolo 2 doladění ===== */
/* mm logo s popiskem */
.hero-mm-wrap { display: inline-flex; align-items: center; gap: 8px; }
.hero-mm-note { font-size: 12px; color: var(--on-dark-60); white-space: nowrap; }
/* avatary recenzí v brand paletě */
.review-avatar--brand1 { background: var(--accent); color: var(--on-accent); }
.review-avatar--brand2 { background: var(--ink); }
@media (max-width: 900px) {
  /* mobil: recenze jen první 4 (stránka je jinak nekonečná) */
  .reviews__grid > .review-card:nth-child(n+5) { display: none; }
  /* garanční pilulky zarovnat vlevo (schodky jen na desktopu) */
  .uvp-pill:nth-child(2), .uvp-pill:nth-child(3), .uvp-pill:nth-child(4) { margin-left: 0; transform: none; }
  /* IG sekce: logo za telefonem zůstává i na mobilu (užší, ať nepřetéká), menší mezery */
  .ig-white__phone::before { width: 120%; height: 112%; opacity: 0.10; }
  .ig-white { overflow-x: clip; }
  .ig-white__row { gap: 28px; }
  .ig-white { padding-block: 56px; }
  /* pole formuláře: ve sloupci nesmí flex:1 přebít výšku (dělalo 21px pole) */
  .final-cta__form-row .field { flex: 0 0 auto; }
}

/* mobil: IG telefon je moc malý → zvětšit (přesah přes obal, .ig-white clipuje) */
@media (max-width: 560px) {
  .ig-white__phone { position: relative; }
  .ig-white__phone img { width: 138%; max-width: 138%; margin-left: -19%; }
  .ig-white__phone::before { width: 124%; height: 114%; }
}

/* kolo 3: coverflow — cena/meta jen na aktivní kartě (boční jen fotka) */
.nv-card .nv-content { opacity: 0; transition: opacity .35s ease; }
.nv-card.is-center .nv-content { opacity: 1; }

/* ============================================================
   Instagram sekce — jeden telefon (overlay) s plynule
   projíždějícím feedem (protáčí se dokola, pauza na hover)
   ============================================================ */
.ig-phone {
  position: relative; width: 300px; max-width: 80vw; aspect-ratio: 9 / 16; margin: 0 auto;
  background: #0c0c0e; border-radius: 46px; padding: 11px;
  box-shadow: 0 34px 70px -22px rgba(36,34,35,0.55), 0 0 0 2px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(255,255,255,0.05);
}
.ig-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #000; }
.ig-island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 33%; height: 26px; background: #000; border-radius: 15px; z-index: 6; }
.ig-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 40px 14px 12px; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 40%, transparent); color: #fff; }
.ig-topbar__ava { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(45deg, #FF5100, #FF854D); flex: 0 0 auto; box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(255,255,255,.5); }
.ig-topbar__name { font-weight: 600; font-size: 13px; }
.ig-fade-bot { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 4; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); }
.ig-track { position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px; animation: ig-scroll 34s linear infinite; will-change: transform; }
.ig-phone:hover .ig-track { animation-play-state: paused; }
.ig-track img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; display: block; }
@keyframes ig-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .ig-track { animation: none; } }
@media (max-width: 767px) { .ig-phone { width: 260px; } }

/* ============================================================
   Terén breather — line-art silueta zástavby na pozadí
   (Viktorův wish „budova/dům na pozadí"; statická, delight
   sendvič neruší — jen tichá kresba pod video kartami)
   ============================================================ */
.teren-section { position: relative; }
.teren-skyline {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  color: var(--ink); opacity: .07; pointer-events: none;
}
.teren-skyline svg { display: block; width: 100%; height: clamp(150px, 20vw, 280px); }
.teren-head, .teren-frame, .teren-controls { position: relative; z-index: 1; }