/* ==========================================================================
   LANDING — jasnejsi paleta, celoplosne fotky, odhalovani pri rolovani.
   Nacita se na vsech strankach (prepisuje akcent), ale layout resi jen domovskou.
   ========================================================================== */

:root{
  --accent:#D81E5B;
  --accent-dark:#B01147;
  --accent-soft:#FDE7EE;
  --dark:#141110;
  --ink:#141110;
}

.big{ font-size:clamp(2rem,6.4vw,3.4rem); line-height:1.05; letter-spacing:-.02em; }

/* ---------- odhalovani pri rolovani ---------- */
.rv{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; }
}

.btn--onphoto{
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.btn--onphoto:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ---------- 1. HERO ---------- */
.hero2{
  position:relative; min-height:92svh; display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
}
.hero2__media{ position:absolute; inset:0; z-index:-1; }
.hero2__img{
  width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  animation:kenburns 24s ease-out forwards;
}
@keyframes kenburns{ from{ transform:scale(1.09) } to{ transform:scale(1) } }
@media (prefers-reduced-motion:reduce){ .hero2__img{ animation:none } }
.hero2__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(20,17,16,.38) 0%, rgba(20,17,16,.08) 30%,
    rgba(20,17,16,.72) 74%, rgba(20,17,16,.95) 100%);
}
.hero2__in{ padding-block:clamp(40px,9vw,90px) clamp(88px,14vw,132px); color:#fff; position:relative; }
.hero2__kicker{
  display:inline-block; font-size:.64rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:#fff; background:var(--accent);
  padding:8px 14px; border-radius:99px; margin-bottom:1.25rem;
}
.hero2__h{
  color:#fff; font-size:clamp(2.6rem,11.5vw,6.2rem); line-height:.98;
  letter-spacing:-.03em; margin:0 0 .55rem; text-wrap:balance;
}
.hero2__h em{ display:block; font-style:italic; color:#FFB3C8; }
.hero2__lead{
  font-size:clamp(1rem,3.4vw,1.28rem); line-height:1.55;
  color:rgba(255,255,255,.9); max-width:30em; margin:0 0 2rem;
}
.hero2__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero2__cta .btn{ flex:1 1 auto; min-width:168px; }
/* Na sirokem displeji nesmi tlacitka roztahnout pres celou sirku (vypadala jako pasy) */
@media (min-width:700px){
  .hero2__cta{ max-width:none; }
  .hero2__cta .btn{ flex:0 0 auto; }
}
.hero2__scroll{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.hero2__scroll span{
  display:block; width:1px; height:34px; background:rgba(255,255,255,.55);
  position:relative; overflow:hidden;
}
.hero2__scroll span::after{
  content:""; position:absolute; inset:0; background:#fff; animation:scrollhint 1.9s ease-in-out infinite;
}
@keyframes scrollhint{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }
@media (prefers-reduced-motion:reduce){ .hero2__scroll span::after{ animation:none } }
@media (min-width:900px){ .hero2__img{ object-position:50% 16%; } }

/* ---------- 2. CISLA ---------- */
.band2{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  padding-block:clamp(64px,12vw,140px);
}
.band2__media{ position:absolute; inset:0; z-index:-1; }
.band2__img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.band2__scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(20,17,16,.96) 0%,rgba(20,17,16,.86) 46%,rgba(20,17,16,.58) 100%);
}
.band2 h2{ color:#fff; font-size:clamp(2rem,6.4vw,3.4rem); line-height:1.05; letter-spacing:-.02em; }
.band2 .lead{ color:rgba(255,255,255,.78); }
.band2 .eyebrow{ color:#FF6E96; }
.stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,4vw,40px); margin-top:clamp(34px,6vw,60px);
}
@media (min-width:880px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{ border-top:2px solid rgba(255,255,255,.22); padding-top:16px; min-width:0; }
.stat__n{
  display:block; font-family:var(--serif); font-size:clamp(2.3rem,7.6vw,3.4rem);
  line-height:1; color:#fff; font-variant-numeric:tabular-nums;
}
.stat__t{
  display:block; margin-top:.55em; font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.62); line-height:1.4; overflow-wrap:anywhere;
}

/* ---------- 3. DLAZDICE ZAKROKU ---------- */
.tiles{ display:grid; gap:clamp(14px,2.6vw,24px); }
@media (min-width:760px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tile{
  position:relative; text-decoration:none; color:#fff; overflow:hidden;
  border-radius:var(--radius-lg); isolation:isolate; min-height:350px;
  display:flex; align-items:flex-end;
}
@media (min-width:760px){ .tile{ min-height:430px; } }
.tile__media{ position:absolute; inset:0; z-index:-1; }
.tile__img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  /* Silnejsi zacloneni: na svetlych fotkach (microblading, rty) byl bily nadpis
     temer necitelny. Spodni cast musi byt tmava bez ohledu na snimek. */
  background:
    linear-gradient(180deg,rgba(20,17,16,0) 18%,rgba(20,17,16,.62) 52%,
                    rgba(20,17,16,.88) 78%,rgba(20,17,16,.97) 100%),
    linear-gradient(180deg,rgba(20,17,16,.18) 0%,rgba(20,17,16,.18) 100%);
}
.tile:hover .tile__img,.tile:focus-visible .tile__img{ transform:scale(1.06); }
@media (prefers-reduced-motion:reduce){ .tile__img{ transition:none } }
.tile__body{ padding:clamp(20px,4vw,30px); width:100%; }
.tile__h{ color:#fff; font-size:clamp(1.5rem,4.4vw,2rem); margin:0 0 .35rem; }
.tile__p{ color:rgba(255,255,255,.88); font-size:.94rem; margin:0; max-width:26em; }
.tile__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:1.1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.26);
}
.tile__price{ font-family:var(--serif); font-size:1.35rem; color:#fff; white-space:nowrap; }
.tile__go{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:var(--accent); padding:9px 15px; border-radius:99px; white-space:nowrap;
}

/* ---------- 4. PROC KE MNE ---------- */
.whys{ display:grid; gap:clamp(26px,4vw,40px); }
@media (min-width:700px){ .whys{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.why{ border-top:2px solid var(--accent); padding-top:18px; min-width:0; }
.why__n{ display:block; font-family:var(--serif); font-size:1.5rem; color:var(--accent); line-height:1; margin-bottom:.5rem; }
.why h3{ font-size:clamp(1.25rem,3.6vw,1.6rem); margin-bottom:.45rem; }
.why p{ color:var(--muted); margin:0; }

/* ---------- 6. KROKY ---------- */
.stps{ display:grid; gap:clamp(20px,3.4vw,30px); }
@media (min-width:620px){ .stps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1060px){ .stps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stp{ min-width:0; }
.stp__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; margin-bottom:1rem; }
.stp__img{ width:100%; height:100%; object-fit:cover; }
.stp__n{
  position:absolute; left:12px; bottom:12px; width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-family:var(--serif); font-size:1.15rem; line-height:1;
}
.stp h3{ color:#fff; font-size:1.2rem; margin-bottom:.4rem; }
.stp p{ color:#A2968D; font-size:.93rem; margin:0; }

/* ---------- 8. ZAVERECNY CTA ---------- */
.final{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  padding-block:clamp(74px,14vw,150px);
}
.final__media{ position:absolute; inset:0; z-index:-1; }
.final__img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.final__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(20,17,16,.95) 0%,rgba(20,17,16,.82) 50%,rgba(20,17,16,.45) 100%);
}
.final h2{ color:#fff; }
.final .lead{ color:rgba(255,255,255,.85); }
.final .eyebrow{ color:#FF6E96; }
.final .cta-row .btn{ flex:0 1 auto; }

/* ---------- pred/po s opravdovymi fotkami ---------- */
.ba__ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }